Notes on An Event Apart
Rick Ells
June 29, 2007
I attended An Event Apart last week and found
it very worthwhile. I expected a somewhat more technical
program, but instead heard from a variety of professionals in
big time Web design. The following are some brief notes on
what I heard and what I thought.
Secrets of the CSS Jedi
Eric Meyer of MeyerWeb.com and many books talked
about the puzzles of getting consistent presentation across
browsers, particularly focusing on the variations between the
default stylesheets. A method he uses is a "reset file"
stylesheet that resets defaults to a common baseline.
His first point was to recognize that each browser has a
default stylesheet. On Windows the FireFox default stylesheet
is at C:\Program Files\Mozilla Firefox\res\html.css. If you
take a look at such a file, you will see it is pretty
complicated.
So what could be in a "reset file"? A first temptation is
to zero out all variation, such as with a naively universal
statement like
* { padding: 0; margin: 0; }
Although Meyer has used such vast statements in the past,
he strongly recommends that you instead create a reset file
that specifically targets those elements you want to set a
baseline for. In other words, no *; just a long list of
selectors or descendant selectors for specific elements or
structural situations. The problem is that the global
statement is likely to break the more complicated structures
such as lists and forms, making you responsible for
straightening them out in your stylesheet. He has an article on MeyerWeb that
gives more detail.
Writing the User Interface
Jeffrey Zeldman (author of Designing With Web
Standards ) reminded people that the content itself is a
user interface.
- Content drives traffic
- The language used is the main interface users interact
with
- Copy is the cheapest part of your site to fix
- Site reorganizations are political and may take a lot
more energy to change
-
All copy is brand opportunity
- If the copy works for the user, you have a
competent brand
- If the copy misleads the user, you are saying you
do not know what you are doing
- "Guide copy" makes clear where you are, what you can do
next. It should be clear, brief, audience appropriate, and
brand appropriate
-
"Brand copy" orients the user to the brand
- A List Apart has a brand copy
of "For people who make Websites"
- "Copy copy" can be less succinct, makes up the bulk of
the content
- "Speaking URLs" help users connect, such as
http://alistapart.com/design/
All this relates to how words work online:
- Web users are most often in "find" mode, scanning for a
key phrase or word
- Even readers who have found what they want scan when
online
- Keep in mind that English is a second language for a
growing portion of Web users
- Vocabularies and education levels vary widely
Zeldman listed several sites he felt were making good use
of guide and brand copy:
Notes from the Engine Room
Tim Bray, one of the creators of XML and inventor
of one of the first public Web search engines back in 1995,
had some thoughts on how to think about the Web:
- Stay away from people who think the center can tell the
edge how to think - the smart people are often not at the
center and assuming you are smarter than them because you
are at the center is not good thinking.
- We need to get conversational - identify people who
know what they are talking about and give them a blog
- Strive to bring wisdom in from the edge - most of the
smart people are out there somewhere else, find a way to
give them a voice
-
Developers care about scaling, time to market, and
maintainability
- PHP has a low barrier to entry, but gets
complicated when it scales
- Ruby on Rails focuses on not repeating code and
offering conventions (rather than configuration
options), so it is productive. (Check out the PHP
versus Ruby videos on Railsenvy.com )
-
Richer interfaces are needed for users, but the Web as it
is (text centric, link centric, and with a back button)
really works for many, many people
- Flash is receding and will not sweep the Web
browser away, it will find a niche where it is
useful.
Getting Real With Accessibility
Shawn Henry of W3C talked about recent
developments in Web accessibility
- Shawn has a new online book (also available in PDF if
you want to print it out) about accessible Web design at
www.uiaccess.com/JustAsk/
- Web Content Accessiblity Guidelines version 2 (WCAG2)
(still in working draft form at http://www.w3.org/TR/WCAG20/
) states principles, guidelines, and success criteria in a
much broader and inclusive way than the old WCAG1. The
success criteria are stated in several levels based on
testable measures. The intent is for it all to be adaptable
as technology changes.
- Shawn encourages everyone to involve people with
disabilities in design and testing of their Web designs. A
goal is to better understand "how real people use the site"
and to avoid spending a lot of time on things that are not
of much benefit.
- Good accessible design, because it builds on standards,
semantics, structure, and alternative texts, often raises a
site's ranking in search engines.
Shawn also reviewed screening techniques, which are quick
ways to get a feel of the accessibility of your pages:
- Test your pages with voice browsers
- Set aside your mouse and attempt to access and use all
the functionality of the site using only the keyboard
-
Install a toolbar in your browser that will help you
evaluate the pages
-
Using the toolbar, evaluate the following:
- Overall structure of the HTML/XHTML; is it
well-formed, error-free, and valid?
- Use of headings; do the headings present the
topic/sub-topic structure of each page?
- Is there a skip-to-content link?
- Are lists properly marked up?
- Do link texts make sense out of context, or are
they just text fragments?
- Turn off images and evaluate alt texts, do they
express the content and role of the image?
- Turn off sound; is a transcript available?
- Turn off CSS; is the result coherent and
usable?
- Turn off Javascript; is the content still
available in a usable form?
- View the pages as text-only (you may need to use a
text browser like Lynx ); Does the page content
linearize intelligibly?
- Increase/decrease text size and window size; does
the page flex and scale, or does it fall apart?
-
Try other evaluation tools
Shawn also gave a quick overview of what is happening in
the area of AJAX, Javascript and accessibility, basically
saying that the newer adaptive technologies (AT) have much
improved abilities to work with well-design pages using AJAX
and Javascript. She recommended several papers:
From Dots to Design: Gridlines
Khoi Vinh, Design Director for the New York Times,
demonstrated and discussed the use of grids in designing Web
pages.
- Designing with a grid is "a manifestation of the will
to order"
- Early modernist page designers wanted to derive beauty
from the innate qualities of a machine.
-
Grids can be used to control the experience of the page
visitor
- Set up a left to right heirarchy, with navigation
on the left, main content in middle, and additional
resources (or ads) on the right
- Grids can impose too much order, making pages too
consistent and making it difficult for readers to know
where they are in the site
-
To use a grid:
- Start with requirements or fixed constraints
- Constraints are the mother of design
invention
-
Common to design for a 1024x758pixel screen
- Actual area of display is somewhat smaller,
974x650px
- Ads or graphics may have fixed dimensions.
On the Web, a "big ad" is usually
365x280px.
- Identify a appropriate number of columns for
your grid. You may want anywhere from three to 14
equal width columns
- Set widths of blocks on the page to align with
the column grid. Some blocks may be only a single
column wide, some may stretch across multiple
columns.
- Occasionally, break out of the grid just to
show everything is not trapped in the grid.
- Copywriting is interface design! Words are part of
the design.
-
Sites Khoi liked include: