Treehouse: Grow your CSS skills. Land your dream job.

Adaptive Vs. Responsive Website Design

  • # December 13, 2012 at 12:59 pm

    We all have heard the term Responsive thrown all over the place. But, I have to know, from you, what do you think is the best route to take? I have read books, watched videos, took online courses for “Responsive Website Design”, but generally the true definition of Responsive is vague. In my opinion, Responsive is completely different from Adaptive. I believe the community needs to get a grasp on these two definitions. The two definitions are as follows:

    Responsive: Design fully responds to any width/height.
    Adaptive: Design fully adapts to specific widths/heights.

    What are your thoughts? Do you have a different definition?

    Any feedback would be greatly appreciated,
    Thank you,

    # December 13, 2012 at 1:38 pm

    I’d argue wether the term adaptive design really exists simply because its a bit self defeating, adapting (which is the same as responding in this context) to SPECIFIC width’s/height’s (where theres more than one height or width) will drive people nuts because there are so many width and height variations out there that you’d find your selves cutting out vast swathes of your audience. Kinda like a tailor setting up then deciding to only tailor things to predefined sizes.

    stripped down to its core I’d say responsive design is a design that adapts to what ever resolution it is viewed at (within reason no 10px wide browsers please) without catering directly to specific common place resolutions. So that the design maintains a decent level of usability and consistencey across a wide range of resolutions.

    The reality is you could try to design the adaptive way ie to specific resolutions but your design is likely to fall foul of things that don’t conform to those standards fairly quickly and as those resolution standards change the design requires modification, where as a responsive design will not as it is designed to work regardless of any speicific resolutions.

    # December 13, 2012 at 2:06 pm

    Adaptive will always fail unless it’s made for a fixed number of devices. How can we possibly guess the next Phablet/Tablet/Big Smart Phone/Small Tablet pixel ratio, pixel width/height?

    Responsive is basically the best way forward, insofar as developing to fit any possible screen size, but having breakpoints where content starts to look a bit squiffy.

    The fools errand in responsive web design is using specific device breakpoints. Your breakpoints should be determined by the content, not the other way around. That’s the true purpose.

    # December 13, 2012 at 2:09 pm

    @ToxicFire: You make a very good and bold statement. But believe it or not people are designing to cater to specific device resolution hence… 320px, 480px, 768px, 1024px, 1140px, 1280px… I don’t understand why people are still using pixels in widths, I try to use percentages when it comes to widths and EMs for everything else.

    But thank you for your input, it’s always great to see what others have to say about the state of the web.

    # December 13, 2012 at 2:14 pm

    I think designing for specific resolutions still has its place.

    Sometimes the design requires certain breakpoints. For some sites our company creates, we choose breakpoints based on the design, not devices out there. If the design needs to change at 600px then that’s our breakpoint.

    # December 13, 2012 at 2:18 pm

    @iamaaron thanks, theres probably a variety of reasons why people cater to specific devices ranging from simply not wanting to have a truely responsive design to lack of awareness of the range of resolutions out there. As for the pixel width’s i’d probably say thats down to habit, I myself get stuck in that one I keep thinking about shifting over to EM’s but havent really had chance to sit down and play enough with a design to get the feel for it.

    # December 13, 2012 at 2:21 pm

    Someone should do something about the terminology, it gets confusing. I see lots of “responsive themes” that are actually adaptive with hard break points.

    Perfect Example, a Theme named “Fluid” that is “responsive” but is actually adaptive ->

    Personally, I don’t like adaptive, but to say “Adaptive will always fail unless it’s made for a fixed number of devices.” isn’t exactly correct. It works….. if anything you end up looking at unneeded whitespace, but it is crap nonetheless. ;P

    # December 13, 2012 at 3:48 pm

    I think you should try both because make the page responsive and then use @media queries to make it adaptive.

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.