CSSgirl Designs

And the winner is…

Lindsey — Fri, 19 Sep 2008 12:14:28 +0000

Dark Rainbow!

I want to thank each and every person who voted. It was very close at the end and Dark Rainbow beat out Whiteboard by just one vote!

Now, what happens next?

Well, I have taken all of the comments and suggestions you guys left in the comments and have been working on making Dark Rainbow easily work for everyone. Some noted that the light gray text on black background wasn’t enough contrast, so I’ve upped the contrast for better readability. I’ve made other minor design changes (organization of content), and will be launching CSSgirl on Dark Rainbow within the next two weeks!

What about the other themes?

Well, here’s the best news for those who voted for one of the three other themes: I’m converting each one of these to generic Wordpress themes for free use! Those themes will be ready within the next month and I’ll make an announcement of where you can demo and download them.

Once again I appreciate all the votes and comments. :)

VOTE: I Want Your Opinions

Lindsey — Thu, 21 Aug 2008 18:41:27 +0000

In the beginning of 2006 I launched CSSgirl. I moved all the content from my old site (triplelproductions.com) and started CSSgirl Designs with a brand new design. Over time I’ve changed the design a bit, adding and removing sections, images and content.

Since last summer I’ve been planning a redesign, but I just can’t settle on one that I am happy with. So, I would like to have some feedback from the people who visit my site- who see it regularly!

I have four designs that I’ve created that I am deciding between. View them and let me know your opinions - good or bad! Two have already been coded, two are just image mockups:

1. Watermelon:

(HTML Mockup)

2. Super Serious Dark:

(Graphical Mockup)

3. Dark Rainbow:

(HTML Mockup - semi- complete)

4. Whiteboard:

(Graphical Mockup)

Vote for your favorite:

(PS: If you vote for “something else entirely”, let me know WHY. otherwise I’m going to remove that choice because I won’t know which direction people are looking for! Your comments won’t hurt my feelings, I promise!)
Note: There is a poll embedded within this post, please visit the site to participate in this post's poll.

Voting ends September 1st, 2008.

The three designs I do not choose will be converted into free Wordpress themes (and Movable Type too, if I find the time!) :)

Please leave comments with suggestions, criticisms, etc!

My Love Affair With Woopra

Lindsey — Tue, 19 Aug 2008 02:23:40 +0000

I love looking at the analytics for my site. I love seeing what articles are most popular, what people land on the most, where they come from and where they leave.

A few months ago I learned about Woopra - a free tracking/analytics program that has a beautiful gui and some pretty freakin’ cool features.

What is Woopra exactly? From their site (bolds are from me):

Woopra is the world’s most comprehensive, information rich, easy to use, real-time Web tracking and analysis application. And it’s free!

When you sign up for a free Woopra account you give them the urls you would like to install/use Woopra on. In turn (after your site is approved) you are provided with a little javascript code to place on your site so that Woopra can track your visitors. You will also need to download the Woopra desktop client. From there you can start live tracking all your visitors. Oh, yeah, and they just released a new Wordpress plugin that integrates their analytics right in your WP Admin. Sweet!

Woopra will track every visit and record important information for you - browser, OS, screen resolution, referral, etc. Ok, so not much different than all the other analytic tools out there right? But Woopra offers a really cool live tracking feature which allows you to see exactly who’s on your site at that very moment.

For each person who visits your site Woopra tracks their actions, and than stores them so that you can lookup that person’s history on your site. The live feature also allows you to “start a conversation” with any visitors currently on your site. I haven’t tried that feature yet - I think it’s kinda weird to interrupt someone browsing my site, but I find it interesting and in some situations I can actually see it working as a helpful interactive feature.

A breakdown of Woopra

Click to enlarge

The live feature really is the kicker for me, but the analytics Woopra offers shouldn’t be forgotten either - the top of the application features a line graph representing your pageviews and visits for that day. You can also switch the graph to show visits for that day VS the average visits, today’s pageviews VS the average amount of pageviews or have the numerical value of live visitors show.

The next level shows a component on the left with a breakdown of visits and pageviews for the previous month. You can also toggle this component to show your hourly overview instead. To the right of this component is your content breakdown - listing your pages that are being visited and the total landing, total exits, total pageviews and average time spent on each page.

Below those two components are three more - the first of the three being my favorite - a list of referrers - and the time people landed on your site via those referrals. The list is linked so you can click on these referrers and via your browser be directed to the page your visitor was sent from.

On this component there are three toggles - the first allows you to display a pie-type graph that represents the sources from where your visitors are coming from. Letting your mouse hover over one of these colored area displays the exact percentage of users from that source, the exact amount of links from that source and also highlights the corresponding name of the source in a list to the right.

The second toggle s your “top” sources of traffic (for that day mind you) and how many hits were delivered via that source. The third toggle is what I had mentioned first - the list of all your referrers with a link to where your visitor came from.

The second component is for search information - you can toggle this by keywords - which is displayed in a slick tag cloud-ish format. The second toggle allows you to display the exact search phrases that led visitors to your site (plud which engine they were directed from and the time).

The last component is geared toward visitor information. The first toggle, loyalty, allows you to see how many visitors for that day were “loyal” (returning) and how many were new visitors. Hovering over the pie chart gives you the same breakdown as the sources chart - returning a percentage and exact number of visitors.

The second toggle, countries, provides you with a list of countries and the breakdown of how many visitors were received from each.

The last toggle, map, gives you a visual breakdown of where these users are from - the hottest spots are marked in yellow, others are marked in a light blueish town. Hovering over a country/region will display the countries name, flag and a number of visitors you received from that country.

Woopra’s Live Visitor Analytics

Click to enlarge

And that’s not it. To the left of the components is a menu that allows to get even deeper into your analytics. The first button takes your to the dashboard, which I explained above. The second and my favorite, “Live”, shows you all of your live users and where they are currently on your site. If Woopra recorded a referrer for that site, it’s listed, along with the time of arrival. There is a breakdown of specs (browser, ip location, resolution, OS, country, language and so forth), and then it tracks -live- ever page that the visitor goes through. (It also marks any extrernal links that the user has clicked on).

