4. HTML Design Guidelines
4.1 Usability in Design
4.2 Form vs. Function
4.3 Page Weight Considerations
4.4 Cross Browser/Platform Functionality
The goal of a competent Web Designer should be to create a website design that effectively communicates your message to the reader. When a design becomes bogged down by extra "attention grabbing" non-related content or features the original point of the website is lost. Throughout the net, people have written guides for what to do and what not to do when designing for the web.
Often when designers move from the world of print to the World Wide Web they forget a crucial fact: The web is not a magazine. Print is 2-dimensional while, while the web is simultaneously 1-dimensional and N-dimensional. A web page is fundamentally a scrolling experience for the user as opposed to a canvas experience. Jakob Nielsen of Useit.com describes in detail the differences between print and web design.
The fundamentals of Usage Centered design listed below have been adapted from Usage-Centered vs. Traditional Web Design
- Identify essential user and business purposes of the site.
- Understand targeted users by roles in relation to site.
- Understand tasks in terms of user intentions and needs.
- Prioritize user roles and user tasks in terms of expected frequency and business importance.
- Engineer site design to fit user and business priorities.
The main push to make sites more functional in regards to the user is in direct response to the massive amount of wasted bandwidth (not to mention money) in the world of webdesign. So many designs sacrifice readability, clarity and functionality in favor of flashy design elements that do nothing to convey the actual message of the site.
Basically all this means is any site may be effective or ineffective depending upon its success in delivering what you need to the audience.
A website's primary function is to communicate. If it's form overpowers it's functionality it becomes useless to the viewer wanting to receive/communicate information. The ideal balance between the two is a solid balance of form and function to deliver the envisioned idea and to generate the ideal user experience.
The key aspect of finding out a site's functionality is involved in the intial reason for the site's existance. While developing any successful web site it is important to have a strong purpose and to follow that to the end. The style of the site should not complete obscure it's substance. Ideally a balance should be found between the two that allows for a consistent user experience while maintaining the site's information and functionality.
"Good design is clean, elegant layout that is easy to read and simple to navigate."
-The Sevloid Guide to Web Design
Minimizing the number of graphics on your pages and keeping the size of the graphics you create to a mininum is crucial when creating a web site intended for a modem using internet audience.
If, on the other hand you have an audience that will be loading the site locally (through their CD-ROM) or a *confirmed* broadband, high-speed internet audience. You could worry less about minimizing the download time.
It is generally a good idea to keep in mind the user's experience when surfing a page on a modem. Too often designers and clients who view pages on a LAN with high speed connections forget to test their pages for loading quickness on a small desktop PC or laptop connected to the internet through a standard dialup connection.
Advice on how to fine tune a web site for optimum loading is available at the Sevloid Web Design Guide
The techniques used to increase the download speed for a page are constantly evolving. Web Designers have always been creative in coming up with solutions and tricks to keep a page's weight to a minimum. Some of these tactics are listed below:
- Use text wherever possible instead of large rendered graphical text (images displaying text).
- Minimize the number of graphics
- Minimize the colors in the gifs you use. When exporting gifs select only the colors neccesary for the image to look nice and still load quickly.
- Try and repeat graphics if possible. Once a graphic has been loaded it stays in the user's cache and is immediately displayed when used on subsequent pages.
- Preload the graphics of the next page on the current page and display them as 1 pixel x 1 pixel graphics at the bottom of the page. They should be unnoticable. While the user views the current page, the graphics quietly load in the background. When they move to the next page, the graphics should come up straight away.
- When designing a page that carries a large amount of information in text add an index of the main topics in the document and link to each section within the document using anchor tags. This HTML manual uses this technique; view the source of this page to see how it's done! ;)
"Anyone who slaps a 'this page is best viewed with Browser X' label
on a Web page appears to be yearning for the bad old days, before the
Web, when you had very little chance of reading a document written on
another computer, another word processor, or another network."
-Tim Berners-Lee in Technology Review, July 1996
Try to only use browser specific tags in appropriate manners, and only if there's a good reason for their use, and in the cases in which I've used tags which only some browsers support, such as image maps, frames, Java, etc., Do your best to utilize the graceful degradability options available in HTML or provided alternatives for browsers that don't support them. Use Backwards compatible DHTML if you want to make your pages interactive and still viewable by older browsers.
Since the early hectic days of the internet Web Designers have struggled with browser compatiblity. The internet is used by a huge audience and each user might have a slightly different type of computer, operating system or browser. Keeping to some set standards when writing html code can reduce headaches induced by netscape or IE specific bugs in a website.
Several organizations grew out of this obvious fact, most notably the "Viewable With Any Browser" campaign run by Cari D. Burstein. She has written a manual for Accessible Site Design which is available for download here.
Web standards are a constant struggle to enforce on Browsers. During the infamous Browser Wars of the late nineties web standards were largely ignored by the major browsers. This led to unique proprietary code for each browser. Developers were horrified when pages that had worked flawlessly in one browser would crash and burn when viewed on a different browser. The Web Standards Project F.A.Q. has made it their mission to support these core standards and encourage browser makers to do the same. Read more about it in their mission statement
Keep in mind when designing your pages that the ways people browse the web are always evolving. As hand held portable computers are increasingly used to surf the web designers and programmers should seriously consider the advice of the organizations mentioned above.
Colors
There are many resources that discuss the The Browser-Safe Color Palette that uses the 216 colors that appear the same on Macs and PC's. Lynda Weinman has a handy and informative site about this magical color pallete.
 Visibone.com has a killer Webmaster's Color Laboratory and loads of resources for keeping the web's hexadecimal color pallete in your design process. Check out their awesome swatch pallettes for Adobe Photoshop, Illustrator and ImageReady, Macromedia's Fireworks, BBEdit and Allair's HomeSite. If you use Photoshop to make graphics or you use Homesite to write HTML these swatches are mandatory downloads.
Dynamic HTML has long been a sore point of discussion because of the same problem discussed above. Fortunately there are many people who have come up with cross-browser DHTML solutions. James Robertson claims there are only 9 Cross Browser Events for Dynamic HTML in an article published in Webreview.com.
|
