Web Design 101: Adaptive Vs. Responsive Design
Whether you love late-night shopping from the comfort of your own bed or you’re considering building your own website, it’s helpful to know about responsive versus adaptive design.
Studies show that 58 percent of American adults own a smartphone and 42 percent own a tablet computer. Chances are good that you’ve been using one of these devices to browse the Internet. You may have noticed recently that many websites have started seamlessly converting content to provide a better user experience based on the specific device you’re using.
These changes are even apparent on a laptop or desktop computer. When you adjust the size of your browser window to keep an eye on your Spotify playlist while perusing your favorite online boutique, you may notice the website change shape and rearrange its content to properly fit the screen. These changes are all a result of the coding on the backend of the website.
Technology has taken the world by storm and the movement is only picking up more speed. It’s predicted that mobile browsing even eclipsed desktop browsing in 2014, according to Business Insider. This means websites must be able to be tailored to each device in order to be effective and appeal to those on the other side of the screen.
Many companies have already implemented these changes while others remain behind the curve. In any case, if you have hopes of becoming a web designer, you’ll need to have a good grasp of responsive versus adaptive design—two similar approaches to achieving user-centered design.
What do responsive & adaptive design have in common?
Both types of design are focused on creating the best possible display depending on the device the user is utilizing to browse the Internet. Some of the most common devices - from smallest to largest - are smartphones, tablets, laptops and desktop computer monitors.
Both responsive and adaptive web design reshape and reorganize the elements on the screen based on the device being used. It’s the 21st century, which means consumers expect ease and accessibility from the drive-thru window to their living room couch. As companies battle to rise to the top of their markets, competing for the best user experience is essential.
How do responsive & adaptive design differ?
Similar terms, similar results, completely different makeup. Keep reading to learn the distinctions between the two.
“A responsive design website will fluidly change based on the screen size or device,” explains Bob Bentz, president of ATS Mobile. He explains that if you’re viewing a responsively designed site and you change the size of the window on your device, you will witness the elements adapt before your eyes, adjusting to fit the altered screen size.
"The two approaches don't compete for importance."
This type of fluctuating design has become increasingly popular in recent years. Responsive design relies mainly on flexibility, ensuring all users have the same adjusted experience no matter the device they’re using.
See it in action: Check out the website of Bxxlght, a light box design company. Adjust the size of your browser window and watch the website flex and accommodate according to your window size. Or see what the website looks like on your smartphone and notice how the design has adapted to your device.
“An adaptive design site, on the other hand, detects the type of device being used and will change to fit an ideally predetermined set of screen sizes,” Bentz says. “It then delivers the best possible version to each device.”
You won’t notice an adaptive design flexing when you drag your browser window back and forth on your desktop. However, when you visit that same website on your iPad or iPhone, you’ll notice a design that compliments your screen size and, possibly, completely different content.
Adaptive design requires the creation of several different sets of website pages to accommodate different devices. This allows a company more versatility in what it chooses to add to its web pages, and it provides an opportunity to more specifically target the different markets (mobile users versus desktop users, etc.).
See it in action: Take a look at the American Airlines website on your desktop and then on your mobile phone or tablet for an example of adaptive design. You’ll notice the versions have similar elements but are laid out in very different ways.
So, which is better?
This is up for debate, of course. Many designers swear by responsive design and claim it’s your best bet if you want to think for the future. But then there are several developers who still believe adaptive design is the optimal pick. Responsive design is less complex than adaptive design and will take less time to create. However, adaptive design will appeal to a larger audience as it’s more intuitive to older mobile devices and it allows companies to specifically target different markets.
“The two approaches don't compete for importance,” explains Lucas Brauer, a user experience designer at Smashing Boxes. “Rather, they're both important for giving a complete experience to your user.” He says that in a nutshell, responsive design caters to users regardless of the device they're using, while adaptive design is compatible regardless of the modernity of the device or browser.
Stay up to date
You now have a basic understanding of responsive versus adaptive design. As you peruse the Internet, you’ll likely start noticing how widespread these two similar design trends are. But in such a fast-paced industry, new trends are constantly surfacing.
How can you make sure you don’t fall behind? Check out these expert tips on how to stay up-to-date with the latest web design trends.