Foundations of Web Design (Mentorship Series)

The purpose of web design is to create an online presence that provides valuable content to the intended audience. What follows barely scratches the surface of web design, but covers three important topics that we should look at before we dive into the details.

  • How Web Design is Different (from Print)
  • Web Standards
  • Web Site Organization

How Web Design is Different

The online experience is very different from offline experiences with other established mediums or platforms, such as print. Access, navigation, search, even display is very different from the print medium.

  • Navigation
    • Books: You typically read of book from beginning to end, in a linear fashion. Or you go to the Table of Contents, or the Index to locate the information, or content you are looking for, then manual go to that location in the book.
    • Newspapers & Magazines: You read from front to back, or start at your favorite section, then navigate to you next favorite section.
    • The Web: People arrive at websites via search engines, directories, other websites, an individual’s browser favorites, email messages, even through offline communications in print, radio, or television. People may arrive at the home page, or deeper into the site, to the content/information that they are looking for. Instead of paging lineally through a website, people click on links that interest them; there are many paths through a website.
  • Typography
    • Books, Magazines, all printed material: – Most printed material is printed at 150 dpi or higher; in some cases, much higher. Printed text is locked into the size selected by the designer or publisher. For body text, a serif typeface, or fonts with ornaments at the ends lead the eye to the next letter and word. There are endless number of typefaces to select from.
    • The Web: – Most body text for websites uses a sans-serif typeface, or one that has non of the ornaments of a serif typeface. This due to a resolution that ranges from 72 dpi on PCs to 96 dpi on Macs. Text has the capability of being resized, to make the text more readable. Since the type used on a web page must be installed on the device that is displaying the page, the number of typefaces for displaying text is very limited.
  • Interactive Experience
    • Print Material: – Greeting cards can play music when opened. Brochures and cards can pop-up as part of the design. Wheels can be turned to display other parts of a printed piece.
    • The Web: – Content can displayed or hidden based on actions like hovers or clicks. Information can be searched for, or requested from a back end system. Data can be delivered in entirety, yet only displayed when needed, expediting the user experience.

One major difference: when something is printed, it’s final. The web is ever evolving, ever changing.

Individuals use the web to proactively find content, perform tasks, to get things done. Individuals have higher expectations from online content and experiences; they expect things to be done faster, more efficiently, with less effort on their part. They expect instant gratification. They expect rich experiences, like video or interactive Flash interaction. They expect to have a say in their experience, in contributing to their experience and the experience of others. That’s the basis of the social web. And that’s the challenge for web designers; to deliver on the increasing expectations of the online audience.

The Web Standards Approach

Originally, the web was literally text on a page, followed by the introduction of graphics. Then came the technique of using HTML tables to layout content on a page. The browser wars of the late 90’s, early 2000’s along with the misuse of HTML and CSS to display a desired look & feel, with no regard on how the code and content was structured under the hood, created a semantic, and more practical, a maintenance nightmare of complex, meaningless code.

Enter 2002 and Jeffrey Zeldman, widely regarded as the father of web standards. In his book “Designing with Web Standards,” Jeffrey preached the good word of standardizing the design of web sites and deploring browser makers to support official standards. Web designers started designing appropriately, in a way that displayed pages properly for standard-based browsers, while degrading gracefully of non-standard browsers, like Microsoft’s Internet Explorer. Attention started drifting away from Internet Explorer until Microsoft decided to update their browser for the first time in five years.

At this time, the web standards movement preached the method of tableless layouts using HTML for content and structure and CSS for presentation. This separation of content and presentation was mastered by highly visable websites, such as Sports Illustrated. Soon, the migration to a web-standards approach started taking off.

The benefits of a web standards approach to web design is as follows:

  • Semantic structure and tagging provides meaning.
  • Separate presentation via CSS means you could redesign the presentation layer while not touching the content. Redesigns are faster, cheaper. There’s more flexibility in delivering content; same content delivered for a web browser, presented differently for printers and mobile devices.
  • Since the presentation code is removed from individual pages, pages are lighter and faster to load.
  • With the reduction of necessary code, search engines find it easier to digest your content.
The separation of content, semantic/structural markup, presentation (CSS) and functionality (JavaScript)

The separation of content, semantic/structural markup, presentation (CSS) and functionality (JavaScript)

OK, I’m stepping down from my soapbox. I think you understand. A bit later in this series, we’ll look at both approaches, table-based & table-less layout to see the difference web standards makes.

Web Site Organization

Information Architecture drives how a website should be structured and organized. We’ll cover Information Architecture in a future installment of this series.

Most web sites are organized in a hierarchy of typical sections.

Typical hierarchical organization

Typical hierarchical organization

Care must be given when planning a hierarchical organization. A site structure which is too shallow will contained too many site sections, therefore more options for site visitors, which will make it difficult to navigate.

Shallow hierarchical organization

Shallow hierarchical organization

Likewise, a hierarchy which is too deep will take too many clicks to reach the desired content. You should always strive to follow the “three-click” rule, which states that site visitors should be able to reach any page on your site in 3-clicks.

A deep hierarchical organization.

A deep hierarchical organization.

Other types of web site organization are linear organization & random organization. Linear organization, which places a specific order in which to navigate, is perfect for quizzes or process wizards. Random organization is rarely used, primarily for artistic websites.

Homework

Prior to the next Meetup (Jan. 13, 2009), please review the online version of the Web Style Guide By Patrick Lynch and Sarah Horton. There’s a lot of great information on the foundation of web design; of site and page design. Nothing spectacular, just solid. Be prepared to discuss at the next meetup. Happy Holidays!

Resources

Advertisements

One response to “Foundations of Web Design (Mentorship Series)

  1. I love the way this program is methodically laid out, beginning with the fundamentals of Web Design and progressing accordingly.

    This looks like it is going to be a very interesting, rewarding, educational and enjoyable journey.

    Looking for to the adventure.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s