Mobile Websites, Responsive Websites & Adaptive Websites: A Comparative Analysis

With Smartphones, tablet PCs, and a horde of handheld gadgets gaining ground at a fast pace, it has become imperative for the organizational stakeholders to address the issues related to user interactions, especially when their websites are being viewed across devices of varying screen size.

Contents

  1. Overview

  2. Mobile Website

  3. Adaptive Website

  4. Responsive Website

  5. Comparative Study-1 (Responsive Website & Adaptive Website)

  6. Comparative Study-2 (Mobile Website & Responsive Website)

1. Overview

While the standard display resolution used in desktop computers and iPad is almost same (1024×768 pixels), the third generation iPad with the same screen size, offers a resolution of 2048 x 1536 pixels. In contrast to these, the screen resolutions of the Smartphones vary from 320 x 480 pixels in average to 480 x 800 pixels in high-end Smartphones. The screen resolution of iPhone also varies from the 320 x 480 pixels to 640 x 960 in iPhone 4 and 640 x 1136 in iPhone 5. Thereby, we are left with multiple devices having more or less same physical dimensions but different resolutions and this has complicated things. Hence, the concept/practice of fixed-width web design has faded into oblivion!

Diversified pixel density size has forced the web industry to reassess how a website would appear in various devices. Furthermore, multiple browsers and different operating systems have added to the woes. In strive to enhance the visitors’ experience, who are repeatedly browsing websites in different devices, the web industry has come up with a couple of solutions. In the following paragraphs, we will discuss about those solutions and follow it up with a comparative study.

2. Mobile Website

A mobile website is completely different version of the website that is specifically designed and optimized to function across multiple mobile devices. When you have a mobile version of your website, the users visiting your site from their Smartphone will be automatically re-directed to the mobile version.

The challenge of creating a mobile version of the site, however, lies in reducing certain features such as flash images and content, without eliminating the essential aspects and functionalities of the site. Here’s the quick look at the common practices that are followed while creating a mobile website-

  1. Mobile websites feature one-way scrolling (vertical scrolling). Horizontal scrolling is a strict no-no.
  2. The content of the mobile website is often chopped down and summarized in couple of paragraphs or in bullet formats. The content is often different to the ones in the desktop version.
  3. Minimal graphics are used and flash are usually kept at bay. This is done to decrease the page loading time.
  4. Navigation menus are simplified to enhance the user-experience.
  5. The important facts like the Contact Details, e-mail id and the phone numbers are kept in the front so as to grab the users’ attention in the very first go.
  6. A mobile version of the website usually has a link that offers the option to the users to access the desktop version from their phone.

According to Google, a mobile website should take five seconds or less to load. It should have user-friendly features such as over-sized and prominent buttons, prominent search box and minimum scrolling.

One of the best examples of mobile site is http://firstamericanautoglass.com/. The screenshot below will show how this website would look in a desktop and in a mobile interface.

First American Auto Glass Desktop Version

Desktop View

First American Auto Glass Smartphone Version

Smartphone View

 

3. Adaptive Website

In adaptive design, multiple versions of a site is created and complex programming is installed on the web server which detects the particular device on which a webpage is being viewed and delivers a version of the website optimized for the specific size of the device. Simply put, a website with adaptive design will change to fit a predetermined set of screen and device sizes, while utilizing the principle of Progressive Enhancement, without distorting the look and feel of the site.

Here’s a quick look at the common features of adaptive web design-

  1. Adaptive web design uses an auto-detection script on the web server to identify each device on which a site is being viewed and sends specific files for that device.
  2. An adaptive website involves layering the design through defined layout sizes and is optimized for every mobile platform.
  3. Different websites are developed and maintained, either by separate website URL or separate HTML/CSS code.
  4. The separate website URL or separate HTML/CSS code helps to fine-tune the different elements of the site and optimize how the site is displayed on a particular device.
  5. In Adaptive web design, different versions of the sites will be visible in different devices and the design and the content of one version might vary from the other.

This is how http://www.chiarugiusa.com/, an adaptive website would look in a Desktop, iPad and iPhone.

Chiarugiusa Desktop Version

Desktop View

Chiarugiusa  Tablet PC Version

Tablet PC View

Chiarugiusa iPhone View