At the bottom it gives even more details - total visits for that user, total pageviews, the average pageview for each visit, total time spent and average time spent.

Each user is assigned an ID (I assume based on IP), and you can view their history for each time they have visited (how they got there and what they did when they were on your site).

In the live section is where you can start a conversation with any live user on your site. One last option “tag this visitor” allows you to assign a tag to that visitor - so for example you can name yourself - maybe any visitors you know that visit regularly and you have an idea of what their IP is, or other people who work on your site with you.

Aside from the visitor specific goodies, to the left of that is a map - which pinpoints locations on the map of live users. You can also sort these live users by all of the above mentioned characteristics.

One last thing you can do is search for users - and you can search by any query - brower, country, platform, etc.

All the rest…

There are so many great features to Woopra, without making this into a book I’m going to have to lightly go over them. The final menu items are Search (display your search results and allows you to search anything), Analytics (standard analytic goodies - pretty much a more comprehensive breakdown of what you see on your dashboard with more sorting/filtering options) and Manage - which allows you to create notifications for a variety of things (if a certain visitor goes to your site, or if a page is landed on or you receive a referral from a url you define) and has a “custom live map” - which I haven’t messed with so I can’t give an accurate breakdown just yet.

The Scrolling Data

One last cool feature Woopra provides is at the very bottom of the application is a scrolling marquee of all data and where you stand for that day in regards to averages (ex: total pageviews are down, but pageviews per visit is up by 1%).

My love affair will continue

I’ve pretty much forsaken Google Analytics for Woopra - mind you I’m not a hard core stats fanatic. I just like seeing the numbers. Most of the more advanced features of Google Analytics I bypass because I either don’t understand them, or I don’t need them. Woopra is open 24/7 on whatever computer I’m on, but I find myself only checking in about 1-2 times a day now that I’ve gotten over the initial puppy love.

Woopra isn’t perfect by any means - before they released Woopra 1.2 (August 10th) I had found it to be a little buggy - for example I would get disconnected and I would have to end the Woopra process in order to get it to reconnect. That’s been fixed now with the latest release.

So is Woopra right for the hard core stats whore? Maybe - but if you’re looking for an easy way to track your visitors and get a nice visual representation that Woopra will work well for you. Woopra lets you track multiple sites - not sure what the limit is, but I currently am tracking six.

To note: “Woopra is free of charge during the Beta testing phase. Both free and paid plans will be available as soon as Woopra is officially released. Enterprise editions for commercial, high traffic sites, will also be available.”

