Note: While this article was originally written in 2010, it seems like decades ago. So many of these rules, especially those that have to do with layout size, are outdated, and should only be used as guidelines, not hard-and-fast rules. Stay tuned for a follow up article on new guidelines where things will just a bit more...modern....
I get asked all the time by new designers what they need to know about designing a web site. Here’s a list of the most important ones that will get you started:
960 pixels wide is the standard width for most modern web sites. There is no rule for height since pages can be scrolled, although, you should place the most important page content “above the fold,” or within the first 500 pixels of the top of the page.
Why 960? Because it's the maximum width rendered by the greatest number of monitors while still allowing room for vertical scroll bars. For many visitors with older monitors, any page content beyond 960 pixels will hang off the side of the page, forcing them to use a horizontal scroll bar to see what’s there.
If you’re used to seeing your work displayed on a giant new monitor — as many designers are — seeing your designs on an older machine can be a little jarring. But if you never underestimate the number of people with ancient monitors, you will never be surprised by how your design is rendered.
One note: As older monitors die and get replaced, this dimension is likely to increase. (Many sites use 1024 pixels wide, but 960 is still safer.) Feel free to make the page width smaller, but be aware that in the majority of cases the client will eventually demand the use of the full page real estate to display large-size graphics or advertising, so it will be back to the drawing board sooner than you think if you go too narrow.
BTW: Forget about liquid layouts — clients hate them.
2. Column Widths
There is slightly more flexibility when it comes to designing column widths in web pages: Make them any size you want, although if you design with a grid, there are some restrictions. (See item three.)
If you ever have any intention of displaying advertising, you should review the standard internet ad sizes from the Interactive Advertising Bureau and take these into account when developing your layout. (If your columns are too narrow or too wide, you’ll have problems when its time to serve ads.) Considering these sizes alone, no column would be smaller than 120 pixels wide.
If you don’t plan on ever serving ads, one golden rule for column width (for both print and web design) is that type should never run more than 2.5 alphabets across a column. (In other words, type a sentence and count the number of letters and spaces in the sentence. The lines should break when you can count 65 letters and/or spaces wide.) This is said to improve overall readability and makes column width a direct function of type size. Keep in mind that this is just a rule of thumb, but it tends to produce really legible columns.
One of the most important changes in web design in the last several years is the widespread adoption of CSS frameworks by web professionals. These systems allow developers to rapidly create complex layouts that would be all but impossible to display across a wide variety of browsers. (Try producing an 8- over 2- over 5-column layout in Internet Explorer 6 that displays correctly if you’re not using a css framework. Didn’t think so.)
Grids also provide a method for graphic designers and coders to work together to achieve pixel-perfect designs. Using a grid, designers can spec columns based on grid units rather than pixels, making column specs a much easier proposition. Grids can even be printed out on paper and used during layout brainstorming sessions.
Using a grid framework, a 960 pixel-wide page is usually broken down to 12- 16- and 24-column units. (Other column breakdowns are possible, but these are the most common and usually offer variety enough for any project.)
The width of these columns are dependent on the particular framework the team is using. (There are several frameworks worth using: Blueprint CSS and 960 Grid are two of the best. They function approximately the same way, and their usage is more a matter of personal preference, although technically, Blueprint CSS is a tiny bit smaller — 950 pixels wide — to accommodate really, really old browsers.) If you don’t already use a grid system for day-to-day design work, you really should check them out. They are the foundation of almost all modern design and they bring a level of organization to site layouts that are otherwise all but impossible.
The final size for images on the web are 72 dpi at 100% size. Use .gif format file for vector (line) art and use .PNG or .JPG format for photographic images. This standard size can seem a little low-resolution compared to print graphics, but anything larger is extraneous data that will be thrown out when the browser loads the image. (When that happens, you gain nothing in image quality, but the page loading time takes longer and you burn through more bandwidth. Neither are a good thing.) Before you sign off on any artwork that will be displayed online, double check that you are working at 100% size, and that the resolution is set to 72 dpi.
One of the biggest changes coming to web design is the @font-face css property that will allow designers to embed almost any font into their page layouts. However, while the technique is clearly the trend of the future, there are still enough legacy browsers out there to recommend taking a more traditional approach. That means that you should (for now) stay old-school and limit your choices for body type to those found natively on the most common operating systems. A list of the most common web-based fonts can be previewed here. To get a preview of what system fonts look like on screen, visit typetester.org, where you can test to your heart's content.
Using only native fonts in web layouts can quickly grow tiresome to both designers and visitors, so you can use other fonts when required. However, if you need to use display fonts these should be limited to short snippets of text that can be saved as gifs and displayed as images rather than text. (That way, every browser—even those without the fonts available to the system — can render the type as an image.) Typically, section headers are ideal for this use.
Keep in mind that it’s not a great idea to use display fonts for navigation if you foresee the site’s navigational structure ever changing, or if you are using a content management system like Drupal or Wordpress. The use of graphics in these circumstances limit the ability of the client to make structural changes to their website, since the designer will have to revise the type graphics. Again, this isn’t a fixed rule. Simply a recommendation.
Online colors aren’t described by Pantone or CMYK values. Instead, they’re described by Hex numbers or (less often) color names. There are all kinds of site on the web that list colors and their various values. Here’s a great one. Keep in mind that colors outside of these values can look very different on different machines, so if a color choice is critical, you are advised to stick with one you can preview on several different browsers and platforms.
There are many ways to tell what colors are used in a web site. One of the better ways is through tools like ColorZilla, a plug in for Firefox that allows you drag an eye dropper across a web page and click on a pixel to return a color reading.
7. Color Gamuts
One of the biggest surprises new graphic designers find during web projects is that colors rendered on a web page are often far more, or far less saturated than those of the original graphic. The issue isn’t that the browser can’t display the color, it’s that the browser maps pixel values slightly differently. The only way to overcome this issue is to work in the proper color space to begin with.
Fortunately, many graphics programs allow you to adjust the way your file displays. Take Adobe Illustrator, for example: When you’re working on an image for the web, make sure to set the display preview to Monitor RGB. This will show you a better idea of how colors will render when they appear online.
The word “flash” is commonly misunderstood by both clients and new web designers. To the uninitiated, flash refers to any animation on a web page. Technically speaking, it’s a file type created through Adobe Flash that can be used for achieving a number of different effects including animation.
This graphic format is criticized for being unfriendly to search engines and an unnecessary filetype that can stand between users and content. Some of these criticisms are well-founded, others not. It’s probably best to just leave it at this: There are times when Flash is useful, but many of the most requested capabilities can be provided without the need for the actual flash format. Photo montages or fade-outs between images can usually be achieved without the use of any flash animation whatsoever. These alternative techniques usually use less bandwidth, are cheaper to develop, and are viewable without any additional browser additions.
All clients want their web site to be found online, and every new customer wants to have their site appear on the first page of Google. Making this happen is called Search Engine Optimization and it’s one of the most misunderstood areas of web development.
SEO techniques will merit another article, but here’s what you need to know as a designer:
- Search engines love text, and they love home pages. With that in mind, the more text on the front page, the better. You don't have to skip photos or graphics, but never bump text in favor of graphics, and never, ever use a photo alone on your home page.
- A well-optimized web site is easy to navigate through for both humans and machines. That means that not only should your content be organized in a logical order, but the various sections should make sense to someone who knows nothing about your company or web site. If you make things easy for humans to find, search engines will have no trouble cataloging your content. Incidentally, you shouldn't have so many categories that it's necessary to hide navigational elements to save space. (That's right, we're talking about drop downs and fly-outs, those navigational elements that spring to life when a user hovers their mouse over a link.) Sure, lots of people use them, but that doesn't make it right. If you have to hide navigational elements, you're doing something wrong.
- If your site has anything to do with e-commerce, get as many products on the home page as possible and include “buy now” buttons everywhere you can, especially on home-page products. As a designer, this may not fit with your artistic vision, but it will increase sales for your client. Most visitors will never travel beyond the front page, and if they don’t immediately see what they’re looking for on the front page, no sale. This is the most important rule of ecommerce: Get the products up front.
Your final designs can be delivered to a developer in almost any format, including Photoshop, Illustrator or PDF files, but they should ALWAYS be delivered at final size. (So, for example, if you're working in Photoshop and building a site for a 960-grid layout, make the design fill a 960 pixel-wide area edge-to-edge at "actual pixel" size.)
Make the comps as detailed as possible. This means that at the very minimum, you need to provide comps for the the home page, at least one interior page showing a section, and at least one page showing a single story. All link types should be spec'd, such as the "read more" link, the "number of comments" link, the date line, the by-line, etc. Any other specialized pages, like contact pages or special profile pages should also be delivered.
Spec body type and sizes for common HTML elements, including header tags (H1, H2, etc.) Spec any display fonts that will display as images in special section headers. Spec all links, including how the link should look when first viewed, how the link should look when the mouse hovers over them and how they look after the visitor clicks through. One thing about specing type: The important specs for type are font family, color and percentage size.
Don’t worry too much about what is and isn’t technically possible: For a good developer, anything is possible. Instead, concentrate on creating fresh, clean original web designs. Your overall goal should be to leave almost no aesthetic decision in the hands of the developer. Remember — It’s the job of the developer to turn your vision into reality, but It’s your job to deliver completed designs.
Looking for a developer to help you out with your next online project? Find out more about our services for graphic designers.