Introducing AnandTech Mobile: A Responsive Design Updateby Anand Lal Shimpi on July 15, 2013 9:47 AM EST
- Posted in
- Site Updates
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 Your CommentPlease log in or sign up to comment.
View All Comments
n0x1ous - Monday, July 15, 2013 - linklooks great. Huge improvement. Ultimately I would still prefer a dedicated mobile app but this largely makes up for it.
Anand Lal Shimpi - Monday, July 15, 2013 - linkThanks for the feedback. We were actually talking about this over the weekend. I'm curious as to what makes you say that you'd prefer a dedicated mobile app.
domboy - Monday, July 15, 2013 - linkI agree, why does it need to be an app? This solution seems so much better than having to have an app for a website.
n0x1ous - Monday, July 15, 2013 - linkShare link/post type integration that I use frequently if I want to text or email an article to a friend. Easier than having to copy url etc etc.
When I use my mobile browser I prefer the full site. I realize I can still get that so these are just nitpicks. Ultimately, I read anandtech every day of my life because of the quality and content of the writing and that won't be changing regardless of these formats. Cheers Anand. Your the best in the biz.
crazylocha - Monday, July 15, 2013 - linkAs an example of app goodness... The current mobile issue with Pipe/Tweets/etc..
Bring app up to home (main page as shows mobile browser now)..
sidescroll to pipeline...
again for Dailytech...(tapping article can be set in options to take you to browser or in app view, withtop of app button to go to webpage for further links, etc)
sidescroll again for tweets... (ability for app to retweet or post new tweet to conversation easier with app collaboration than browser, my understanding!)
and the ease of mobile gmail and other mail apps to send feedback, or to forward links, in all mobile OS's to be considered also.
If anyone can get their mobile app right, this site and their brains ought to blow away many dev's and set the standard.
Quidam67 - Tuesday, July 16, 2013 - linkI may be wrong, but in addition to a level of functional customization and design that is simply not possible via a web-browser, an app would offer at least the potential for better optimization/performance, especially in relation to network traffic. Frankly, here in NZ mobile streaming (outside of a wifi network) keeps me well away from my mobiles web-browser, but in most cases I find mobile apps (for example trademe, out equivalent of ebay) to be quite tolerable and usable. Anyway, just want to say Anand I've been following your website for years beyond count, and am filled with admiration of where you began to where you are now. Keep up the great work.
Zink - Monday, July 15, 2013 - linkNice!
smithkt - Monday, July 15, 2013 - linkI don't see a way to jump to the forums from these mobile pages. You should consider adding a link somewhere in one of the menus.
Anand Lal Shimpi - Monday, July 15, 2013 - linkDone, check the home menu up top :)
smithkt - Monday, July 15, 2013 - linkNice. Now you just need to get rid of the left hand menu when looking at the forums and I will be a happy guy. Takes up valuable real estate for navigation which already has other methods.