iPhone View

 

4. Responsive Website

Responsive websites are created to adjust itself to fit any screen (desktop, mobile or iPad), irrespective of its size and resolution. Responsive sites use the same elements across varying devices, rearrange the components of the page and scale the images based on the size of the browser visiting it. The method of responsive design combines fluid grids (which shrink and grow as a browser is resized) with media queries (CSS conditional statements that apply styles if certain conditions are met) to develop a site that can conform to the devices’ screen resolution on which it is being viewed.

Let’s take a look at some of the key aspects of responsive web design practices-

  1. The approach of responsive web design eliminates the need of creating separate websites for various devices or even building a different website for mobile interface.
  2. A single website is developed that will work across multiple devices and will adjust its layout as per the screen size of the device.
  3. Responsive sites ‘respond’ to the changes in width of a browser by adjusting the placement of elements on the web page to best fit the available space. For instance, in case of responsive website, when the side of a browser is dragged to make it larger or smaller, the elements (the navigation menus, images, content) in the web page will adjust itself to fit to the browser’s screen-size.
  4. To find out how responsive design works, visit http://www.sishowcase.com/client/kddance/ and drag the side of the browser window to make it smaller and larger and find out how the lay out and the different components in the webpage adjust to the browser’s screen size.

Here are few screenshots of the website when viewed in a Desktop, iPad and iPhone.

KD dance Desktop Version of a Responsive Site

Desktop View

Tablet PC Version of Responsive Website

Tablet PC View

iPhone View of Responsive Website

iPhone View

 

5. Comparative Study#1

Features

Adaptive Website

Responsive Website

Device Identification

(i) Uses Server or client side code to detect the device.

(ii) Serves separate HTML using CSS to modify the look of a website, based on the screen size.

(i) Uses ‘media queries’ to detect the device.

(ii) Flexible images and fluid grids are correctly sized to fit the screen.

Content Optimization

Information is pre-selected and only mobile optimized assets are downloaded.

Information of every device is included. All elements are downloaded regardless of whether they are used or not.

Device Optimization

Distinct templates are used for each device.

Single template for all devices.

Features

Uses auto-detection script to identify the devices, helping a site adapt to the varying screen sizes of the devices.

Will include all the features that a mobile or tablet web browser can support, be it flash, no- flash, dropdown menus, JavaScript, image resolution etc.
Performance

The pages load faster. The images are optimized for specific devices’ screen resolutions which reduce the loading time of the page.

All the elements in the site adjust to fit into the screen of the device. The full size images are downloaded and then resized to according to the screen size of the device.

Development

Distinct templates can be implemented on the existing website.

To make a responsive website, the entire site needs to be re-built.

 

6. Comparative Study#2

Features

MobileWebsite

Responsive Website

Device Identification

Mobile website is a completely another version of a website which is specifically designed and optimized to function across multiple mobile devices.

Combining the fluid grids, which shrink and grow as a browser is resized, with media queries, responsive website adjusts its lay-out as per the screen size of the device viewing it.

Content, Images & Lay-out

(i) Content in the existing website is often re-phrased, preferably summarized into couple of paragraphs or highlighted by bullet points.

(ii) High-definition images and flash graphics are excluded.

(i) Content remains the same. No alterations are made.

(ii) The images, banners and flash graphics adjust themselves to fit into the screen size of the device.

Domain Name

Different domain name is created – (‘domain.com/m’ or ‘m.domain.com’)

The domain name remains the same. Nothing changes except the back-end codes.

Future Developments

With emergence of next-gen mobile phones and browsers, a mobile website would require re-working and update.

Technologically advanced practice that would not require re-structuring or re-designing even with the emergence of newer mobile devices.


A Final Note-
With the prolific growth of mobile web browsing, the decision of opting for a separate mobile website or going for the responsive or adaptive website can be a tricky call. Each of the aforesaid approaches has its share of advantages and loopholes and as a webmaster, it is necessary to evaluate your organization’s goals and decide on the approach that is right for you. Search engine giant, Google prefers responsive design since the Google bots do not have to crawl the extra URLs or the existing URLs with a mobile extension. But then, if your users require a completely different experience on mobile than on a desktop the concept of separate URL will be the right choice!