I struggled with the title of this article. It should be: “10 Common Mistakes Made by Graphic Artists Who Think They’re Web Designers and Hand You a PhotoShop File Without Any Understanding of the Medium.” Not very snappy, but it’s what I meant.
There’s a serious point to this post. It doesn’t matter whether you’re coming from a design or development angle, the same mistakes are made by people who label themselves to be “Web Designers.” So here’s my list of pet peeves…
1. No consideration for the browser viewport
The problem with flat PhotoShop mock-ups is that they’re a fixed height and width but a browser is a window with variable dimensions. This is a particularly troublesome concept for those with backgrounds in print design.
An HTML/CSS coder needs to know what happens when the browser is enlarged or reduced beyond the dimensions of your mock-up. Does the background tile? Does it fade to whitespace? Do the elements resize? Is the width variable but only within certain limits? Your design is not complete until you have answers to these questions.
Whatever you do, don’t attempt to constrict the browser’s behavior. A designer once asked me to open a new fixed-dimension browser window so their design would work. The browser wasn’t the problem…
2. Enforcing fixed heights and widths
In a perfect world, all the content would be written before a design was created. That doesn’t happen and, even if it did, the text would certainly change. Unfortunately, novice designers rarely consider the impact of text being added or removed from an element. Their 5 lines of “Lorem Ipsum” text lines up perfectly and they’re happy.
Navigation structures are especially important. Consider what happens when pages are added and removed from the site — is there space for additional menu items?
3. Making assumptions about the user experience
Just because you have a 24-inch 1920×1080 monitor, it doesn’t follow that all users have the same equipment. It’s even worse in the mobile world — designers and developers rarely think about devices other than their own smartphone.
4. Sub-pixel mock-ups
Your 300 DPI graphical mock-up will never look the same on a 72 DPI screen. Browsers show whole pixels; you cannot render half a pixel.
5. No understanding of font stacks
Typography is becoming easier on the web but it’s still not possible to use any font you desire. Not every OS/browser supports the font you want to use. Some commercial fonts cannot be distributed. Some don’t work well on screen even though it looks great at 10.5pt-sharp in PhotoShop.
6. Not considering development practicalities
A typical example: headings featuring fancy fonts and effects which can only achieved using a graphic. That’s fine if your site has 5 pages, but what if it has 500? What about 5,000? Designers soon realize their mistake when they’re asked to create 57 unique titles every day.
Consistency is another factor. If you’re using icons which are 96px2 in size, don’t suddenly change them to 98px2 on another mock-up because you couldn’t get one icon to look right.
7. Forgetting about links
Links are the foundation of the web. If you’re not differentiating links by color and/or style, you’re causing fundamental problems for your users.
Many usability experts argue that blue underscored text should be used in all situations. I don’t necessarily agree with that restriction but, whatever you do, never, never, never use blue underscored text for something which is not a link!
8. No thoughts for animation or effects
One of the worst aspects about PhotoShop mock-ups is that they can’t show typical HTML, CSS or JavaScript effects such as rollovers or animation. It’s a good argument for not using a graphics package when presenting your ideas: a working browser prototype will provide more realistic expectations.
9. Bizarre or inaccessible form controls
Form controls are boring. Why don’t we make that text box carat into a carrot?!!
Form controls may not be interesting, but browsers can render them easily and users understand them. There are occasions when your application requires a unique control which isn’t available in standard HTML but, those situations are the exception rather than the norm.
Progressive enhancement aficionados will tell you that fancy sliders or color pickers are great, but ensure standard HTML is used beneath the surface. Your application will continue to work if a user has JavaScript disabled.
10. Little appreciation of the technologies
HTML and Flash are the same — they’re in a browser, right?
You can do things with Flash that are almost impossible in HTML (although HTML5 hopes to change that). Similarly, you can do things in HTML that are impractical in Flash. You’re asking for trouble if you haven’t discussed the technologies with the client and the developer.
Enough of my ranting. What aspects of novice web designs annoy you the most?
(Angry designers should now head over to 10 Common Mistakes Made by Novice Web Developers…)
Craig BucklerCraig is a freelance UK web consultant who built his first page for IE2.0 in 1995. Since that time he's been advocating standards, accessibility, and best-practice HTML5 techniques. He's created enterprise specifications, websites and online applications for companies and organisations including the UK Parliament, the European Parliament, the Department of Energy & Climate Change, Microsoft, and more. He's written more than 1,000 articles for SitePoint and you can find him @craigbuckler.
