Effective and Elegant Web Layout
Effective and Elegant Web Layout
Design and layout are not easy. People go to school for many years to do it well, and top designers earn lots of money. Nevertheless, there are certain principles to effective design that will help you create a good Web site. Look through some of these on-line resources we have collected, and then read the manifesto.Web Design 101
This entertaining introduction asks several important questions that need to be addressed even before the site is begun. The site's design depends mostly on the purpose and target audience. Read this before you begin.Tips For Writers and Designers
An opinionated but exhaustive and useful resource for Web designers, written by Dave Siegel. A great deal of the information in his site is for WWW designers wrestling with the finer points of HTML, but some is very applicable to ShopSite store design.Creating Graphics for the Web designer
This is especially useful if you are struggling to convert existing logos and graphics to a Web-ready format. It is quite Mac-specific, and mostly useful if you're using Photoshop. It's pretty technical, but it's kept up to date and it's thorough. It covers how to change EPS into bitmap images for the Web, how to optimize Photoshop for Web work, and what gif and jpeg are best used for.Yale Web Style Manual:
This is an on-line textbook. It's not flashy, but it's a complete and insightful lesson. Almost a complete college course on effective, utilitarian Web layout. You won't win any awards if you follow these guidelines, but you will satisfy your customers by making your site consistent and easy to navigate.A Manifesto: Heinous Internet Design Crimes, Etc.
Below are some of the things I have learned over the past few years about effective layout for World Wide Web documents. You don't have to follow all these guidelines. You may not even agree with them. That's fine. I hope you read them anyway.
Reading text on a computer screen is not as comfortable or convenient as it is on a printed page. We need to overcome this obstacle by presenting our text as elegantly as we can. Some of these hints are attempts to overcome the medium, some are simply conventions that the Internet community has adopted over the years.
Don't write in ALL CAPS. ON THE INTERNET, THIS IS REFERRED TO AS SHOUTING. IT IS CONSIDERED RUDE. Can you see how terrible that looks? If you would like to put emphasis on a particular word, use bold face type. Besides, as you probably noticed, text in all caps sticks out unattractively. The occasional title or heading in all caps can be appropriate in some circumstances, but I prefer to use a heading tag or large fonts.
Break up long blocks of text. People get tired of reading on the computer screen. The rule of thumb is be brief. If you have plenty to say, consider putting a blank line between paragraphs, like I am doing in this manifesto. To do this, insert a "<p>" between the paragraphs you would like separated. If you would like to end a line but not put a space between it and the next, use the "<br>" tag. Text has a tendency to look hodgepodge on the Web. There is a careful medium between huge unreadable blocks of text and lonely, disjointed lines.
Don't use distracting characters. They make the text assaulting to the eyes and difficult to read. Use exclamation points and question marks sparingly. ?????? and !!!! look terrible. Too ... many ... ellipses ... also break up the continuity of the line and make your text look less-than-professional. Bold type slathered liberally throughout the paragraph also reduces your page's appeal. Take a look at your favorite book and see how carefully a good author uses linguistic bells and whistles. (If your favorite book is Howard Stern's biography, forget I even said this.)
While I'm on the subject, don't use exclamation points unless you're exclaiming. And try not to exclaim very much. You don't want to appear too eager, especially when you're trying to sell something. Use the power inherent in the words, without falling back on punctuation to make your point.
If you put "quotes" around everything, then "quotes" lose their meaning. Use them sparingly. Use them when you're using words that are not your own, either a direct quote, or a word that you would not choose yourself. For example, whenever I use the term "information superhighway" I have to put it in quotes, because it's a stupid term that the media made up. If I use it in quotes, I'm poking fun at the word.
Keep images small. This is useful for both speed and aesthetics. If you are displaying an image that must be seen in great detail, like a painting or photograph that you are trying to sell, a full-screen image is fine. But if it's a logo or a picture of a product, make sure it takes up less than a third of the screen's height and width. For most images, if it's recognizable, it's big enough. As far as the size of the image file itself, try to keep them around twenty K. For more advice about images, see the graphics guide.
If you have images that will be appearing in a column, keep them a uniform width. Since ShopSite lists your products in a single column, if your images are all the same width, your store will look neater. Most image editing software will allow you to indicate a particular width in pixels.
Over all, take time to make good quality images. People will judge your products and services based on the look and feel of your site. Poor quality images will reflect badly on you. If you have a hard time getting your images to look good, hire someone to do it for you.
No Flashing Text! This is one of my biggest pet peeves. I wish it had never been invented. I suppose there are some instances where it is useful, when something is extremely urgent. In most cases, though, it is only distracting. Your eyes are drawn to it even when you're trying to read something else. (I suppose it could be useful to distract somebody so they don't read the small print... heh, heh).
Turn off underlined links in your own browser. When the WWW was first developed, many people still used monochrome or grayscale monitors to browse the Web. Now, color monitors are standard. If you have a color monitor, you don't need a link to be underlined so you'll know it's a link. Right now there's no way to make other people's browsers turn off underlining, but I wish there were. You will not believe how much better everything looks.
Back to Main Help Page | Search | Give Feedback
If you are not finding the help you need, please give detailed feedback.