Responsive Web Design

The types of device used to access websites are changing. In recent years, both smartphones and tablets have led to a new wave of internet access on devices quite different from desktops and notebooks. In the future, the diversification of online access is likely to continue with the spread of both e-book readers, web-browser equipped televisions and wearable computing gadgets.

Existing web-browsing devices each have different characteristics. With regard to hardware, there are differences between processing power, screen size and resolution, and whether a keyboard and a mouse are required for operation. In terms of communication infrastructure, the data communication speed and display of webpages can be very different dependent on a 3G, 4G or Wi-Fi connection. Additionally, there are further differences based on both the operating system and browser.

Until very recently, desktops and notebooks accounted for the majority of internet access. Consequently, websites were built first for the PC and then after parts of the site were optimized for specific mobile devices. However, because of the speed at which web-browsing devices have diversified in recent years, such an approach is increasingly complicated when attempting to accommodate the differences in characteristics between browsing devices.

This changing environment has given rise to the notion of “mobile first”, which has spurred the idea of “responsive web design”. This way of thinking sees sites designed firstly for mobile devices, with the scope then extended to PC sites. According to Ethan Marcotte , a leading advocate, “responsive web design” should consist of three elements:

A site using these elements, whether viewed on a mobile device or a PC, will provide both a high level of clarity and good usability.

Embracing the philosophy of a responsive web, we are able to construct new sites or undertake the redesign of existing sites. Furthermore, we can guarantee that “responsive web design” can be used for present devices whilst also ensuring compatibility with devices of the future.

The “one source - multi use” concept permits the usage of a one source html file to display content on a variety of devices. Even websites that are designed for use on for individual devices can be optimized for multiple device usage with the introduction of a CMS style mechanism. This one source - multi use concept allows businesses to enhance their customer experience and reduce operating costs.

One of the requirements of responsive web design is the use of media queries. This is a specification where the browser adjusts the style sheet in order to render the characteristics of the display screen to a device. The active usage of CSS3 media queries tells the browser how to display the page (both text and images) for a specified device's screen width, thus enhancing the user experience.

The flow for the construction of sites using the idea of “mobile first” does not differ greatly from that of PC site construction. However, the design and structure is based on that of a mobile device thus incorporating the principles of the “mobile first” philosophy. In addition, as part of the necessary responsive design process, we provide support with regard to the screen size and respective layout.

Furthermore, we offer the necessary site inspection. The examination, possible from the visual design stage, will focus on smartphone support and improved user experience. However, dependent on the device and browser, a more extensive study will likely be required.