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.
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.
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.
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.
- W3Schools: Learn how to code via HTML & XHTML. Allows you to follow along, typing and seeing the results.
- HTML Tutorial: Free step by step tutorial.
- HTML Essential Training: Subscription-based online tutorials from Lynda.com. Free previews.
- XHTML Essential Training: Subscription-based online tutorials from Lynda.com. Free previews.
Cascading Style Sheets
- W3Schools: Learn how to code CSS. Allows you to follow along, typing and seeing the results.
- CSS Training Courses: Subscription-based online tutorials from Lynda.com. Free previews.
- 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.
- Web Pages That Suck: This site provides great examples of what not to do.
- Tuscany Luxury Resorts: Example site explained in detail in the book “CSS Mastery,” illustrating advanced CSS methods to deliver a engaging design.
- W3C HTML Markup Validation Service: Online tool to validate your (X)HTML markup. Can be used to troubleshoot issues with your code.
- W3C CSS Markup Validation Service: Online tool to validate your CSS code. Can be used to troubleshoot issues with your code.
- Firefox Web Developer Toolbar: Fantastic browser toolbar (for Firefox) that aids in testing, troubleshooting websites.
- Firefox Firebug Plugin: Plugin that aids in troubleshooting coding issues.
- Internet Explorer Developer Toolbar: Browser toolbar (for IE) that aids in testing, troubleshooting websites.
Next month, we look at the web design workflow, from start to finish. Look for that posting soon.