5 Web Design Subtleties Often Overlooked
It has been asked and answered by many, “What is design?” My simple response would be, “design is attention to detail”. I came across another interesting response to the design question that I loved, “design is knowing when to stop”. But this got me thinking … it addresses the wild designer who over-designs, but forgets the more popular lazy and/or ignorant designer who misses what makes beautiful design amazing; the attention to detail. In this web 2.0 world, we have an oversaturated market with professional and amateur web designers alike trying to fill the void. While all designs can’t be perfect, there are five things I ask that we all try and remember to pay attention too – because it matters.
1. Anchor Tags
The easiest, yet most overlooked, CSS attribute to control is the anchor tag (your link style). Every time I get to a page that is beautifully designed yet has that dull and non-complimentary default blue link, I just cringe. Tafiti.com’s recent splash page is a culprit of this and I despise them for it. It is so obvious that there was an amazing amount of attention to detail on some of this page’s design elements; how could the ball be dropped on something so simple yet so vitally important to the total design package? Related to this would be the hover state of your link items, even if it is subtle, do something, anything to connote a sense of change in state. Even if blue is your link color of choice, go beyond the default and try and pick something close, yet perfectly suited, to your design.
2. Click-able Logos
Your brand logo in the upper left corner should always be click-able (regardless or where you put it). You may or may not agree with this, but lets agree on one thing – it is a commonly accepted convention and thus a popular means of navigation for the masses. It is easy and quick to implement and there are very very few legitimate reasons for not doing so. I am going to pick on my ex-employer, The Motley Fool, for this one as an example of where this could be overlooked but shouldn’t. The “caps” logo in the upper left of the orange promotion slot on fool.com is an image, a brand logo, for that section of content – I and many others have clicked that logo on several occasions expecting to get into the homepage of CAPS, but alas are left disappointed. In this particular example it makes a tremendous amount of sense; they are trying to drive users to that particular area of content, why would you do anything (or rather not do something) that would keep users from getting in. I wouldn’t call linking your brand logo a “web standard” but I do believe it is safe to call it a “usability best practice”. At the end of the day, your brand logo displayed in your site’s header is a navigation item – it is just aesthetically styled differently.
3. The favicon!
I don’t get as upset as other design subtleties when this item is missing, but it is probably one of my largest pet peeves (also, probably why it is the third or forth thing I will do when developing a site). It is a tiny 16×16 icon that most common browsers (IE6 excluded) will display in the address bar of a browser and/or within the your browser bookmarks. For this one, I call-out Advertising.com – because I believe this design detail is a brand extension in your marketing efforts. Don’t be lazy with your online brand identity; this is just as much a marketing initiative as it is a visual design element. I really applaud the 9Rules Network for visually identifying their members via their favicon – makes me all warm and fuzzy inside. I won’t buy any excuse for excluding this item (ignorance is never an excuse) – it is something you can do with most graphics programs (Photoshop included) and a little Google’ing.
4. Properly Optimized Logos
Back to brand logos, why are we saving our brand logos as condensed, compressed and pixilated JPGs? It’s your brand identity for god sake, make sure it looks good – more importantly, make sure it reads well! I hate to do it, but I have to call-out a friend of mine on this one, the good people at CSSDrive.com are driving me crazy with their logo. Not only is it a JPG (when it doesn’t necessarily need to be), but it is a poorly optimized JPG. The tagline is a great example of how this poor decision is coming at a cost to the legibility. Whether or not JPG vs. GIF formats are appropriate for your specific logo, nothing warrants the execution coming at the cost of the quality of said logo. CSSDrive is a web entity, its logo from inception should have been designed to optimize for the web at less than 10k – but that might be a personal opinion. One thing is for sure, their purpose is to display the beautiful websites on the web; shouldn’t they lead by example? Again, design is about being responsible.
5. The TextArea Tag
And, my largest design subtlety pet peeve most often overlooked is the CSS styling of the <textarea> tag. This can only be attributed to lazyness and/or ignorance. You’ve taken the time to style your <input> tags, but forgot that <textarea> needs to be styled specifically. Everything looks beautiful and elegant, every corner rounded, every pixel accounted for – and then there comes the big, black, Time’s New Roman text within your <textarea> element – so awkwardly out of place that it draws a tear from my eye every time. I will applaud Advertising.com for accounting for this, but both The Motley Fool’s CAPS and CSSDrive.com missed the boat again. Don’t get me started with Tafiti.com, who has no <textarea> on the splash page but instead a “mailto” for contacting them – how annoying is that unexpected mailto (that might get runner-up for #6 on this list – well that or the requiring me to download something to use any portion of your site; WTF).
Why do these design subtleties bother me so much? Perhaps it’s because I know they are quick fixes or perhaps it is because they are evidence of the lack of passion that designer truly has for the project. Whether it is taking the time to create the hover state in Photoshop as an extra layer or defining extra CSS styles that are not in use today but you can assume will be in use tomorrow – it is ultimately the designer’s responsibility to control their work. Be responsible, love what you do and produce work that breathes life through your passion.
- September 3rd, 2007
- 38comments
- I am a proud member of the 9rules network
yeah, I hate when the logo isnt clickable.. I love when I see a rollover state on the logo too..
@Jesse Thomas I totally agree with you on the logo rollover. It is hard to do and I acknowledge that it isn’t always appropriate, but a subtle change of state is so beautiful if done correctly.
It blows my mind that people still have websites without favicons these days. With tabbed browsers becoming the norm, it makes a big difference when you need to find a site amongst a dozen or so tabs.
@Patrick Haney, I love the favicon — I am forgiving only because I can be understanding to the novice how it may seem complicated at first (to create or to implement). It is one of those “you’ve gotta figure it out” things rather than one of those “must learn” topics.
However, any well-designed site missing the favicon just rubs me the wrong way. Honestly, it is a lot of fun to create it!
Nice post. CSSDrive is spelled wrong.
@n!ck, thanks for the compliment and the heads-up — should be fixed now (good catch).
I like this report. The color link this is totally one that I just don’t get. One of my two main sites (2timothy42.org) would have “worked” with the standard blue. But I think the fact that I changed the link to #000099 - makes a world of difference.
Same goes for my other main site (allenhuntshow.com). I can’t imagine how ugly that would look if I didn’t change the link color to #CC0000. Although I will say I am guilty of not making the logo clickable.
@Sectim42, even changing from one blue to another variation of that same blue can make a world of difference. When did the default ever become apart of quality design? Don’t worry about the click-able logo, I know it is a common oversight, but correcting it would be a great start. Again, not a web standard, but undoubtedly a usability best practice.
If you haven’t already, I might suggest reading “Desiging the obvious” by Robert Hoekman, Jr. I read it a few months ago, and it was hard to put down - mainly becuase a lot fo the stuff inside of the book runs inline with what you’re trying to say.
As for hte design aspect of things, particularly the links, I find that not setting the link attributes and leaving them the default blue is both tacky and shows a total lack of consistency. Consistency is key in design. if the default blue doesn’t go with your color pallette, then why in gods name is it there.
I can’t say I share your favicon love. Don’t get me wrong, I totally agree and understand your affinity and theory for the affection, I just don’t think about them when I see them. yeah, favicon, no favicon.. .no biggie to me. Hell, some logos and websites are too complext to compact into a 16X16 favicon, and let’s face it, if a company had a text based logo that was really ornate, what good is it to have a favicon that it inconsistent with the actual brand logo?
With JPGs, I rarely use them. I’m a PNG kind of fella. I like transparency in my images becuase it opens the door of flexibility with background colors and images. I can change them on the fly without worrying about going back in and editing the PSD or what have you… Sure I could get transparency with GIF, but… it’s not 1989 anymore and I’m really beginning to rethink this whole “web safe color” crap - who really is limited by 216 colors these days? no one.
I never imagined that people wouldn’t define their text areas. I loathe Times New Roman (I’m a Garamound or Lucidia Sans kind of guy), so when I do things it’s almost second nature to define my text areas - besides, it’s quick and easy to do as well as it formats the site (again with consistency)
@Shawn, thanks for the comments. I have not yet read “Designing the obvious”, but will check it out now, thanks for the referral. Sorry you don’t share my same favicon love — like I said, I can be forgiving on this one, even though it bothers me so much (like fingernails on a chalkboard).
I am totally with you on PNG’s and Lucidia Sans! Nice taste.
I understand (favicons), I’m that way about fully justified text.
Nice post!! Its the kind of thing we all think about but don’t always follow and i think it really makes the difference between a good site and a bad site. “When you do something right no one notices, but when you do something wrong, everybody notices”.
I also recommend ‘Designing the obvious’. I am reading it at the moment and it has heaps of things which I know I should do, but I usually forget how important they really are.
Thanks again for writing this all down. Now to go fix up all the things i forgot to do…
@Katrina, I totally agree — the list is all of those “I knew about it, but just forgot about it” type of things.
Thanks for confirming that “Designing the obvious” is a must-read.
Tafiti.com’s anchor color was the ugly default blue until I installed Silverlight. Then the entire layout (and the anchor color) changed. Did you install Silverlight?
I’m not defending Tafiti — I’m not a big fan of websites that require proprietary technology to work. Not only that, but the splash page for users without Silverlight should have been coded correctly — there’s no excusing that.
@Chris, I have not yet installed Silverlight — I am boycotting it as long as possible. That is one of my points — everyone involved on the project has installed it and no longer sees the issue; drives me crazy that the designer should have foreseen this!
Thanks for the comment, really appreciate the insight into the change upon installation.
I would have to disagree on #2. Thankfully it is not a web standard…
@Jonathan, I am curious, if you don’t mind sharing — why do you disagree on #2? Is it because you think having a favicon is flawed or you just don’t see the use in spending the time to create one?
Tafiti looks as though it is a Microsoft created site. Can someone verify?
@Johnathon, you are correct — Tafiti is a Microsoft beast. Another poor attempt at a Google Killer because Live.com was such a failure.
#2 is the clickable logo, not the favicon. I love the favicon, and put it on all the sites I design. Its the logo that links back to the homepage that I don’t feel is a necessary or best practice.
You are right — sorry about that, woke up too early this morning.
So, same question — why do you disagree with the click-able logo? I agree that the argument can be made against the practice in certain situations; but most times it is appropriate, no? Can it do harm? Do you think it is a bad idea or just an idea not worth putting time/effort into?
My point on this topic really comes down to usability best practices — if the masses accept it as the norm, then shouldn’t we comply to accommodate their expectations? You could very well go around making things blue and underlined to connote emphasis, but again, the expectations is that blue text with an underline connotes a linkable/clickable item (whether we like it or not).
For anyone who has already conformed and installed “Silverlight” — I have a screenshot up of what the Tafiti splash page looks like (along with some more design criticisms):
http://www.flickr.com/photos/mringlein/1260595882/
This seems to be doomed to the same fate…
Ironic that they called it “live.com” and it is apparent the venture is dying a slow painful death.
I’m not a huge fan of Microsoft anything that deals with the web. Expression is a fancy FrontPage with divisions going into crappy incarnations of Photoshop, Fireworks, and Flash. Oddly, every attempt aht MS makes with web dev programs I give a shot in hopes that they’ve been taking notes from other companies and people who… i dunno… do it for a living.
Generally any website designed with any kind of MS stuff is bloated or over complicated (I loathe ASP.NET… like loathe it more than the prospect of hell three times over). Granted I do use the Macrodobe stuff, but that only if I really just feel like seeing what I’m doing while I do it otherwise I’m all over EditPlus for hours. But.. my point is that MS web dev items kind of suck hard.
YES, Microsoft sucks!
I can understand not having the logo return the user home if the nav bar is both well placed and simple. Most users will rely in the the nav bar. At least this is what the couple of sites I’ve done tell me via crazyegg. I guess it largely depends on your site layout and design. If you’re doing like a portfolio site then it makes sense to link home through the logo because or those designs lead a users much differently than say “blogger” would. Corporate sites I can also see this for because there are a large number of non-designers who use the web and they operate in the mindset of 1990.
Yes! Un-tended to textareas are a real pet peeve of mine. Your reasoning is spot on, if the time is taken to style the inputs, the same care should be taken to style the textareas.
(Although I should mention that it doesn’t really bother me if the inputs aren’t styled either.)
@Joe, totally agree with you. It is strange, when someone makes the decisions to not style any of the input elements, i don’t mind as much either. I think it is the Time’s New Roman font that bothers me more than anything else.
What is “subtleties”?
@Wanderer, that would be “the state or quality of being subtle.”
It’s a coincidence that as you were writing your blog, i was writing a blog entry on a similar topic: why don’t people include a favicon? Favicons aren’t only important for a “good design”, but they’re vital for brand recognition. I provide instructions on how to create FavIcons too.
Favicons: Why and How to Create Favicons
@estelle, timing is everything — thanks for sharing, nice read!
One of my clients insisted that we use blue anchor links, believing that it has a degree of web-standard to it. I think perhaps he is right.
Great article though thank you.
@Ali, I can buy the argument that blue links are a widely accepted convention and thus makes for better usability — however, what color blue that is actually used is for the designer to dictate! Even if it is just another, very similar, variation of the browser default; make it happen.
Actually, I don’t think that it’s so necessary to make all logos click-able. Logo reflects designer’s professionalism and creativity at first.
@Sally –> the click-able logo is more about user expectations on the web than it is about anything else; usability being a huge factor in the success and effectiveness of a design.
A logo SHOULD NOT reflect the designer’s professionalism and creativity — it should reflect a brand –> it should convey meaning, a message or an emotional attachment. A designer’s professionalism and creativity help bring that logo to life, but do not dictate the logos design (IMO).
hjcu hbsa