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.
Until recently, a large share of websites has been designed with fixed width layout (typically between 760px and 960px) that might provide precise pixel-by-pixel representation, but cannot use the full surface of today’s large monitors. It also has serious usability issues on the more and more popular mobile devices such as smartphones and tablet PCs that come with a relatively small screen size and resolution. 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.
In well-developed countries such as Australia, smartphone use is over 50% now which represents extraordinary growth in mobile technology. Today, more Australians access digital services via a smartphone than a computer.
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.
Another approach, called elastic layout, applies fully scalable elements declared in scalable units in the style sheets, which is the most advanced yet seldom applied web design layouts.
Although RWD can be beneficial to mobile users, responsive websites are not necessarily accessible, and vica versa. However, the proper use of standards results in websites that are accessible and responsive at the same time.