Make text smaller | bigger | original
Most websites fail before the design process begins. Professional graphic designers who migrate to web design are often unable to come to grips with a fundamental Internet fact: It is simply not possible to design a website layout with fixed dimensions that will render as intended on every user’s display. Display sizes and resolutions vary. Operating systems vary. Web browsers vary. The control and precision possible in print communications design is impossible to achieve on the Internet. And designing for the most popular display size and resolution is a mistake.
Web browser software “plug-ins” like Flash® allow precise positioning of visual elements, custom fonts not native to computer operating systems, and zoom resizing features. However, zoom features cannot change the aspect ratio of a layout, and familiar web browser navigation conventions like the BACK button are often disabled on Flash® websites.
Effective websites combine elements that signal professional design to users—legible type, liberal whitespace around text blocks, text line lengths that do not become excessive on very large displays, visual alignment and high affordance—with flexible layouts that automatically adapt to a range of display sizes and resolutions.
You cannot know how your Web site will look on other people’s screens. No matter how much control you are used to when designing for other media, you’re going to have to give up some of it if you want to be successful on the Web. Compare that to designing for print.
Designers of traditional printed material have complete control over virtually every aspect of their output. They can choose inks, paper stock, printing method, image resolution, color values, type treatments, and alignment down to a hundredth of a point.
Web sites, on the other hand, have variables where print has absolutes. When Web designers finish a page, the representation of that design on their screen is only one possible variation of millions that are possible. The difference, of course, is in the distribution. Print designers create a physical object—a book or magazine or catalog—and send that objectto their audience. They know exactly what is going out. Conversely, Web designers send the source code—they send the words and pictures and scripts and structure. Their audience then uses a computer with a browser to assemble the end product and display it. Nothing physical ships from producer to consumer. Hence the variables. When the Web page is reassembled on the user’s end of the wire, all manner of change can happen. The user will have a different size monitor with different resolution, color representation, and gamma settings. The user may or may not have the same fonts installed. There may even be a different browser or operating system waiting for the page, introducing a thousand other variables.
It does not matter how pretty your site is if your navigation is confusing. Period. Your competitors are just a click away, so make it easy for users to surf your site and find what they’re looking for, with clear navigation and good hierarchical arrangement of information categories. You can avoid many potential wayfinding problems on your site if you respect...
Users spend most of their time on other sites. In other words, users prefer sites that are arranged and behave in ways they are already familiar with. It’s not a good idea to break with convention on the Web. For example, if most web users expect unvisited links to be blue, you are ill-advised to use brown just because it happens to look better with your site’s color scheme.
User testing guru Jakob Nielsen periodically issues pronouncements on best and worst website design practices. Commercial artists, ad agency art directors, and magazine designers who have migrated to website design like to poke fun at Dr. Nielsen, a task made easier because his own website is virtually devoid of any visual design aesthetic. The animosity most likely arises because much of Jakob Nielsen’s research findings place significant constraints on website design. Ultra-creative types tend not to care for constraints.
Website designers break Nielsen’s rules at their peril. He does have blind spots, most notably in the areas of persuasive design and user characteristics that affect behavior but can’t be tested for with a random user sample (e.g. emotionally invested users). On the other hand, his research probably gets it right a lot more often than not.
Understand, though, that creative design is not necessarily good design. And creativity and originality are not synonymous. Good visual design is a process of solving communications problems within constraints. Breaking rules is easy. The greatest degree of creativity is achieved when a compelling design respects the constraints.
Originality is simply being different. There is very little that is truly original, yet there are very many ways in which being visually original on the Web can lead to disaster.
While it is true that most web users tend to scan and not read when searching for information about a particular topic, you’d better have plenty of content about the topic they are interested in on secondary pages. Much of web user research suggests that web pages should be structured as headlines, bullet points and image captions. Any editorial content should be a concise summary, or so the researchers suggest.
The research is wrong. Testing user behavior with randomly selected users, who do not have an emotional or financial stake in the content being tested, completely misses the behavior of intensely interested users. These individuals are your most likely buyers, subscribers, clients, etc. After they have found a summary about the product, service, or topic they are interested in, they want long copy full of facts. This is a timeless principle of advertising copywriting that is no less valid on the Web today.
Who are you trying to reach, millions of casual Web surfers or those select few prospects who are trying to make a more informed buying decision about your product or service?
And incidentally, since most of your competitors will have website content limited to headlines, bullet points and concise summaries, your in-depth content will probably set you apart as an authority for your field.
A Flash® web page file is essentially a movie. Flash® was originally created for the design of rich interactive media employing motion and sound. Then along came the Web. Visual designers gravitated to Flash® because it allowed “pixel-perfect” page design layouts with magazine-quality sophistication.
Unfortunately, the web and web browser software are optimized for the display of HTML code and not the display of movie files. So some important behaviors that web users are familiar with (like the “BACK” button on the browser toolbar) don’t work in Flash® web pages. Flash® also has accessibility problems, and it’s files are not as cross-platform portable as standards-compliant HTML Web pages.
Flash® is an excellent and appropriate tool for embedded media within Web pages, such as advertising banners, interactive feature tours and tutorials, and so on. It should not be used to specify overall page structure, presentation and behavior.
This is not a universal view. For example, it is difficult, if not impossible, to find a major advertising agency website that is not completely designed in Flash®. These businesses are populated by some of the world’s brightest people, which begs a question: Why would virtually all of the world’s leading communications professionals commit such a glaring communications design error? If they use Flash®, why shouldn’t you?
The answer to the first question is probably two-fold. First, you can’t overestimate the persuasiveness of ad agency art directors in selling Flash® to their bosses. And it probably isn’t a very tough sell anyway because ad agency culture prizes design originality. These folks long for the printed page and the complete design freedom it allows.
Second and perhaps more rational, major advertising agencies get most of their business from global 2000 corporations with big advertising budgets. These budgets are typically administered by hip, trendy twenty- and thirty-something marketing executives. These are young people who “get” all the latest information technologies. And the product they are buying from the ad agencies is creativity. Ideas.
In short, a bleeding-edge Flash® website is a rational way to appeal to this audience.
But let’s say your primary market is not hip young marketing executives in Global 2000 corporations. Let’s say, for example, that you’re a realtor who markets million dollar-plus homes to wealthy individuals. One such individual is ready to buy, but she just broke her right arm in a skiing accident and can’t use a mouse with her right hand, as she usually does. Instead, she uses the keyboard to “TAB” through navigation menu tabs and web page links (a standard feature of accessible web page design).
Except, when she hits the TAB key on your Flash® page, nothing happens. She tries hitting other keys to select the “Request an Appointment” link that is staring her in the face, yet still, nothing happens.
Frustrated, she decides to look elsewhere for luxury real estate services. If you only happen to sell five of these luxury homes per year, you just lost 20 percent of your average annual revenue.
Do not assume that everyone experiences the Web exactly as you do. In fact, do not even presume to design only for the most popular screen resolution du jour, even if the favorite’s market share is overwhelming. You never know when a potentially very important client or customer will belong to the minority.
Design web pages that, while perhaps not as rigidly “pixel-perfect” as a print magazine page layout, are clean, professional and usable at a wide variety of display resolutions and screen sizes and on all popular Web browsing software and devices.
Professional designers tend to prefer smaller text because, well, it just looks better. Yet, the largest age cohort of the population—the baby boom generation—has reached age 50 and has declining eyesight. And lest you think accessibility is just for vision-impaired Web users who require screen readers, the reality is that most of us will likely require accessible design features at some point.
The World Wide Web Consortium (W3C) establishes standards for creating and interpreting web-based content. Web standards are designed to deliver the greatest benefits to the greatest number of Web users while ensuring the long-term viability of any document published on the Web.
Designing and building with standards simplifies and lowers the cost of production, while delivering sites that are accessible to more people and more types of Internet devices. Standards-based sites will continue to function correctly as today’s Web browser software evolves, and as new Internet devices become available.