Introducing AnandTech Mobile: A Responsive Design Update
by 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.
Facebook
Twitter
RSS
98 Comments
View All Comments
crazylocha - Monday, July 15, 2013 - link
Works great on DX2 w/ Dolphin(+jetpack). Super smooth switch to landscape and all. Like it!Is there going to be an addition to the menu for Pipeline/Dailytech/Etc?
skiboysteve - Monday, July 15, 2013 - link
2nd this. I visit on my Lumia 920 regularly and its nice to see pipeline and major stories. Now I can only see major stories no matter if I set desktop or mobile mode for my user agentTrackSmart - Monday, July 15, 2013 - link
Agreed! There is no obvious way to view pipeline stories, which is unfortunate.Maybe they should just fall in line with the "regular" stories. You could differentiate them with a "Pipeline" logo, but they would fall in the normal article list.
Overall, the mobile views are a wonderful addition and function well.
Anand Lal Shimpi - Monday, July 15, 2013 - link
Pipeline stories are visible on all tag pages, it's just the front page that we don't have an ideal solution in place for yet. We talked about adding another dropdown for pipeline, will discuss it with our developer again.jibz - Monday, July 15, 2013 - link
Why not just let us see the desktop, non responsive site when we select a desktop user agent? I prefer it this way, and I'm sure I'm not the only one.Anand Lal Shimpi - Monday, July 15, 2013 - link
Responsive designs don't give you a different view based on user agent string, instead they deliver a different view based on reported browser resolution.If you want the desktop view, simply set the desktop cookie under About on the mobile view.
jibz - Monday, July 15, 2013 - link
Ok, didn't see the Full website button there. Good to know. The user agent toggle is simply a shortcut so I don't have to find that button in every single web site. I let my browser tell the website if I prefer the mobile, responsive view or the classic site.TrackSmart - Monday, July 15, 2013 - link
That is unfortunate. I always hit the front page to see if there are new stories (of any kind). I would not think to check individual sections (e.g. Smartphones) to find articles that are may (or may not) be missing from the front page. It would be too much work.I'll be curious to see how you guys approach this problem. As it stand, content is "hidden" behind those category walls and is unlikely to be viewed by folks with similar browsing behavior to my own. It is too much work to check each and every section and scan for something that looks new, but isn't on the front page.
A dropdown isn't a great fix for this problem, but it would be better than the current situation.
I think the fundamental question is whether Pipeline stories need to be physically separated from 'normal' stories for those reading on mobile platforms. Or can you find a clever way to distinguish them.
Some random ideas to get the brainstorming started:
- Pipeline icon/logo instead of a photo that directly relates to the article?
- Different color text and background?
- Larger box for 'big' stories and smaller box for Pipeline stories?
eanazag - Monday, July 15, 2013 - link
I miss the pipeline too. But I can certainly deal with setting the view back to desktop. I had no issues with your website not being mobile designed.kenthaman - Tuesday, July 16, 2013 - link
I think another dropdown would make sense. I didn't see any way to check for podcast otherwise.