A quick look at some of the issues that came to life this year and should be avoided in next year’s designs
Lucida
More and more designers are starting to use Lucida as their main body font. While it may look good on Macs, it’s totally messed up on PCs without ClearType enabled and let’s face it, this setup accounts for the majority of users.
Besides from looking ragged, the percentage of people that actually have it installed is quite slim and I’m talking about PC users again. It doesn’t come by default with Windows and it’s only installed together with Microsoft Office.
It may be a great font but please use it with caution. I’d consider using it only if your main user base is made out of Mac users and you do provide an alternate option for those that don’t have it installed.
Footer-only Navigation
There was a lot of hype over using your website’s footer more efficiently this year, and for some good reason. It’s not unusual to duplicate your main navigation on your footer, especially with websites spreading more than one page in height. You might even include more specific navigation features in there as you already established that at this point the user has at least skimmed through all the information on that page and might be looking for more places to go.
However, things start to get ugly when people overdo it. I’ve seen plenty examples of websites where the main navigation has been moved entirely to the bottom of the page. The basic rules of navigation state that one must always be aware of where he is located in space, what he might do in that place and where he can go. By “hiding” the main navigation a couple of pages down, you fail to provide your users with those answers. Nobody likes feeling lost and when another website is just a click away it doesn’t take a lot for the user to move on.
sIFR Links
sIFR is a great technology and has helped beautify a lot of websites. As with any tool that provides great power, knowing when to stop is the key. Even the authors of sIFR say that using it for replacing links is not recommended but some chose to ignore this or were simply too hyped to read the fine line.
More and more people use some browser with tabbing capabilities. In doing so they became accustomed to opening links in new tabs and browsers provide an easy way to do this with the middle-click. But try a middle-click on a sIFR link. It doesn’t work. You might also try CTRL-click or SHIFT-click but these don’t work either. Apart from crippling this basic browser functionality, the status bar information is also missing. As I don’t have any information in the status bar nor a displayable title property, there is no way of knowing what will happen when I click that link. Should I still click it? Maybe I will but it will certainly leave me a bit frustrated in the end.
Inconsistent Color Coding
In the beginning all links were blue and underlined. Then CSS came along and we had the power to change the links anyway we wanted. As the internet is constantly expanding and users become savvier it may be ok to get rid of the underline and the blue color but that doesn’t mean it’s ok to use all the colors and styling methods out there.
Blue and underlined meant consistency. Change this appearance to suit your own design but keep it consistent. Don’t use an orange graphical navigation, blue links on the main content and dark gray links on your sidebar. Choose one color and stick with it as it will make it easier for the user to identify navigational items. This also applies to other elements such as titles.
For instance on a news list, some prefer to place the link on the date, some place it on the title while others place it on the excerpt. As a user I have no way of knowing where to click unless it’s properly color-coded. I will not always move my mouse around to try and look for visual clues on where to click. Navigating a website should be as straight-forward as possible and not a puzzle. Steve Krug said it best: “Don’t make me think”.
Designing for the Gallery
From the top of my head I could probably name at least a dozen of web design galleries. There are probably even more out there and becoming listed in one seems to become a career goal for some designers. I know some young designers that would give their right hand to be featured on one of these websites and who will design and re-design until they would achieve this.
Content is still king and design should be there to complement and emphasize it, not the other way around. We get plenty of colorful eye-candy from those ready-made web templates. Design for the user, not for yourself, and I’ll quote Jeffrey Zeldman here:
“Many young web designers view their craft the way I used to view pop culture. It’s cool or it’s crap.”
Conclusion
Most of these mistakes are generated by having too much power easily available. If you can do it, that doesn’t mean you should. Sometimes it might be better to stick with the old-fashioned ways than to try to be cutting-edge and fail. Think twice about the implications of your design decisions and apply that golden rule:
“If you’re not sure, don’t!”
Oct14 06josh barrsays:
Lovin’ the site!! and the niceforms thing is just gorgeous! having been featured on netDiver a few of years ago when i was just 16, i can certainly say it’s not hard to get onto those design galleries :) It’s all in the idea, the concept. i’d rather see great, rough ideas with perhaps poorer technical execution than a million meaningless-but-pretty pages. The “pop music” analogy couldn’t be more appropriate. When was the last time a pop song really meant anything to anyone? Rawk on :)
——-
Oct14 06Jens Meiertsays:
Valid points, Lucian. And you remind me of the need to test the “footer navigation” of my UITest.com web site, which I suspected not to work that bad.
Oct14 06Arunsays:
Very true. Hopefully 2006 will see a lot more of CSS & XHTML in action. And content will be the ever-reigning king.
Oct14 06Marko Dugonjićsays:
sIFR links are especially annoying. The trouble is, some designers provide the only link to a rest of the article this way. No problem creating sIFR heading/links, but one should provide additional link (i.e. ‘read more’ etc.)
You’re also right about the Lucida, but I think any font looks crappy without the clear-type, except maybe the ‘screen trio’: Verdana, Georgia & Trebuchet and even those look like a mess, if set in italic (See screenshot).
Oct14 06Pete Msays:
Good article. It seems some people are giving CSS the same treatment that Flash got a few years back.
Oct14 06Marksays:
You rag on about ppl using Lucinda more and more, and make the case that it looks shoddy on PCs. Have you ever seen your own site on Macs? I’m not sure from your CSS file which font it is, but my does it look horrid. The kerning is all over the place!
Oct14 06enejsays:
Nice article I would suggest adding now that you have the ability to change how what you selected text looks like in firefox. To make sure it’s more obvious.
Thanks A yellow background looks cool too.
Oct14 06Amal Ayyash - SHUTsays:
Good points, two more: - the way bloggers link to other sources using the ugly word: “here”, find more of this “here” and “here”!!! I’ve seen it in some of the best sites believe you me! - TOO MUCH INFORMATION: comments! I wish people are more carefull in allowing comments, there are certain blog entries thar are nice reads, why allow comments at all? and there are entries that contain technical stuff, a full day comments should be allowed, anything further, send the blogger!
Why? try having a “yesterday” deadline to get something done, and google, and when you finally get there, you find yourself in a jungle of irrelivant details. Have mercy on google, it’s our friend!
Oct14 06Alexsays:
Very cool site ! I wish I was able to do the same :(
Oct14 06Jimsays:
Can’t help it! Mac made me lazy to test on another platform. It’s too beautiful to render on Mac. I’m stuck with Lucida-Mac-Steve-o-complex. Darn beautiful OS! Usually I’m a little bit gettting deeper by using Mac’s mostly bundled fonts, like Gill Sans which available by default. Didn’t care about others. Afterall, I’m the one who did the website ... ouch
Maybe I should go back using standard HTML sans CSS, or just giving feeds only.
Oct14 06pogdesignsays:
No clue how it would be done, as cleartype is OS level stuff, but it would be nice if there was a CSS rule for a cleartype effect. Sites do look so much better with it enabled, but it can skew the design as the text is a couple of pixels smaller/larger. On a larger amount of text, this can ‘damage’ a nicely designed site.
Oct14 06Alex Bugasays:
“You rag on about ppl using Lucinda more and more, and make the case that it looks shoddy on PCs. Have you ever seen your own site on Macs? I’m not sure from your CSS file which font it is, but my does it look horrid. The kerning is all over the place!”
Actually, i’m looking at Lucian’s site through Safari. And… I don’t know what you are talking about.
It looks pretty smooth to me. I like Lucida too, but i use ClearType on my pc.
About the article itself: It’s nice Lucian. Considering you worked at one of the top (my oppinion) agencies from Romania, you shure know what you’re ragging about ;)
Oct14 06Richardsays:
I’d have to agree with the footer navigation. I would suggest only using it for legal stuff and links that should only be found by people that want to find them which might include Myspace friend adder advertisers, privacy policies and its also good to include your contact information there as well.
Oct14 06Anthony Y.says:
Couldn’t have said it better regarding the Lucida font.
Oct14 06Cknsays:
I use adblock and webpages with sifr are looking terrible!
I think such a techique inside copy text is design overhead!
Ckn
Oct14 06egsays:
Felicitari Lucian…am ramas surprins de remarcile tale bine sintetizate. Succes in Chicago se pare ca in Iasiul e de domeniul trecutului.
EG. *Note. I apologize to those who don’t understand what I’m saying.
Oct14 06Tonysays:
It does seem that many of the website owners are Mac users now a days. This problem will probably Cell Phones continue to grow just because the new intel mac are coming out aswell as more and more users are switching to mac. Hopefully Vista will render the font better I guess.
Oct14 06JonyBravosays:
yeah… “Content is still king and design should be there to complement and emphasize it, not the other way around”... galleries are good… they are there for design lovers to check out what are others doing… and what is the trend at the time… sometimes to get inspired… It is not a problem if there are many design galleries… Is it a problem that there are so many weblogs? Are not out there too many blogs? Pleeease! Bad artilcle…bad…
Oct14 06Dylansays:
Ugh, any font on XP looks terrible without ClearType enabled. It should really be enabled by default.
I do have Lucida Grande installed, but not because of Office (which version of Office comes with Grande?) and I can say that the top image you offer looks a little extreme, and is definitely worse than what I get without font smoothing on sites that use Grande.
Oct14 06travellotsays:
great site! too bad posts are few… but.. good essences are kept in tiny bottles.. keep up the good work!
Oct14 06old9says:
Why not using the “Lucida Sans Unicode” instead? It looks great in small font-size both with the cleartype turned off/on in WIN. I don’t know whether this font is installed on a mac by default, but you could use Lucida as a backup on mac, I mean something like “Lucida Sans Unicode”, Lucida, sans-serif.
Oct14 06Charlessays:
Thanks for the heads up for sIFR, hadn’t seen it before and looks pretty impressive. You never know it might shut up my desgner when he moans I keep telling him he can’t have his heaadlines in his font of the month!
Oct14 06Johnsays:
Many webmasters often doesn`t know how there sites look at a mac or a pc. Not everyone has both systems. Because of this such articles are very helpfull. I will control my sites now :-)