Rather than tailoring disconnected designs to each of an ever-increasing number of web devices, we can treat them as facets of the same experience.
– Ethan Marcotte
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 your website will be easy to navigate and read regardless of the device used for browsing (smartphone, tablet PC, desktop PC, etc.). The text of your webpages won’t be tiny on a phone, and the large pictures will be automatically resized depending on the screen size and resolution. As a result you will have more satisfied customers than ever!
Until recently, a large share of websites has been designed with fixed width layout (typically between 760px and 960px) that provides 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 optimised for a certain resolution.
In well-developed countries like Australia, smartphone use is over 50% now which represents extraordinary growth in mobile technology. If you do not provide easy access to information and services on mobile phones, you lose potential customers. By 2014, more Australians will 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 optimised for automatic scaling, the applicability of Responsive Web Design depends on the project. 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, 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. The proper use of standards results in websites that are accessible and responsive at the same time.