Web Design Basics
An Introduction to Web Design - Design Issues
Web Accessibility - Web Design Resources
An Introduction to Web Design
Web design is a multi-faceted term for a variety of skills used to produce anything from an accessible document to a multi-media experience. From the earliest beginnings (where the intention was simply to place scientific documents on-line for viewing by other scientists) the Web has grown from an estimated 50 Websites worldwide in 1994 to the current millions and millions of sites for every purpose.
A Note About Capitalization
The term "Web" refers to the World Wide Web and is therefore correctly capitalized in this context, as is the term "Internet" which refers to the world-wide network that includes the Web.
Challenged by Technology
While most users just want to use their current Web browser to view the various Web sites they visit, the Web designer must be aware of the capabilities and shortcomings of the various browsers in use. When you publish a book or a poster, you don't need to worry about what software or hardware the reader has. It is a greater challenge to design a workable Website than a similar document on paper.
Different Browser, Different Experience
In surfing various Web pages you might notice that the differences in the ability of various Web browsers to portray specific enhancements. Some pages are designed only with one browser in mind, sometimes creating unexpected results when another browser is used. There are differences within the same operating system (never mind between different platforms). There are also tags that work in one browser but not in another or only in the later versions of the browser.
You need to accommodate the various browsers if you want visitors to your site to be able to load your pages properly. I recommend that you use an HTML Validator that checks for browser compatibility and for the correct use of HTML code.
These challenges have led to a broad range of solutions (or hacks) to make pages appear relatively similar across the wide range of mediums. HTML was never intended by the inventors of the Internet to carry the variety of content that we see today. This was further complicated by the fallout from Microsoft's war on Netscape where the user (and security) was completely ignored in the pursuit of corporate objectives.
Purpose Drives the Direction
The nature of the Website you are building and its relative importance will determine both the investment of resources that you put into building a site and the nature and integrity of the content.
Hobby Sites
There are thousands of people expressing themselves on Websites with everything from displays of their interests to a more recent trend of Web logs (blogs). Very few of these people are purchasing either expensive software or the services of a Web designer to build or maintain their pages, yet there are some extraordinary sites on the Web.
Blogs
There are several blogging sites that provide the space to present your point-of-view or content on the Web for free. With the use of templates, you can change the look of your site without losing the content or necessarily understanding the structure of how the site works, using a push-button technology and editing the content in a manner similar to your word processor. The following are excellent blog sites:
However, there are limitations in the structure of the page and in how the site is laid out based upon the provided templates. You can create your own template if you wish to learn how, but the underlying technology creates certain limitations.
Business Solutions
If your purpose is to promote a business or to build an e-commerce site to expand a current business, your needs are different and the resources you expend to achieve these goals will probably be different.
Many people will at least consider learning to build their own site or to hire someone with relatively little experience to build a site for their business. This is often because they don't understand what is involved in building or maintaining an effective site.
Consider what is at stake. Would you let an amateur design your brochures and other promotional material? For some, a simple brochure is all that is required, but if your business needs a professional image, you will probably need professional assistance.
The resources on this page and the other related pages on this site should give you enough information to decide on the route you wish to take. At the very least, you will have informed yourself before making your decision.
Design Issues
HTML
HyperText Markup Language (HTML) is still the dominant format for creating Web pages and Websites. HTML is now enhanced by many other add-ons and standards including JavaScript, Cascading Style Sheets (CSS), Extensible Markup Language (XML) and Document Object Model (DOM).
HTML Primers
This site offers a very basic introduction to HTML called Cut 'N Paste HTML Editing. It is intended for those wishing to edit an existing hand-coded HTML document using cut and paste techniques, but will also introduce you to a general understanding of how HTML works. There are also more detailed HTML primers and courses available to you.
Cascading Style Sheets
Further down the Cut 'N Paste HTML Editing page you learn about cascading style sheets (CSS) and how they can made alteration of site design easier and reduce the repetitive code found in earlier HTML models.
Separating Content From Layout
CSS is a whole new realm of layout and styling of your page. CSS can replace tables for layout, removing a huge design complexity for those simply editing the page information. CSS can also reduce the amount of code necessary to display the text in the fonts, colours and styles you wish to use. Instead of having to define every instance in your site, you can list the details in one or more external Cascading Style Sheets that affect your whole site.
Two illustrations of the power of this concept are:
- css Zen Garden: The Beauty in CSS Design uses different style sheets to create spectacularly different views of the same content.
- Eric A. Meyer's Complexspiral Demo uses different backgrounds to render the page differently. The page content is slightly more technical, and demonstrates flaws in Internet Explorer 6's rendering of the effects, requiring a standards-compliant browser (like Firefox) to render the page correctly.
In neither case could both the effect and flexibility be created using traditional layout methods without rendering completely different pages.
CSS Resources
There are a number of sites on the Web that offer these resources. If you are interested in coding I strongly recommend the books from SitePoint. There is more information and links in the Coding Solutions section of the Web Design Resources page.
Hand Coding or Software Tools?
Even today's word processors are capable of creating an acceptable-looking Website but they don't give you the control that a dedicated professional program like Adobe GoLive can provide. Beware that older programs, particularly Microsoft's FrontPage, are designed with older (and specific) browsers in mind, sometimes making a pages inaccessible to those using common modern browsers like FireFox.
Hand-coding provides for an additional level of control and minimizes the amount of code, increasing download speeds, thereby giving the viewer less time to think about abandoning your site and entering another. On the Web your competition is only a click away, so you'll want to leverage whatever advantage you can to present your information quickly and to the largest possible audience.
Wiz-bang Effects
Today's software can provide some impressive effects for Web design, but this needs to be tempered by the reality that such content may never be viewed by your intended audience if the download times are too long or if their browser needs to download another plug-in (software helper) to view it. Never use technology unnecessarily—any special requirement is going to limit the availability of your content to someone.
Content is King
Most people come to view a site for the information that it contains. How it is displayed is secondary unless that display impedes the ability for them to view the content. That doesn't mean that you can ignore the need to have a decent presentation, but an exceptional presentation will not overcome the lack of either expected or useful content.
Who is Your Audience?
How you build a site will depend a great deal on your expected (targeted) audience and their assumed expectations and limitations. If you are building a site aimed at seniors, you may decide on content and layout that is different that what you would use to attract children and different again for an Intranet (private internal network where you know the exact hardware and software being used).
Whatever the audience, you'll want to ensure that the site degrades gracefully and that the use of alternative operating systems and/or browsers (particularly older browsers) doesn't break the usability of your site.
Keep It Simple
A Website should be designed for easy access to the information that it presents. Navigation should be intuitive and if the site uses graphics for navigation there should be text alternatives for those that either cannot see the images (the visually impaired) or those that have graphics turned off (as in Web-enabled cellular phones or other such devices).
Navigation
Be sure to make navigation on your site easy for people. If they can't find the information they are looking for they will go elsewhere for it.
- Be sure that links are clearly visible within your document and in navigation systems. This includes avoiding practices like underlining text since your visitors are used to viewing this as an indicator of a link.
- Provide a text-only alternative to graphics on your site.
- A site map will enable people to see the layout of your site and determine how they might find what they are looking for.
- Provide a way back into your site for a 404 (page not found) error.
- Be careful in how you use JavaScript. If people can't navigate the site without rolling their mouse over objects to discover where they link to, you will simply annoy them.
- Link the descriptive text, not to a non-descriptive graphic. Imagine having to "discover" that you click on the bullet to the left of this text to navigate to the page it describes. That's not intuitive!
Frames
Watch out for the problems that frames-based sites create. While it is great to have your company logo or your navigation system set around a content area, this has a number of drawbacks:
- Frames don't allow people to bookmark a particular page on your site.
- Recommending a product on your site to someone else is complicated. Sending a message to "click on this button, then that button" is unwieldy and unlikely to occur.
- It is difficult for someone to link directly to anything but your home page. Since your ranking on search engines is at least partially dependent upon how worthy other sites see you as a link, your site will either be left out entirely, or people will link to the content frame (thereby removing the ability for those coming to the linked page to navigate your site).
- Frames often place external links in the viewing window making it impossible to bookmark them (thereby removing any advantage you gained by enclosing them in the first place).
- Enclosed external content can confuse the ownership of material displayed on the site.
Tables for Tabular Data Only
Tables were designed to present tablular data, but have long been used to lay out sites in an attempt to gain the sort of control that people were used to in print documents. Designers learned that they could make tables "invisible" to the view by making the border size zero and further control the placement of content by using invisible (empty) images.
Unfortunately, this creates several problems:
- Tables necessitate the intermingling of complex layout information within your content making a tables-based site very difficult to maintain or edit (and very labour-intensive—i.e. expensive).
- Tables used for layout bloat the size of your site, making it load slower and increase your bandwidth charges.
- Instead of loading the layout data once (as is the case for CSS-based layout), the user is forced to download it over and over again for each and every page on your site.
- Excessive nested tables used in an attempt to gain absolute control of the layout aggravates problems for modern portable devices like cell phones and PDAs with smaller screens.
The problem with using tables (originally a series of slides) explains the problem with tables in greater detail.
Server Side Includes
Instead of frames, use server side includes (SSI) which give you the ability to insert a section of code that is repeated throughout your site such as a header, footer or navigation bar. These do take slightly more time to scan a page and plug in the SSI files before rendering the page, but you can alter SSI content for the whole site in one edit rather doing so for every page on your site. Imagine how much easier it is to update footers and other similar site-wide content.
SSI only works on a server and may not be permitted by your host server, so you will want to test to see if it works before going to all the work of converting your site.
PDF Documents
Adobe Acrobat creates documents in a "portable document format" that retains all the layout and fonts of any document you can print. The reader is free, but you will need to purchase the Adobe Acrobat program to create the PDF.
PDF documents are an excellent way to make print-based documents like newsletters and forms on the Web. Because the reader is free, anyone can read and print these documents.
The fact that PDF documents are routinely catalogued by search engines complicates matters. You will want to be aware that e-mail addresses and other private information will routinely appear in searches, so you will want to be careful what is carried in these PDF documents posted on-line.
Adobe has adapted Acrobat so that it can function as a Web page for layout because the Acrobat Reader can be integrated with Web browsers. However, a PDF-based Web page doesn't work like an HTML-based page. I suggest that this is not the best medium for displaying your overall Web presence.
While the installation Acrobat Reader is very widespread and has become the standard for most computer hardware and software documentation, it is not universal. You will probably want to ensure that you make it easier for your viewers to use the information you've provided by following a few simple rules:
- Be sure to introduce any PDF document in a regular Web page first.
- Let people know what it is an how they can view it by providing a link to download Adobe Acrobat Reader.
- Provide the size of the document beside the link so that people can make an informed choice about whether to view the document.
- Keep a PDF as small as possible. Reducing the size of images before placing them in the original document helps with this goal.
Flash Introductions
Flash allows for wonderful animation, but it can also be a hurdle for those with lower bandwidth (dial-up) or that don't have the necessary plug-ins installed.
- If you must include a Flash introduction, be sure that it is relevant and that there is a way to skip it if the viewer either chooses to or is unable to see it.
- Examine what information the Flash provides that cannot be provided in another manner. (See my notes about Design Issues.)
Specify A DOCTYPE
You can specify a document type declaration (DTD or DOCTYPE) at the start of each page. This indicates what level of code you are writing to a validation service and is the first item on the page.
Without a DTD each browser will make a guess at what you are trying to present, likely getting it wrong. Internet Explorer operates in "quirks" mode if it cannot determine the document type since it assumes that the page is an older one designed for earlier versions of HTML.
Indicate Encoding Format
Since the Internet is international, your page is bound to be viewed by many that don't use the same language as you do. Specifying a Encoding format tells the browser how to display your page. The most common in North America are iso-8859-1 (Western Europe) or UTF-8 (Unicode, world-wide).
About Graphics
Using Pre-made Graphics
If you do use graphics created by others on your Website please be sure to read the usage agreement for those images. Most will require a link back to their site, announcing to everyone that you were unable to develop your own Use on commercial pages is usually prohibited.
Create Your Own Graphics
Modern graphics programs are quite adept at creating buttons and drop shadows, particularly those especially designed for the task. Programs like Paintshop Pro are quite reasonable and you can try many before you buy one that works best for you. Photoshop is excellent, but the purchase price is relative to its abilities.
Graphics On This Site
The graphics on this site are either created by myself (for which I retain the copyright) or they are used exclusively to link to the page where they were obtained. No one has permission to use my images except with express written consent and you need to verify the use of third-party images with their owners' sites.
The graphics on most of the Websites that I design are created by myself, are created by a professional graphic artist I strongly recommend, or are provided by the client. I've altered some third-party images to create drop shadows or other effects, but none are found on free sites.
Web Accessibility
Visually Impaired Access
Accessibility has several meanings and objectives. Wonderful tools like aural (speaking) browsers give the visually impaired access to the Internet, but repetitive menu systems can become annoying unless they are suitably coded to allow users to move page them.
Style Sheets Offer Flexibility
Improvements in style sheet properties is adding flexibility to alter the content to make audio presentations more realistic and provide for variations in pitch-range, richness, and volume among others.
You might also wish to consider what colours you are planning to use on your site. While red text on a black background may give you some interesting 3D effects, it is very difficult to read and often doesn't print as intended. Many people have difficulty unless there is a high-contrast between the background and the text and the links.
Make Your Page Viewable
These can be difficult tasks, but they can be accomplished by adding specialized style sheets that offer the user multiple choices in how they view, hear or print the site.
Modern browsers allow the user a great more control, including the ability to increase or decrease the font size. This can backfire if there are significant graphics content on your site since the graphics don't resize. This is particularly true for navigation links that use graphics since the descriptive "text" on navigation graphics cannot be resized. There are methods of using CSS text navigation that is both attractive and permits resizing
Use Resources Appropriately
You will want to determine your audience before using some of these resources. Music and JavaScript are just two such issues.
Music
Music may add an ambience to your site, but don't forget the possible barriers this can create for your viewers:
- There are potential delays while the viewer waits for the music to download (time that could be spent viewing your site).
- Unexpected sounds from your site may be disturbing in certain settings, such as work, classrooms or in late-night/early-morning environments.
- The potential need to find and install the appropriate plug-in if it is not already installed or outdated (something that is disruptive to many users).
Everything you add to your site adds a complexity that your audience needs to deal with unless the option is transparent. Don't give folks a reason to leave your site, possibly to view the next site listed on the search they conducted to locate your site—your competition's site.
JavaScript
JavaScript is great for creating rollovers and other interesting effects, but you can wear down your viewer with a great deal of activity on your page. JavaScript does offer a number of useful and interesting features, including "browser-sniffing" if you wish to create different versions of your site (or different style sheets) optimized for different browsers.
Other Helpful Sites
There are other sites with useful tips about page layout and how to avoid making mistakes.
- Web Pages That Suck teaches good design by showing bad design examples.
Design Resources
There are many resources on the Web that will give your the basics of how to build a Website. You should remember that the Internet is a very dynamic environment and standards change very quickly. Make sure that what you read is still valid and ignore everything else.
Web Design Tools
There are several resources on this site that will help:
- Web Design Tools categorizes various sites and design tips that are helpful to Website designers.
- Cut 'N Paste HTML Editing for rudimentary HTML edits and repairs.
- Web Page Template provides a simple template with explanations for some of the effects on the page. You can alter this template to create your own page.
- Sizing Websites discusses how different screen resolutions affect site designs, something that every designer must take into account.
- Search Engines where you can register your Website so others can find it. Look in the help section for each search engine to determine where to register your site.
- Internet Software Downloads provides links to various Web browsers and plug-ins. You'll need to test your pages in more than one browser to see what they look like to others. Use at least Mozilla as an alternative, particularly if you are running Windows and are using Internet Explorer.
- Copyright and the Internet introduces you to your rights and responsibilities regarding copyright.
RHC Web Design
Let Us Help
You may wish to have us design a site for you. We can quote the costs for anything from a basic Website to more complex projects. You gain from our experience and don't make the kind of costly mistakes that many beginners make.
Contact us to see how we can help you.
www.russharvey.bc.ca/resources/self.html
Updated: January 5, 2009
