In responsive web design, you have a single fluid webpage whose layout automatically adjusts to fit the changing screen size using breakpoints. Breakpoints are essentially pixel values defined by developers in CSS. When a website hits the pre-defined pixel values, it triggers an automatic transformation of the web page layout to optimise for the respective width/screen size. Typically, responsive web design involves optimising for mobile first, before scaling up for larger screen sizes.
The website shown in the video above is responsive. Notice how, when the browser width decreases, the web page layout transforms from a double to a single column. In addition, the navigation buttons move from the top of the web page into a hamburger menu, and the hero video also moves below the main hero text and CTA.
Great UX: The website layout is fluid, adjusting seamlessly and remaining uniform from a design perspective to changing screen sizes.
Less work: Responsive websites require a single design that adapts to screen sizes using media queries.
Many templates: It’s becoming easier to implement responsive websites thanks to platforms like WordPress, which have thousands of premade templates.
SEO friendly: Responsive websites are more mobile-friendly and have a single URL, which is why they perform better in search.
Budget-Friendly: You can save time and money by creating one design to fit all screen sizes.
- Slow page loading: Responsive designs have the same data loading requirements for all screen sizes. So load slower.
- Ads Lost: Configuration difficulties caused by switching screen sizes can lead to ads not appearing on a screen.
- Less control: You have one design that automatically adjusts, so you have less control over display between varying screen sizes.
- Can be confusing: You’re creating one design for all screen sizes, which is complex. To tackle this, start by building a mid resolution design that adjusts using media queries.
Adaptive Web Design
Coined by Aaron Gustafson, adaptive web design involves creating multiple fixed layouts, typically for six screen sizes; 320px, 480px, 760px, 960px, 1200px, and 1600px. An adaptive website is not fluid and doesn’t change the layout of elements to fit the screen size when you adjust browser width. It instead uses the different HTML markups a website has for device types to determine which screen size to load.
Home Depot is an excellent example of an adaptive website. In the video above, you can see that the elements on a website don’t adapt to fit the screen when you reduce browser width. However, it presents different fixed layouts based on the device you use, as you can see for the mobile and web versions of the website in the mockups below.
- More control and better device-specific UX: In adaptive, you can design for multiple specific viewports, which gives you greater control over the layout of content than in responsive websites.
- Optimised advertising based on user data: Designers can optimise each layout to fit in advertisements seamlessly.
- Faster load time: Adaptive design involves optimally rendering and loading elements necessary for the device-specific experience. So the website on mobile will omit certain features that or on desktop, resulting in a reduced load time.
- Easier to Implement: Spending time trying to make sure a one-size-fits-all solution works well in unlimited viewports is laborious and often frustrating. In comparison, having specific designs for a set number of viewports is alot easier to implement.
- Lengthy to build: You need to design layouts for up to six screen sizes, which is very time-consuming and often tricky. On top of that you have to maintain separate CSS and HTML for each layout.
- Device screen size is constantly changing: Device screen sizes are ever-changing, so you’ll need to adapt your designs more frequently, so they fit more optimally.
- Expensive: You’re required to design and develop code for six different screen sizes that change regularly. So it will require more significant time and costs to build, maintain and support regular changes.
- Not SEO friendly: Difficult for the search engine bots to crawl and distinguish original content from duplicate due to different device-specific URLs.
Responsive vs Adaptive Design – Which one should you choose?
Adaptive and Responsive web design both have their merits; however, deciding which one to go for ultimately depends on your business context. We’ve highlighted several factors below which you should keep in mind before deciding which one to proceed with.
- Budget: If you’re on a tight budget, it would be best to go responsive as you only need to create a single screen that adapts to changing browser width. In comparison, adaptive will require you to design up to six screens, which is time-consuming and costly, even more so with the ever-changing screen sizes of devices, which you’ll have to adjust your designs for constantly.
- User Data: Analyse important data points relating to your users to help guide your decision. These include things such as the devices they’re using to access your website and what context/environment they’re browsing in. For example, if most of your visitors browse using mobile, it may be best to go adaptive. However, if there’s a more balanced split, then you should probably go responsive. Similarly, if your users are browsing on the go via mobile, it may be best to go adaptive due to reduced data loading time and the fact these designs can detect a users environment.
- SEO: Responsive is the preferred option to optimise your site for search, as the Adaptive websites will have different URLs on both web and mobile, so when search engine robots crawl your site, they’ll exclude any duplicate content, which is essentially bad for rankings.
- Time: Although responsive websites require more coding and can take a while to optimise, they’re still quicker to implement than creating different layouts for each screen size.
- Ad Revenue: Adaptive will be your best bet if you rely heavily on ad revenue, as designers can customise the layout of each screen size so that ads are optimally visible. In responsive designs, your ads will most likely be lost.
- Stage: If you’re building a website from scratch, it’s best to go responsive as there are a whole host of templates on platforms that you can quickly implement. However, adaptive design is excellent for retrofitting your existing website to be more friendly across multiple screen sizes such as mobile.
- Precision: While responsive websites can adjust to changing browser width, you have multiple static designs tailor-made for all situations in adaptive design. So, if you want to have more control over your designs and create a precise website concerning the different screen sizes, such as a mobile, go adaptive.
Before deciding to go adaptive or responsive for your website design, you should carefully consider your business needs, goals, budget and objectives. Hopefully, this article has given you some food for thought to help you make this tough decision.