Update 8/21/08: Opened up my Woopra this morning to find my main site missing (cssgirl.com) and the rest of my sites aren’t tracking at all. :( So sad. I’m not using the Wordpress plugin, which many people have been having problems with apparently. Also, in my member’s area, the API key for my site cssgirl has gone away and only says “null”.

Sent an email via their contact form at 9am. Left two messages (seems to be a widespread problem) on the forum. Will wait and see how this plays out.

I’m going into stats withdrawal.

Update 8/21 #2: CSSgirl is back (along with my other sites- well all but one) and tracking! Happy days.

IE6 PNG Fixes - SuperSleight & Unit PNG Fix

Lindsey — Sat, 09 Aug 2008 21:15:57 +0000

A few weeks ago a new javascript, Unit PNG Fix, was released by Unit Interactive for an IE6 and below PNG support fix. Up until now I have been using SuperSleight with no issues. So I decided to do a little research this morning to find out what made Unit’s Interactive PNG fix better than good old SuperSleight.

At first glance Unit PNG Fix has the benefit of being smaller (1k .js file, 1 transparent .gif). SuperSleight has a total of 3 files (two .js files and (one 3k, the other 2k, and the transparent .gif), but you can choose to use either one of the SuperSleight .js files - so if you prefer to use the mini version of SuperSleight it would just be 2k.

Both are called the same way in the

of the document - a conditional focusing on IE6 and below.

Unit Interactive lists the benefits of it’s script as:

Very compact javascript: Under 1kb!
Fixes some interactivity problems caused by IE’s filter attribute.
Works on img objects and background-image attributes.
Runs automatically. You don’t have to define classes or call functions.
Allows for auto width and auto height elements.
Super simple to deploy.

24 ways introduced SuperSleight as having the following qualities:

Works with both inline and background images, replacing the need for both sleight and bgsleight
Will automatically apply position: relative to links and form fields if they don’t already have position set. (Can be disabled.)
Can be run on the entire document, or just a selected part where you know the PNGs are. This is better for performance.
Detects background images set to no-repeat and sets the scaleMode to crop rather than scale.
Can be re-applied by any other JavaScript in the page – useful if new content has been loaded by an Ajax request.

After creating a few png transparent images and testing both methods here are my pros and cons of each:

SuperSleight
PROS:

No need to edit .js files with image link when both are placed in the same directory (ie: root).
Plug and play - just upload the supersleight-min.js and x.gif to your root directory, plug in the link to the file in an IE conditional and it works.

CONS:

Get IE warning about “blocked content”. Need to click top warning popup to activate supersleight.
Comes packed with two .js files: supersleight.js and supersleight-min.js. Could be confusing to a lay-person as to which file to use, and if both are needed.
Loads slightly slow. On pages with multiple PNGs in IE6 you see a “gray flash” before the PNG fix kicks in.

Unit PNG Fix
PROS:

Smaller size. But only by 1k.
No popup warning that their is active content.
Seems to load multiple images faster than superselight. A page with about 20+ transparent pngs loaded almost instantly without the “gray flash” commonly seen before the js kicks in for IE6.

CONS:

Comes with the path to the clear.gif image linked in the /images folder.

So overall, I have come to the conclusion that it seems Unit Interactive’s Unit PNG Fix is indeed a better alternative to good old SuperSleight. Let’s just keep hoping that user will keep updating their IE6’s until there is virtually no one using IE6.

Typography Essentials - Free Fonts, Tools and Tutorials

Lindsey — Sun, 03 Aug 2008 18:55:13 +0000

Another important aspect in web design (combined with the right color combinations and Photoshop essentials and brushes) is getting just the right typography for your design. There are many, many free fonts available as well as tools to build your own. Not only that but you can use free online resources to determine the name of that elusive font you’ve seen used elsewhere and want to grab it for yourself.

Once you find the font perfect for your project then you have to know how to use it. While some of the best resources about learning more about typography are books (Thinking with Type and The Elements of Typographic Style are two of my favorites) there are tons of online articles and tutorials written by people in the design industry that will help you better your typography.

Identifying a Font

Don’t you hate it when you’re to work on a project where you don’t have access to the original design files, and the client doesn’t know the name of the font in their logo? No worries, these sites will help you find that font!

WhatTheFont - is a search engine that allows you to upload or link to an image and it will bring up results for you of several similar fonts so you can compare and match. For example I linked to the new search engine cuil’s logo. I went through the process of refining the search (adding the characters isolated to each letter in the images) and was presented with a list of 30 possible matches. Part way down I determined that the font was Myriad Pro-Black - as you can see the image you upload scrolls the page with you for easy matching.

Font Lover - is a livejournal community that allows people to discuss various aspects of fonts and typography and it’s highly knowledgable font obsessed following can help you define fonts you’ve seen and find a similiar or the exact font used. Just upload a good quality image of the font you are looking for and they will have at it!

Identifont - this site allows you to answer a series of questions and it will try to narrow your results by process of elimination. I went through the Q & A to see how well it did, using Trebuchet MS as my “answer”. To be “serious” about this test I used a small sample of text (two long sentences) and answered the questions as applied only to that sample. So if it asked about an upper case “J” which wasn’t present- as well as any other unpresent letters - I clicked the “not sure” answer. (In a lot of cases you will have very little character samples to go with). After answering all the questions I was given the font “Alwyn” as the most possible answer. Out of the total of 7 fonts, Trebuchet MS was not present. I’m sure this site may work for others, but from my simple test I didn’t receive very reliable results. (Alwyn and Trebuchet MS are not that similar!)

Free Fonts

Finding the perfect font for your project can be a headache with so many choices available. Thankfully these services allow you to browse by the fonts characteristics aiding your search for the perfect font.

1001 Free Fonts - one of my favorite font sites since day one of my foray into design. They offer free fonts categorized by category (”Brush”, “Western”, “3D”, etc) and you cna browse alphabetically. You can also search for a font by name (should you know it). I’m not sure what their total number of fonts are, but they had “1001″ back in 1998 when they launched, so I’m guessing it may be a bit larger now! The only unfortuante thing is that they are constantly trying to sell you the “Ultimate Font Pack” or commercial fonts for sale.

Dafont - offers categories and subcategories to browse by, latest fonts, top fonts, search and alphabetical listings and brags that they have 8031 fonts (and growing!). You can preview the font by entering you own sample text as well as adjusting the approximate size (tiny, small, medium, large). Also allows comments on the fonts by other users.

SimpletheBest Free Fonts - is another site just like 1001 Free Fonts and dafont, but offers a little twist - the font preview is in color and also includes a very brief description (informative stuff like if the font is only lower case of it it includes international symbolds, etc).

Fontleech - was a blog that updated sporatically from 2005-2007 linking to various free fonts all over the internet of very high qualities. I’d definitely recommend browsing through the archives and finding some new favorites.

40+ Excellent Free Fonts for Professional Design - Smashing Magazine put this list together in 2007 of over 40 great font that you can use for free in your professional work, where I found one of my favorite fonts Anivers*. Smashing Magazine also provides a great series called Free Fonts of the Month, linking you directly to the months best free fonts!

Typography Tutorials and Articles

You found the found you need for your project… now you’ll need some inspiration and direction on how to use it!

I Love Typography - Comprehensive site dedicated to typography. Publishes articles on font finds, history of fonts and typographical styles and so much more. Definitely worth an add to your RSS feed collection.

Super Cool Frilly Bits Typography - Abuzeedo.com provides a fantastic tutorial on how they added frills to match their logo with a grunge like background.

40 Killer Typographic Posters, Photoshop Effects and Tutorials - Typography by example. 40 amazing, beautiful, stunning and “killer” examples for you to learn and drawn inspiration from.

Typography Matters - A List Apart contributor Erin Kissane explains about an often overlooked item of online typography - typographically correct punctuation.

Down With Helvetica: Design Your Own Font - The New York Times has a decent article about how more and more people are turning away from readily available free and commercial fonts and creating their own.

50+ Fonts for Big, Bold Headlines - A great list of FREE fonts available for download that will help you construct that perfect headline that pops out grabbing readers.

Web Style Guide - Everything you will ever need to know about typography on the web.

5 Simple Steps to Better Typography - Mark Boulton provides a series of five articles explaining five very simple things you can do to achieve better typography. This is the first of the series, before the comments is the links to the other four “chapters”.

Better CSS Font Stacks - Nathan of Unit Interactive has written a great article that no CSS coder/designer should miss out on. He explain how we can easily make better “font stacks” (a.k.a - the list of fonts that the browser should display for elements).

8 Fonts You Probably Don’t Use In CSS But Should - Tahoma lover? Century Gothic fan? Here’s your lead-in to start using your favorites in your CSS.

Typography Tools

Can’t find the perfect font? Create your own!

FontStruct - Design and create your very own font family - free!

How To Create Your Own Font(s) - I Love Typography brings you an fantastic article on how you can make your own font and the tools your need to start.

Even More Obscure Photoshop Essentials! The Free Photoshop Brushes Edition

Lindsey — Sun, 27 Jul 2008 16:17:48 +0000

I’m a big fan of small sites that provide free quality content just for the love of creating various items for people to use for their own design purposes. Before I provided a list of thousands of free Photoshop essentials from patterns, to brushes and gradients. Here’s some lesser known sites and designers and their awesome brushes. Quantity may vary with these smaller sites, but the quality is remarkable!

Photoshop Brushes

Studio Brushes - Nikki Jeske has provided a small but decent collection of various photo realistic brushes as well as a sampling of swirly brushes. My favorite? “Paper & Ink“.

Luxa - Luxa is a community of Photoshop users that provides video tutorials, step by step instructions, a small sampling of brushes and a digg-like article voting system. Favorite brush set? “Astral Flora”.

Encre - Encre offers a couple dozen brush sets of all different varieties - from floral, swirls, grunge, scratches, abstract and more. Favorite? Brushes 14 (second on page).

100×100 brushes - 100×100 brushes at Livejournal. I mentioned brush addicts at livejournal.com before as one of my favorite resources, and this is another great one. Tons and tons of brushes to download from very talented artists, most sized to work well with 100×100px dimensions - great for icon design.

Celestial Star - Celestial Star has tons of free brushes ranging from grunge, photo-realistic, illustrations, glitter, and more. Lots to choose from.

Beautiful-Sin - Small selection of some nice grungy - abstracty brushes. Nice sized brush packs, I hope they add some more!

Bedazzling - Bedazzling has several Photoshop brushes in the grunge and icon brush categories. Favorite? “Textured Wind”.

Misprinted Type - Older site, small selection - insanely useful and high quality grunge brushes. Definitely grab brush packs #2 and #4. Unfortunately no previews of brushes before downloading - but have no fears you won’t be disappointed!

deviantART Photoshop Brush Goodies

XxMortanixX - XxMortanixX provides two really random and quirky brush sets via deviant art. Really good stuff for oddball art and designs.

IHEA - Another talented artist who stocks deviantART with their fantastic content, IHEA provides us with plenty of vector-style brushes. I’m digging Vector Linedots Vol II.

SummerAIR - SummerAIR adds to the deviantART Photoshop brush collection with two packs of floral and swirl type brushes.

Trisste Brushes - Phenomenal eyelash and hair brushes, along with a few other packs such as wounds and decay. In the (very quickly thrown together) example above I’ve used the lovely Sarah Michelle Gellar to demonstrate one of the eyelash brushes. :)

InvisibleSnow - offers several random packs of brushes - my favorites being the hand drawn sketches like Urban Scrawl 2 and Sketchbook Scribble Brushes.

Tazni - Tazni has made a bunch of brush packs that come overflowing with brushes galore. Definitely check out the Tech and Grunge packs.

I could got on and on with more deviantART favorites but this sampling should keep you busy for at least a little while :)

