When a developer creates a website, they often design for large screens and lose sight of how it will look when a user browses the same website from their mobile device.


Design Evolution

Today, tablets and smartphones have became the default choice for connecting to the internet, and the web an essential part of our lives. The way we now use our devices has inevitably led to the evolution of how we search for and consume information.

This revolution is influencing many companies to shift towards a mobile first, desktop second strategy for their business. However, the shift from desktop to mobile requires web designers to refocus – not completely away from desktop design, but certainly with an inclination towards mobile.

When a developer creates a website, they often design for large screens and lose sight of how it will look when a user browses the same website from their mobile device. Reading and navigating become difficult, requiring zooming and resizing to read or click.

There are several ways to approach a mobile web presence.  Let’s take a look at Adaptive Web Design and Responsive Web Design.

Adaptive Web Design

Adaptive web design (AWD) sends a tailored web experience to a device by determining which device type has requested the content. AWD often uses a set of predefined layouts based on screen size, along with CSS and JavaScript, to deliver a user experience tailored to the device. AWD can also allow a developer to tailor content to a specific device, like an iPhone, if there are particular visual design components they want to use for the device.

Perhaps a developer wants to deliver high quality images to a Retina Display while using standard images for a regular iPad. AWD doesn’t limit the developer from using the same JavaScript across devices or reusing CSS, but it does provide channel separation. This means the developer can make changes for a specific device or set of devices without having to retest the entire mobile web experience. Additionally, the device targeted experience is lightweight and only sends the code that the device needs, increasing performance of sites built using adaptive web design.

Responsive Web Design

In simple terms, Responsive Web Design (RWD) is the methodology that recommends the design and implementation of a website that responds to user behaviour and environment based on the screen size, orientation and operating system of their device.

From a technology standpoint, the framework consists of a combination of flexible grids, flexible layouts, images and intelligent use of CSS media queries. As the user switches from one device to another (for example, desktop to smartphones), the website automatically adapts to accommodate for resolution, image size and scripting abilities. This eliminates the need for resizing, panning and scrolling by the user in order to view the website on the new device.

Some of the advantages of using Responsive Web Design are:

  • Single code base – build once, run across all devices
  • Renders across any screen size
  • It also considers the huge difference in widths and heights, whether the screen is landscape or portrait, and screen resolution.
  • Improves SEO – a single version of the website improves page ranking. Issues have arisen in which having two versions of a site (website and mobile site) impact page ranking.
  • Reduces maintenance cost and effort due to single link.

The primary difference between AWD and RWD is how the content is served up. AWD can deliver a more native experience over the web because an AWD site detects the type of device and delivers a view that has device-specific functionality – iPhone buttons or Android navigation bars, for instance, depending on the actual device. RWD relies on screen size, not on the device type, to render content, so content developed within RWD frameworks creates buttons, menus, and layouts based on screen dimensions only.

Key Challenges in Responsive Web Design

This design approach has its drawbacks:

User experience not rich

Responsive Web Design uses a single code base, but in reality different devices have to be accounted for.

While a desktop version can display a lot of content at once, for smaller screens you need to know exactly what content truly matters. To create a great experience for all users, you need to consider that people will use different devices in different circumstances and with different goals. With RWD, more effort and time is needed to get the right user experience for your target audience.

Navigation enabled from top to bottom, not left to right

Responsive Web Design supports top to bottom navigation. This approach is useful for informational sites such as corporate sites, blog sites and news sites.

Longer development cycle

Designing a website using RWD takes longer than building a normal website (a dynamically generated web page which recalls various bits of information from a database, and puts them together in a pre-defined format to present the reader with a coherent page). If the website is already built using the normal website approach, rebuilding it using Responsive Web Design in order to optimise across mobile devices will further add to the complexity.

In addition, prioritising the content in Responsive Web Design is essential. This is to ensure that important content is not missed when the user switches from a laptop or desktop to a mobile device.

Placement of the navigation menus plays an important role too, especially on more complex desktop websites with multilayer drop-down menus that have to be adapted for smaller screens.

Once a hierarchy becomes too complex or different from what you want mobile users to see, the argument for Responsive Web becomes less compelling.



The Solution

Do AWD and RWD satisfy the challenges of web application in today’s mobile world? The answer depends on what you are trying to achieve with your website or mobile app.

The design of your website and mobile service should be based on your target audience. Building a site using either approach requires thorough planning and a good understanding of the user’s roadmap through the site on every type of device.