Things Every Web Designer Should Know

by David Rodriguez — Feb 6, 2008

We get a lot of e-mail from people asking for ways to be a better Web designer. There is no simple way to answer a question like that, but the majority of the time we find that a designer has been exposed to HTML and Web design in such a way that he or she is designing pages and uploading them to the Web, but was never shown some of the essentials of Web design.

If you're a new designer or you're already building pages and need to up your game, read on. These are the things that every Web designer should know.

Web Design Basics

First, you need to sit down and think about what your goal is with your Website. I already have the answer to that question for you, but do you?

You may immediately come up with answers like, "to make money," or "to tell my story," or "to keep up to date with friends." These are the ideas for your site, but they most likely are not your goals.

You may not know it yet, but your goal with any Website is to have it seen. You won't make money, share your story, or keep up to date with friends if nobody sees your site. Even worse, you won't accomplish any of these things if someone does see your site, but quickly turns away. The only way to keep your visitors from leaving your site almost immediately is to have a good, effective design.

Web design is so open-ended and the ways to build your website are numerous. As with anything else, though, it's good to have structure when building your site and always keep a handle on the best practices. Below you'll find a few of the most important rules and guidelines to designing an effective Website.

This is Rule Number 1, and the Number 1 Rule: Keep it simple. Don't make the user think about anything! The key words to remember are "instant gratification." The Web is becoming faster and filled with more and more information every day. Users have the freedom to pick and choose whatever medium best suits their needs the fastest, and you can bet they will instinctively exercise that freedom at every opportunity. If your website doesn't immediately and effortlessly meet their expectations, they will click their Back button and get right out. This rule will be emphasized more a bit later, but always keep this in the back of your mind.

Know your HTML. This one may seem obvious at first glance, but there are too many people out there using WYSIWYG (what you see is what you get) editors and trying to pass themselves off as "web designers" without knowing any HTML. Don't get me wrong; I think WYSIWYG editors have their place among the consumer base, but they're simply not the right tool for a completely effective and successful Web design that will hold a visitor's interest and make your ideas worthwhile.

There are plenty of places online where you can get some basic HTML training, and of course you can always keep an eye on WPDFD for new ways to do things in HTML. If you don't know HTML and are serious about building an effective Web design, you can start by perusing the links below to get a handle on HTML.

Use "Web safe" fonts. There are hundreds of thousands of fonts nowadays, but only a small handful of them are considered "Web safe." Not every computer is going to have every font installed, so when you use a font on a Website that a visitor doesn't have, their web browser will default to a fallback font. The fallback will likely make your design look much uglier on the site and deter visitors if it's difficult to read.

You can find a list of Web-safe fonts here.

Stick with standard layouts. Naturally, as a designer, it's fun to get creative every now and then and come up with a site that doesn't follow conventions. Maybe your site is completely Flash-based and uses the keyboard's arrow keys for navigation, or maybe your site scrolls left and right instead of up and down. While these designs are creative and make a statement, they are not effective designs. This is because users, when they visit a website, expect a standard convention. Sites like these cannot be easily scanned or navigated, and it slows the browsing process. If the experience is jarring in any way, you're likely to lose a visitor.

Good, standard layouts can be found everywhere. Take a look at this very site, WPDFD. It's a two-column layout with top main navigation and a header/footer. It's simple and the focus is on the content. Your browsing experience isn't hindered in any way. Other sites with good, clean and usable designs include A List Apart, Simplebits, and artypapers. Oh, and of course, you can't forget Google and its host of utilities.

Try to keep images small. Not necessarily physically small, but small in file size. It's true that a majority of users are connecting with a broadband connection these days and page loading time is not nearly the concern it was back in 1998 when the majority of users were dialing up to the Internet with a telephone line. But bandwidth is still a concern for a Website, especially one that hopes to attract a lot of traffic. Primarily, bandwidth costs money. Secondly, if you keep your site's filesize as low as possible, your site will load up blazing fast on a broadband connection, and that still impresses users today.

On the same note, try to keep code clean. Using good coding techniques will keep your site's HTML small and easy to maintain, and again, it will conserve bandwidth and help your site load faster, which is what visitors want. If you used any of the links above in the "Know Your HTML" section, you'll learn how to code proper HTML. There are steps you can further take, though, and practices to avoid common pitfalls, that you can find in the following links.

Avoid distracting elements on the page. Distracting elements, like animated gifs or Flash animations/advertisements with too much movement and action tend to distract a visitor. If your page is riddled with this kind of distraction, your content becomes more difficult to find, and even worse: it becomes more difficult to read when the visitor does find it. This is a good way to push your potential new visitor right out the door, and expect them never to come back. If you have a good reason to use an animated gif, use it, but keep it part of your content, not part of your layout. An animated gif of a weather radar in an article discussing precipitation patterns is fine, for example, because it furthers your content. An animated gif that spins in your sidebar that says "E-mail Me!" is a distraction, and just a decoration. Avoid decoration of this sort.