How to Use CSS Sprites With Son of Suckerfish Drop Downs

Lindsey — Sun, 22 Jun 2008 21:53:18 +0000

So recently I was working on a project that required image based navigation AND drop down menus. From the get-go I decided to use CSS Sprites for the tabbed menu for the normal, active and hover styles. I also decided the best way to implement the drop down was to use the “Son of Suckerfish” drop down menus heavily modified from the original code to fit in with the original programming I had done for the menu.

I’ve explained before how to use CSS Sprites for changing images, so I won’t go into too many more details on how to accomplish this, but to recreate this for your own site you will need to create one sprite for your normal tab, hovered and current/active tab. That’s three sets of tabs in one file.

This is what your file should look like after you have finished styling it to your liking (click to enlarge):

As you can see, for ease of writing the CSS I have exactly line up each navigation style exactly below the “normal” style. The middle is the “hover” images, with the last being our “current/active” tab styles.

Now, the CSS for the sprites is pretty simple - I’ve made a class for each tab that defines the height, width and background position. Next, I added the hover styles for each class, just changing the background position. Finally, to achieve the “current” styles, I added an id to be applied for when that particular link is “active” (ie: you are on one of the pages).

Click here to see the example of the sprite with dropdowns.

The code is pretty long for the CSS so I’m not going to post it directly into this post, so you can check it out here.

As you can see I renamed the primary id for the suckerfish menu to #drops (in example by HTMLdog it’s #nav - which I had already used as a container for my entire tab scheme). From there I pretty much changed everything to fit in with the navigation I had already built (using floats) except for the main “switch” that hides the drop down until it’s hovered over (the negative absolute positioning and the “left:auto” to bring it back). Of course the modification brought some IE6/IE7 issues so when you view source of the HTML you can see the two conditionals I added to fix the problem (mostly margin based).

As you can see combining the two methods is not hard at all and takes a little extra markup and a little extra CSS.

If you have tried this method and used it successfully leave a comment to show you’re awesome work!! If not, and you need some help troubleshooting leave a comment with the problem and we can work it out.

How To Make Aardvark Add-on Work With Firefox 3!

Lindsey — Fri, 20 Jun 2008 12:32:12 +0000

I’m a huge, huge fan of the latest Firefox release. But I was really, really disapointed that a LOT of my very favorite (and most used!) plugins were incompatible. The plugin I felt most lost without was Aardvark, which I use every single day, practically all day long to aid me in development, editing and design.

Aardvark is a simple little Firefox plugin that when activated (right click and choose “Start Aardvark”) lets you highlight each elements on the page with a red border - not only that, a tab appears on the border with the element and id/class that is associated with it.

This plugin is critical for me (along with Firebug) when diagnosing layout problems.

So, unfortunately when Firefox 3 shipped on Tuesday I realized that my favorite tool wasn’t compatible. With a little research I found a loophole to circumvent the incompatibility issue.

Open up any browser BUT Firefox and download the latest version of Aardvark. Save to your desktop for easy access.
Right-click on the aardvark-2.9-fx.xpi file and change the file extension to .rar (you will need a program such as Winrar or WinAce - both free- to complete this)
Double click the new aardvark-2.9-fx.rar file and extract JUST THE INSTALL.RDF file. Nothing else. If you happen to extract the whole folder it doesn’t work.
Open install.rdf with your text editor of choice. I used Notepad++, but regular Notepad will suffice. Search for 3.0pre and replace with 3.0. Save!
Close the edited install.rdf file and drag it into the aardvark-2.9-fx.rar archive.
Change the archive’s extension back to it’s original .xpi — aardvark-2.9-fx.xpi.
Drag aardvark-2.9-fx.xpi into any Firefox window and it will install as usual and work!

