![]() ![]() The important takeaway is that the difference comes down to more than media queries and pixel units. Update: There has been a lot of awesome conversation in the comments about the difference between responsive and adaptive design. While it might be difficult to adapt a website on all the various devices out there, there’s a roundup of device-specific media queries you can refer to. That means our containers should be fluid (as in using percentages as unit measures), the assets we serve should be flexible (as in serving the right assets to right devices at the right time) and our media queries defined where content breaks (as opposed to the width of a specific screen size, say iPhone).Ĭompare that with an adaptive way of thinking, which is neither fluid nor flexible, but looks for specific points at which to adapt. This thinking challenges us to create sites that shift context according to how a site is being consumed on any given occasion. Responsive design is a means of becoming device agnostic in the sense that it seeks to create an optimized experience for any screen. Notice the operative words fluid and flexible. ![]() Rather than quarantining our content into disparate, device-specific experiences, we can use media queries to progressively enhance our work within different viewing contexts. Let’s consider the crux of Ethan’s original definition of responsive web design:įluid grids, flexible images, and media queries are the three technical ingredients for responsive web design, but it also requires a different way of thinking. You might even think of it as a difference in philosophy. The difference between responsive and adaptive sites goes a little deeper than the simple examples above. Notice how the responsive example flows with the environment whereas the adaptive snaps into place at a defined environment. This animation illustrates the difference in behavior: Responsive on top, Adaptive on bottom Adaptive design, on the other hand, snaps into place because the page is serving something different because of the browser or device it is viewed on. Responsive design is smooth because the layout fluidly adjusts regardless of what device it is viewed on. ![]() See the Pen Adaptive Example by CSS-Tricks ( on CodePen.Īnother way to think about it is the difference between smooth and snap design. In other words, the website is only concerned about the browser being a specific width, at which point it adapts the layout. See the Pen Responsive Example by CSS-Tricks ( on CodePen.Īdaptive websites adapt to the width of the browser at a specific points. ![]() Is the browser 300px wide or 30000px wide? It doesn’t matter because the layout will respond accordingly. No matter what the browser width may be, the site adjusts its layout (and perhaps functionality) in a way that is optimized to the screen. Responsive websites respond to the size of the browser at any given point. Responsive sites and adaptive sites are the same in that they both change appearance based on the browser environment they are being viewed on (the most common thing: the browser’s width). So, with that, let’s look at the difference. The concept of a responsive website is one of the greatest CSS “tricks” in the books and important enough to step back from in order to both remind ourselves what makes a “responsive” website and how it’s different from an “adaptive” one. Responsive web design has become a household term since it was coined by Ethan Marcotte on A List Apart in 2010 so much that we may take our understanding of it for granted. It’s also a common question I’m asked when teaching introductory web design. We see it pop up in the CSS-Tricks forums from time-to-time. This is a question that comes up more regularly than you might expect. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |