Responsive Web Design vs Adaptive Web Design
Consider content, design and performance across devices to ensure usability.
The first ever website was published on August 6, 1991. It displayed a page explaining the World Wide Web project. Users were given information on how to setup a web server, create their own websites and web pages, as well as search the web for information.
The world wide web had a nice graphical user interface that allowed multiple fonts and font sizes displaying images, animations, movies, etc. It was great.
The only problem was that different screen sizes and gadgets would display the same website differently. This may sound confusing unless you have ever tried to view a traditional website on your smartphone that doesn’t use adaptive or responsive design: The page renders to the screen, and some pictures may fill the screen while text on the page becomes unreadable without a magnifying glass.
As websites implemented new functionalities such as the ability to scroll sideways in addition to the traditional upwards and downwards, it became even more of a shambles. The solution implemented was to design different versions of the same website for various user types. This practice lead to a couple of logistical issues:
• You had to pay for multiple web designs
• You had to run separate SEO/internet marketing campaigns
• You ended up spending much more time and money
From a business perspective, it made very little sense to design multiple versions of the same website.
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
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.
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.