AEA Chicago 2009: JavaScript Will Save Us All

Day 2 and Session 7 of An Event Apart Chicago 2009 was Eric Meyer demonstrating how important JavaScript has become and will be.

Javascript libraries

  • fixing what doesn’t work in old browsers (IE7/IE8.js)
  • pushing the envelope of new features (e.g. modernizr)
  • Bluff – graphing (HTML5/canvas)
  • Processing.js – replace Java, etc. w/o plugin

Keep it Accessible: make sure there’s fallback

  • JavaScript is not just a barrier, way of punching through the barriers
  • video: javascript that adds keyboard support to flash videos

What can we do?

  • support for autofocus/required input attributes (html5)
  • input types in html5 (unsupported fallback to text input)
  • scan tables to pass to bluff for graphing

JavaScript

  • means we don’t have to wait for browser makers or standards bodies
  • speeds up the evolution of the web
  • payoff for years of web standards evangelism

Q&A

Doesn’t it cause a problem to use a toolkit to solve a problem that will later be solved:
simple to just cut out a piece of JS when it’s no longer needed
What happens when JS isn’t there?
make sure it’s progressive enhancement
still > relying on plugins

AEA Chicago 2009: Walls Come Tumbling Down

Andy Clarke finished out Day 1 of An Event Apart Chicago 2009 with his talk on improving the process of web design–getting things done more efficiently.

  • Make more time for creativity
  • Creativity drives innovation
  • Ideas are what sell

Workflows

  • Current standard flow:
    1. static comp
    2. coding
    3. testing
    4. content
  • frustrating, inefficient
  • Replace with
    1. content
    2. design in browser
    3. testing

Designing in the Browser

  • static visuals fail at demonstrating interactive sites by definition
  • cannot demonstrate a design to a client
    • effects of a liquid layout
    • increase font size effect
    • interactions (hover, cursors, etc.)
    • AJAX
  • showing static design visual reinforces misconception that a website mimics paper

Design doesn’t look the same in every browser

  • different != broken, though
  • not gonna notice anything’s different
  • only web geeks know that more than one browser exists
  • business benefits of universal css: give option between last 3 days on IE6 or universal templates

Design process

  • starter html/css/images
  • css files import each other
  • use “scratch stylesheet” at the end, allows testing without screwing up the good stuff

Random tips

  • use two values on border-radius to get an elliptical shape
  • css columns: column-count:2

Designing a System

AEA Chicago 2009: DIY UX: Give Your Users an Upgrade

An Event Apart Chicago 2009 Session 5 was on simple things anyone can to to improve their user’s experience on their site, presented by Whitney Hess.

Slides for this presentation on slideshare.com

Design Research
What do our users *actually need*?

  • feedback mechanism: easier for users > easier for you
  • feature/bugs system: most votes = done first (user based, not company based)
  • have survey links all over the place
  • designer research via email – teasing out more info; also feedback for customer
  • let them tell you about their workflow – help you address the core problem

Web Analytics
What are our users *actually doing*?

  • data in conjunction with user research – data doesn’t lie, but it’s dependant on your inference
  • crazyegg.com – create maps of where people click on a page
  • record the top 100 searches: top 10 results of each
  • “stats let me refute the client’s notion of how their constituents were behaving”
  • search logs let you see what people really want to do w/ your site

Usability Testing
How well does our stuff *actually work*?

  • ask “what do you think”
  • “‘it looks good’ is the worse feedback we can get”
  • using the same people over and over again allows them to get used to being harsh
  • where to find participants
      Friends and family
    • coworkers who don’t work on project (receptionist, HR, sales)
    • Twitter followers
    • Starbucks
    • Craigslist
  • Why not test online? don’t be a wimp! You should be in the room & feel the pain.
  • if you’re not there, youdon’t see body language, can’t ask follow-up
  • Informal testing can be just as valuable

Experimentation & Iteration
How are we *always getting better*?

  • launch new feature during quiet times, get feedback from user requesting it, tweak, repeat
  • make your working environment creative
  • solve problems together

Q&A

Is it necessary to have a wide user base for niche product?
some is better than nothing, but wide user base is still better
you’ll find variation in any user group

AEA Chicago 2009: Concept Models: A Tool for Planning Websites

Concept models, a way of visualizing abstract concepts, was the subject of Dan Brown’s Session 4 of An Event Apart Chicago 2009 with Dan Brown.

Types of navigation

  • traditional
  • emerging
  • anticipatory

The site map is no longer an effective way of describing content.

Start Modeling with

  • a theme; the central “story”
  • what is of most interest
  • from there, build out based on familiarity
  • combat obscurity, i.e. define buzzwords

