Due to the huge diversity of mobile devices, designers today need to account for the variety of screen sizes when delivering websites. With so many ways that a user can access information online, designers are put face to face with the constant challenge of bridging the gap between devices. The choice boils down to two techniques, the adaptive web design or the responsive web design.
Adaptive web design and responsive web design have one thing in common – they both change appearance based on the browser environment. The boundaries may seem blurred to an uneducated eye. However, as you become more familiar with both of these techniques, differences become more and more obvious. Let’s start by explaining both of these approaches and, hopefully, by the end of this article you will have a clearer picture as to which of these styles best fits your needs.
Responsive web design
This term was first introduced by the web designer and developer Ethan Marcotte through his book Responsive Web Design. As the name itself suggests, its main feature is responding to changes in browser width by adjusting the placement of design elements so they would fit in the space available. This means that the content will be shown according to the browser window size. To see this process in action, all you need to do is open a responsive website on your desktop, change the size of the browser window and watch how the content dynamically rearranges itself. This process is done automatically across mobile devices – the website presents itself in the ideal arrangement based on the amount of space available.
Due to its fluidity, responsive web design allows users to access your website from any platform they wish. They can rest assured that they are granted the same experience regardless of the screen size. As you can imagine, this requires impeccable visualization of the end product from a web designer as well as insights into the needs and wants of visitors.
Adaptive web design
This technique is also known as the progressive enhancement of a website. It was first introduced in the year 2011 in the book by web designer Aaron Gustafson entitled Adaptive Web Design: Crafting Rich Experiences With Progressive Enhancement.
As opposed to responsive web design that relies on adapting the design pattern to fit the available real estate, adaptive web design has multiple preset layout sizes. Each time the adaptive website is loaded it detects the available space and displays the layout that is the most appropriate for the current screen size. Changing the size of your browser window will show no impact on the website design.
When creating adaptive websites, here at Alpha Efficiency, the Chicago-based web design agency we usually develop six designs based on the most common screen widths:
- 320 pixels
- 480 pixels
- 760 pixels
- 960 pixels
- 1200 pixels
- 1600 pixels
Mobile only web design
You can also create a mobile-only website. These are denoted with the “m.” prefix in the URL bar of a browser. This was once a widely adopted approach with designers creating websites for mobile platforms by attuning the elements and layout according to a dedicated format. However, there is a major drawback to this approach. Opting for a separate website rather than using responsive or adaptive web design requires huge amounts of time invested in maintenance in order to always keep the two versions of a website in tune with each other. All things considered, it is no wonder that mobile-first web design has become a relic of the past.
Which design to use?
Well, this is not an easy question to answer as it depends on what you wish to achieve with your website.
Responsive design is easier to develop and takes less effort to implement. On the other hand, it offers less control over your design on different screen sizes. This is, however, the preferred method of most web designers, probably due to the fact that there are so many affordable templates available for every major Content Management System (CMS) like WordPress or Joomla.
When developing responsive websites, designers usually start in the middle of the resolution scale. As only one design is made, they use media queries to determine which adjustments would take place on the lower and higher resolutions. This approach has proven to bode well with users since uniformity and seamlessness across all platforms most often translate into a good user experience. Keep in mind that responsive web design requires a lot of testing across different devices in order to maintain the visual hierarchy despite all the content and elements shuffling.
SEO is another major upside of responsive web design as it makes your site more search engine friendly.
Besides all the advantages that responsive web design offers, there are also a couple of things that can cause a headache:
- As your website adjusts its elements to fit different screen sizes, you may find some of the advertisements that you have added suddenly not fitting the available real estate.
- You will also notice that loading times vary between desktop and mobile devices. This is mostly due to the flexibility of images on your website. The lack of flexibility, to be precise. A large design can appear quickly on a large screen, but it takes considerably more time and data to fully load on a mobile device.
Adaptive design aims for the best user experience possible across all devices. Unlike responsive design, adaptive design offers tailor-made solutions that adapt to users’ needs. The development starts with the lowest resolution version of the website as designers work their way up through the six previously mentioned standard resolutions to the highest.
With mobile search on the rise, users rely on their handheld devices to provide a seamless experience. While responsive design reflects a more desktop-centric approach, adaptive websites feel more relevant to the modern user experience. Also, thanks to the sophistication of today’s smartphones, it is easier to optimize advertisements to fit different interfaces.
When it comes to speed tests, adaptive websites usually outperform responsive websites. And not by a small margin either – adaptive websites can be as much as 2 to 3 times faster than responsive ones. However, there are a couple of drawbacks when it comes to adaptive design:
- It usually takes a lot more work to develop adaptive websites.
- It happens that designers develop website versions for desktop and smartphone, but fail to cater to the needs of notebook and tablet users. This is why it is a good idea to offer a link so users can toggle between different versions.
- While search engine bots have improved over time, most search engines still fail to rank identical content over different devices equally. This means that an adaptive design might keep you back when it comes to SEO.
Final thoughts
When choosing between these two approaches, it is crucial to carefully study the pros and cons of both designs. While it is certainly tempting to blindly stick to a responsive design due to its seamless experience across devices, cheaper development, and better SEO, make sure not to miss the bigger picture.
In today’s day and age, change is the name of the game. No, not change for the sake of it – Change as part of evolution. Consider your users and what you have to offer to them. Are you reaching your users on their preferred platforms? What about their behavior on those platforms? Is there anything you can do to keep them even more engaged?
From the dawn of smart devices until today, it is not just the technology that has evolved. Our needs, wants, and expectations have closely followed, and it seems that the evolution is speeding up. In order to keep up, it is best if we make an effort to go a step ahead and design with the smarts in mind.
