This is the celebrated journal of Mr. Simon Collison A.K.A Colly

Part 3: CSS showcases - be selected

24th August 2005

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

Responses

# Jordan responded on 25th August 2005 with...

“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.”

Please offer us some suggestions O’Wizard of the web ... Myriad? Trade Gothic perhaps? How about Apex Sans or Pragmata—I like them a lot. If we used Adobe Jensen Pro we could specify old style figures and true super and sub scripts etx—that’d be great.

Seriously: given that Verdana is far and away the most readable font available consistently acrosss different systems (with oodles of time gone into getting the hinting and spacing to work at different sizes and different monitor resolutions), what’s wrong with using it? (As you do yourself I notice, and as Stylegala does, and as A List Apart Does.)

There are plenty of other objectionable and downright arrogant things in this (and your previous two) posts, but being a type geek, this one offended me the most.

Wind your neck in before you make more of a fool of yourself than you already have.

# Ryan Latham responded on 25th August 2005 with...

Well seeing as I have commented on all the others, might as well hit this one up. I just want to thank you. Thank you for putting some these issues out there in the open and trying to set them straight with some of the people who may visit and submit sites to the galleries.

I think some people have a tendency to think that all submissions are golden and we just pick the best out of the bunch. As you have mentioned, a lot of them don’t even pass the test of us looking at it. Then there are ones that aren’t even done in CSS, break in the browser it is “Recommended for the best experience.” Yes, I still get submissions that have that naughty little banner.

Like I said in my last comment. We’re doing the best we can with what we’ve got to work with. I wouldn’t expect nor want a surgeon to perform a heart transplant with nothing but a butter knife and a plastic bag. Likewise I have no expectations for myself and those working on other galleries to magically pull fantastic designs out of nowhere.

Thanks once again for letting people know a bit more what its like. It is much more than picking a submission, writing a review on it and posting it.  Before you can do that you have to have a submission worth writing a review for.

# JohnO responded on 25th August 2005 with...

Jordan,

I don’t find much arrogant in there.  Colly is simply saying don’t sIFR just to say you user sIFR (Which is precisely the kind of people that will use Verdana in sIFR).

The rest of the post is geared towards using CSS in the way it was designed to be.  These people are submitting to a site to be judged, they’re asking for it.

# Nick Rigby responded on 25th August 2005 with...

Bit of a nitpick, but worth mentioning anyway.

cellspacing is the only cross-browser method of eliminating space between cells in a table. So, using:

<table cellspacing=“0”> is perfectly acceptable and completely valid.

Other properties, such as cellpadding, border etc can be safely set (and should be) using css properties.

Nick.

# Joost van der Borg responded on 25th August 2005 with...

Nick: Is this true for the ever-annoying valign attribute too? I’ve never been able to find out how to do that with CSS.. Further: Interesting read, although I must second Jordan’s request for more information about better fonts, there really isn’t that much choice I’d say.

# Chris Gwynne responded on 25th August 2005 with...

*gets to work on an ultimate css showcase website* To rival all others, mwhah.

# Ryan Latham responded on 25th August 2005 with...

We’re getting off topic from the content of the post, but

Joostvertical-align for CSS alignment of table headers and cells.

Nick—How far are you going back when you speak of cross-browser? I typically use 5x as a cutoff for 100% support and let it gracefully degrade in older browsers. If 5x is your target version then you could always use border-collapse.  I am not aware of it having issues in any vendor or version of what I would define as a modern browser.

# Simon Collison responded on 25th August 2005 with...

Jordan: “Wind your neck in..” He-he. That’s what my Mother used to say. Thanks for the nostalgia.

And yes, I use Verdana. My point (as JohnO mentioned) is that if you are using sIFR, at least pick a non-web font.

Nick and Joost: I replaced valign with this, which worked fine:

#tbl_content tr td {
margin: 0;
padding: 5px 3px 5px 1px;
text-align: left;
vertical-align:top;
border-bottom: 1px solid #CCC;
}

...and use border: collapse to get around cellspacing. Worked on a couple of things I did, but there may well be quirky times when it fails.

# Simon Collison responded on 25th August 2005 with...

Ryan: Ah, you just beat me to it!

# Brad Chmielewski responded on 25th August 2005 with...

The use of Flash and the Splash page is something I am about to deal with on a new project I just received.

On another not Colly I printed out this part 3 to read on the train and it was centered when printed, looked left aligned in the browser, maybe my print setting but not sure.

# Jonathan Snook responded on 25th August 2005 with...

Just to clarify on the use of cellspacing (since I tried to research it to some degree): To remove spacing altogether, yes, you can simply use border-collapse: collapse. HOWEVER, if you wish to have spacing between cells then you must use cellspacing=“5” (or whatever spacing you want between cells). Internet Explorer (are you surprised?) doesn’t support the border-spacing CSS property.

# Faruk Ateş responded on 25th August 2005 with...

Ahyes, that ended up being the part 3 I was hoping for, quite well. Good job Colly, excellent read once again, and that was sooner than expected! :-)

Also, I think the most commonly used term is actually divitis (rather than div soup :))

