For the past couple of months our ad sales team has been engaged with Box, an enterprise file sharing and cloud content management company. Box was looking for a way to increase its exposure and brand awareness, and we had a platform to do just that. Rather than rely on typical advertising, Box was thinking of something a little more, er, outside of the box.

Box is absolutely amazing to work with. Rather than asking what we could do for them, they asked us what they could do for us. What immediately came to mind was the overwhelming number of requests for a responsive version of AnandTech. We presented the idea of sponsoring the design and creation of AnandTech Mobile to Box, and they loved it. Over the past month we've been modifying AnandTech and preparing the first responsive implementation of the site. Today, AnandTech Mobile is live.

Our mobile web strategy is built entirely around a responsive design. We now effectively have four views that are dynamically presented depending on browser resolution: smartphone portrait (320px), smartphone landscape (321px - 767px), tablet (768px - 1000px) and desktop. The smartphone portrait and tablet views are below:

 

You don't have to go to a separate URL to hit any of these views, they present themselves based on what resolution your browser reports. Keep in mind that high DPI displays usually advertise their resolution as some fraction of the actual resolution, so even if you have a 1080p smartphone you'll be presented with one of the smartphone views by default rather than a tiny desktop view.

All of the pages on the main site are now responsive thanks to Box's sponsorship. Any URL you open will present you a styled version of the site optimized to the device you're reading it on. Even our live blogs work, as does Bench - our performance comparison tool. In the mobile views of Bench we had to change the way we present two product comparison data to deal with more limited screen real estate. The result is pretty cool:

Rather than presenting bars, you get color coded boxes with the benchmark scores inside. For each benchmark, a darker colored box implies better performance. This is actually a bit of an improvement over what we do in the desktop view because you can easily tell which product wins a particular benchmark without having to see whether lower or higher results are better.

If for whatever reason you want to disable the mobile view you can do so in the About area of the mobile design at the bottom of the page, and can similarly re-enable it at the bottom of the desktop page. This toggle is cookie based so you'll need to have cookies enabled for it to work.

I'm really pleased with the way all of this turned out. It was a huge effort on behalf of our designer and developer but the end result looks great. I can't stress enough just how instrumental Box was in making all of this happen now. Box wanted to enable something good for the AnandTech readers and that's exactly what they've done. If you find the new mobile views of AnandTech useful, please show Box your appreciation in the comments and if you'd like to sign up for a free personal or business Box account I'm sure that wouldn't hurt either.

POST A COMMENT

98 Comments

View All Comments

  • Pratheek - Monday, July 15, 2013 - link

    wow.. what a cool feature... 320px support is appreciated... Reply
  • aryonoco - Monday, July 15, 2013 - link

    Great job Anand, and thanks Box for their sponsorship. Also so glad you went with a responsive design as opposed to breaking the web.

    It works brilliantly. Typing this now on my HTC One and even the comments section and posting comments works a treat.

    I think not being able to view Pipeline is an issue for the casual user who stumbles upon your main page, that content is effectively hidden from them. Not an issue for me as they still show up in my RSS and that's how I follow AT, but I can see where others are coming from.
    Reply
  • HYPhoenix - Tuesday, July 16, 2013 - link

    thank you. Reply
  • Kill16by9TN - Tuesday, July 16, 2013 - link

    For me as a desktop user the new design is a step backwards.
    With the same browser window size as before I now lose the right hand column with the "PIPELINE STORIES" and "Dailytech News", unless I increase the browser width by a significant margin.
    Apparently the main section of the page now requires a larger minimum width/character count per line, before text stops flowing and breaking into the next line. There is no horizontal scrollbar coming up as a possible compensation for this issue.
    With two browsers side by side on a fHD screen, I now have more overlapping of those windows than before, reducing the usefulness of such a setup.
    Reply
  • hananel - Tuesday, July 16, 2013 - link

    Box is slow and the free verstion is so limited! if you want much better service and cheaper then DropBox is Copy! that offer 20Gb of free storage, the upload and download speed are like Dropbox and faster from all alternative that I can find (Dropbox Gdrive, SkyDrive, Box)
    if you want to get 20Gb, register from this link:
    http://goo.gl/h9imj
    Reply
  • NesuD - Tuesday, July 16, 2013 - link

    Very nice. My son who is a developer was just this weekend telling me about pushing his company to start offering responsive design sites and used anandtech as anexample of a site that he thought would benefit greatly from a responsive design update. Now all that is left is to implement a full screen width design. Reply
  • ShieTar - Tuesday, July 16, 2013 - link

    Not bad, but i can't find a way to see the pipeline stories on my phone? Reply
  • WhitneyLand - Tuesday, July 16, 2013 - link

    Please see why disabling Pinch-Zoom is a bad idea: http://ux.stackexchange.com/questions/37511/should... Reply
  • Tinmanhk - Tuesday, July 16, 2013 - link

    Signed up for first time to make this comment. I very often look at AT on my iPad and the inability to pinch zoom or double tap to enlarge text is a serious flaw in the new design as it appears that viewing AT in landscape mode forces a desktop view which cannot be zoomed etc. Please can this be fixed Reply
  • bobbozzo - Tuesday, July 16, 2013 - link

    The new design mis-detects my laptop as a mobile device.

    OS: Fedora 17 64-bit
    Computer: Dell Latitude e6410 laptop
    Screen res: 1440x900
    Browser: FireFox 22

    Furthermore, I get an error when clicking About - Show Full Site (it does work though, despite the error).
    Reply

Log in

Don't have an account? Sign up now