Advertisements are often flashy and animated. It's important to make money off of your Website, but try to keep a policy in place where advertisements must not be too flashy and they should remain as relative to your content as possible.

Users Don't Read, They Scan

An important concept that you'll want to keep at the forefront of your mind while building your Website is that the average Web user is looking for instant gratification. You need to keep things simple as your site is only one of hundreds of thousands out there and if your site doesn't meet visitors' expectations immediately after they see it, you'll lose them. Again, it's important to reiterate: keep it simple.

It would be ideal if every visitor read and analyzed every portion of a Web page, but they don't. Instead, they quickly scan your page for the following things:

  • The information they're looking for
  • The pictures they want to see (if any)
  • The place to click to get further on your site.
  • The way out, or the way back.

The first two things you see on the above list have to do with the user. Those are the "instant gratification" items. If they can't find these things immediately (a span of a second or two), they look for the next two, which deal with your design and the functionality of your site. If they can't quickly, effortlessly, and easily find all the places to click to get further on your site, they'll look for the last option: the way out. This is usually their browser's back button.

Eye-following studies have been done to determine where a user looks when browsing the Web. In the results of these studies, you can see that users follow an F-shaped pattern when scanning your page, and their attention is held very shortly on entire sections of the page that don't immediately suit their needs.

Because users are so easily deterred, it's important that you keep your design clean. It's possible to make a design that is good-looking and functional at the same time. The design should serve a purpose and never be fully decorative. Always remember: content is king! The content is why you created your site, and it's what the users are there to see. Make it as easy as possible to get to, and as easy as possible to read. To keep it easily-accessible, make sure your navigation is easy. If a user can't easily identify the ways to get around your site, the user won't be around long.

To be sure your navigation is easy to use, try to build a design that, at a glance for the user, can answer the following three questions:

  1. Where am I? (Present)
  2. Where can I go? (Future)
  3. Where have I been? (Past)

Your site should have indicators or some sort and links that answer all these questions without the user having to click their back button or read the page URL. A List Apart has a great article about navigation that is well worth your time to read.

Browser Compatibility

A Web browser is an application that allows a user to access the World Wide Web. Popular web browsers include Internet Explorer, Firefox, Safari, Opera, and Netscape.

Not all browsers were created equal. IE displays things differently than Firefox does. Both of these may display things differently from Safari, Opera, and Netscape, as well. Basically, all Web browsers have a tendency to display pages slightly differently. This is a problem for Web developers, and the problem is deepened by the fact that different versions of different browsers exist, and visitors could be viewing your page on any one of them.

Different operating systems will also affect how a page looks. Coffeecup Software has a brief article about this topic that you might want to check out, as it goes into a bit more detail about the different types of web browsers, operating systems, and how they affect how a page can look so different in various browsers.

A big part of helping your site grow is to make sure it's accessible to the greatest number of users possible. To do this, you'll want to declare a DOCTYPE in your pages.

At the time of this writing, there are three current standards for coding a Web page. They are HTML 4.01, XHTML 1.0, and XHTML 1.1. HTML 4.01 is currently the widest-used standard on the Web, with XHTML (a combination of the XML markup language and HTML) being adopted at a fairly uneven pace. XHTML requires that you write well-formed code, whereas HTML 4.01 (especially in "transitional" format) will be more forgiving in your coding.

If you're just starting out, you will want to begin with a DOCTYPE of the HTML 4.01 variety. The DOCTYPE declaration needs to go at the very top of your page, so feel free to copy and paste one of these declarations at the top of your HTML document.

HTML 4.01 Transitional

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"  
"http://www.w3.org/TR/html4/strict.dtd">

If you have an older Website and are making the transition from older markup techniques to newer practices, you'll want to use the transitional DOCTYPE. Transitional may also be a good choice if you're just learning HTML/CSS.

HTML 4.01 Strict

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  
"http://www.w3.org/TR/html4/loose.dtd">

The Strict DOCTYPE is for pages that are written the way HTML 4.01 was constructed to be written. Be careful when using a Strict DOCTYPE; it requires that you really know your stuff. Certain attributes (like "align," "bgcolor," "link," "alink," and "vlink," just to name a few) aren't allowed in a Strict DOCTYPE. The benefit to using a Strict DOCTYPE is that more browsers will be able to render your page in a way that is satisfying to you, rather than having to work around a browser's shortcomings. This is because a Strict DOCTYPE emphasizes structure over presentation; it tries to completely separate the HTML code (the page) from the CSS (the design and presentation). Built in this manner, your page will be highly compatible with a large number of the most popular browsers.

