Wrap-up: Foundations of Web Design (Mentorship Series)

Following is a summary of topics discussed during January 2009’s Dreamweaver Meetup Mentorship series

Print vs. Web

We had a lively discussion on print vs. web design. Many examples of differences were tossed out, including typographical quality (150+ ppi vs. 72/96 ppi), fixed layouts & typefaces, interactivity, etc. The key to remember for web designers with a print background is that instead of controlling the design, you must allow the user to control the design. Therefore, designs must be created with a level of flexibility in mind.

Web Standards

We discussed how, by leveraging Web Standards, you gain in efficiency and flexibility. The power is unlimited. One example discussed was the ability to redesign an entire site by just recoding the CSS file, and never touching the content or HTML. The example discussed and displayed was the CSS Zen Garden.
One question that came up was an explanation on semantic HTML. Paraphrasing Wikipedia, “Semantic HTML refers to markup following intention, rather than specifying layout details directly. For example, the use of <em> denoting “emphasis” rather than <i>, which specifies italics. Layout details are left up to the browser, in combination with Cascading Style Sheets. Ideally, semantics would define content to the level of elements, like prices, but this is not available today. Unofficially, there is a movement, leveraging Microformats, that represents an unofficial attempt to extend HTML syntax to create machine-readable semantic markup about objects such as retail stores and items for sale.”

Check out Jeffrey Zeldman’s website at www.zeldman.com. You might also check out his A List Apart website, which features articles on the best of web site development.

Information Architecture

The last topic, briefly covered, was Information Architecture. The takeaway from this discussion was that after content, Information Architecture drives the structure and navigation of the site. Information Architecture is an important part of the web design work flow, which will be discussed more during February’s Dreamweaver Meetup.

Miscellaneous

We had a lot of people ask about the best way to learn how to do web design, HTML, CSS, Dreamweaver, etc. Here’s some of the best resources. Share via the comments if you know of others.

HTML

W3Schools: Learn how to code via HTML & XHTML. Allows you to follow along, typing and seeing the results.

Cascading Style Sheets

CSS Zen Garden: This demonstration site illustrates the power that CSS can have; by redesigning different external CSS files, you can completely redesign a website, with drastically differently look & feel.