24th August, 2005

Part 3: CSS showcases - be selected

Right. In part one we discussed the showcases themselves, and in part two we had a go at the trolls. Most of the feedback seemed positive, and most of you agreed. Excellent.

So, to part three (phew! three articles in three days!) which may patronise some, but hopefully be a bit of a wake up call to those who have submitted their designs to the showcases, only to be continually rebuffed. As a reviewer, I constantly see the same mistakes being made in the markup and the CSS, and I note that many simple design principles are being ignored. I’m going to give you my personal hate-list, and tell you how to avoid making me close the browser window when I pull up your site from the submissions list. Following a few of these tips could just get you listed on one, two or all the showcases, so listen up!

An inside view

Half the time the designs are poor, with a capital Very. Reviewers aren’t necessarily looking for a certain style, format or even for something out-and-out brand new, but attention to detail and quality are vital. I’m talking about carefully created graphics, well-planned colour schemes, thoughtful line-spacing, good use of the browser window, legibility, site structure - and yes, something that makes a site stand out.

Regrettably, many submissions fall way below par. It is so surprising how many designers fail to deal with the common errors. I’ll see a site I’m itching to review, only to find no JavaScript replacement, or a thick and brothy div soup that could so easily be avoided by applying a few rules to paragraphs, lists or by combining div ids with classes. Shortcuts people! Inheritance! Selectors! Go look that shit up.

Anyway, allow me to talk you through some of the flaws I see every day, and why I think they’re important. Notepads at the ready…

Line height and typographic styling

Aaagh! Line height, people, line-height. I always, always look for this in a text-heavy design. Space out your adjacent text baselines so I can read your damn musings. The difference this will make to the legibility of your copy will astound you. Use it for introductions, full articles and even list styling. Space things out a bit and witness the difference, then submit your website.

Think about the fonts you use. Sure, ‘Lucida Grande’ looks sweet on Macs, but most PCs will default to your second suggested font. If you are lazy, that could be Arial or some other toss. It’ll compromise your design, so give it some consideration, and then submit your website.

Maybe you are using a lovely custom font for your headers, perhaps with a bit of sIFR. Fine, but don’t then deflate it’s impact with some yawnsome Verdana. Think about the fonts and how they work together. Try out lots of combinations, and then submit your website.

Nice header. Anything else there? Think ‘balance’

You’ve spent fifty man-hours beveling, drop-shadowing and tweaking your lovely header image. You’ve added some nice ligatures underneath your oh-so snazzy blog title and humorous strap-line. Maybe you have even slotted a very tidy little horizontal list just underneath that. Hey man, the top of your site is looking darn good! I might even review it. Let me scroll down to the… oh. The rest of it is crap.

For gadzook’s sake, design your whole site. So often the top-third of a page will look really interesting, but the remainder looks like an after-thought. Think very carefully about article display (headers, links, thumbnails and images etc), complete your design with a well-considered footer, and if you have a sidebar think about how it contrasts with your main column(s) - do you need to suggest a heirarchy of importance? The bottom line is this: don’t get too excited just because your header looks like Shaun Inman made it for you. Sit back and look at your layout. Print it off, and view it beyond the limitation of the browser window size. Is it balanced or disjointed, is the palette consistent or jarred?

Using JavaScript? Fine, but offer an alternative

All sites get a thorough Web Developer Toolbarring, which means viewing the site with CSS disabled, images hidden and other key accessibility checks. An important one for me is disabling JavaScript. If, once I’ve done this, your expand/collapse boxes, slide in/outs, tabs, draggable comment forms or fiddly widgets don’t work, you won’t get reviewed. It is particularly bad if you make some key content accessible only via JavaScript, and offer no alternative method of accessing it. You are bad, and you’ll go to hell.

Also, try to use unobtrusive javaScript. That means keeping it out of your markup. It is possible to attach rules to divs and classes as you would in CSS, so look into that and try to do it that way. Best place to learn that is from the master (see Jeremy Keith’s @media presentation).

Using a table? That’s cool, but…

Please don’t add redundant markup to your table. You may well need a table for some tabular data, but do style it up with CSS. If you are lazy enough to use cellpadding, cellspacing, border, valign or any of that junk, I’ll probably dismiss your design immediately (yes, I know my Photo Sets still have some of this junk - I’ll sort them out soon). Wipe out table bloat and check out Styling Tables With CSS, a great article that lists the old bloat versions alongside the leaner CSS equivalents.

Don’t just use tables

Tables have their uses (tabular data for one), and can be styled effectively with CSS (see above). No reviewer should dismiss your design just because it has a table here or there, as I have already suggested. But please, if your site’s structure is formed entirely out of tables and you are showing a complete disregard or no knowledge of CSS positioning and layout, you have not got a “Bob” hope of being considered.