HTML 4.01 Frameset

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"  
"http://www.w3.org/TR/html4/frameset.dtd">

If you're building a site with frames (which isn't really recommended), you'll use this DOCTYPE on your frameset page. However, you should stay away from frames if there is any possible way... and there's always a way to stay away from frames.

XHTML
Like HTML 4.01, XHTML 1.0 also has Strict, Transitional, and Frameset DOCTYPEs. XHTML of all types must be well-formed, meaning all of your quotes must be in the right places, your tags must be closed in the proper order, and tags that don't usually require a closing tag (like <img> and <br>) are now to be written as "self-closing." A self-closing tag includes a forward slash at the end of the tag to indicate that it's closed. For example, in HTML, the <br> tag is sufficient and there's no need to close it. In XHTML, you'll make the tag self-closing by typing it as <br />.

The XHTML 1.0 Transitional DOCTYPE serves the same purpose for XHTML as the HTML 4.01 Transitional DOCTYPE serves for HTML. That is, for Web pages that are using older markup, you'll want to use the Transitional DOCTYPE, but build new sites with the Strict DOCTYPE. Again, the Strict DOCTYPE is much more restrictive, but separates the page coding from the design, making your page much easier to maintain and more cross-browser compatible. Below you'll find all the XHTML 1.0 DOCTYPEs.

XHTML 1.0 Strict

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

XHTML 1.0 Transitional

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

XHTML 1.0 Frameset

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"  
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

XHTML 1.1 DTD
XHTML 1.1 is an even more restrictive and technical version of XHTML 1.0 Strict. XHTML 1.1 is Module-based XHTML, which allows developers to create documents that can be extended to allow other XML-based applications to use small bits of XHTML in a well-defined manner. XHTML 1.1 removes practically all presentation-based markup (like the center tag and frameset option, among many others) and makes CSS the sole method of presentation for the page.

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"  
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

Most Websites do not use XHTML 1.1.

The Future of DOCTYPEs

In the future, as far as page rendering is concerned, DOCTYPEs are likely to take a back seat to something on the horizon called "version targeting." Internet Explorer 8 will be the first browser to implement it. Using version targeting via a <meta> tag, you'll be able to lock a web browser into displaying any given page as if it were rendering in a specific version of that browser.

For example, if you have a Web page that looks great in Internet Explorer 7, but looks bad in Internet Explorer 8 (when it comes out), you will be able to use a single line of code on your page that will tell IE8 to display the page the way IE7 would, and your rendering problem is apparently solved.

There is much controversy over version targeting. Read our neutral article on version targeting to learn more about it; it's too much to go into here.

Either way, no matter what happens with DOCTYPEs and version targeting, you'll want clean code and to test your page AT LEAST in the most popular browsers of the time. At the time of this writing, those are Internet Explorer 7 and Firefox 2. If possible, test in more browsers. There's a simple rule to remember here: TETO. (Test early, test often.) It's not a good idea to build your entire page, spending hours or days on it, then test it out in a second web browser only to find out it doesn't display as you like. Each time you add something new, test your page in multiple browsers. Test early, test often.

Keep Yourself Up To Date

Staying on top of the news in Web development is important as a Web designer. As with any kind of technology, Web design is in constant flux; it's always changing and evolving. To continue to build effective Web designs, you must grow with the new technology, methods, and trends. This doesn't mean you have to start devoting lots of time to independent study and research (though if you enjoy Web design, by all means go right ahead), but it does mean you should occasionally check up on what's new in the Web design community.

A great way to stay up to date is to find Websites you like that provide the information that most pertains to you, and use their RSS feeds to keep tabs on new updates. Begin by subscribing to WPDFD's RSS feed - http://www.wpdfd.com/articles/feed/ - then you can use your favorite reader to see exactly when a new article is published.

Other popular sites to keep tabs on include A List Apart, Jeffrey Zeldman Presents, Simplebits, SEOmoz, and The Web Standards Project.

It's also a good idea to register for a few good Web design forums. You can ask questions and get feedback from other designers and often you'll find answers and have some of the most interesting conversations amongst your fellow developers. Try out the WPDFD Web Design Forums or give the DesignersTalk Forums a shot.

So There You Have It!

So there you go. A crash course with plenty of links and resources regarding some of the most important things every Web designer should know. If you're new to Web design, this article should be of great help to you. If you're already a designer, I hope this served as a nice refresher course! If you have any questions or anything to add, I'd be happy to hear your feedback. You can reach me at drodriguez@wpdfd.com.

Del.icio.us Digg Technorati Blinklist Furl reddit Design Float