Best Practices - Web Standards: Mastering HTML5, CSS3, and XML - page 426

Content in Logical Order
Even though CSS styling makes it possible to arbitrarily position document sections and elements, content should be
written in a logical order. This approach has the following advantages:

• Easier development and maintenance

• Higher efficiency in text-based browsers

.css file cannot be loaded or the • Legible and usable content even without CSS (in case the

style sheets are turned off )

• Improved accessibility through advanced support for aural browsers and screen readers that

will read the pages without breaking continuity

Mobile-Friendly Layout
In Responsive Web Design, you can create conditional styles with CSS3 to be applied depending on the screen
resolution. On smartphones, even if the resolution is huge, it is more convenient to have a collapsed, easy-to-tap
menu than a wide menu on a full-width page. Tablets usually have bigger screens, while desktop monitors are even
bigger in size, but the resolution of smaller screens is not necessarily smaller than that of big monitors. The best
practice is to create the core styles for the site, and create conditional style override for the different screen resolution
ranges using min-width and/or max-width , and a font size proportionally bigger for smaller screens (Listing 13-1).
Mobile First Design means that the core styles are designed for mobile devices and the style override adjusts the layout
and font size to bigger screens while the standard approach is just the opposite.

Listing 13-1. Conditional CSS3 Styles for Different Screen Resolution Ranges

@media (min-width:320px) {

body{
background: none;
}

#content {
width: 300px;
font-size: 7.2vw;
}
}

@media (min-width:480px) {
#content {
width: 460px;
font-size: 5.9vw;
}

}