# Nick Rigby responded on 25th August 2005 with...

Colly, Ryan

Internet Explorer for Mac does not honour border-collapse: collaspse or border-spacing: 0, so cellspacing on the table is the only sure fire way to get around this.

If you don’t need to support IE5 Mac that the method suggested is fine, but my point is that sites shouldn’t be penalised for using cellspacing where necessary. It is completely valid.

I understand what you are saying though.

Thanks,

Nick.

# Simon Collison responded on 25th August 2005 with...

Jonathan, Nick: Thanks for clarifying where the quirks lie with the whole cellspacing issue. Nick, I know I have reviewed sites that feature cellspacing on tables, its just a shame to see it in the markup. Most table markup will validate, as you say. I guess it is something I shouldn’t get hung up about.

Faruk: D’oh. I meant divitis. Still, I always liked the term div soup.

Brad: Hmm. I’ll check my stylesheet to make sure it’s not me.

Good feedback everyone (even from Jordan, who’s views I obviously respect (I resent the term “arrogant” though, but I apologise if I came across that way). I’m going to go away and look a bit more closely at font use and get my facts straight, starting with Jordan’s In Defence of Arial article.

# James responded on 25th August 2005 with...

Hi Jason,

First off thanks for writing this three part series, it’s been entertaining and eye opening.

It occurred to me while reading it, that maybe this whole “CSS showcase site” phenomenon could be spun in its head slightly? How about a CSS submission site where would be designers could submit their work in the hope of some constructive criticism. Instead of taking awesome sites that get it all right, the site would showcase sites that suffer from common mistakes and advise on how to improve in the future?

Maybe I’m being ignorant and there’s already something like this out there, but I’m sure it would be a big help to people coming to CSS based design for the first time, and to those looking to improve their design skills all round.

# James responded on 25th August 2005 with...

Sorry, sorry: Colly. Not Jason. No idea why I wrote Jason, obviously not with it at all today. Many apologies. Please remove my stupidity from your site.

# Jacob responded on 26th August 2005 with...

Where are people finding these backgrounds for their CSS that are very simple and clean, like the one used for this page with the small lines?

# Dean responded on 26th August 2005 with...

Another table cellspacing/cellpadding issue that needs to be considered is that when you’re forced to use a value for one of these, the other will have a default value of a pixel or two. So the spacing or padding needs to be dealt with either somehow in CSS or within the table tag attribute if you want them set to “0”.

# Faruk Ateş responded on 26th August 2005 with...

You’re just a hungry bugger, Colly. I knew it!

# Simon Collison responded on 26th August 2005 with...

James: Jason here. Erm, I mean ‘Simon’. Your gallery idea is brilliant, I just wonder if people would be so willing to accept criticism. Great idea though. Oh, and your gravatar is the best I’ve seen.

Jacob: Erm, Photoshop is where I get my background images from. Just a basic lines pattern, turned through 45 degrees, and then tiled with CSS.

Faruk: Hungry? Moi? Not after last night - I spent 100 quid on a birthday meal last night!

Dean: Agreed, so that’s why we should set borders and padding to ‘0’ in the CSS. Almost all table manipulation is doable with CSS.

# James responded on 26th August 2005 with...

Hi Jason... Simon.

(Still can’t believe I wrote that!)

You’re probably right about people being a little touchy about receiving criticism, there would need to be an understanding that only constructive criticism would make it onto the site - hard to manage, I guess?

I’d love to put something like this together, though I’ve no idea where to start, and I’m unlikely to have the time (start a new job soon). I would however volunteer to be “fed to the lions” if someone else was to make this a reality.

Oh, and on the gravatar thing, cheers!

# Rob Mientjes responded on 29th August 2005 with...

Colly, I think Jordan took your Verdana remarks differently. It would be fuckin’ retarded to dismiss designs with Verdana in it, and your arrogance only shows if you meant that ;)  Jordan? You here? I think Colly meant using Verdana for your sIFR’d stuff, not for body copy.

# Laurence Green responded on 29th August 2005 with...

If peeps want to know about CSS then they should read up about it before submiting anything, there is a huge amount of information waiting in forums and sites, just google it.  I may be a beginer myself but ‘damn’ were do these guys come from.
A site isn’t based no how great your CSS or JS is, its the design to get information to the user, we are all designers here and seeing snidy comments doesn’t help anyone.  CSS usage and design only comes into play if you are looking into the background of a site, sure Colly is fine in saying to watch your coding but a word for all those starting, read the manual: CSS2 Specification
sorry for the heart break, but ... damn ...

Responses are now disabled Your ability to respond is disabled automatically some 30 days after articles are published, or manually much sooner if spamming guttersnipes target a particular article.

Prev 480 Next

Superfluous Aside

Archived in HTML & CSS, Design & Web

There are 23 responses

External References

Copyright © Mr. Simon Collison 2003-2017. Protected and licensed under a Creative Commons License. Grab the RSS feed

Engineered in Nottingham, scaffolded by ExpressionEngine, steam-pumped by United & kept alive with tea and hugs.