WEB STANDARDS CREATIVITY

Dirty pretty presentation
When building purely with XHTML, it is sensible to have a
good idea of what the layout of the site will be. Naturally,
we will be thinking in terms of columns and core areas,
such as masthead and footer, and often this will be
informed by a Photoshop layout (or even a sketch using
pencils and paper!) from a designer on the team. With the
Dirty Pretty Things site, this was not the case, as none of
us had yet arrived at a layout that we ourselves could
agree on, never mind the folks at the record company.
By applying an external style sheet to the fully functional
XHTML site, we approached the problem organically. This
means that, as we were bereft of an agreed-upon design,
we began working up a look and feel through experimentation
with the CSS. We tested everything from layout
(fluid, fixed, or elastic) to font choices by creating and
modifying CSS rules. This approach is slow, and demands
having Photoshop open at all times to create and tweak
background images that may or may not make it into the
final design, but it is an exciting process that removes the
restraints of a delivered, cast-in-stone design.
Armed with all the original artwork from Hannah Bays,
and slowly developing parameters such as heights, widths,
margins, and padding, a satisfying design will soon begin
to materialize. As the style sheet is applied to all pages of
the site, it is easy to see what is working site-wide. What
areas of the artwork will work as backgrounds? Can certain
areas be used as background tiles? Is a common color
palette for text and core elements achievable from the
collected source material?
The next step is to discuss the design with colleagues,
involving much chin-stroking and coffee, before making
sure the client is happy with the progress so far. Then we
hone the ingredients bit by bit and tighten the design,
before throwing it out for usability testing. Finally, the site
is launched and the collected Agenzians can hit the pub.
Background images
Perhaps the most dramatic change from XHTML to carefully
styled prettiness happens where the main background
image meets the masthead and its descendants. A lot of
careful Photoshop work is applied using a succession of
background images, as illustrated in Figure 1-4.
Figure 1-4. Split into several layers, various background images
are juxtaposed.
Before you start going hell-for-leather with background
images, it is important to consider how this
will affect the end user. Although less important than
it used to be, you still need to realize that some folks
are downloading web pages using really slow
modems. A typical web page might contain something
like 15KB of text and therefore download pretty
quickly. Add 35KB of background images to that,
and you are reducing the speed of the visitors’ viewing
experience significantly, at least until the browser
has cached the images. Keep image use light, and go
overboard only when it is really necessary or when
you are designing for an audience you know will be
using super-fast broadband connections.
Under no circumstances do we use background images to
convey important information when no alternative is
available if the images do not display or are manually disabled
by a user. For example, we don’t use a background
image to show the title of the website, any navigation
items, or any kind of flattened text content, unless we also
provide this information with standard text if images are
turned off. Background images are decorative adornments
and certainly not to be considered “content,” which is why
they are referenced in the style sheet as separate presentation
elements.
chapter 1 Semantic Structure, Dirty Pretty Presentation
9