Adaptive Web Design with HTML5 and CSS3
Adaptive Design is an approach to Web design that utilizes fluid layouts, CSS3 media queries, and custom scripting to effectively display content at any screen resolution. Website elements’ sizes are based on relative values such as percentages or em values rather than pixels or points. This allows content to resize as the browser window does. CSS3 takes this approach one step further with the introduction of media queries.
Media queries are conditional statements that call upon predefined styles or stylesheets based on the device used to access a Website. For instance, smartphones are not suited for columnar data. Therefore, Websites that cater to the smartphone screen size display content in a linear fashion. Media queries allow you to define conditional styles for any resolution and, in the case of the iPad, orientation as well.
HTML5 brings even more control to the developer by making use of custom attributes for images. In a flexible layout, large images are scaled down to fit smaller viewports. This can eat up valuable bandwidth for a mobile user. With a custom HTML5 tag, you can define a smaller version of the same image and use Javascript to load the appropriate image.
Desktops, smartphones and tablets can all have variations in screen resolutions. Creating an application using Adaptive Design with media queries can ensure that your content is displayed as intended, without creating dozens of different applications or stylesheets.
