Post with Responsive Video container

  By James O'Brien         business, creative, blog        23 comments

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus fringilla libero a nibh sollicitudin, ac pharetra diam convallis. Integer lobortis justo tempus odio gravida Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus fringilla libero a nibh sollicitudin, ac pharetra diam convallis. Integer lobortis justo tempus odio gravida

For those of us who create websites and services, all this leads to a singular conclusion: A million screens have bloomed, and we need to build for all of them. Building apps may seem like the obvious solution. Last month, for instance, Mashable was accessed on more than 2,500 different devices.

Our Web site redesign was an extremely large and complicated project, and Harlo handled it beautifully. They walked us through each step of the process and were happy to answer questions.

A recent Pew Research study shows that mobile users are not just skimming headlines as once assumed, but "many also are reading longer news stories -- 73% of adults who consume news on their tablet read in-depth articles at least sometimes, including 19% who do so daily. Fully 61% of smartphone news consumers at least sometimes read longer stories, 11% regularly." So, having established the importance of offering a site well-adapted for mobile use, the question is: What's the best way to go about getting there for publishers, adaptive or responsive design? In an attempt to fully understand what distinguishes the two methods, I've been asking experts in media, mobile development and PR from three countries to describe the methods for me in layman's terms. Perhaps unsurprisingly, each had a slightly different explanation, and it turns out that what's best for publishers depends on what they're trying to achieve with mobile.

Responsive design is client-side, meaning the whole page is delivered to the device browser (the client), and the browser then changes how the page appears in relation to the dimensions of the browser window.

Adaptive design is server-side, meaning before the page is even delivered, the server (where the site is hosted) detects the attributes of the device, and loads a version of the site that is optimized for its dimensions and native features.

Comments (9)

  1. Natasha - Reply

    January 06, 2011

    As you might guess, a major difference here is in where the work is being done. With responsive, the device itself does the work with media queries to display the re-sized images and optimized layout, whereas with adaptive, the server does the work and delivers the page already optimized.

    • James - Reply

      January 06, 2011

      The simplified explanation is that breakpoints are used to specify when a site layout will change when the browser window reaches certain dimensions.

      • Kim - Reply

        January 06, 2011

        With adaptive design, the layout for a specific device type will be loaded right off the bat, so there's less of the fluid transitioning between breakpoints, as the right version should already be displayed for whatever device you're accessing the site from. You can test it by going to CNET UK from a few different devices if you have them handy.

        • James - Reply

          January 06, 2011

          With adaptive design, the layout for a specific device type will be loaded right off the bat, so there's less of the fluid transitioning between breakpoints, as the right version should already be displayed for whatever device you're accessing the site from. You can test it by going to CNET UK from a few different devices if you have them handy.

          • Kate - Reply

            January 06, 2011

            With adaptive design, the layout for a specific device type will be loaded right off the bat, so there's less of the fluid transitioning between breakpoints, as the right version should already be displayed for whatever device you're accessing the site from. You can test it by going to CNET UK from a few different devices if you have them handy.

            • James - Reply

              January 06, 2011

              With adaptive design, the layout for a specific device type will be loaded right off the bat.

              • Kate - Reply

                January 06, 2011

                With adaptive design, the layout for a specific device type will be loaded right off the bat.

                • James - Reply

                  January 06, 2011

                  With adaptive design, the layout for a specific device type will be loaded right off the bat.

  2. Kate - Reply

    January 06, 2011

    For the first lot, Cremin suggests responsive design, and for those looking to harness the extra capabilities mobile devices offer (geolocation, touch gestures, compass, accelerometer, etc) to build a mobile-first experience, he suggests adaptive design.

Add a Comment