The web design / development world isn’t always fast cars, eating caviar by the kilogram and relaxing on a giant water bed with a harem of concubines. Sometimes you can sit frustrated in front of a computer trying to get things to align, trying to make your site just work properly, for hour upon hour. However, there are also times of sheer elation whereupon you can enjoy a warm, fuzzy feeling (hereon abbreviated to WFF) from the satisfaction of having done something perfectly, or to the highest standard that current technology (or your crippling schedule) will allow. These are 8 of those times, in no particular order…
Written by Jon.
1) When your markup is readable by humans
Ever come back to a project several months later and have to “re-learn” what you did in order to change things? Unless you like creating unnecessary work for yourself, this is probably not a great situation to be in. One of the ways you can deal with this is by creating markup that makes sense. For example, the idea behind separating XHTML from CSS is to separate the semantic logic of your page’s hierarchy from the visual style. This effect is kind of lost if all you are marking up your xhtml pages with are hundreds of divs with cryptic names such as “div1″, “div2″ and so on.
How can you remedy this? For a start, you can give your markup human-readable class names and identifiers. There are a number of methods for this, such as using camelCase – MainContainerTop – or by using the slightly more old-school underscore method – Main_Container_Top.
On the other side of things, you can’t be too blazé about your CSS files either – they can quickly become an un-navigable mess of typographical and layout declarations, which will make the job of coming back to it later to edit it rather more difficult than it should be. One method I have recently adopted from Lokesh Dhakar is to keep CSS files organised by type, with a table of contents at the top. This means that you separate all typographical styles from the layout styles, which makes for extremely easy-on-the-eyes style sheets. I also tend to keep a separate section right at the bottom for “hacks” – the sometimes-unavoidable workarounds for browsers who don’t want to play nice. Hacks are bad in two ways – you shouldn’t have to use them, and the code often looks really ugly – why mess up the clarity of my style sheet for the sake of hacks? Hence, if I need to use them, I put them right at the bottom (this way, they are also much easier to find if you need to jiggle with them or delete them later because you’ve found a better workaround).
Knowing that you have created something clear and understandable underneath the website itself (that is, beyond the visual layer) provides a definite feeling of satisfaction.
WFFF (Warm Fuzzy Feeling Factor – higher value is warmer and fuzzier): 6/10
2) When your functionality degrades gracefully
All too often I find that in this current boom of whizzy, flashy online web applications, certain browsers get shut out for no apparent reason. Now, I can understand this to an extent, but when it is a big corporation or a start-up with venture capital funding behind it, there really isn’t any excuse to be shutting out perfectly capable browsers such as Safari. Writely and Riya are two recent examples of web applications that simply say “oh sorry, you’re using Safari! Bye”. If your cutting-edge functionality doesn’t work on my browser, try to make it degrade gracefully so that at least I can enjoy a “dumbed-down” version instead of a static page telling me to kindly download and use a different browser. This is one of the more difficult WFF to achieve on this list, and one of the more time-consuming, so as much as I loathe those who don’t abide by it, I have massive respect for those who do.
3) When you can increase the text size willy nilly and it doesn’t break your layout
The holy grail of the “perfectly liquid layout” should be every web designer’s goal. Not everyone wants to view the site at the text size your designer has set – not everyone can. Remember, screen sizes and eye strengths differ from user to user, and some will be reaching for that “increase text size” key. Apart from this, it’s just one of those “best practice” things. However, the more complex a design gets, the harder this is to implement. Sometimes for the design’s sake, you’ll have to use a fixed height for an element, and that might make the layout go crazy when you increase the text size. In addition to this, Internet Explorer’s lack of support for the min-height property makes things all the more difficult when you want to set a height for a box, but don’t mind it getting bigger if the text starts to poke through it. There are ways around this though – have a look at Stu Nicholls’ IE min-height CSS hack for a workaround.
4) When your site works in internet explorer without you trying
Hah! Like this ever happens. I’m going to assume that most web designer / developers are web-savvy people and for that reason use a more capable browser as their staple and for that reason probably create websites using that browser as their main testpad. Which means you end up with a site that looks beautiful in Mozilla/Firefox or Safari but looks like someone has taken a sack of hammers to it when you fire it up in Internet Explorer. Problems with IE are usually due to its slightly amusing interpretation of floated elements, and the way IE handles the box model. It just takes patience to make IE happy. Dan Cederholm, designer of Odeo and the man behind Simplebits put it quite well in his recent interview on the Web2.0 Show – “(Internet Explorer is) the family member you don’t like but have to deal with”.
WFFF: 9/10 – making a site that looks great in IE without you trying is like an instant orgasm for web design geeks.
5) When your site’s hierarchy is hierarchical even without your stylesheet
This is another one of those dull “best practice” things that makes you feel warm and fuzzy inside without actually having any tangible impact on how the site looks. The thing about CSS is it’s great for moving stuff around, floating this next to that etc – but if you take the CSS away, does the site still make sense? Is the navigation still at the top? Are your header tags in the right order? Sounds boring, but that’s how a search engine sees your site – so a site that makes sense in terms of the hierarchical markup of the page will be more understandable to search engines, and hence get you a better page rating/index.
6) When your url structure makes sense
Thanks to blogging engines such as WordPress, “clean urls” are a website “best practice” that anyone can achieve. What do I mean by clean urls? For example take a look at PingMag. If we look at a url such as http://www.pingmag.jp/2005/08/ we see that we get an archive. That probably means that if we just guess and type in http://www.pingmag.jp/2005/09, we’ll get the month after that. And you’d be right. Clean URLs are, amongst other reasons, good because they help users get an idea of where stuff is without you having to tell them. A friendly site is a better site. Now, moving into the next generation of web development tools, such functionality is built into the system – for example the Ruby on Rails framework provides clean, understandable urls as standard.
7) When you make a really awesome form
Forms get neglected. Poor forms. The making of a form will probably be one of the last things you do for any given web project, or at least, it’s usually not something that’s dwelled upon. And for that reason, there are so many cases of truly awful forms on the web. Go and sign up for anything these days and you’re likely to encounter:
forms that ask for too much
forms that don’t make it clear what is mandatory until after you’ve submitted
forms that erase all your input if it decides you’ve filled in one part incorrectly
The list goes on and on. Nowadays, with the widespread use of AJAX, there should be no need for me to submit a form, then come to a page that says “hey, you’ve filled this in wrong! sorry mate, START AGAIN”. Asynchronous calls to databases were made for this kind of thing. For example, once I’ve finished typing in my “desired username”, forms should check to see if that name is already taken asynchronously and inform me as I am on the same page, rather than making me submit, discover I’ve made a mistake, forward me to an “oops!” page and making the process much longer and more frustrating than it needs to be.
At the same time though, we are all human and I realise that sometimes, forms are the last thing you want to think about when the rest of the site seems so much more important. However, creating a form that is a joy to use is truly something you can be proud of, however insignificant it sounds.
8) When the client says “this is great, this is exactly what we wanted” and you agree
One of the best feelings in the world