my little corner of the web

AEA Chicago 2009: My Top 5

2009-10-16T10:21:00.001-05:00

Going to An Event Apart Chicago was an unbelievable experience for me. Here's the top 5 things that I came away with (some new, some reminders, some calls to action), as well as links to all of my session notes.

Top 5 for Me

Lorem ipsum, you are dead to me. No, really. Kristina Halvorson will hunt me down.
- Using placeholder text centers the design on the visual rather than the content and reduces the content to mere copy--little more than random text (as far as the design is concerned).
Content is king. Also, queen.
- The content is why people are on the site, not the design (though a bad design can turn them away). Be strategic about content, define a maintenance plan.
- Central focus on content is also a prerequisite to truly embracing progressive enhancement. If the design is the main thing, of course I'll want it pixel-perfect. If the content is the main thing, it just needs to look good in each browser (based on each browser's capabilities).
I don't need massive resources to focus on UX. I should just do it.

UX is a mindset, and is scalable from the smallest orgs to the largest. I can do things like making feedback easy, being responsive, and

{ -webkit-moz-o-properties:awesome; }
- New CSS3 properties are great and browser support is getting better. As long as I don't forget the *ahem* other browsers, I can go ahead and use them.
- Using new properties with progressive enhancement will the site look better, speed up my development timeline, and remind me what's important--the content.
Forms suck.
- To a user, forms are an obstacle, not a tool.
- Focus on making the form easy to use and creating a quick, easy vertical scan line. Also, I need to stop center-aligning the submit button and make it stand out from the reset button (if I use one).

My Session Notes

AEA Chicago 2009: Progressive Enrichment With CSS3

2009-10-15T01:23:00.000-05:00

Dan Cederholm finished out An Event Apart Chicago 2009 with a demonstration of some advanced CSS3 techniques.

earliest example of progressive enhancement: font stack

8 simple ways to apply advanced CSS2/3

Do web sites need to be *experienced* the same in every browser?

generated content
- :before, :after
enriching form elements
- -border-radius
- attribute selectors
RGBa
- great for use on top of textures
- create contrast
- makes choosing complementary colors easier: one base, different opacities
drop-shadows
- use box-shadow with RGBa (awesome!)
- and text-shadow work with RBGa?
enrichment from interaction
- transform: scale() (use that for news)
- -webkit-transition
bulletproof button text
- negative text-shadow = inset
opacity for simple hover treatments
- 50% for normal state, full for hover
- don't need to export different images for different opacity levels
- single image, different opacities
- dim unselected options
- adding (slight) rotation
fade effects
- webkit_________

Put it all together http://dowebsitesneedtobeexperiencedexactlythesameineverybrowser.com.

Since it's part of the experience, not the content, it's OK to experiment.

Q&A

-transition goes on normal element, but activated on hover
So you can't do different transition for different actions?: yeah, seems like that's true
With RGBa, other browsers will ignore rule?: yeah, so specify hex, then RGBa
How to deal with clients when it doesn't look the same?: refer back to Andy Clark's talk - sell less time, less code, fewer assets, etc.; probably won't notice it/check it in all browsers
Why not use jQuery?: if it's crucial, might want to use JavaScript
photoshop comps aren't going to show interaction?: I guess this was an argument for using comps, making it easier to sell different experience to client?
How is it different from blink/frames?: not really a valid comparison, not markup, subtle
Aren't we encouraging evilness of Microsoft by using vendor-specific?: transitions are only ones that are not part of the CSS3 spec; "this is cool, so let's act"
You use a lot of PNG backgrounds, why not use gradients?: yeah, old habits, sure, use CSS3 gradients

AEA Chicago 2009: Designing Virtual Realism

2009-10-15T01:08:00.000-05:00

Session 11 of An Event Apart Chicago 2009 was Dan Rubin's discussion of virtual realism and relating web design to product design.

Input devices are somewhat divorced from the screen (with exception of touch screens)
Make regular UI design more tactile by relating interface design = product design

Attractive things work better

because we *think* it'll be easier to use, it *is*
users feel welcome, stress is relieved

Find inspiration

art: we have a pretty good idea of users' perspective (illusion of depth)
make things realistic - environment more like the context people are used to

Texture:

subconsciously associate physical features/feel with a texture
subtle texture/noise
creating environment has to benefit the user
shoot photos
scan items
combine/play

AEA Chicago 2009: Web Form Design in Action

2009-10-15T00:58:00.002-05:00

Making web forms easier for the user was the subject of Session 10 of An Event Apart Chicago 2009, presented by Luke Wroblewski.

forms sit between the user and your site
no one wants to fill out a form
IN YOUR WAY!!

7 best practices

