Hide Notes 

Slide 1: KNOWLEDGE GAINED FROM AN EVENT APART BOSTON MARCH 26-27 Designing Websites
Slide 2: The Topics and Their Speakers  CSS  Eric Meyer  Design  Jason Santa Maria  Jeffrey Zeldman  Dan Cederholm  Cameron Moil  Usability  Steve Krug  Accessibility  Andrew Kirkpatrick  Browser Design  Molly Holzshalg  Standards  Ethan Marcotte
Slide 3: CSS – There Is No Spoon  “Standard” HTML element behavior is driven by local CSS files.  html.css; quirk.css /* hidden elements */ area, base, basefont, head, meta, script, style, title, noembed, param { display: none; }  p, dl, multicol { display: block; margin: 1em 0; }   http://intranet.library.arizona.edu/users/aengels/aea/meyer/tableGraph/
Slide 4: CSS – Making IE Play Nice  The Dean Edwards IE7 Script  Created at a time when Microsoft claimed IE6 was dead.  From the site:  IE7 loads and parses all style sheets into a form that Explorer can understand. You can then use most CSS2/CSS3 selectors without having to resort to CSS hacks. The lightweight script is a single-line inclusion in your HTML/XML document. No alteration of your original markup is necessary. Neither do you have to alter your CSS.  If you’re Yahoo, it’s not for you. http://dean.edwards.name/IE7/ 
Slide 5: CSS – Making IE Play Nice  This means that we can take better advantage of IE7’s standards compliance.  CSS3 Selectors  A[href$=“.PDF”] { padding-right: 18px; background: url(/pix/pdf-icon.gif) 100% 50% no repeat;}   Does not address accessibility issues. The use of conditional comments is still the best way to apply IE hacks to a large site like ours.  <!--[if IE 6]> styles or link to stylesheet <![endif]-->
Slide 6: DESIGN – Writing Copy  If content is king; if fresh content is what drives users back; if textual content provides the majority of the interface navigation; then all large sites must have large writing budgets and content czars…right?  Only 2 people out of 500 at the conference had one person in charge of content, and no one budgeted for writing.  We need to make content work for us.
Slide 7: DESIGN – Writing Copy  Modifying textual content is often the most cost effective way to improve your site.  Is the copy concise?  Click here to enter your username and get started! vs. Sign in!  Does it serve its purpose (hard vs. soft sell, inviting vs. professional)  Audience appropriate copy can mean that it’s just not inappropriate.
Slide 8: DESIGN – Typography  Usability and design via textual design.  How does typography affect the flow of a site?  What typography fits with the content?
Slide 9: DESIGN - Microformats  Designed for humans first and machines second, microformats are a set of simple, open data formats built upon existing and widely adopted standards. Instead of throwing away what works today, microformats intend to solve simpler problems first by adapting to current behaviors and usage patterns (e.g. XHTML, blogging).   hCard: <span class="tel“> <span class="type">home</span>: <span class="value">+1.415.555.1212</span> </span> http://microformats.org/
Slide 10: DESIGN – Integrity Testing  Integrity tests  Turn off the images  Take a screen shot of a page and blur it  Turn off CSS  Increase and decrease the font size  Wrapping elements using EM can allow the entire design to increase as the user increases or decreases their font size.
Slide 11: USABILITY – Pearls from Krug  “The best way to learn about [the] usability [of anything] is to watch people use things.  “You can hire someone once a year to do Spring Cleaning, but that’s not the way to do it; you really need someone in house to address the usability issues as they come up…and they come up all the time.  Take 3 people, once a month, and do testing with them.  “There are endorphins involved here [in the design process]
Slide 12: ACCESSABILITY  The current state:  User agents are not in synch in how they interpret code.  Browsers and user agents are not communicating well.  Even the technical lead of accessibility at Adobe is barely able to keep his head above water.  What this means for us?  We already code with access keys and with basic web accessibility compliance; for the time being this seems adequate (unless we get another position somewhere along the way).
Slide 13: BROWSER DESIGN  Browsers are developed by people, and people have agendas, moods, and are fallible.  “We come to find at the end of it all, Web standards don’t really matter. What matters is what features are implemented and what is put to use, no matter its origin”
Slide 14: STANDARDS  Standards are not standards, but recommendations.  Designing to standards is a goal, but a 100% compliant site is not required.  It can allow for easier future growth of the site to multiple client devices (e.g. mobile devices).  All the standards compliance in the world doesn’t mean a thing if the code will be mangled by a CMS, or if it’s so complicated the uses/maintainer can’t understand it.
Slide 15: Designing Websites Questions?