HTML and CSS Reference
In-Depth Information
You can also conduct
user tests
, recruiting real people to try your site and give you feedback. Observe
what they do and where they struggle in the course of completing a common task; it's amazing what you
can learn from watching real users interact with your websites.
View the site in multiple browsers and devices—as many as you can get your hands on. Each browser
may treat your CSS in slightly different ways. However, don't be misled into believing that a website should
look exactly the same in every browser. Trying to achieve pixel-perfect, identical presentation across
different browsers and operating systems is a recipe for distress. Some minor cross-browser differences
won't bother anyone. After all, real users don't open two competing browsers side by side to compare
where the pixels line up.
If you use some of the more advanced parts of HTML5 and CSS3, you're pretty well guaranteed to see
some differences between browsers because they're at different levels of supporting these emerging
standards. If you've practiced progressive enhancement and provided sensible fallbacks, your visitors may
be none the wiser.
Instead of striving to achieve perfectly identical appearances in every browser, concentrate on offering a
consistent experience
. Is the site readable, functional, and does it look presentable? Are any elements the
wrong size, completely misaligned, or in the wrong position? Some small variations are to be expected, but
as long as those variations don't harm the design or make the site more difficult to use, they might not be
worth worrying about.
Building Power Outfitters
Imagine you live in a world where superheroes are real, where daring defenders of right don colorful
costumes and battle for truth and justice against equally colorful villains. In such a world it goes without
saying that these masked peacekeepers would form a lucrative niche market for highly specialized clothing
and accessories. After all, you probably can't buy a custom fitted cowl with matching utility belt at your
local mall. This is a job for Power Outfitters Superhero Costume & Supply Co., a premier supplier of
costuming, gadgets, and gear for the discerning costumed crime-fighter. And they need a website.
In the rest of this chapter we'll guide you step by step through the assembly of our fictional website for our
fictional superhero supply company. We'll build the document from scratch using semantically rich,
accessible HTML5, explaining our markup choices along the way. Then we'll apply a layer of presentation
to that underlying structure with simple CSS, demonstrating a few more clever tricks you might find useful
in your own work. We'll further enhance the site's presentation with some newer, more advanced
properties and techniques from CSS3, showing you a few parts of this emerging standard that you can use
on the Web today.
We're only focusing on building the home page in this chapter, and you'll just have to pretend this is part of
a larger website. Even from this one page example you can see how the patterns we establish here could
easily carry over to other pages, such as catalog listings, product details, and order forms.