Don’t build entirely with Flash!

Use Flash sparingly. A bit of dynamism in a design is great, but do look to see if certain elements can be done without Flash. XHTML/CSS/PHP/JS can often combine to emulate the kinetics of Flash (see Ciao Sexy for a good example of this). If you are using sIFR be sure it is appropriate, use it wisely, and be aware of it’s pitfalls. Be sure to offer alternative content for anyone who might not have the Flash Player - which is a larger group than you think (most corporate offices in the UK for a start-off).

Try to avoid splash pages

Two things annoy me in particular. Firstly, I prefer not to have to click through an introductory screen or splash page before I get to the nitty-gritty. If I’m checking out thirty or forty sites, I need to evaluate them fast. Don’t get around this by linking directly to your journal or folio and bypassing the splash page, think instead “do I really need this pissy little cover on my site?”. The answer is probaby “No”.

Secondly, if you use a fair amount of Flash on your site, that could be fine, but it is sooo off-putting to get a splash page showing me that I have downloaded 4 percent of your mega-mega-monster Flash movie. This tells me that there will be very little XHTML or CSS to investigate, and that I’ll probably hate what you’ve done. I’ll generally close the window at about 23 percent, and I’m not sorry about that.

Too many divs! Define local tag attributes

Div Soup it’s called, and it can be avoided. CSS younglings need to make use of loads of divs as they move away from tabular layouts, and that is a great step up from bloated code. But think: is your CSS lean and mean yet? If this was Donkey Kong you’d only be on level 3 or something (bad analogy). Look at some of the other tags you are using in your markup. I’m talking paragraphs, lists, images and other common tags, and using these as hooks for styles depending on where they appear in your layout.

For example, you want to float a thumbnail image to the right of some text. You have decided to wrap it with a div called “image-float”, which makes it float to the right, and keeps it a few pixels away from the text whilst also giving it a nice 1px border. That’s fine, but instead of wrapping your image with that div, just make the actual img tag work a bit harder.

If your thumbnail images appear in your “news” column (div id=“news”), this gives you the opportunity to style those images in the CSS itself - no divs required. Instead of creating a class called “image_float”, define the img tag in your CSS like so:

#news img {
float: right;
margin: 5px 0 5px 5px;
border: 1px solid #CCC;
}

If you are repeating that thumbnail for five, six or ten news blurbs on that page, you’ll be saving yourself five, six or ten opening div statements, and an equal number of div closures. This is good, and I like it.

Spare more divs! Use combinations

Don’t forget that CSS lets you combine classes in one div statement. This is massively under-used, and is a brilliant way to shrink code, whilst also allowing huge amounts of flexibility when it comes to further pages:

<div class="header home">My header stuff</div>

See the two styles separated by a space? Nice that, isn’t it. You could have all the margin, padding and width properties for your header in “header”, and append the relevant background image using “home” for the home page, “news” for your news page” or “cheese” for your cheese page (Mr. Hicks - he-he!). Another div spared.

Always think, can you shrink that markup a bit more? Read Web Standard Solutions and digest what Cederholm has to say about inheritance. You’ll wipe out half your divs after just a few chapters.

Pleeeeease don’t….

Please don’t resize my browser window to full-screen, re-direct me to another link, show me a site that is half-finished, or try to write the review for me in your submission notes. Also, avoid inconsistency. There’s no point creating the most wonderful homepage, if none of the following pages retain the initial brilliance.

Don’t worry about…

Don’t worry about your site looking like “a blog”, being a two or three column layout or failing validation due to a couple of ampersands (we understand about clients and CMS tools). Also, you can go against the grain, for sometimes flying in the face of “the rules” can actually bring very rewarding results. Just be careful, and try to counter-balance any issues your maverick methods might throw up.

That’s enough for now

I know how it feels when you’ve just completed your first or second pure CSS build. It is a feeling of elation, and you want the world to see what you’ve done. I admire you for dropping bloated markup in favour of CSS, and I want you to get the credit you deserve. Trouble is, competition is tough, and on any given day your submission might come up against one or more incredible designs. I urge you to keep the faith, not to mistrust the reviewers, and to be honest with yourself when your design is rejected. Without doubt, some amazing designs have not been selected (“Grrr”, says I) for the showcases, but that’s the way the world is.

I hope this has been of some use. I suppose I’ll know when I next check the submissions. Remember, these are my criteria, and every reviewer has their own agenda. Just cross your fingers and hope for the best. Remember also, it doesn’t really matter if your site is showcased or not, for accolades are transient, and fame is empty and vacuous. Try to get out more.

Related articles

Part one: CSS showcases - the sites

Part two: CSS showcases - the trolls

Share

Prev / Next

Tags

If you enjoyed this article, please subscribe to my Internet of Natural Things letter, and maybe grab the RSS feed. Thank you.