256 Kilobytes

Responsive vs Adaptive Web Design

Articles in Style and Layout | By Louis J. V. Cicalese

Published 4 months agoSat, 22 Dec 2018 02:35:48 -0800 | Last update 4 months agoSat, 22 Dec 2018 02:36:52 -0800

What are the major difference between responsive and adaptive web design? You’re about to find out.

253 views, 1 RAM, and 1 comment

Because they share some similarities, what distinguishes responsive and adaptive web design from each other may not be immediately apparent. Both types of design are used to change the style, layout, and sometimes functionality of a web page based on the width of the browser being used. The methods by which they achieve this, however, are different.

Key Distinctions 

Responsive Design

When made with a responsive design, a website’s layout will be optimized to the size of the browser at any and all possible sizes. This means that even when increasing or decreasing the width of your browser window pixel by pixel, a web page’s content will adjust fluidly.

This makes for a very flexible design that will, if done properly, allow your site to respond perfectly to any size window.

Adaptive Design

With adaptive design, a web page adapts to the size of the browser at specific, predetermined points. Rather than adjusting fluidly as the width of the browser window increases or decreases, an adaptive website will “snap” into place when the window reaches a specific width for which the site content was designed.

These predesignated widths, or anchor points, usually correspond with standard device sizes, such as a typical computer monitor, common phone screens, and so on. Because adaptive design uses predesignated anchor points, this style is more rigid and less flexible than responsive design.

Different Methods for Different Philosophies

Designing for Different Browser Sizes

There are several reasons why it is important that your website is designed to either be responsive or adaptive to browser size. For desktop use, a visitor to your website needs to be able to adjust the size of their browser window without the content becoming unreadable.

There are also a wide variety of devices, all with different dimensions, with which people are able to browse the Internet and access your website. These screen sizes range from the mighty Smart TV to the insignificant Apple Watch, and it is important that people are able to read and interact with your website on any one of them.

Fluid Measurements for Flexible Design

One advantage of responsive design is that it uses percentages as unit measures rather than static measurements such as pixels, for example. This means that the elements on your page can adjust and behave as a percentage of any given screen size, including those of less prominent and even unreleased or hypothetical devices.

When creating media queries for a responsive design, they are defined in terms of where the content breaks, which means that the elements on your page will continue to be logically organized regardless of the browser width.

Static Measurements for Rigid Design

Adaptive design, however, uses static measurements and look for standard points at which to change. For example, media queries in adaptive designs will target the specific widths that the web developer chose to design for, which generally corresponds to the dimensions of common devices.

A benefit of adaptive design is that there are many device-specific media queries already online for web designers to reference. If a developer is only interested in designing for a handful of devices, then they might save time by choosing the adaptive design style. However, this method will never be as flexible or fluid as designing responsively.

Though many web developers have their own preference as to which philosophy of design is better, both responsive and adaptive design are generally seen as viable methods. It is important to weigh the advantages and disadvantages of each method, and decide which one will suit your website’s needs best.

Users Who Have Downloaded More RAM:
August R. Garcia (4 months ago)
🐏 ⨉ 1
Posted by Louis J. V. Cicalese 4 months ago

Edit History

• [2018-12-22 2:35 PST] Louis J. V. Cicalese (4 months ago)
🕓 Posted at 22 December, 2018 02:35 AM PST
Profile Photo - Louis J. V. Cicalese Louis J. V. Cicalese
🗎 38 🗨 45 🐏 37
Staff

Louis Cicalese is a person who has written about the hacker known as 4chan, the hacker known as 2channel 5channel, lesser-known search engines, CSS color namesLeeroy Jenkins, hiring Kermit the Frog impersonators and various other topics.


Account created 4 months ago.
38 posts, 45 comments, and 37 RAMs.

Last active 16 hours ago:
Posted thread The UK's War on Porn and Why VPNs Ensure It Will Fail

Profile Photo - August R. Garcia August R. Garcia LARPing as a Sysadmi... Portland, OR
🗎 107 🗨 623 🐏 117
Site Owner

The sidebar on 256kilobytes.com is an example of the use of responsive design. Here is a commented excerpt from the code:

/* --p-4 and --p-3 are shades of purple defined as CSS variables */

/* The sidebar always has a dark purple background color (as a fallback if the gradients aren't supported on some browser) regardless of screen size*/
aside {  background-color: var(--p-4); }

/* If/when the user's screen is 993 pixels wide or larger... */
@media screen and (min-width: 993px) {
  aside {
    /* Use a slight linear gradient from the left inward */
    background: linear-gradient(to left, var(--p-4), var(--p-4), var(--p-3));

    /* Take up 20% of the screen space; other 80% used for main content */
    display: table-cell;  vertical-align: top; }
    width: 20%;
  }
}

/* If/when the user's screen is 992 pixels wide or smaller... */
@media screen and (max-width: 992px) {
  aside {
    /* Use a linear gradient from both sides inward */
    background: linear-gradient(to left, var(--p-4), var(--p-3), var(--p-4));

    /* Change the display style and show the sidebar at the bottom of the page instead */
    display: grid;
  }
}

If the user's screen is wide, put the sidebar on the right side of the screen; otherwise, show at the bottom of the page.

Note that there are other style rules that impact the sidebar that are excluded from this excerpt.

Download more RAM. 🐏 ⨉ 0 Posted by August R. Garcia 4 months ago

Edit History

• [2018-12-23 2:16 PST] August R. Garcia (4 months ago)
🕓 Posted at 23 December, 2018 02:16 AM PST

The CIA wants all code in the cloud under their lock and key. They want to ban compilers and make people think HTML is computer programming. - Terry A. Davis

Post a New Comment

To leave a comment, login to your account or create an account.

Do you like having a good time?

Read Quality Articles

Read some quality articles. If you can manage to not get banned for like five minutes, you can even post your own articles.

View Articles →

Argue with People on the Internet

Use your account to explain why people are wrong on the Internet forum.

View Forum →

Vandalize the Wiki

Or don't. I'm not your dad.

View Wiki →

Ask and/or Answer Questions

If someone asks a terrible question, post a LMGTFY link.

View Answers →

Make Some Money

Hire freelancers and/or advertise your goods and/or services. Hire people directly. We're not a middleman or your dad. Manage your own business transactions.

Register an Account
You can also login to an existing account or recover your password. All use of this site is subject to terms outlined in the terms of service and privacy policy.