This website uses cookies to ensure you get the best experience. More info

Web Design 101: Adaptive Vs. Responsive Design

adaptive versus 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.

Responsive design

“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.

Adaptive design

“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.

Lauren Elrick

Lauren is a freelance writer for Collegis education who writes student-focused articles on behalf of Rasmussen College. She enjoys helping current and potential students choose the path that helps them achieve their educational goals.

female blog writer

Posted in Graphic Design

Related Content

This piece of ad content was created by Rasmussen College to support its educational programs. Rasmussen College may not prepare students for all positions featured within this content. Please visit for a list of programs offered. External links provided on are for reference only. Rasmussen College does not guarantee, approve, control, or specifically endorse the information or products available on websites linked to, and is not endorsed by website owners, authors and/or organizations referenced. Rasmussen College is a regionally accredited private college.

chart-credential-laddering-healthcare-management 0 Credits 90 Credits 180 Credits 48 Credits Start Here HIGH SCHOOL GRADS Start Here TRANSFER STUDENTS Start Here SECOND DEGREE PURSUERS End Here ASSOCIATE’S DEGREE Start Here MASTER’S DEGREE PURSUERS End Here BACHELOR’S DEGREE End Here MASTER’S DEGREE chart-credential-laddering-rsb 0 Credits Start Here HIGH SCHOOL GRADS Start Here TRANSFER STUDENTS 90 Credits Start Here SECOND DEGREE PURSUERS End Here ASSOCIATE'S DEGREE 180 Credits End Here BACHELOR'S DEGREE chart-credential-laddering-rsd 0 Credits Start Here HIGH SCHOOL GRADS Start Here TRANSFER STUDENTS 91 Credits Start Here SECOND DEGREE PURSUERS End Here ASSOCIATE'S DEGREE 181 Credits End Here BACHELOR'S DEGREE chart-credential-laddering-rsjs 0 Credits Start Here HIGH SCHOOL GRADS Start Here TRANSFER STUDENTS 91 Credits Start Here SECOND DEGREE PURSUERS End Here ASSOCIATE'S DEGREE 180 Credits End Here BACHELOR'S DEGREE chart-credential-laddering-rsn 0 Credits Start Here HIGH SCHOOL GRADS Start Here TRANSFER STUDENTS 91 Credits Start Here SECOND DEGREE PURSUERS End Here ASSOCIATE'S DEGREE 181 Credits End Here BACHELOR'S DEGREE logo-accreditation-acen logo-accreditation-ccne ras-logo-flame ras-logo-horizontal ras-logo-stacked icon-bank icon-general-connect icon-general-degree icon-general-discuss icon-general-email icon-general-find icon-general-laptop icon-general-leader icon-general-map icon-general-paperwork icon-general-phone icon-general-speak-out icon-head-heart icon-mglass icon-scales icon-camera icon-filter icon-info-circle icon-mail-forward icon-play-solid icon-quote-mark-left icon-quote-mark-right icon-share-square-o icon-spinner icon-tag icon-simple-chat icon-simple-desktop icon-simple-find icon-simple-hamburger icon-simple-phone icon-testimonial-quotes icon-colored-outline-bank icon-colored-outline-circle-dollar-sign icon-colored-outline-folder-search icon-colored-outline-head-cog icon-colored-outline-head-heart icon-colored-outline-monitor-healthcare icon-colored-outline-monitor-paper-search icon-colored-outline-padlock-shield icon-colored-advance icon-colored-arrows-cross-curve icon-colored-build icon-colored-bulb-analytics icon-colored-certificate icon-colored-continual-developement icon-colored-folder-mortarboard icon-colored-globe-pen icon-colored-growth icon-colored-hand-bubble icon-colored-head-blocks icon-colored-head-cog icon-colored-laptop-cbe-skyscraper icon-colored-laptop-webpage icon-colored-monitor-paper-scan icon-colored-national icon-colored-police-light icon-colored-prep icon-colored-presenter icon-colored-regional icon-colored-skyscraper icon-colored-save-time icon-colored-state icon-colored-student-centered icon-colored-support icon-colored-world-experience icon-social-facebook-square-colored icon-social-facebook-square icon-social-facebook icon-social-google-plus-square icon-social-google-plus icon-social-instagram icon-social-linkedin-square-colored icon-social-linkedin-square icon-social-linkedin icon-social-pinterest-p icon-social-twitter-square icon-social-twitter icon-social-youtube-play-colored icon-social-youtube-play icon-util-checkbox-white icon-util-checkbox icon-util-checked-white icon-util-checked icon-util-chevron-down icon-util-chevron-left icon-util-chevron-right icon-util-chevron-up icon-util-language-switch icon-util-loading icon-util-open-window-button icon-util-open-window-link icon-util-pdf-button icon-util-pdf-link icon-util-refresh icon-util-x