The Loop’s responsive design is live

I mentioned a couple of months ago that one of the big changes coming to The Loop in 2013 was a responsive design, making it easier for people to read the site on mobile devices. That feature went live late last night.

I thought about how to handle mobile devices on The Loop for a long time. I could do an iPhone app, but it seemed silly to do a separate app just to show the same content; I could use one of those themes, but I found those to be unreliable in certain situations; I could also use a special URL like m.loopinsight.com and force everyone with a mobile device to a special site.

None of those seemed right to me.

What I wanted was for everyone to come to the same site and have it format itself for that device. That seemed like the right thing to do.

You can see the new design by visiting the site on your iPhone. It should make the reading experience much better.

The Loop logo also now supports Retina displays. I don’t have many images on the site, but at least that one is now Retina friendly.

Enjoy.



  • Carlos

    Nice!

  • Zepfhyr

    Looks awesome!

  • gdemey

    Awh, it’s not responsive on the desktop :(

    • rolphus

      As far as I can see it’s not technically a “responsive” design. That’s not a bad thing in my opinion, as true responsive designs tend to massively bloat the HTML needed for the mobile / small-screen version of the site.

      • Terry Alyn Maraccini

        We run a responsive web design for our site and the code footprint change from a conventional site was minimal.

        • rolphus

          Sorry. I was generalising, and I shouldn’t do that.

          For some heavy sites I’ve seen and worked o (of which The Loop isn’t one), there can be a huge difference in HTML (and image) download sizes for desktop and small-screen sites – like, 2-3 MB of data being downloaded when under 100 KB is necessary. For that sort of site, CSS-only responsive design is a really bad idea.

          • Luke

            Those sites are designed poorly.

    • jtr3

      I was thinking the same thing. I was hoping the “responsive” part would would in both directions.

    • pezillionaire

      This is a Responsive Web Design (RWD) pattern, well technically adaptive as break points are fixed sizes (px vs. % based). However, the media queries are based on device width, not the usual screen width that’s why it doesn’t scale on the desktop. While this works it’s not ideal as many users like to have the ability to adjust the content based on browser window, instead of based on physical screen size.

      Notably, Loop Insight is using a desktop down approach to RWD as opposed to a Mobile first. IMHO mobile first is optimal as it provides the simplest layout first and re organizes content for larger screens.

  • batrico

    So, no Disqus comments on iPhone?

  • http://mr.danielignacio.me/ dotdapple

    I’m not on my phone, but just resizing my browser window doesn’t seem to show any responsiveness. Do I really have to be on a mobile browser to see it?

  • http://twitter.com/1BigGeek JD Palmer

    Awesome! Thank you so much. I visit from an iPhone most often and this just makes it so easy to read.

  • DocRoss

    I noticed it last night and jumped for joy (but Joy jumped first). Great job and thank you!

  • http://www.tenfingercrunch.com Michael Bartholomew

    Just tested it on an iPhone and it looks good. I did notice, however, that comments do not display. Is this a Disqus issue?

  • http://twitter.com/J_Fo Jeff

    It looks, great, Jim! I really like the new design.

  • http://foomandoonian.net/ Foomandoonian

    Technically, I think this design is adaptive, not responsive. Some smart webdev may be able to correct me on that, but I’m pretty sure.

    There’s nothing inherently wrong with either approach. Both have advantages and disadvantages.

    • Gaussian Blur

      I’m not a smart webdev, but I think you are correct.

  • Pepperman

    Not actually responsive… but still welcome nonetheless!

  • Terry Alyn Maraccini

    Your design is adaptive. Responsive design is completely device agnostic and will scale continuously to any viewport detected. Someone needs to read their Ethan Marcotte again.

  • http://mangochut.net/ mangochutney

    Looks really nice Jim. I’d love to have comments in this view, but I think Harry and others might disagree.

    In any case, this will have me visit the site, even though I get the full text in the RSS feed.

  • David

    Responsive, adaptive? Jim, it’s lovely. I don’t have to turn my iPhone into landscape nd double-tap to be able to read the microscopic text of the old site. Great work. It makes visiting and ready a joy; thank you.

  • George

    There are currently two issues:

    1) no comments 2) switching between landscape and portrait sometimes leaves an unusable site that can’t be resized.

    I love the content, but preferred the old way. What was wrong with Safari’s double tap?

  • http://twitter.com/Yogi Jonas

    Putting my iPhone in landscape orientation and back to portrait “broke” the site.

    Honestly, I prefer the way it was.