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

Chapter 9
Optimized Appearance
Design has always been an important factor in web site development, partly because appearance is responsible for
the first impression. If the design of a web site catches the eye, it is more likely that visitors will become customers
or clients. Web typography has recently started to attract attention, especially though proper whitespace handling
and the introduction of web fonts. Images that are fundamental parts of web sites should be optimized for web
publishing in order to achieve a reasonable quality to file size ratio and minimize download time. Since high-speed
Internet connections have become widespread, the need for sharing multimedia content has increased enormously.
Until the new elements introduced in HTML5, general objects have been used to embed audio and video content.
Although design and multimedia are extremely popular, the basic usability principle should always be kept in mind:
functionality over design.
In this chapter, you will learn how to create multiple-column layouts and fixed menus without the now-obsolete
approaches, such as the ones that applied tables and frames. This chapter also describes a CSS property,
called z-index , which provides full control over the appearance of layers above each other.
Until recently, most web sites used one or more fonts from a small list, resulting in a kind of monotony.
There have been many methods for using a greater variety of fonts over the years, but not one was very satisfactory
or dependable. You can now improve the appearance of text by declaring font files to be used for rendering textual
content, which makes it possible to display web pages with carefully selected fonts in superior quality. However,
web sites can contain not only text. You will learn how to optimize images for web publishing and embed multimedia
files such as audio and video.
Layout
The layout of web content determines the overall appearance and has a large impact on functionality,
usability, accessibility, mobile-friendliness, and design. Ideally, web layouts are reliable, as well as browser- and
resolution-independent.
Positioning and Floating
Some web page components are placed on the page in relation to a corner of the browser window, such as the top-left
corner (the 0, 0 position), while the position of others depends on the position of their parent elements ( containers ).
There are various options including relative, absolute, and fixed positioning. Beyond the appropriate positioning,
you must be careful to provide browser- and resolution-independent solutions.
On your web site, perhaps certain components should “float” on the web page, and the content should appear
next to, rather than above or below, the main text. Typical examples are images, which frequently apply the float
property to wrap text around images.