International Website

What Does “Responsive” Mean?

Web designers can choose from a number of different methods to provide mobile visitors with an optimal viewing experience from any device. The most common approach used today is the ‘classic’ Responsive Web Design (RWD) approach. It’s also possible to choose other approaches, like adaptive design, or RESS (Responsive Web Design with Server Side Components).

Responsive Web Design is a technique in which websites automatically rearrange their content (text, graphics, videos and more) according to the width of the browser minimizing re-sizing, panning and scrolling. An RWD site sends the same HTML, CSS and JavaScript to any device that requests content, and the rearrangement happens on the viewer’s side by their browser. To find out if a website is responsive, you can change the size of desktop browser’s window. If the content rearranges itself on-the-fly to fit the smaller window, this means that the website utilizes RWD.

Is RWD A Good Thing?

RWD is great for the developer designing websites. It allows a site to be built as a ‘one size fits all screens’ project, and there is no requirement for a separate mobile site. However, visitors can have a very different experience. Take for example the website http://www.ifc.com. This site is built using the RWD methodology, and it easily re-sizes to fit any device or browser.

For this example, the site was accessed using the latest version of Google Chrome, with iPhone 5 as the selected device, and no network throttling. This meant that the site was served to us as fast as possible. Ifc.com is an image heavy site designed for desktop users on fast connections. However, they have implemented a responsive framework that resizes and reorders content depending on which device is used to view the site. This does come with some caveats. They do not distinguish which type of device is accessing their site, so our iPhone 5 was served with the full desktop experience, albeit crushed to fit the size of the screen.

This means that over 7 MB of information was transferred, fine on our broadband connection in the office, but quite slow on 3G connections and worse if there is poor signal. In all, it took around 1 minute for the home page to load on average, which is a very long time to wait. Studies show that visitors dislike wait times of over 5 seconds when they visit sites. And their patience is even less while using mobile devices.

ifc.com-2

What’s The Solution?

In order to solve this issue, a combination of RWD and Server Side device detection techniques (RESS) provides a flexible approach. The aim should be to identify which device is used to access your site before any content is served. Once identification is accomplished, the appropriate size of content can be delivered. For example, instead of serving an image that have width 1920 pixels which would suit a 1080p screen, a much smaller, optimized version can be served to suit the mobile user and device. This saves both time and bandwidth – which makes sure visitors stay longer, enjoy your site more, and hopefully – convert to customers for what you’re selling.

However, there is one more way. Adaptive design creates brand new experiences for the user based on which device they visit from. There is a fundamentally different code base for each type/size of device expected to visit. This allows highly optimized versions of a site to be tailored for each visitor.

Siteonmobi uses a combination of adaptive and responsive techniques. Using DeviceAtlas to identify which device is accessing the site, Siteonmobi is able to respond with a device-appropriate version. Responsive techniques are used to do the fine tuning between different device sizes – saving time and data, providing users with lightweight, beautiful sites that are just as feature rich, but a lot more performant than a heavy RWD site.