How to choose the right method? What’s the difference between them?
These two questions are settled in the minds of many site owners. And the reason for that is straightforward: yesterday we had a small variety of devices and today we’ve got a whole bunch of unique browsers and devices with different screen sizes.
Web design process and mobile app design process are a little bit different. Unlike mobile app design, there are responsive and adaptive layouts in website development.
In this article, we will discuss the main features of responsive and adaptive web design and how to choose the right one. Even if the goal is the same for both methods: your site must look great on any screen and any browser, but the ways of achieving this goal are slightly different.
Responsive web design. What is it all about?
Back in 2010, we learned RWD (responsive web design) abbreviation for the first time. When Ethan Marcotte described this strategy in his book “Responsive web design”. The simplicity of this method has just blown everyone’s mind. It’s all about one flexible website that’s designed for all browsers and devices. The content of this site is like a bubble gum that stretches and shrinks depending on the size of the screen.
What does a responsive design consist of?
If you want your site can adapt to any device it must have:
1. Grid-based layout
2. Flexible content
3. Media queries
To make it work, you should use percents and em for your fonts. Your site page will transform according to the size of the browser. For example, your article takes 70% of the page space, and it’s not going to change on a mobile device or TV screen. But your settings should be smart. It’s always reasonable to show on the mobile screen one column instead of 3 columns on a big browser screen. Speaking about other content, you must set the maximum size of your images, videos, and other content so they can’t be bigger than the block where they are located.
Media queries are a must-have for responsive design because you can’t optimize images to a specific screen resolution without them.
How does adaptive web design work?
The main feature of the adaptive design is that it uses several fixed layouts and uploads appropriate versions depending on the screen size of the device. It would be wise before choosing the adaptive design to think about your main client base and what devices they are using. Maybe it’s going to be smartwatches or car computers. Using the adaptive design, you can’t create one layout for many screens and due to this restriction, you have to choose which devices your website will be displayed.
Aaron Gustafson, creator of the term AWD (adaptive web design), in his book “Adaptive Web Design: Crafting Rich Experiences with Progressive Enhancement” mentioned that the main goal of adaptive design is to deliver the best user experience using a website which is easy to access without any restrictions.
Using adaptive design you can choose between two paths:
# Progressive enhancement
The main idea of this strategy is that you start from the oldest browsers like Explorer 8. You create your site entirely focusing on this browser. After that, you start to gradually improve your website, updating its look for newer and more powerful browsers.
# Graceful degradation
This strategy is pretty similar to what we described above but slightly reversed. Your primary goal is to create a website that looks wonderful on modern devices. When you achieved it, your next step would be to make the website more simplistic and suitable for older browsers.
But what if you need to create a mobile website? Don’t worry, follow the Mobile First strategy. It’s very similar to Progressive enhancement but only in the mobile field. To start with, create a mobile website, and don’t forget about all the rules. Make design simple and cozy. All content should be placed in one column and all functionality should be easy to get. And when it’s set and done, it’s time to upgrade your mobile site for bigger platforms. You’re adding more content, changing the layout, and making it more dynamic. After all these manipulations, you will have a website that looks beautiful on customers’ laptops and other devices.
Comparison of these strategies
Responsive web design
Pros
# Google loves mobile-friendly sites
# Unique looks depending on what device website displayed
# Cheap and simple process of creating and maintenance
Cons
# Mobile screens can sometimes be overloaded with content
Adaptive web design
Pros
# Easier to meet the expectations of different user groups
# An opportunity to deliver a custom experience to users
Cons
# Development process is complex and costly
# Sophisticated update and maintenance workflow
Responsive vs Adaptive. Main factors to consider before choosing one
Responsive web design is the best solution in case of:
# Your budget and time for development are minimal
# Your goal is to decrease the complexity of maintenance and development
Adaptive web design is your option if:
# You want to please all your customer needs, which are using a wide range of devices
# You’ve got plenty of time and money to develop and keep an eye on two or more site variations
Remember that none of these solutions are good or bad. They exist to cover different situations and needs. And the goal of these two methods is simple – to create an excellent looking website that will be useful for your business and end customers. So pick the one that suits you best or hire professional web design agency to get most out of it.
