• http://rikschennink.nl/ Rik Schennink

    I feel like a smaller footprint on small devices would be a nice addition to the test.

    In my opinion a responsive site is a site that starts small (with a small footprint) and than additional functionality is stacked on top (and loaded conditionally) based on available features and screen real estate.

    • Guypo

      I agree that’s the ideal, but sadly that’s not the reality. My previous tests showed most responsive websites “weigh” (in KB) roughly the same regardless of the screen size, despite dramatically reducing the amount of visible content.

      See here for more details: http://www.guypo.com/uncategorized/real-world-rwd-performance-take-2/

      • http://rikschennink.nl/ Rik Schennink

        Thanks, nice overview, good stuff! Time for responsive to start meaning more than just scaling things visually, cause that’s only the easy part imo.

  • Jessi Bruton

    Guy, how did you determine the “Top 100 / 1,000 / 10,000″ websites? Are these based on daily traffic, or newness, or some other factor?

    • Guypo

      I simply reused the list the HTTP Archive uses, which in turn is based on Alexa’s Top 1 Million sites, and is based (AFAIK) on traffic.

      Here’s the HTTP Archive description: http://httparchive.org/about.php#listofurls

    • hidrees

      My guess is he used Alexa ranks. I could be wrong.

  • http://www.intersect.com.br/ Elton Mesquita

    Pretty good test and article. To me the number of responsive sites is low, but it’s good to see that it is at least about 10%. Do you plan to repeat this test some more times? It will be nice to compare the growth of RWD.

    • Guypo

      Maybe I’m more of a pessimist, but I didn’t even expect it to be at 10% :)

      Yes, I definitely plan on repeating the test over time, and sharing the results.

      • http://www.intersect.com.br/ Elton Mesquita

        Yep, Point of View… But still it is an ok number.

        It’ll be good to see these numbers through time! I bet we’ll see a big leap in 2014.

  • zachleat

    I’m worried that this test represents a misunderstand of what Responsive Web Design is. Lack of a scrollbar is an oversimplification of RWD. Specifically, a scrollbarless site can be RWD’d but it isn’t a “necessary and sufficient” condition.

    A site with a set of fixed breakpoints is not responsive. If I add media query blocks for 320px, 480px, etc etc and the layout/content is not fluid in-between those breakpoints, it’s not RWD. In the biz we lovingly call this a twerky layout.

    This might be overly pedantic, but I feel like it’s an important distinction.

    • Guypo

      I think the definition of RWD is still somewhat different for different people…
      I agree fluid design is core, but I’m not sure there’s a perfect way to test that. Maybe use a weird width? Like 457px wide?

      I did run 320px wide tests too, I’ll share the comparison of it to 480px once I do some vetting of the data.

      • tkadlec

        Yeah, in actuality the number is going to be even lower than this.

        The reality is the test will ever be perfect short of doing manual analysis (which sounds like LOADS of fun)—there are always going to be exceptions. But I do think you’re on the right track and I’m pretty comfortable with this as at least a rough assessment of the current rate of adoption.

        As for adding a weird width to account for Zach’s concern, I’m not sure how much it would help. Say I serve a 320px fixed layout to a 457px device because my next breakpoint hasn’t kicked in—wouldn’t your test still report that as “responsive”?

        • Guypo

          yeah, it would be marked as responsive in my test.

          You also encounter sites with a responsive menu but not responsive content, or a broken responsive experience (e.g. http://grooveshark.com/), framed sites, and other weirdness.

          I think at the end of the day, we just need to live with a certain margin of error here, from my visual inspection the accuracy is pretty high.

          • zachleat

            The point I was trying to make is that even a visual inspection at one breakpoint is not sufficient.

            You’d need to do a few breakpoints with additional delta tests of +/- 10px (or some other small value). Find an image, test its width. Find the main content, test its width in relation to the viewport.

          • Guypo

            You can find an exception for pretty much any test I create, partly because people expect different things. For instance, your proposed test would intentionally exclude sites that use only breakpoints but not fluid design, while some may call such sites Responsive too.

            Right now, I think the primary question is whether we need to finesse the test. For instance, if you glance through the screenshots of the top 200 sites, can you find any notable number that would require your refinement to accurately identify?

          • zachleat

            Well, there is a standard definition for Responsive Web Design. If we are measuring and collecting data on whether web sites are using Responsive Web Design, shouldn’t our test conform to the definition and not a nebulous approximation of what “some might call Responsive?”

            Anyway, it’s not a big deal. :) Just thought I’d help educate a little bit about what RWD actually is and what it isn’t.

            Happy Holidays

  • g105b

    Quick! Better make my website responsive!
    body { overflow-x: hidden; }
    Done.

    • Guypo

      I don’t think “qualifying” in my test is a dev priority for any site :)
      I am even more certain you’d finding having a usable site on a smaller screen a higher priority than tricking my test.

      If these assumptions prove false, we have a MUCH bigger problem than low adoption of RWD…

  • Dmitry Yesin

    Thanks Guy! This kind of automated detection of responsive sites is something I was working on. One question on using WebPageTest scripting to compare window.innerWidth to scrollWidth. How were you able to output the result of this comparison using WebPageTest? I have looked at the documentation and I can see that you can execute JS code but don’t see of a way to capture the output.

    Thanks!

    • Guypo

      There’s no perfect way to do it – I logged messages into the console (using console.log), and then read them out through the XML Result. I believe it only works on Chrome.

      The best place to ask such questions is on the WebPageTest forum pages.

  • Eric

    Listyouridea.com is responsive check it out

  • http://www.splinterteal.co.uk/ Freelance Web Designer

    bottom line is: RWD is here to stay, no getting around that

  • http://dubaimonsters.com/web-design-dubai.php James Peter

    Nice article websites is Responsive
    you have written we work for Dubai Monsters
    web
    design Dubai

Back to top
mobile desktop