Website Design Basics

Overview

website design basics diagram

This article is intended for anyone planning to launch a website who is unfamiliar with the basic concepts. Although it covers some of the more technical aspects of web design, you only need to understand the general concepts presented here to make informed decisions about your site.

Design Principles

Use an appropriate structure. Your website must be constructed to allow content to fall into natural categories that the user would expect to see. Websites must always be designed with user needs in mind.

Provide effective navigation. The navigation system must simultaneously show users what you have to offer, indicate where they are, and guide them to their destination.

Create visual appeal. An effective visual design provides an attractive structure to a site’s content, features, and navigation system without calling too much attention to itself. Steer clear of distracting and overpowering visual elements.

Design for speed. Web users are an impatient lot. Photographic images, animations, and multimedia content can take a long time to load in browsers and will test your viewers’ patience. That is not to say that such elements should not be used—they can in fact be very effective in some situations, but only if used in moderation. When in doubt, err on the side of simplicity.

Test for usability and compliance. The web designer’s quality assurance program must employ tests throughout the design process to ensure the site functions as intended, and that it complies with coding standards and accessibility requirements.

Standards

W3C logo

The World Wide Web Consortium (W3C) is an organization that develops web standards. It issues technical specifications and guidelines intended to promote the web’s evolution and ensure web technologies work well together. Primary W3C objectives include standardization of web production by promoting the use of HyperText Markup Language (HTML) to structure content and Cascading Style Sheets (CSS) to display HTML elements.

The advantages of a standards-compliant design include:

  • Faster load times. Less code means faster loading pages.
  • Easier maintenance. It will be easier and less expensive to update and redesign your site.
  • Better visibility. Standards-based designs are structured logically and are more easily interpreted by search engines. This can improve your search engine visibility and ranking.
  • Improved accessibility. Your site will reach the highest number of browsers and devices possible. Accessibility is discussed below.
  • Forward compatibility. Compliance with today’s standards will ensure your site will be readable in tomorrow’s browsers and devices.

Compatibility

A number of compatibility issues must be taken into account when designing websites, including:

  • Browsers. Not all browsers render web pages the same way. This category includes not only well-known browsers like Internet Explorer, Edge, Firefox, Chrome, and Safari, but also screen readers, PDAs, smartphones, and other visual and non-visual browsers. There are sometimes visible differences in the way browsers handle HTML and CSS.
  • Platforms. Windows and Mac are the most common, but these and other platforms affect both functionality and appearance.
  • Plug-ins. Sites that include Flash, Silverlight, Java, and similar content will not display as intended unless the user has the appropriate plugin installed.
  • Screen sizes and resolutions. This refers to the wide variety of screen sizes and screen resolutions that are used to view websites. A web page displayed on a small mobile device will look quite different than it will on a large desktop monitor.

All of this means it is virtually impossible to create web pages that display identically to all viewers. The only way to approach web design is to accept this fact and attempt to minimize the differences as much as possible.

Responsive web design is a widely-used approach that adjusts the display based on screen size, orientation, and platform. Please refer to the What Is Responsive Web Design? article for more information.

Accessibility

Accessibility has to do with making websites available to as many people as possible, particularly those with disabilities. Accessibility guidelines have been established by the U.S. government in Section 508 of the Rehabilitation Act, and by the W3C in their Web Content Accessibility Guidelines (WCAG) 2.0.

Accessibility and its implication for web design can perhaps be best illustrated by using specific examples:

  • Vision-impaired users access the web using a screen reader (which converts text to audio), or a Braille reader (which creates the Braille equivalent of a web page on an electronic Braille pad). These devices require web pages to be structured in a particular way, and to provide text equivalents for certain graphic elements.
  • Color-blind users may have difficulty viewing certain color schemes and making sense of text that refers to color, e.g. “Click on the blue box for more information.”

A website that complies with accessibility guidelines not only benefits disabled users, but makes the site more accessible to search engines and more compatible with future technologies.

Search Engine Optimization

Search engine optimization, or SEO, refers to the techniques used to maximize the visibility of a website so that it does well in “organic” search engine listings. Organic listings are sometimes referred to as natural listings, and exclude paid results.

Research has shown that organic listings enjoy two distinct advantages over paid listings:

  • Most searchers tend to click on organic listings rather than paid listings.
  • Over the long term, organic listings provide a better return on investment than paid listings.

SEO should be treated as an integral part of your website design project, and not simply as an afterthought. Some members of the SEO community would in fact argue that SEO should be considered the very foundation of a successful website.

Maximizing your site’s search engine visibility through SEO can be a powerful and effective part of an online marketing plan. Please refer to the Improving Search Engine Visibility article for additional information about SEO.