Structures you can use

  • hub & spoke – define a central idea
  • diad, triad… – a few main ideas
  • value prop – a sentence broken out into sections

Going from concept model -> site model

  • take main points/hubs become templates.
  • seems that the purpose of these concept models is to make a website match the subject (relationships on the website would mimic real-life relationships, etc.)
  • experiment with including different elements from the concept models in different wireframes

Why models? 8 tips

  1. determine context
    • that is, they help you determine the context
  2. do research
  3. make a list
    • of nouns
    • concept models are nouns connected by verbs
  4. start with less

    • find good starting points
  5. start with more
    • to move stuff around and experiment
  6. label everything
    • the more active the verbs the better
    • use plural nouns
  7. balance familiar and unfamiliar
    • use familiar to describe unfamiliar
    • need a mix of both
  8. involve others
    • collaborative, whiteboard approach

Q&A

How early in the modeling process do you get user feedback?
hard for users to understand underlying structures
at prototyping stage
Does this process mostly focus on UI? or is it also useful for a DB admin?
tends to be object-oriented, but usually focused on user
Does size of circle/distance matter?
can be used to enhance, don’t need to be
you define your own relationships, cues

How do you engage clients?

go digital sooner rather than later; screen share
Is this something you could share with content owners to ask, “do I have this right”?
yeah, that’s a great application
How do you know when you’re done? Could go on forever
when your deadline’s passed
What are the disadvantages to using concept models?
thinking about abstract ideas; if you’re presenting to people who don’t like thinking abstract, it’s not going to work
it’s a planning tool, nothing more
If you’ve already got a website that’s poorly organized, can it help you fix it?
I have no idea what he said here

AEA Chicago 2009: Content First

An Event Apart Chicago 2009 Session 3 was Kristina Halvorson, talking about content, content, content.

These notes are more sketchy, not because the presentation wasn’t good, but because it was more of an impassioned plea than a how-to that I could take notes on

  • not just copy to be dropped into a template, it’s content–the “stuff” people are looking for
  • How did we get here?
    • Information Architecture gave rise to
    • Information Design
    • When the web came along, it was seen as primarily visual, so primarily visual people get hired
  • Big Problem: the person who defines the content doesn’t own the content
  • Must stop seeing content as a feature
  • No more lorem ipsum — content should come first; design around the content

Site comparison

Quicken
all about product photos/price, no space for benefits/description
when copy-writers finally fill in the template, you end up w/ small fonts, cramped, busy page
mint.com
top 5 things people want from personal finance software
top 4 triggers to get people to want to use personal finance

Page tables vs templates

  • Page table defines what content should be on the page and where, whereas a template is a design with spots to fill in with whatever
  • Priority 1: Messages
    • what should the user come away with)
    • Label them by importance: 1a, 1b, etc
    • Tell the writer WHAT to write in what order
  • Priority 3: Contextual contact us
  • Not "launch mentality" but a renewable ecosystem

How to Start

  • Get content involved early on
  • Design around content

Q&A

Can/do designers & developers have impact on content development process?
If nothing else, you see content poured into design/structure.
You can/should also ask who owns the content.
What is an example of content requirement?
on this portion of Page X, there must be a list of product one benefits
What can you do for a new site, where the content doesn't exist yet?
Plan for andcreate the cycle for maintenance
How do you motivate clients?
Help them see how users are reacting to their site (shame)
Help them to see their content as a business asset, not a commodity
Show them user research; businesses rarely test content in research; show that Users can't find what they’re looking for
How to deal with what happens to the site after launch (client work; after the hand-off)
Sell them maintenance plan/requirements
Deliver them a plan for maintenance
Do organizations need to hire someone for content?
Organizations don't want to realize they're a publisher, and any publisher needs oversight. (so, yes, I guess)

AEA Chicago 2009: Thinking Small

Session 2 of An Event Apart Chicago 2009 was Jason Santa Maria talking about small things that can make a big difference in a design.

example of: Choose your own adventure books: tiny choices affecting the outcome

