Tuesday, 29 January 2013

Responsive Web Design

The first attempt to allow access to content and basic functionality of a website and provide an advanced version of the same site to browsers with better or more complete Web Standards support is known as Progressive Enhancement which was introduced in 2003. The corresponding approach is often referred to as graceful degradation. By applying best practices such as creating a correct document structure in the markup, web designers can contribute not only to Progressive Enhancement, but also Web Accessibility and overall code quality.
To provide the highest level of interoperability and usability, websites 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 PC, desktop PC, etc.). 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.
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 liquid layout or fluid layout). Responsive Web Design has the aim to achieve optimal user experience in terms of convenient reading and easy navigation, and "respond" to device features. Depending on the characteristics of the device being used, different layouts are used, along with automatically scaling website elements, including text and images. Since some website 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 website. In case a reliable fixed-width layout is used for whatever reasons, support for mobile devices can still be provided by creating additional, device-dependent style sheets.

No comments:

Post a Comment