Responsive/Adaptive

Responsive/Adaptive
on
in: The Basics

Even though I’ve seen quite a few of blogs on the topic of responsive, fluid adaptive and other designs that change with their environment, I have found that they are almost always not only interesting, but you also always walk away from it with a bit of new knowledge or at least a new way of looking at these elements.

One of the books that helped me wrap my noggin around responsive web design when I first learned to code responsively in college was Responsive Web Design, by Ethan Marcotte, the person who coined the term Responsive Web Design. Most people see responsive sign as mobile friendly. This declaration might be true, but it is so much more than mobile friendly. Responsive Design is a way of life! I realize that not all websites benefit from being responsive, such as huge e-commerce sites, but I look forward to the days when we can say over 85% of websites in existence are responsive. Not only does this seamless way of coding make for a better web browsing experience, but I find that for most most part, responsively coded websites are usually paired with a much more aesthetically pleasing design.

Designers often confuse a responsive website with an adaptive website. The end goal is usually fairly similar, giving the user a more usable/mobile-friendly experience, but the way of getting there is a bit different. Both methods are made using Media Queries. In short, a media query just tells us what styles to use, at what screen size. The biggest difference between responsive and adaptive, is the unit of measure. Responsive websites use percentages or relative units where adaptive uses a more static unit like, pixels. You can see in the gif below, that the content in the responsive example is using a 100% width, whereas the adaptive example doesn’t reach 100% until the outer container has reached a certain breakpoint.

Responsive

 
 
 

Adaptive

 
 
 

One of the benefits of making your website responsive, is you can do all of your styling in one place as opposed to making an entirely different website for mobile devices. The obvious benefit is that the design will be seamless and fluid no matter the size of your screen. You can even resize your browser window from small to large and back again to watch the responsive coding melt from one layout to the next. Here is one of my favorite resources to browse numerous responsive websites and how they change from query to query along with an image example of one of their entries.

Which is better? Responsive design is always changing and adaptive design makes some changes at designated screen sizes. How do they compare? Responsive is generally harder to make. Whereas adaptive is less flexible. Responsive sites load faster because adaptive sites have to load every possible layout. All in all, responsive web design is almost always the better and more productive option. It will always display correctly no matter what new tech devices are released on the market. The only time I could see an adaptive site being the slightly better option is for new companies with fewer resources. If this is not the case however, responsive is the way to go. It is an overall better investment because every person who owns a mobile device will without a single doubt, view a pixel perfect version of the site no matter what device they are viewing it from.

Facebook icon
Twitter icon
Share on Google+
LinkedIn icon
Pinterest icon