Table of Contents
- 1 Learn if responsive websites or adaptive websites is right for you.
- 2 What they are and how they work
- 3 Responsive Web Design
- 4 Adaptive Web Design
- 5 Responsive Web Design
- 6 Adaptive Web Design
- 7 Responsive Web Design
- 8 Genesis Framework
- 9 Here are some of the most popular sources for responsive templates.
- 10 Website Template Examples
- 11 Adaptive Web Design
- 12 Pros and Cons of a Responsive Web Design
- 13 Pros and Cons of a Adaptive Web Design
- 14 Wrap up on responsive websites vs. adaptive websites
- 15 General FAQs
Learn if responsive websites or adaptive websites is right for you.
Do you know the difference between responsive websites vs. adaptive websites?
Picture this: you’re navigating the web in search of the perfect website to inspire your next design.
You have just come across one of the more beautiful sites you’ve seen and you are blown away by the site’s responsive transitions at various browser sizes.
So you ask yourself: could I build a responsive website like this one?
The short answer is YES, but there are things to consider before starting your project:
- Is responsive design the best implementation technique?
- Would an adaptive approach better suit your needs?
In this article, we will take a look at the pros, cons, and examples of the two main implementation techniques used by website building platforms and professional agencies: Responsive Web Design and Adaptive Web Design. Check this complete guide to a website redesign.
What they are and how they work
Google is all about mobile first and requires web designer to take into consideration desktop computers, mobile phones, and mobile devices.
Responsive Web Design
A properly implemented responsive website looks good at every screen size. To achieve this, the site uses a combination of fluid design and media queries to determine breakpoints.
Fluid layouts use percentages to determine how content will be distributed on the page. For example, three columns at 30% width and the remaining 10% of space dedicated to whitespace.
When elements on the page become too narrow for a certain screen resolution, media queries within the site’s code tell the browser to switch to another layout configuration. Typically, a responsive website will have four breakpoints (mobile, tablet, desktop, large screen).
As you can see by the responsive example above, there is a smooth flow between each distinct breakpoint.
Adaptive Web Design
On the other hand, adaptive websites use the browser’s user-agent to determine the type of device (eg. desktop or mobile) being used to visit the website. Once the server has this information, it relays the most appropriate “version” of the site to the browser making the request.
Although adaptive websites are able to create several “versions” of the same site, most website builders that use an adaptive implementation use two distinct versions: desktop and mobile. It’s also important to note that certain tools geared towards professionals will offer a third version for tablets.
Building and managing a website (who? how?)
Responsive Web Design
Generally speaking, there are four user types that will build responsive websites.
1) People without coding experience will select a pre-built responsive template and then replace its content with their own.
While content management systems like WordPress won’t give inexperienced users much design flexibility, website builders like Squarespace make it a little easier to move things around while staying within the limitations of the template.
However, without some coding experience, you won’t be able to change much when it comes to the site’s layout. Here’s a quick example:
2) Designers with an understanding of how the code works will tend to look at Visual Page Builders like Divi or professional tools like Webflow. This gives them a tremendous amount of control without having to edit any of the source code.
3) Developers with less front-end design experience will tend to use Bootstrap to help them code their websites. Bootstrap is the world’s most popular front-end component library which makes the building process easier and faster.
4) Experienced developers are able to build everything from scratch.
Adaptive Web Design
Adaptive websites have been a growing trend because of three main factors:
- A growing number of people want to build their own website
- Most don’t have any coding experience
- People don’t want to feel like they are stuck in a template
Because of this, adaptive site builders like Wix and PageCloud now power millions of websites worldwide. Although most of these websites are built by DIYers, many designers use these tools for their efficiencies and ease of use.
Essentially, adaptive website builders enable you to create a desktop version of your site and then adjust the mobile version so that it’s just right.
Because adaptive builders use absolute position instead of relative position, you can move your content freely on the page the same way you would in a desktop app like Keynote or PowerPoint. This makes the design process much more intuitive for beginners.
Responsive Web Design
Since responsive web design is so complex (high barrier to entry), most that choose this approach will use a template. Typically, templates are built for CMS’s like WordPress and will range from FREE to $300+.
We build about 70% of our website on WPengine’s DPX platform with Genesis Pro. The Geneisis Framework is clean and super fast for today’s mobile freindly requirement in SEO. Here’s a little more about the Genesis framework.
Get the secure, fast, and search-engine-optimized foundation for WordPress that drives business results.
1. Customize quickly.
Add functionality fast with plugins and widgets, plus a lightweight codebase to reduce dev cycles.
2. SEO from the get-go.
Built-in SEO audited by experts keeps you from needing more technical know-how than your team already has.
3. Stay secure.
A network of developers constantly audit and upgrade the security for the framework, so you can rest easy.
Genesis Pro unlocks new features and tools across the Genesis platform.
Let’s break it all down.
Although, as mentioned above, certain website builders like Squarespace and Shopify offer a collection of free responsive templates you can use when subscribed to their service.
Here are some of the most popular sources for responsive templates.
Website Template Examples
Genesis & premium themes
Access to and support for Genesis Framework & all of our 35 StudioPress-made premium child themes.
Adaptive Web Design
There are no public marketplaces for adaptive web design templates.
Adaptive website builders were developed in order to give non-technical individuals the ability to create custom websites that look great on all devices without having to code.
Therefore, each adaptive platform offers its own templates that you can easily customize however to your preference.
Here are a few adaptive web design examples
Pros and Cons of a Responsive Web Design
Pros and Cons
- Websites look great on every screen size
- Site-wide changes are simplified because the websites use a template
- Responsive templates can be a source of income for developers
- Beginners can’t “break” the intended design of their website
- It’s usually possible to switch templates without re-creating an entire website
- Non-technical individuals are limited to templates or expensive third-party resources
- Website creation is extremely time-consuming
- Because of relative positioning, certain effects can be challenging (eg. layering)
- Simple layout changes, like moving a text box, can be very difficult
Pros and Cons of a Adaptive Web Design
- Websites look great at the most popular screen sizes
- WYSIWYG editors allow any user to design a website without code
- The fastest way to design a custom website with a small number of pages
- Layering and creative layouts are easier to do
- Customizing mobile version of adaptive websites is easy
- Hard to make changes across multiple pages
- Can’t switch templates without rebuilding the site
- Inexperienced users can make their websites unattractive
- Adaptive websites are typically platform-specific
- No marketplace for adaptive templates
What’s better, responsive or adaptive?
It’s impossible to position either implementation technique as “better”.
Responsive websites tend to work better for large websites and agencies because of their premium price point and the control that professional can have over the site.
On the other hand, adaptive websites work best for smaller websites and individuals who want to build their own website and have control over their design.
Another interesting note is how adaptive builders have been adding more and more responsive elements within their designs, such as galleries. By offering this “best of both worlds” solution, they are gaining market share over the traditional responsive builders that have locked out non-technical individuals for years.
Wrap up on responsive websites vs. adaptive websites
I asked you at the begin of this post if you knew the difference between responsive websites vs. adaptive websites? Share your knowledge with us.
Have something to say about responsive websites vs. adaptive websites?
Philip Westfall is the Director of Growth at PageCloud. Over the past several years, Philip has become an expert in SEO, product marketing, and user behavior. When he’s not at work, Philip loves being active and reading about the latest life hacks.
What are adaptive websites?
Technical definition. Adaptive web design is a process of server-side detection that chooses a design layout and size to display. The adaptive design will serve different site versions (or pages) to different devices based on common screen sizes and resolutions.
How do you create an adaptive website?
Want to design an adaptive site from scratch? Start again by designing for the lowest resolution and work your way up. You can then use media queries to expand the layout for higher resolution viewports. It’s more difficult than a clean, responsive design.
What are responsive websites?
Responsive web design (RWD) is a web development approach that creates dynamic changes to the appearance of a website, depending on the screen size and orientation of the device being used to view it. Responsive design relies on proportion-based grids to rearrange content and design elements.
What does a responsive website mean?
A Responsive Website Design is a website that “responds” to the user’s device. Typically referred to the screen size on which the website is being viewed.