This trick was provided by Dinaz in a thread of comments in the Aardvark’s plugin page on Firefox Add-ons.

Other plugins that weren’t automatically updating for me and I had to go to the Firefox Add-ons section to download: Firebug, ColorZilla and Colorful Tabs.

Other plugin(s) that still aren’t updated that I miss: CuteMenus - Crystal SVG, Fasterfox (although you can make it work with the same hack used for Aardvark).

Also, slightly off the subject - but I’m slightly annoyed with the Firefox site. I searched for “colorzilla”, “colorZilla”, “color zilla” and “colorzilla 2.0″ with their in site search and each time it returned “No results to display”. Jumping over to google it was the first result from my query. Same for cutemenus. I think Firefox needs to work on their search feature!

Create A Memorable Maintenance Page

Lindsey — Mon, 16 Jun 2008 13:30:11 +0000

Every once in a while we have to take our site down for upgrades, or god forbid something breaks and we have to fix it and we don’t want to leave the broken version for our users to see.

I was inspired to write this after seeing the funny Technorati maintenance page this morning:

Maintenance pages are important for many reasons, but one of the most important reasons is to make people remember to come back. If someone is visiting your site for the first time and you are currently working on your site and have placed it in maintenance mode typically you will replace your index with a page explaining the downtime and encouraging users to check back later (giving a specific time frame is good practice).

When designing your maintenance page you must keep in mind that people see dozens, maybe hundreds of websites a day. And if you’ve taken your site down for upgrades you definitely want these people to remember your site and to return later on.

A few tips to a better maintenance page:

1. Keep the general design close to your site’s design. It doesn’t necessarily need to be an exact duplicate of your layout - but it is wise to use the same colors and feeling as the original.
2. Make it simple. No need to go into exact details about WHAT your working on. Just let people know you’re working on it.
3. Give a time frame for people to return. Best is something like “Please try again in 30 minutes!”.
4. Make static content available. Have a few popular articles mirrored statically and link to them through your maintenance page. Give visitors a taste of what you have so they remember to come back for more great content.

Wordpress users can download a plugin for when they are making adjustments, upgrades or fixing their blogs called “Maintenance Mod Plugin“. When activated a maintenance page will show for any users NOT logged in. If you are logged in you can view all content on the front and backend and work as needed.

The sample page that comes with the plugin is fully customizable:

Here are some examples of maintenance pages from some popular sites (click to enlarge):

Adsense:

Blogger:

Bloglines

Digg

Feedburner - not exactly a maintenance page - but good demonstration of an error page.

IStockPhoto - my favorite!!

Mixx

Twitter - has several

As you can see some of the best pages here stay true to the site brand, while making it a little fun. They also offer information about what is happening and when you can return to the site for it’s regular content.

Do you have a favorite/memorable maintenance page? If so leave a comment and I can add it to this post. Want to show off your own personal maintenance page? Leave a comment!

Rounded Corner Boxes With Expandable Heights Using CSS and Images

Lindsey — Tue, 10 Jun 2008 02:05:05 +0000

Rounded corners are a great design element to escape from the blocky/boxiness a lot of web designers fall victim to. I remember the first time I created my own rounded corner box using Photoshop and HTML/CSS. What a thrill :) A lot of people shy away from it because it SEEMS a lot more difficult than it really is.

I’m going to show two ways to create this effect using Photoshop (or the graphic editor of your choice) and HTML/CSS. There are other ways to create this effect using just CSS - but I really am not a big fan of it because it creates a lot more empty divs than this method. Yes if images are off you will lose this effect - but I’m willing to sacrifice that.

Like I said I’m going to demonstrate two ways to accomplish this. The first is using just a flat rounded corner image with no other effects. The second will have a box with a drop shadow, border and gradient. :) So let’s start easy!

First open up Photoshop, and create a new document with a size of 200×200px.

For this example you don’t really need to have a background color (ie: you can use a transparent gif), but for the sake of this example I’m going to use a white background fill.

Next, select your rounded rectangle tool and draw the shape out to fill most of the box. My shape radius option is set to just 5px, but you can choose whichever best fits for your design. The concept is the same no matter how rounded your corners are.

I’ve chosen one of my favorite colors for the shape’s fill - #ff008a - a nice bright magenty-pink :)

Now, hold down CTRL while clicking on your shape layer. Your shape should now be selected:

Now that you have the whole shape selected let’s remove any excess background you might have. From the top menu choose “Image” and then choose “Crop”. This will take your image down to just the shape. You will see a tiny bit of the background peeking from the corners where it rounds.

Make sure your shape is still selected (CTRL + CLICK shape layer). Now, choose the Rectangular Marquee Tool (keyboard: M). Now, while holding down the ALT key* (while holding ALT and using the rectangular marquee tool parts of your selection that are already selected will be deselected) select right after the TOP rounded corners end deselect the bottom half. It may be helpful if you zoom in a bit.

Here is what your selection should look like:

Great, now crop that image the same way we did to the original shape - find “Image” on the top menu, and then select “Crop” from its dropdown.

There you have it. All we need to make our rounded corner box! I’ll explain:

First, CTRL + ALT + SHIFT + S to “Save for Web…”. Save your image as top.gif.

Now, press CTRL + SHIFT + E to flatten your image. You will be left with one layer. Next press CTRL + T to transform.

***TIP*** if your final layer is “locked” double click the lock next to the layer name and when the dialog pops up called “New Layer” press ok, THEN press CTRL + T.

Right click on your image and from the drop down select “Flip Vertical”. This will give you the bottom to your box. CTRL + SHIFT + ALT + S to save, naming it bottom.gif.

Great. Now that we have our images we can start the code.

Our HTML will look like this (I’m using divs for this example, but theoretically this can be applied to most if not all block level elements).

class="wrap"> class="mybox"> My box text ;) This is my rounded box, isn't it so cool! I love my rounded corner box, it's SO pretty! And it's expands it's height to fit in as much text as I want to throw in it! How awesome! class="endbox">

**NOTE** : The “wrap” class is really for demo purposes. Because I am using floats for this example unless the parent element has a width the bottom of the box will float next to it. You won’t need to wrap each rounded box in this if you have them in a sidebar/part of your page of some sort with a set width close the the width of your box.

If you want to remove the wrap class and have the same effect in an area with no container width switch the “float:left” in “mybox” and “endbox” to “display:block;”. I recommend using floats contained within a set width parent though to prevent compatibility issues!

That’s it for the HTML, now the CSS. You will need to know several things before starting -

1) The WIDTH and HEIGHT of your rounded corner images AFTER cropping. If you are not sure open the file up in Photoshop and right click the title bar of the image and select “Image Size” and you will see the dimensions. You can also open up the folder where you have saved the image and hover over the image and the popup in Windows will show you the width/height.
2) The location of your image.

.wrap { width:200px; float:left; } .mybox { float:left; padding:10px; /*Your width is 190px minus 20px for your left and right padding totally to 170px*/ width:170px; /*the url to your top rounded corner image*/ background:#ff008a url(top.gif) no-repeat; font:12px 'trebuchet ms', arial, verdana, sans-serif; color:#fff; } .endbox { float:left; width:190px; height:6px; /*url to the bottom rounded corner*/ background:transparent url(bottom.gif) no-repeat; }

Great, that’s IT! Like I said before the “wrap” class is necessary only if you aren’t putting this within another div that doesn’t have a width set. This works cross browser FF, IE6/IE7, Safari and Opera.

See Rounded Box Using CSS

Now ;) For the “harder” method. It’s actually not much harder. You will need three images instead of two - but it’s the same principle.

I’ll quickly explain how to make our image in Photoshop. First, start just like our previous image create a new image at a size of 200×200px. This time though be careful to make your rounded rectangle shape slightly smaller then the previous version - remember you will need to leave enough space around the image for your surrounding shadow. If you find later on that you’ve run out of space for your shadow then right click the title bar and from the drop down select “Canvas Size”. Add space to the height and width as needed to fit in your shadowing.

Ok, next step is to make our box a little prettier - double click the shape layer to bring up the layer styles dialog. First add a border. For this example I placed a border of 2px, color:#035873 and opacity of 39%. Next let’s add a gradient that repeats down the length of the box.

These are the following options for your gradient:

Finally, lets add our shadow. First CTRL + Click the shape layer to select it. Next, create a new layer (CTRL + SHIFT + N). Move this layer BELOW the shape layer. Make sure your selection is still intact. If not CTRL + Click the shape layer to reselect.

Now, make sure your on the new layer you have created. Fill with black. The next step depends on how much shadow you want. But here is what I did: on the top menu click on the “Filter” menu and from the drop down select the “Blur” option, from that slideout choose “Gaussian Blur…” finally on the window that pops up put in a radius of 4.3.

You should now have a rounded box that looks like this:

Now, for cutting out the slices for this box you will have to select outside of the main rounded box area. For this the best option is to use the rectangular marquee tool (keyboard: M).

Select the top part of your box and make sure your selection is large enough that it goes just slightly beyond your shadow. If you cut too close your shadow will cut off abruptly and you will lose the whole effect.

So your first selection should look like this:

See how my selection reaches outside of the shadow? This is very important. Next, go to “Image” on the top menu and then select “Crop”. Save this image.

Next, press CTRL + ALT + Z to take a step back to before you cropped. Make sure your Rectangular Marquee Tool is still selected. Now hold down SHIFT and press the down arrow to move your selection all the way to the bottom. (Let go of SHIFT if the selection goes to far and adjust up/down as needed).

Repeat the steps to crop, save and take a step back (CTRL + ALT + Z).

Grab your “Single Row Marquee Tool” (click the Rectangular Marquee Tool so the slideout pops out and scroll down to the 3rd tool). Just click anywhere in the middle of your box. You see a single 1px high selection for the width of your box.

Now repeat the Crop and Save.

Great! Now you have the three images you will need to complete this effect. Now it’s time for the HTML:

class="wrap"> class="top"> class="box"> My box text ;) This is my rounded box, isn't it so cool! I love my rounded corner box, it's SO pretty! And it's expands it's height to fit in as much text as I want to throw in it! How awesome! class="bottom">

Again, the wrap isn’t needed if you have it placed within another div in a sidebar-like situation.

And the CSS:

.wrap { width:200px; float:left; } .top, .bottom { float:left; width:200px; height:23px; /*url to the bottom rounded corner*/ background:transparent url(rounded-shadow-btm.gif) no-repeat; } .top { /*url to the top rounded corner*/ background:transparent url(rounded-shadow-top.gif) no-repeat } .box { float:left; padding:15px; /*Your width is 200px minus 20px for your left and right padding totally to 180px*/ width:170px; /*the url to your text background*/ background:transparent url(rounded-shadow-bg.gif) repeat-y; font:12px 'trebuchet ms', arial, verdana, sans-serif; color:#fff; }

Works in all browsers!

See Rounded Box With Shadows Using CSS & Images

And there you have it. Two simple ways to have rounded corners using images and CSS!

***TIP*** - For my examples I am NOT using a CSS reset method. So your results may vary. If this is the case (and usually it is with IE6 - big surprise!) you will have to adjust the margins and/or paddings. I’m not going to tell you how to solve this problem should you run into it, because solving your own problems is 99% of how you learn CSS and get your experience. But you now have the general principles and should be easily able to integrate this!

And if you can’t, post any questions in the comments or email me and I will try my best to help you out.

Create Full Width Header & Footer With Centered Content Using CSS

Lindsey — Sat, 07 Jun 2008 19:36:53 +0000

There are probably a million different ways to do this, but I’m going to show the way that I have preferred to do it, combined with my favorite centering position method.

So the simple way to do this is as follows:

HTML:

id="headerbg"> YOUR TEXT id="container"> class="left"> This is content that goes on the left! class="right"> Here is my right column! class="clear"> id="footer">HEY HERE IS MY FULL WIDTH FOOTER

Simple right? And here is the CSS:

/*Simple CSS reset for items we will use JUST for this example. Please use full reset when designing! Reseting the margin and padding is important for the body tag so the header and footer will hug the whole screen.*/ h1, p, body, html { margin:0; padding:0;} /*Just visual styles*/ body { background:#000; font:12px verdana, sans-serif; color:#000; } /*Our full length header. We align the text center so it shows up in the middle. If you prefer you could right or left align it.*/ #headerbg { background:#cccc66; text-align:center; padding:20px; } /*Center Content*/ #container { position:relative; margin:0 auto; width:800px; } /*Full width footer*/ #footer { background:#cccc66; padding:10px; text-align:center; } /*These are just styles used for the example for the content.*/ .left { float:left; width:500px; background:#ccff66; } .right { float:left; width:200px; clear:right; background:#66ff33; } .left p, .right p { padding:10px; } /*If you are going to use floats then you will NEED to clear the footer so it doesn't bunch the content up*/ .clear {clear:both;}

See Example

But wait, theres more. Often I have several things going on in my header, like a logo, and some links. I’ve actually used this on the redesigned CSSgirl, and right now you all are going to get a sneak peek of the homepage of the design in static format so I can illustrate this.

It’s basically the same as the above example except two critical things:

1. In our HTML the header is going to be an empty div. You will need also to define a height for your background.
2. We will use a negative top margin to pull the centered content on top of the full width header.

This is a really easy way to use patterned/repeated background patterns in your header that expand the entire width of the site.

So, here is how those things will change:

/*Our full length header. */ #headerbg { background:#cccc66; height:90px; } /*Center Content*/ #container { position:relative; margin:0 auto; width:800px; margin-top:-90px; }

Now you can position and float things ON TOP of the full length header.

See the main page of the all new CSSgirl in static HTML format for examples (full length header and footer). (And no this isn’t the 100% final version :)

Photoshop Essentials - Thousands of Free Brushes, Gradients, Layer Styles and More!

Lindsey — Mon, 02 Jun 2008 02:36:42 +0000

Photoshop is an amazingly powerful tool. It alone can allow you to create fantastic designs and photo manipulations. But, there are many, many other resources available to designers to enhance Photoshop and increase your productivity.

I’m talking about free gradients, patterns, brushes, layer styles and more that you can download and add on to Photoshop.

Patterns

(Some of these sites don’t actually have the pattern present downloads. What you do will be to download the pattern and open it in Photoshop and define it as a new pattern yourself)

Pattern Cooler - Library of patterns (some a little too loud!) that you can edit the color scheme and size of.

Squidfingers - Some of the best, most intricate patterns I’ve seen. I’ve been stuck on Travis’s patterns since 2003!

Kaliber10000 - A collection of user generated patterns - 953 of them! Unfortunately hasn’t been updated since 11/2007

Kollermedia’s Pattern Library - A library of 272 patterns collected and available for download.

Tartan Maker - Create your own tartan patterns on this easy to use site. Store and download patterns of your own or from others!

bgMaker - Create your own pixel patterns or download one of the over 1000 pages of patterns created (warning all are user generated and some aren’t that good)

Stripe Generator - Like the name implies you can create your own stripe patterns (with a multitude of options) or download someone else’s creation!

Gradients

Ultimate Web 2.0 Gradients - 130 free Web 2.0 gradients. A very, very nice set (also see Ultimate Web 2.0 Layer Styles).

Ladyoak - 67 free sets of gradients (total of 3470). Check out my favorite Giorginia (also check out the complete Photoshop downloads section).

Free Logo Maker’s Gradients - Small collection of 150 gradients available for download in ten different sets.

Brushes

PS Brushes - 511 sets of brushes categorized in 23 categories. Their terms of use is full of hard core legalese and it’s a little ad heavy, but there are some nice brush sets.

100 Awesome High Resolution Brushes - Photoshop Roadmap has put together a collection of 100 AWESOME brushes created by various artists.

Miss M - 80 sets of high quality brushes. Sets include swirls, text, florishes, dust, doodles and more.

Obsidian Dawn - Tons of useful and fun brushes. Be careful though - she requires a link back if you use the brushes unless you purchase a commercial license.

Brush Addicts on Livejournal - Hundreds and hundreds of Photoshop brushes. Unfortunately you will have to page through the entries and more often then not be directed to another link to download. Well worth it.

Inobscuro - Tons and tons of really useful brushes ranging from effects brushes to photo brushes.

Chez Plumeau - Collections of brushes made by graphics designers to use in various works of art.

Mixed Bag

Brusheezy - Tons of patterns and high quality brushes. Lots to go through. Also check out Vecteezy - free vector downloads.

My Photoshop Brushes - Patterns, brushes, shapes, styles, gradients and tutorials.

Brushes Download - Really nice brushes (609 packages) and gradients (75 packages). Unfortunately there is not categorization system, so you have to browse brushes by page.

For more downloads, check out Deviant Art User’s Brushes, vbrush “search engine” (no longer updated it seems), Adobe’s Photoshop Exchange and Free Photoshop.

Also, some of my favorite brush sets are by what used to be 8nero.net. Unfortunately site is gone - but the brushes live on via bittorrent. I’m sure you can figure out how to find it yourself ;).

These are just a teeny tiny sample of what you can download for free and use for Photoshop to enhance any project that you are working on from a website, print job or just making an icon for your blog ;P.

CSS Sprites - Easily Use CSS To Replace Images

Lindsey — Wed, 28 May 2008 12:30:41 +0000

If you’re not using CSS Sprites (also known as the CSS Image Replacement Method) you should be. Many coders seem to fear this easy and basic way to use images with CSS and I’m not sure why.

The benefits of CSS Sprites are plentiful, but you (and your visitors) will benefit from this method ten-fold. For the coder it’s less slicing and cropping of images, and for the user it rids us of that annoying image loading flash when you use CSS to replace background images.

I’ll take you through some quick steps to get started with CSS Sprites.

First, fire up Photoshop (or your graphic editor of choice).

For this example we will start easy and make a background (and hover state) for one tab.

First Create a new document (CTRL + N) width a width of 100px and a height of 50px. Than fill in the background with the color of your choice. I’m using black (#000000).

Next, click on the shape tool and select the rounded rectangle (SHIFT + U). Drag the shape until you get a nice looking tab. Double click the shape’s color box and choose a color for your tab. I’ve chosen red (#ff0000). Now, choose the move arrow and drag the shape so the bottom half of the rounded rectangle is outside of the viewing box so it looks like this:

Now, let’s make sure our tab is centered in the box. Select all (CTRL + A) and make sure the tab’s layer is selected. Click on the arrow (move) tool again. Now on the top tool bar click the “Align horizontal centers” icon (see image below):

Now, we can style our tab a bit. I’ve added an inner shadow to give the tab some depth (double click shape layer to have layer styles dialog appear):

Great. Now, the next step is up to you. You can leave the tab blank and have text overlay it through the HTML, or you can use a stylized text. I’ve chosen to use a font that isn’t available through CSS/HTML so I’ve added that to image. (To make sure your font is centered repeat the step above and “align horizontal centers”):

Great, so we have our first tab. Now we need to create our hover state for this tab. Duplicate your tab by right-clicking the title bar and selecting “Duplicate”.

Now on the duplicated tab I’ve changed the background color to a light blue (#00a8ff) (double click shape color box again to have color dialog appear).

Now, back to the original red tab I am now going to merge the two tabs together. For this example I am going to place the two tabs side by side, but that’s a preference left up to you. You can also stack the images on top of each other - or put them in any order you prefer.

So, right click on your original tab’s title bar and select “Canvas Size…” from the drop down. Click the LEFT arrow, and change the width to 200px (increase your canvas size by the width -or height if you are stacking) of your tabs).

Now, to the right of your image you will have an extra 100px. Now, go back to your hover state image. Select all three layers and press CTRL + G. This will group all three layers into a folder. Now select the move tool (black arrow) and drag the image into the first image. Now adjust the grouped layer so it sits EXACTLY next to the original with the same height and width (you won’t see any of the transparent background if you do this correctly).

You should then have an image that looks similar to this:

And that’s it for the photoshop work!

Now, fire up your text editor.

Here is the HTML:

Home

And here is the CSS:

a.home { background:url(tabs.gif) no-repeat; float:left; text-indent:-9999px; height:50px; width:100px; } a.home:hover { background-position: -100px 0; }

Also if you want to use this as your “current” style (highlight the current page) you can add that class to the CSS so it would look like this:

a.home:hover, a.active { background-position:-100px 0; }

See the demo.

Not so hard right?? Check out the HTML and CSS for CSSgirl and you will see that for my main nav “images” I am using CSS Sprites. For this site though I used one large image that contained all the images for both the original nav and the hover states. So my HTML looks like this:

id="navi">class="home" href="http://cssgirl.com">Home class="about" href="http://cssgirl.com/about">About CSSgirl class="portfolio" href="http://cssgirl.com/portfolio">Portfolio class="contact" href="http://cssgirl.com/contact">Contact class="free" href="http://cssgirl.com/free">Free Resources

And my CSS looks like this:

#navi { float:left; width:520px; height:48px; } #navi a:hover {border:none;} #navi a { background:url(images/navigation.gif); height:48px; display:block; float:left; text-indent:-9999px; } #navi a.home { background-position:0 0; width:94px; } #navi a:hover.home { background-position:-425px 0; } #navi a.about { background-position:-95px 0; width:91px; } #navi a:hover.about { background-position:-520px 0; } #navi a.portfolio { background-position:-186px; width:128px; } #navi a:hover.portfolio { background-position:-611px; } #navi a.contact { background-position:-314px; width:107px; } #navi a:hover.contact { background-position:-739px; } #navi a.free { background-position:-852px; width:98px; } #navi a:hover.free { background-position:-953px; }

Get out there and try it! Show me how it turns out. I’d love to see what you guys can do with this. :)

Using IE Conditionals For Cross Browser Compatibility

Lindsey — Tue, 27 May 2008 19:46:37 +0000

What’s worse than spending a week coding a brand new design to realize that your site looks like a bloody mess in IE6? Luckily we have a valid way to fix these problems without having to use hacks in our CSS and destroy the completed design that looks good in all other browsers.

IE Conditionals are an easy and awesome (and valid!!) way to insert any IE specific styles* into your code. You can specify styles for just IE6, just IE7 or for both. Not only that you can specifiy styles to affect all versions of IE below any version number. (*actually these conditionals can be used for anything that you want to display to IE specifically)

For example, say you have some margin adjustments to make that effect only IE6, in the head of your HMTL document you could put this:

Or, say you need it to affect IE6 and all previous versions:

The above code tells the browser to apply these styles to IE6 and any version LESS THAN it.

You can also use the and/or syntax (& / |) if you need the styles just applied to certain versions:

You can also use the & symbol to combine styles for one browser ex: [if (IE 6) & (IE 5)].

If you have a substantial amount of styles (or aren’t using a templating system where the header is isolated) I recommend using the conditional to link to a seperate IE stylesheet:

See more examples and the complete variable list over at Microsoft’s Developer Network.

I Broke My Site in IE. Oops ;)

Lindsey — Tue, 20 May 2008 15:59:22 +0000

I don’t know how or what I did ;O but after messing with some stuff this morning I ended up breaking this site in IE6/IE7. I’m sorry for any IE users I don’t have the time to fix it either. Guess you will just have to wait 2 weeks for the new CSSgirl to emerge (possibly sooner)!

So just because I feel bad I’ll throw out another (scaled down) sneak peak of the new design: