Optimized Appearance - Web Standards: Mastering HTML5, CSS3, and XML - page 319

To provide the highest level of interoperability and usability, web sites should be created by applying techniques
that support an optimal user experience through device-, browser-, and/or feature-detection, so the website will
be easy to navigate and read regardless of the device used for browsing (smartphone, tablet, desktop PC, etc.). As a
result, the textual content of the website won't be tiny on a phone, and the large pictures will be automatically resized
depending on the screen size and resolution.
Until recently, a large share of web sites have been designed with fixed-width layout (as described in the
previous section) that might provide precise pixel-by-pixel representation, but cannot use the full surface of
today's large-resolution monitors. It also has serious usability issues on the now widespread mobile devices such
as smartphones and tablets that come with a relatively small screen size. Even on standard resolutions, the user
might use a resized (not maximized) browser window. The endless variety of screen resolutions makes it practically
infeasible to support all resolutions with a design that is optimized for a certain resolution.
More and more people will access digital services via a smartphone or tablet rather than a computer.
In well-developed countries such as Australia, mobile browsing is over 50%, which represents extraordinary growth in
mobile technology.
One of the approaches to address the issues of barely readable texts, inconsistent layout, and inconvenient
scrollability is Responsive Web Design (RWD), which applies a flexible grid layout that is scalable (also known as
responsive layout , liquid layout , or fluid layout ). With the standardization and widespread implementation of CSS3
properties in browsers, and the growing need for mobile support, Responsive Web Design became popular in the
early 2010s.
Responsive Web Design aims to achieve optimal user experience in terms of convenient reading and easy
navigation, and “respond” to device features (hence the name). Depending on the characteristics of the device
being used, different layouts are used, along with automatically scaling website elements, including text and images.
Because some web site elements such as Flash headers containing raster graphics and video clips cannot be fully
optimized for automatic scaling, the applicability of Responsive Web Design depends on the web site. In case a
reliable fixed-width layout is used, support for mobile devices can still be provided by creating additional, device-
dependent style sheets.
The use of flexible grid layout provides advanced mobile support while using only one style sheet per site with
conditional styling for the various screen resolution ranges. Flexible layouts provide a way to create multiple column
arrangements that are re-rendered vertically (while maintaining the logical flow) when browsing the site on a smaller
resolution screen (or resizing the browser window). The columns that are adjacent on a high-resolution screen appear
under each other and the text reflows when browsing the same site on a smartphone (Figure 9-4 ).
Figure 9-4. Flexible layouts adopt to screen size