Path to completion - light at the end of the tunnel
- clear scan line
- need to draw a straight line for users to scan and follow down the form
- progress indicators (start pages? - not sure about that)
People jump directly in at first field
- top aligned labels vs. right aligned labels vs. left aligned labels
- different design for different uses
- can use label within input field, but with caveats
Help & Tips
- Why do you want me email?
- Why do I need a username?
- w/ dynamic data, careful obsuring the form; maybe dedicated help area
- minimize help text; if there's too much, you're design probably sucks
Inline validation
- no pogo-sticking: realtime feedback (username taken)
- push people toward more correct answers (password strength)
- prevent an error state (confirm password)
- where & when? show validation onblur, except selecting a username; keep persistent A List Apart article on inline validation
- prevent people from having to fill in forms
- show input masks (gently guide) reveal formatting onfocus
form buttons are not equal
- save/submit good, reset/cancel evil
- people aren't thinking, they want to get out of the form fast
- drop people off at the "good part"
form organization; be conversational
- one form should speak with one voice (not conglomerate from all depts, etc.)
gradual engagement
- sign up forms must die! sign up is an OUTCOME
- make successful within first few seconds of engagement: lightweight action that's integral

AEA Chicago 2009: Building Stuff Fast–And Getting It Approved

2009-10-15T00:48:00.000-05:00

Simon Willison talked about how some ways to speed up the development timeline in Session 9 of An Event Apart Chicago 2009

knock something out as fast as you can and hope it doesn't suck too bad
cheaper to build than to have the meetings to determine what to build

Interactive development

use console tab in firebug as a learning tool
phpsh - interactive php!
massively speeds up dev time (no more compiling, uploading)

Client-side prototyping

JSON-P with padding - allows callback to defeat same origin policy
YQL: SQL queries against APIs

"Beware the Phantom Web"

Phantom Web: view source = JavaScript tag only
use JS-only for prototyping, but don't leave it
frameworks purpose: eliminate boilerplate, DRY (don't repeat yourself)

Rapid development in a group

rent a fort!
pair programming
- more than doubles productivity
- keeps focused/accountable
- constant peer review
KJ Method
- achieving consensus
Great for learning, not as good for shipping a product

Making your organization more hackable

"Innovation" - use it to get away with anything
Hack days
- only rule: build something and demo it to your peers
- keep rules to a minimum
- drop constraints & build quickly

Random

screen scraping APIs
with YQL, select CSS selectors

Open Source

not "coding communism," an ecosystem
too much effort to release your own code
- use github where you don't have to maintain the project
- file-and-forget

Q&A

How does rapid building affect pricing?: depends how honest you are :); can be a selling point, too

AEA Chicago 2009: Using CSS3 Today with eCSStender

2009-10-15T00:22:00.000-05:00

In Session 8 of An Event Apart Chicago 2009, Aaron Gustafson demonstrated the eCSStender JavaScript library.

Browsers are extending CSS (-moz, -webkit, -khtml, -o), we should be able to as well.

Features:

<16K
starts when DOM is ready
supports specificity/cascade/media
usually not even a flash while JS works

Use .register() to create extension

lookup
- selectors (tag, regex, array, function-advanced)
property (specific, regex, array, vendor-specific, etc.)
- can be fingerprinted (completely lost about that)
callback function
- selector, properties, medium, specificity arguments

.lookup()

pretty much .register() but read-only, returns an array

Other Stuff

.isSupported (tells if browser natively supports property)
usally caches, but can disable certain stylesheets or disable completely--ignore(), disableCache()

Q&A

I'd love to include them, but none of the questions were repeated for the benefit of the group

AEA Chicago 2009: JavaScript Will Save Us All

2009-10-15T00:12:00.000-05:00

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

2009-10-14T23:47:00.001-05:00

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

use individual content modules, end-user can pick-and-choose
same as Jason Santa Maria

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

2009-10-14T23:34:00.001-05:00

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
- 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

2009-10-14T23:11:00.000-05:00

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

determine context
- that is, they help you determine the context
do research
make a list
- of nouns
- concept models are nouns connected by verbs

find good starting points

start with more
- to move stuff around and experiment
label everything
- the more active the verbs the better
- use plural nouns
balance familiar and unfamiliar
- use familiar to describe unfamiliar
- need a mix of both
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; 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

2009-10-14T22:45:00.001-05:00

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
  - not visual, it's user experience
  - Jesse James Garret's The Elements of User Experience and iconic poster leave content consideration until the end of the process
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

2009-10-14T17:15:00.001-05:00

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

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)
Find the Message
- this one ran together w/ #1 in my mind, so some notes from #1 should probably go here.
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
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
Think Horizontally, then Vertically
- grid=parfait
- tiers building on each other
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)
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

2009-10-14T16:25:00.002-05:00

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

2008-12-04T10:40:00.000-06:00

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

2008-11-25T08:27:00.000-06:00

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>