7 things that can affect the outcome

  1. Be a thinker
    • keep a sketchbook
    • sketchbooks are not about being a good artist, they’re about being a good thinker
    • get past all of the obvious and to the real creative stuff
    • play around with words (how does the content work in space)
    • know your process, know your tools – (computer is a tool of refinement, mind is a tool of design)
  2. Find the Message
    • this one ran together w/ #1 in my mind, so some notes from #1 should probably go here.
  3. Be a Reverse Engineer
    • more than one way to do it
    • 6 ways to reinterpret content
      • Next/Prev Panel
      • Zoom In/Out
      • Embellish or Exaggerate
      • Disarm
      • Deconstruct
      • Re-contextualize
  4. Plot it out
    • just choosing a grid system is crap: why are you using it – “blindly go where everyone has gone before”
    • using a grid is not necessarily good design, it’s just organized design
  5. Think Horizontally, then Vertically
    • grid=parfait
    • tiers building on each other
  6. Stop, Modulate, and Listen
    • identifier, size, and placement
    • a la carte modules
    • class=”pic four left”it’s a picture, four columns wide, on the left
    • easy for clients to pick up on it and use, easy to place/repurpose content (the uber-semantic nazis flamed JSM for this, but there comes a point where usability for the content creators > semantics for the sake of semantics sake)
  7. Be a Matchmaker
    • typography online; matching fonts
    • pair typefaces from the same designer
    • harmony in structure

Q&A

Why is typography going to be heating up?
@font-face, TypeKit, etc.
Modular? Semantic class names?
easy to use > purely semantic
Isn’t licensing the big hurdle w/ @font-face?
yes, that is a big hurdle but a bigger problem is that fonts aren’t designed for screen
How do I make sure I’m not violating copyright?
Look at EULA
What point of the process do you look at colors, photo styles?
Early on, seting the mood, during sketch phase
Flexibility on site (separate design per blog post), can you sell that to clients?
Yes, to a certain extent. If the client has a trained designer (but, a certain amount can be accomplished by placing images within blog posts using modular layout discussed above).
When do you bring IE in to the picture?
as he goes along, it tends to get later and later in the game
Does modular design described above work in expanding layouts?
image sizing is the issue in fluid grid (%, em), otherwise, could work
don’t like variable image sizes
How do you prevent bad design (from client)?
question any change requests that aren’t from the user perpective
How do you build sketching early on? (I couldn’t figure out what I meant by what I wrote here when I went to edit–maybe some day I’ll remember…)
phase of discovery, along with research, etc.
Special consideration for grid systems to work in CMSs?
no, it’s all CSS, so CMS doesn’t make a difference
Materials for developers/non-designers to understand design?
jasonsantamaria.com/reading

AEA Chicago 2009: A Site Redesign

Jeffrey Zeldman presented the first session of An Event Apart Chicago 2009, discussing the process of redesigning a website and demonstrating the process of redesigning his own site and the An Event Apart website.

Client services: in-house, agency/freelance

  • Make sure you’re solving a problem solving (not just “time for redesign”)
  • Don’t redesign just because it’s tired/you’re tired of it (amazon, apple haven’t changed much over the years)
  • Public isn’t as tired of it as I am
Research
  • is the difference b/w art and design. Designers are problem solvers, not artists.
  • yields achievable goals
  • makes you a credible partner
Business goals & user needs
  • corporate market research != user needs
  • usually no budget for user needs testing
    • informal, casual interview – ask for 5 minutes
    • don’t ask about website, general info about subject
    • develop customer profiles (composite of people talked to)
Content Strategy
  • start with content, design with real copy
  • no lorem ipsum
Dealing with Clients (internal/external)
  • Alzheimer’s method
    • back up and refresh their memory, remind them what you discussed before
    • like backing up a movie a couple scenes to get the flow
  • Translate
    • don’t just answer their question, client may be being nice/tactful
    • ask questions to get down to the real issue
  • “Sell ideas, not pixels”
    • Have discussions about the meaning of the design, then ask if the design supports that meaning.
    • Some objections & responses:
      “That color is UGLY”
      go back to research, focus on the user
      “That button is too big”
      we did this because research shows users weren’t seeing it
    • Find out the real problem and respond to it.
      • if it’s a problem, fix it
      • if it’s not a problem, use the research to calm the client
      • don’t try to calm the client without the research; if you do, you may come across as a know-it-all

Homegrown

Competitive Audit : Client Services :: Inspiration : Homegrown

Samples

Homegrown – Zeldman’s redesign
  • problem: invite people to read the writing
  • design around the content in the browser with CSS
  • designed the nav last interesting
  • navigation as content
  • there is no fold
  • fewer shapes allows more flexibility (recombine the layout later)
Business site – An Event Apart redesign
  • problem: needed to show value (economic downturn)
  • old site was brand over content
  • need persuasive content
  • What do we have?
    • great sites
    • great speakers (in action)

Q&A

How do you sell info architecture to someone who doesn’t want it and doesn’t have the money?
expensive to change coded site, less expensive to build it right (faster, cheaper to change napkin drawing than coded site)

Basic CSS Page Layout

For my second post, I’ll build on my basic HTML page structure and give the page a basic layout. This post won’t go into detail for more complex things like navigation bars, etc.; I’ll limit it to creating the basic “boxes” where the content will be dumped.

