256 Kilobytes

Responsive vs Adaptive Web Design

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

Published 1 month agoSat, 22 Dec 2018 02:35:48 -0800 | Last update 1 month 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.

177 views, 1 RAMs, and 1 comments

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 (1 month ago)
🐏 ⨉ 1
Posted by Louis J. V. Cicalese 1 month ago

Edit History

• [2018-12-22 2:35 PST] Louis J. V. Cicalese (1 month ago)
🕓 Posted at 22 December, 2018 02:35 AM PST
Profile Photo - Louis J. V. Cicalese Louis J. V. Cicalese
🗎 16 🗨 33 🐏 18
Staff

Account created 2 months ago.
16 posts, 33 comments, and 18 RAMs.

Last active 2 days ago:
Posted thread [Affiliate Deals and FAQ] 10 Reasons Why the Humble Bundle is Much More Humble than You Would Understand

Profile Photo - August R. Garcia August R. Garcia Posting on Internet... Portland, OR
🗎 60 🗨 481 🐏 86
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 1 month ago

Edit History

• [2018-12-23 2:16 PST] August R. Garcia (1 month 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.