This argument of responsive versus adaptive web design is ongoing. Each type of web design
has its pros and cons and neither one is better than the other, they’re just different. So, what is
responsive and adaptive web design?
Both responsive and adaptive sites are the same in that they both change appearance based on
the browser environment they are being viewed on. They both adjust based on the browser’s
However, responsive websites respond to the size of the browser window at any given point.
This means that no matter what the browser’s width, the site adjusts its layout and functionality
in a way that is optimized for the screen. Whether the browser is 300 pixels or 3000 pixels wide,
in responsive web design the layout will respond accordingly.
Adaptive web design supports the creation of multiple versions of a web page to better fit the
user’s device, as opposed to a single version that other web design techniques used. Adaptive
websites adjust to the width of the browser at specific points. This means that the website is
only concerned about the browser being a specific width, at which point it adapts the display of
the website to the appropriate device/browser layout.
Conversely, responsive web design is fluid and adapts to the size of the screen, no matter
what the target device. Responsive web design uses CSS Media Queries to change the
layout style based on the target device characteristics.CSS styles sheets include
display type, width, height, and so on. Only one of these is necessary for the site to adapt to
Adaptive web design, on the other hand, uses static, pre-defined layouts which don’t respond
once they are initially loaded. Adaptive web design works to detect the screen size and load the
appropriate layout for it. Typically, you would design an adaptive website for six common
screen widths: 320, 480, 760, 960, 1200, and 1600.
So, when should you use adaptive and when should you use responsive web design? If you
already have an existing site and need to retrofit it to make it mobile friendly, you would typically
use adaptive web design. This lets you take control of the design, and lets you develop for
specific, multiple views specific to the device. You can design for your choice of the number
of web views, depending on you, your company, and your overall budget.
Adaptive web design offers you a certain amount of added control over content and layout that
you may not have with responsive web design. Adaptive web design typically designs a site for
the lowest resolution and then works its way up. You can also design an adaptive site from
Responsive web design, however, is much more popular today than adaptive web design.
Responsive web design does not offer as much layout control as adaptive web design but is
easier to both build and maintain. Responsive layouts are also fluid, and while adaptive layouts
uses percentages to give a more fluid feeling when scaling, these can cause a jump when the
window is resized.
Responsive websites in some ways are harder to make. Since With Responsive Web
The design you are designing for all layouts and so, this makes the process more complex.
Responsive Web Design They require greater attention to the site’s CSS and organization to
ensure that it functions well at any possible size.
Responsive web design enables for the website to work smoothly, whereas adaptive web design
causes the website to snap into place. Also, adaptive web design is less flexible. This is
because adaptive web design only works on as many screens as your adaptive layouts are
enabled to support. Besides this, responsive websites load faster, because while an adaptive
website needs to load all possible layouts, responsive websites only need to load the one that
works across all platforms.
So, which one is better? The answer is: It depends. Responsive web design is almost
always the safer option to go with for your site. If functions well regardless of the screen size
and has short loading times. Adaptive web design, however, works well for newer, smaller
websites that are just starting out and need to preserve their resources. An adaptive site is
easier to create and the smaller size and audience often mitigate the slower load
times and lower flexibility.
At LSN, we specialize in building both responsive and adaptive websites, depending on your
business need. We work closely with your team to understand your needs and
goals associated with building your website. We create fast, interactive, and secure websites
using the latest web technologies and web design techniques.
So, if you want to build a website for your business that will be effective and is tailored to specific business needs, LSN for an initial free consultation.