What Responsive Design Means?
In its simplest definition, responsive design uses just one layout for a web page and “responsively” adjusts to better fit the user's screen, whether it’s a desktop, a laptop, a tablet, or a mobile phone.
What Adaptive Design Means?
In layman's terms, the adaptive design creates different fixed layouts that adapt to specific screen sizes. In short, you have multiple versions of a web page to fit someone’s device, as opposed to a single, static page that looks the same (and reorders or resizes content) across all devices.
Responsive UI vs Adaptive UI
- Responsive is fluid and adapts to the size of the screen no matter what the target device.
- Responsive uses CSS media queries to change styles based on the target device such as display type, width, height, etc., and only one of these is necessary for the site to adapt to different screens.
- Adaptive design, on the other hand, uses static layouts based on breakpoints that don’t respond once they’re initially loaded.
- Adaptive works to detect the screen size and load the appropriate layout for it.
- On the surface, it appears that adaptive requires more work as you have to design layouts for a minimum of six widths. However, responsiveness can be more complex as improper use of media queries (or indeed not using them at all) can make for display and performance issues.
Why Use Responsive Design?
- Maintaining separate sites for your mobile and non-mobile audiences can get expensive. By using responsive design, you can save money by eliminating the cost of paying for a mobile site. You will only need to invest in a single site design to appeal to all visitors and all devices.
- When you have a website with a responsive design, you can make changes quickly and easily. You do not need to worry about making changes on two websites. This flexibility is a huge advantage when you just want to make a quick design tweak or fix a typo on your site—you only have to do it once.
- User experience is crucial to website owners. You want people to like your site, and you want it to be easy to use to convince them to come back. If someone visits your website on a mobile device, and it takes forever to load or your pictures do not have the proper resolution, it can make your company appear unprofessional.
- No one wants to do business with a place that is unprofessional. But responsive design, which offers a much better user experience, can help convince people to give your company a chance. Because zooming and scrolling will be eliminated, content can be viewed quicker, and the overall impression that visitors have will be much more positive.
- Search engine optimization gains Search engine optimization, or SEO, is a strategy used by many companies to help boost themselves in Google’s search page rankings. The closer you are to the top, the better the chance potential customers will find you.
- Responsive design can help with SEO because Google, as mentioned, gives preference to websites that are mobile-friendly. In combination with other SEO factors, responsiveness can help give you a big boost in search engine results.
- Ease of management Most businesses, especially smaller ones, don’t have a lot of time to update or refresh the way their website looks. But rather than having to hire a designer to handle every aspect of your website, responsive design allows you to make the changes yourself, quickly and easily.
- Additionally, with just one website, other elements of your marketing will be much easier to manage. You’ll never have to wonder if you should link the mobile or desktop site on a social media update, or question whether or not all of your redirect links will be working to get the right visitors to the right site. Responsiveness takes much of the stress out of managing a business website
Why Use Adaptive Design?
- Adaptive is useful for retrofitting an existing site in order to make it more mobile-friendly.
- This allows you to take control of the design and develop for specific, multiple viewports.
- The number of viewports that you choose to design for is entirely up to you, your company, and your overall budget.
- It does, however, afford you a certain amount of control (for example over content and layout) that you won’t necessarily have using responsive design.
- As mentioned previously, it’s standard to design for six resolutions. However, you can make a more informed decision by looking at your web analytics for the most commonly used devices and then designing for those viewports. Why Use Responsive Design?
- Responsive doesn’t offer as much control as adaptive, but takes much less work to both build and maintain.
- Responsive layouts are also fluid and whilst adaptive can and do use percentages to give a more fluid feel when scaling, these can again cause a jump when a window is resized. For example, in the image below, which shows a fluid layout, the designer is using percentage widths so that the view will be adjusted for each user.
- With responsive, you will be designing with all layouts in mind and this, of course, can confuse the process and make it quite complex.
- This means that you should focus on creating a viewport for mid-resolution and you can then use media queries to adjust for low and high resolutions later on.
- Responsive design often turns into solving a puzzle — how to reorganize elements on larger pages to fit skinnier, longer pages or vice versa.
- However, ensuring that elements fit within a page is not enough. For a responsive design to be successful, the design must also be usable at all screen resolutions and sizes.
- It will also depend largely on whether you have an existing site to work with or you’re starting from scratch.
- Responsive design has become the go-to design technique and it’s thought that around 1/8 websites now use responsive (while there’s little to no data on how many use adaptive).
- Adoption rates for responsive are growing quickly too and have almost reached the same level as standalone mobile sites.
- With all of that in mind, it’s safe to say that responsive is usually the preferred technique if only because of the ongoing work that adaptive design demands
Top comments (4)
With so many different devices I think adaptive should not even be a choice anymore. Actually responsive can incorporate many of the benefits of adaptive with very specific UI for each screen size. It is sure complex and potentially involves a bunch of JS, especially when going truly responsive (Fluid UI changing whenever the screen is resized) but it's also becoming a lot easier with flex boxes and grids (CSS media queries are becoming obsolete).
Good article by the way (minus the omission of grids, such an important feature in responsive design).
Yes you are very much correct.
By the way in my last project (Flutter based mobile application) is preferred adaptive over responsive as I was only concerned with one type of devices i.e. Mobile phones.
Thanks for the appreciation, and for the feedback too. I will fix it as soon as possible.
Well Explained!!
Thanx... buddy