Introduction to Web Standards - Web Standards: Mastering HTML5, CSS3, and XML - page 27

There is a wide choice of computer monitors and displays, all of which come with a different size, aspect ratio,
resolution, pixel density, contrast ratio, and color fidelity. To support the wide variety of screens, web sites should be
resolution-independent . Functionality should be satisfactory and similar on a variety of devices regardless of different
hardware controls and features. Device independence provides support for different access mechanisms and different
modes of use (for example, visual and auditory use). The aim of device independence is to “match Web content to
the needs, capabilities, and limitations of the delivery environment” [120]. The popularity of mobile browsing makes
device independence a major concern in modern web design.
Markup languages are good examples for device independence standards. CSS also provides web design
techniques to achieve device independence through device-specific style sheets for mobile phones, projectors, and
printers, 13 as well as conditional styles depending on viewport size and device features. Java applets can be executed
on a variety of devices under different platforms, because Java is a cross-platform programming language. Image file
formats such as JPEG, TIFF, or GIF are also device-independent files. In document publishing and sharing, PDF is a
classic example for device independence.
Separating Content from Presentation
In the early days of the Web, the major concern in web publishing was the web presence itself. At that time,
web documents were limited mainly to the combination of lightly formatted text content and images. When the
possibilities widened, the Web soon became a full multimedia platform, and inline styles flooded the markup of web
documents. To update the color or the font size of an element throughout a site, the style attributes had to be updated
one by one on each page.
To solve this problem, the W3C introduced a new Golden Rule in web design: formatting should be separated
from structure, which centralizes styling, making it possible to change the styles of an entire web site from a single
location. A further benefit is that the markup becomes shorter, less redundant and complex, clearer, and easier to
interpret and render.
Usability
Usability can be defined as “setting clear and concise goals for a web site, determining a correct and exhaustive set
of user requirements, ensuring that the web site meets user's expectations, setting usability goals, and providing
useful content” [121]. It is a measure of how easily a system can be used. Usability can be achieved by optimizing user
experience via browser independence, accessibility, expected behavior, logical site structure, and reliable layout.
Confusing content and disturbing effects should be avoided. Usability should not be confused with accessibility,
which means access to all, regardless of user disabilities or device limitations.
Web sites should provide useful content that is relevant and appropriate to the audience. There are numerous
requirements for the appearance of texts, links, lists, controls, graphics, and multimedia objects. Beyond content,
the navigation and site structure should be organized in a way that meets user expectations. This can be achieved by
assessing the site with test users. User experience and user interface design should precede web design and coding.
Reliable Layout
Reliable positioning of web site elements has always been a major concern in web site development. Because of the
enormous number of factors to consider, some elements should be positioned absolutely while others relatively.
There are elements that are meant to be fixed, even if the content exceeds the browser window and the content
is scrolled (see the section “Reliable Positioning”). Layout is in strong correlation with device, resolution, and
browser independence. On mobile-ready web sites, the objects should rescale according to the viewport size and be
proportional to each other, while the text should reflow dynamically on smaller screens.
13 The same web site rendered without the background image on mobile phones is a good example.