Reset Styles

This is a debated technique, but I personally prefer to use a style reset (specifically I use a portion of “Reset Reloaded” by Eric Meyer)

/* =Reset Styles - Thank you Eric Meyer (http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/) */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
 margin: 0px;
 padding: 0px;
 border: none;
 outline: 0px;
 font-weight: inherit;
 font-style: inherit;
 font-size: 100%;
 font-family: inherit;
 vertical-align: baseline;
}

I find that this saves me a lot of time and code (especially setting margin, padding, and border to nothing). I would normally specify these anyway, so it’s helpful at design time to know that I’m starting with nothing (rather than the browser default). I can then easily set different defaults for different sections of the page. For example, I can set ul and li margin, padding, etc., defaults for the #bodyText region without screwing up my navigation lists.

Page Regions

Now, I will get to the heart of the post, and set up the regions defined in my HTML structure.

Of course, you’ll want to substitute your own values

#container

The purpose of the #container region is to create the actual “page” that will be displayed over the <body>. I like to use a percentage width with a minimum and maximum width. So my CSS for a container div would look like:

/* container */
div#container {
   width:90%;
   margin:.75em auto;
   min-width:650px;
   max-width:70em;
   background-color:#FFF;
}
#header

Minimal styling is needed for the header box, as it usually is 100% width (default for a div). I find I usually have a header with a logo to the left or right. The height, then, is defined in pixels based on the image height. In this case, I used gradient background (I like PNGs with alpha transparency) so the background color shows through.

/* header */
div#header img {
   float:left;
   border:none;
   margin:5px 1em;
}
div#header {
   height:120px;
   background-image:url(images/headerGradient.png);
   background-repeat:repeat-x;
   background-position:bottom;
   background-color:#FFF;
}
div#headTitle {
   font-size:2em;
   height:120px;
   text-align:center;
   font-weight:bold;
   font-family:Cambria, "Times New Roman", Times, serif;
   padding-top:30px;
}

Note that I didn’t make the text in the heading (in this case, the site title) an <h1> tag, as I reserve the <h1> tag for the page title.

#mainNav

The #mainNav again usually is a 100% width, so it requires minimal styling. Occasionally, a height may need to be defined, but the most important thing is to clear any floats. So the CSS for this section is usually simply:

/* main navigation ids */
div#mainNavDiv {
   clear:both;
}

The rest of the styling will be applied to the <ul>, <li>, and <a> tags in the main navigation region.

#mainContent

OK, so this is getting to be kinda repetitive, but again, the primary elements that are needed are a background color (especially if it’s different than the container background color) and, you guessed it, clearing the floats from the #mainNav region. You can also set padding here to help arrange the other regions inside #manContent, but I prefer to use margins on the contained regions. No right or wrong here, just personal preference.

/* main content */
div#mainContent {
   clear:both;
   background-color:#FFF;
}
#secondNav

OK, now it gets a little more interesting. I generally have my second-level navigation on the left side, so we’ll need a width, margins, and a left float. I like to use an em for widths here, so the navigation menu expands as text size increases, so does the width of the region (this of course becomes somewhat less important as browsers increasingly rely on the zoom features, but I still think it’s preferable).

/* second-level navigation */
div#secondNav { 
   float:left;
   width:12em;
   margin:1.5em;
}
#bodyText

The main things we need here are margins and padding. Of course, since the #secondNav region is floated left, the text in the #bodyText region will wrap completely around the #secondNav; this can create a problem when #bodyText is longer than the navigation. So, to keep the main text properly aligned, we’ll need to set the left margin appropriately. Here’s what it might look like:

/* main text content */
div#bodyText {
   margin-left:15em;
   margin-right:1em;
}

OK, we’re back to a more boring one here, basically a clear; we’ll want to add maybe some padding, change text size, color, etc.

/* footer */
div#footer {
   clear:both;
   background-color:#999;
   text-align:center;
   padding-top:5px;
   font-size:.8em;
}

Final Product

OK, so I’ll combine it all here; here’s the basic css layout.

/* =Reset Styles - Thank you Eric Meyer (http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/) */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
 margin: 0px;
 padding: 0px;
 border: none;
 outline: 0px;
 font-weight: inherit;
 font-style: inherit;
 font-size: 100%;
 font-family: inherit;
 vertical-align: baseline;
}

/* container */
div#container {
   width:90%;
   margin:.75em auto;
   min-width:650px;
   max-width:70em;
   background-color:#FFF;
}

