The Mobile web has been revolutionized with smartphones, and tablets with their growing popularity are throwing another wrench in to the gears. Considering this, a website of today must perform parallel and with great efficiency on a low resolution smartphone, a medium resolution tablet or a high resolution desktop or laptop.
This is what a responsive or an adaptive web design offers. Both are basically processes that make a website work efficiently on very small screens, very large screens and at any resolution without sacrificing the User interface or experience.
Over the last few years, the design industry has collectively developed a list of common practices for making websites for the mobile web. Many of these practices involve retrofitting websites to perform on high resolution and down to the lower sizes. While some focus on smartphones first and then work up to the larger viewports, scaling the content as needed. These practices can be categorized as either a responsive web design or an adaptive layout. Starting with the Adaptive layout, lets briefly discuss what these two are and how do they perform.
What Is Adaptive Layout Design?
Before responsive web design went big, adaptive techniques and layout dominated the industry. Although it’s easier to transition a normal website into adaptive layout, but they require more work if you are making a website in adaptive from ground up- even more than a responsive website. This is also the reason why most people choose this route while retrofitting an existing website to make it mobile friendly.
Designing In Adaptive
Before responsive or adaptive web design became a thing, you simply designed a single layout and developed it. However, in Adaptive layout you design for multiple viewports and then go for development. It’s generally easier to begin designing at low resolution view ports and work your way up. But if you go reverse, meaning if you start with high-resolution and go down towards low, things can end up a little cluttered. The number of viewports you choose to design for is entirely up to you and the developer, but it’s also sensible if you first formulate a strategy based on where you are getting your visitors from and then decide from those view ports.
Developing In Adaptive
Developing in adaptive layout is similar to developing a traditional website. You will begin developing the site at low resolution for mobile viewport then you will use media queries to expand the layout for higher resolution viewports.
Keep in mind that the adaptive layout jumps if you decide to test it just by resizing your browser window. This is because you are only targeting multiple common viewpoint resolutions and not all the independent common viewports-which is also much more of a hassle if not required.
What Is Responsive Web Design?
As of today, responsive web design and development is a catch all term and the most commonly used approach for making a website to work on all resolutions. This is because in responsive web design there is technically less work and maintenance as you only have one layout. It can also be more customized for a website, and this is the key feature. Responsive web design also includes fluid layouts which are amplified by media queries at either low or very high resolutions.
Designing In Responsive
Adaptive design lets you have a simple guide to follow while responsive design isn’t so simple. Many designers argue that designing in the browser is the best way to go about responsive. Some even suggest designing & developing at the same time. As in responsive you have to take all the viewports into consideration, there is more work involved on the design side. It is also an ideal practice to keep the viewports in mind, but not the design of any particular one. We also suggest that you should try to work on a middle ground by focusing on mid resolution and keeping in mind that the layout should be adjusted for lower & higher resolution later.
You would also need to keep in mind your existing user analytics and devise a design strategy in according to that.
Developing In Responsive
This is where the real fun begins. Once you have designed the layout of your website, you will use the media queries to make it responsive. However, here you will not be defining set viewports; instead you will manually resize your browser until you see breakage. This is when you will set your breakpoint width and add a media query to fix design breakage and continue. The ideal way of doing is from a high resolution device so that you can see and test all viewports. Once you have worked for both low and high resolution, move on to final testing.
Responsive Vs Adaptive
If the agenda is to perform exceptionally well on all the devices and screen resolutions, then Responsive web design and development is by far the best choice to make. But in some cases especially for complex web apps an adaptive layout can serve visitors better. That being said, there are some businesses that choose the concoction of both the solutions while inclining majorly towards responsive web design. This is because the idea is to have a rock solid display and experience across all mediums which is made relatively possible and budget friendly due to the technologically advanced responsive layout. Plus, most of successful startups of today, suggest that their key to convert on all the platforms is because of a well styled responsive website design and creativity which transforms the experience even more.
It is also worth mentioning that if you still have audience in IE6-8 and you are having problems serving there, you can make things work with polyfill CSS3 Media Queries. If you need inspiration regarding adaptive or responsive designs, you may want to have a look at Mediaqueri.es.