HTML and CSS Reference
In-Depth Information
the Same example, but with Better Markup
Contrast the previous markup to this snippet:
<td class="show-badge">
<a href="
http://www.example.com/inventory/1234
"
class="image cushioned"
title="Example Product">
<img src="
http://www.example.com/images/1234.jpg
"
class="product-thumbnail"
alt="Example Product" />
</a>
</td>
how long did it take you to figure out that this was an image thumbnail for a product? not long, especially in
comparison to the original snippet.
the extra
<div>
s have been eliminated because all those styles can be applied to the
<td>
or
<a>
elements.
Class names have been expanded to be human-readable. (our hypothetical margin issue probably comes from
the
cushioned
class, at a guess.) elements have been formatted to make scanning easy.
making these small adjustments to your markup will take a few extra seconds but save
hours
of frustration down
the road. so you should do it.
CSS3, Media Queries, and How That Affects the Design and HTML
To style the app, you'll be using CSS, including some of the new features of CSS3. Using features such as
box-shadow
and
border-radius
will allow you to give your app a layer of design polish without having to deal with tons of images.
Probably the most exciting new feature of CSS3 that you'll be implementing is adaptive layout using media
queries. This will let you apply styles based on the browser's width, eliminating the need for browser sniffing, multiple
versions of the app, or a layout that looks good only on a certain subset of devices.
However, using media queries brings up a few concerns that should be addressed in both the design and markup
stages of the app. Because the layout will be changing to best fit on the screen on which it's displayed, there's a certain
amount of flexibility in the layout that needs to be considered from the get-go.
One- and Two-Column Layouts
When looking at sites that implement adaptive layouts,
1
one of the most common techniques used is to change from
multiple columns to a single column when the site is viewed on smaller screens.
At a glance, this doesn't seem like a big deal, but it can throw a wrench in your layout if content needs to flow
in any way other than column one first, column two second, and so on (or vice versa). (For example, a site with
advertisements in the sidebar would probably get into hot water with its advertisers if the ads were suddenly pushed
off the screen below all the latest content.)
Search WWH ::
Custom Search