/* header */
div#header img {
   float:left;
   border:none;
   margin:5px 1em;
}
div#header {
   height:120px;
   background-image:url(images/headerGradient.png);
   background-repeat:repeat-x;
   background-position:bottom;
   background-color:#FFF;
}
div#headTitle {
   font-size:2em;
   height:120px;
   text-align:center;
   font-weight:bold;
   font-family:Cambria, "Times New Roman", Times, serif;
   padding-top:30px;
}

/* main navigation ids */
div#mainNav {
   clear:both;
}

/* main content */
div#mainContent {
   clear:both;
   background-color:#FFF;
}

/* second-level navigation */
div#secondNav { 
   float:left;
   width:12em;
   margin:1.5em;
}

/* main text content */
div#bodyText {
   margin-left:15em;
   margin-right:1em;
}

/* footer */
div#footer {
   clear:both;
   background-color:#999;
   text-align:center;
   padding-top:5px;
   font-size:.8em;
}

Basic HTML Page Structure

So, for my first post, I thought I’d start with the basics–how I lay out my basic HTML page.

Doctype/Basic HTML Tags

Of course, the first thing is to start out with an XHTML 1.0 Strict Doctype and all the required tags (this is what Dreamweaver spits out):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
</head>

<body>
</body>
</html>

Page Divisions

Now that we have an HTML page, we need to divide the page up into sections. As a general rule, I use the following elements:

  • container div (which controls the width/placement of the page content over the background)
  • header
  • main navigation (usually horizontal navbar, but not necessarily)
  • main content (contains second navigation and body of page)
  • usually, a search box (if appropriate to the site, usually is)
  • second level navigation (omitted from the home page, usually a vertical navbar on the left)
  • body text (the primary content of the page)
  • footer

Here’s how I set it up:

<div id="container">
<div id="header"></div>
<div id="mainNav"></div>
<div id="mainContent">
  <div id="searchBox"></div>
  <div class="secondNav"></div>
  <div id="bodyText"></div>
</div>
<div id="footer"></div>
</div>

I use the “id” attribute because (1) there will be only one of each of those elements per page, and (2) it makes attaching and writing JavaScript and CSS much easier.
We’re almost there–just need to a basic shell for the navigation menus and some best practices for accessibility and usability.

Navigation Menus

We’ll go into more detail on navigation menus in a future post, but for now suffice it to say that the navigation menus will be unordered lists (<ul>) of links. So, we can add the following to the mainNav and secondNav divs:

<ul>
      <li><a href=""></a></li>
  </ul>

Of course, we’ll add more <li>/<a> tags when we develop our navigation, but this will work for now.

Best Practices

I follow as closely as possible the HTML Best Practices developed by the Illinois Center for Information Technology Accessibility, so we’ll need to add a few elements to enhance accessibility and usability:

HTML Language Declaration
We’ll add xml:lang=”en-US” lang=”en-US” to the <html> tag
Header Navigation
We’ll add an <h1> element first in the bodyText div. The text in the <h1> tag should match part of the <title> tag.
We’ll add a descriptive <h2> element before each navigation list.
Skip Navigation links
We’ll add an unordered list with links to key page elements. This is helpful for many alternative browsing technologies most notably mobile browsers and screen readers.
Right after the body tag, we’ll add:

<h2 class="hide">Skip Navigation/Accesskeys</h2>
<ul class="hide">
 <li><a accesskey="1" href="#bodyText" shape="rect">Skip to main content</a></li>
 <li><a accesskey="2" href="#searchBox" shape="rect">Skip to search</a></li>
 <li><a accesskey="3" href="#mainNavDiv" shape="rect">Skip to navigation</a></li>
</ul>

Final Code

So our final page starter code is:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us" lang="en-us">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Basic Page Layout</title>
</head>
<body>
<h2 class="hide">Skip Navigation/Accesskeys</h2>
<ul class="hide">
 <li><a accesskey="1" href="#bodyText" shape="rect">Skip to main content</a></li>
 <li><a accesskey="2" href="#searchBox" shape="rect">Skip to search</a></li>
 <li><a accesskey="3" href="#mainNavDiv" shape="rect">Skip to navigation</a></li>
</ul>
<div id="container">
<div id="header"> </div>
<div id="mainNavDiv">
<h2>Main Navigation</h2>
<ul>
 <li><a href=""></a></li>
</ul>
</div>
<div id="mainContent">
<div id="searchBox"> </div>
<div class="secondNav">
 <h2>Second Navigation</h2>
 <ul>
  <li><a href=""></a></li>
 </ul>
</div>
<div id="bodyText">
 <h1>Basic Page Layout</h1>
</div>
</div>
<div id="footer"> </div>
</div>
</body>
</html>