Welcome to AnandTech's 2013 Redesign
by Anand Lal Shimpi on March 9, 2013 1:16 PM EST- Posted in
- Site Updates
In 2010 we went through the single largest redesign in AnandTech history. We modernized the site, finally moved to a tag based architecture and made a number of other tweaks. The web moves a lot quicker than it did even just 3 years ago, so last year we started working on another significant redesign. Today marks the debut of that design.
Going into the redesign we wanted to accomplish three major goals. First, we wanted to have a design that put our smartphone and tablet coverage on equal footing with our traditional PC roots. The redesign consolidates our coverage areas into four major categories: PC Components, Smartphones & Tablets, Desktops & Notebooks and finally Enterprise. The super categories are largely self explanatory and you can drill down into each one of them for more specific navigation.
It's important that our site design reflects our internal focuses. We are as committed as ever to our PC component coverage, but we also devote an equal amount of time to what we're doing in the new mobile space. From my perspective, whether it's a smartphone or a server, we're still talking about some form of computer - just in a different case.
Our second major goal with the redesign was to more prominently feature Pipeline, our short form content section. We launched Pipeline in late 2011 as a way of dealing with content that either didn't demand our full review treatment or that we didn't have time to dedicate deep analysis to. Since then Pipeline has become a very important part of the site, and we wanted to elevate its position on the front page as a result. Pipeline stories on the right are ordered from newest to oldest, with even older pipeline stories appearing under the 2x2 grid of featured articles.
Finally, we wanted a design that would be more accessible and speak to the broader nature of our audience. While you all know why you come to AnandTech, it's very important to our continued success and ability to remain independent that the site accurately reflects the diverse audience. Whether you're coming to us for motherboard reviews, analysis of the latest microprocessor architectures or to figure out which smartphone or tablet to buy, you're likely a person relied on by dozens of others for recommendations. We remain an independent website, which comes with its own challenges when it comes to proving our worth to the agencies and marketing organizations that help keep us operational. Looking the part is just as important as having the content to back it up.
We made sure not to take away any features with the redesign. We still include our well used Print View on all articles, but now allow you to use it both for single page reading as well as for actual printing. The previous Print View didn't have all of the styling of our article pages since it was purely optimized for printing, now we have both modes.
Other features have been enhanced as well. The View All Comments button now actually lets you view all comments on a single page, rather than just showing you 50 comments per page. You can also now permalink to individual comments. I'm always humbled by just how awesome your comments are, now we can finally link directly to individual ones.
We now support larger images inline (we will be adding site-wide retina/hi-DPI support soon!) and our graph style has been updated as well, which you'll start seeing us take advantage of with all new content going forward. The review body text is also larger and hopefully easier to read, which should help when we post some of our ultra long form content.
The Podcast now has a permanent link at the top of the page as well - thanks to all you who have been asking for that.
The Twitter feed on the front page now includes tweets from a number of staff members including Brian, Ganesh, Jarred and myself. We've also made it easier to follow us on Twitter and Facebook with direct links in our header (hint: it helps us tremendously if you do). Our most recommended content on Facebook is also nicely streamed in to the right of the site as well.
There are more functional changes that we'll be introducing throughout the new year. We just had to get the redesign out of the way first so we could start building on it.
I hope you all enjoy the site redesign. I know big changes aren't always easy to get used to, and as always you have my commitment to fix/improve anything that truly needs it. I'd love to hear your feedback on the design in the comments below.
I'd like to close with a thanks to all of you for continuing to read and support the site. I've always said that AnandTech is your site and I do firmly believe that. We are here to serve you and you are what make this site possible. Thank you for reading, and thanks for making the past 16 years possible. If you are a relative newcomer, please be sure to check out our About page that helps explain the philosophies that drive us.
Facebook
Twitter
RSS
465 Comments
View All Comments
ludikraut - Tuesday, March 12, 2013 - link
Ok, some final comments/thoughts/questions on the redesign. As I stated previously I think the new homepage layout is an unmitigated disaster. However, I do like the new masthead and menu. It is an arguable improvement over the previous release.Some of the sub-menu choices are odd, and the menu headers are not clickable - i.e., I can't click on [Smartphones & Tablets] to get an overview of that topic. It only gives me a drop-down menu. IMO it would make more sense to mouse-over for the drop-down and click to get a page that shows the topic(s). While we're talking about the smartphones/tablets section - why on earth do HTC, Samsung, and LG rate their own menu entry? Why not Nokia, Acer, etc.? Or more logically, why not a menu item for hardware or manufacturers or something like that?
Also, I think the "trending topics" is a complete waste of space. I mean seriously, does anyone care if GPUS are trending higher than Storage? Total waste of vertical real estate, IMO. If you must have trending topics, put them near the footer.
The new tag-based approach is a very good thing. Kudos there.
Instead of the MORE PIPELINE STORIES, how about just a simple link in the pipeline sidebar that says MORE? You can either have it dynamically extend the sidebar to show the rest of the pipeline stories, or have it take the reader to a page that's dedicated to pipeline stories. It would do a lot to clean up the disjointed look of the homepage. Then you just need to marry the 2x2 grid to the older stories listed below - i.e., either ditch the grid and just go with left icons/right text or go all grid. Personally I'd ditch the grid. Also, why does the DailyTech sidebar no-longer open in a new tab? Again from a design perspective I'd prefer to be on a new tab anytime I'm leaving the current page.
Lastly, if some of the design philosophy behind the redesign was inspired by Metro, I humbly suggest reading up on the Metro design principles (for example here: http://ux.artu.tv/?p=179). IMO it's actually fairly well thought out and we can see a good implementation of it on Windows Phone. Not-so good on Windows 8, unfortunately.
l8r)
PsiAmp - Tuesday, March 12, 2013 - link
White font on a grey background hurts to read (e.g. in tweets and pipeline stories sections).omgia - Wednesday, March 13, 2013 - link
People are always down en mas about site updates but this one is much better than most I've seen. I agree the white on grey tweet text is fairly difficult to read, but otherwise, I like it. Good Job.Beenthere - Wednesday, March 13, 2013 - link
The fonts don't display properly on my screen. The "Post a comment" bar only shows: "POST A". It's a strange look from the previous design which was fine on my various PCs.Elroko1 - Wednesday, March 13, 2013 - link
Some thoughts regarding the new site lay-out::- Pipeline fonts almost unreadable. Grey on grey, who thought of that? Needs fixing asap!
- Too much wasted space on top of main page. Forces lots of unnecessary scrolling.
- Generally, fonts look blurred on my monitor (24" 1920p, windows 7). Like reading an old pdf.
IMO, the current site lay-out is not on par with the quality and depth of its content. A terrific site like Anandtech deserves a terrific home page :)
Osamede - Wednesday, March 13, 2013 - link
This is a good redesign except for one rather large screwup: the move to grey-on-black in the "Pipeline stories" sidebar and mid-section creates very poor readability and should never have passed even the first checkpoint, let alone to enter the final design and be approved.The top bar with white-on-black is okay - but that is because it is all-caps and single words. But once you start trying to read the sidebar, the design reduces contrast and makes it hard to read the longer text there
Rule 1 of any publishing enterprise is to make it easier for the reader to read - not HARDER.
Fix this please. ASAP.
DBissett - Wednesday, March 13, 2013 - link
1. The header "Trending Topics" needs to be removed because it appears on the same level as the choices to the right, which the reader expects to be highlighted as you select them. Instead, "Trending Topics" remains highlighted and it takes a while to realize that "Trending Topics" is actually a master header. This does not work well. 2. The homepage is made unnecessarily jumbled just by splitting the "Pipeline Stories" into two separate lists....Pipeline Stories and More Pipeline Stories. That's ridiculous. 3. "Tweets" just need to disappear. Who cares? Anandtech has more serious readers than to be interested in reading these one-liners. 4. And none of this feedback, or the previous 410 responses, makes a difference because nothing will be modified. After the 2010 changes the obligatory request for feedback came and went with no changes at all except that Anandtech got to appear that they "cared" about user feedback, and users got to vent, which is the MO this sort of thing. 5. If 4 is not true then after a suitable feedback period provide an article entitled "Changes we made to our new design in response to user feedback".haplo602 - Wednesday, March 13, 2013 - link
Not liking it very much ... especialy the light grey on dark grey parts ... not very readable. the design is all over the place.anyway the main point is, now the font on the site is unreadable. I'll have to change my browser settingd just for this site to make the font pleasant to the eye.
AwesomeAD - Wednesday, March 13, 2013 - link
To Anand and your fellow editors:As a daily AnandTech reader, after giving the redesign a couple of days to sink in, I'd like to 'formally' get this off my chest.
I have one major and one minor gripe about the new design. These are as follows:
-- 1. Colour Scheme Uniformity (major):
Honestly, the colors on the design are all over the place, it's a huge jumble of different 'schemes'.
Lets walk this down from top to bottom of the layout:
- Header: Dark grey background, white text (and a logo image that looks like it's from 2001; seriously, the whole design is about plain text/background and hard edges, and the logo is brushed metal/blurred overly blend?)
- Navigation: White background, orange text (dark grey/white submenus)
- Trending topic: Orange/black background
- Content: Turqoise breadcrumbs, slightly diminished white background, dark grey text
- Footer: black background (!), red headers, white text
And now the worst offender:
THE SIDEBAR:
Seriously and in all honesty, it looks like whoever designed this had four different scheme concepts and couldn't decide on one, so he figured he'd just sneak them all in at various places. Except 'sneak' isn't the right term because the sidebar contents are huge (relatively speaking).
It's like 50 Shades of Grey Sidebars over there:
Pipeline: Black borders, Grey backgrounds with Turqoise text, coupled with dark grey background and dark grey text
Dailytech: Black header, white text, white border with shadowy white background image (!) on the content with black text
Facebook: Turqoise header, semi-dark grey background, NO border, and it's broken anyway (should be hidden in there's nothing to display)
Tweets: Dark header background, white text, semi-dark content background with semi-dark border, white text, orange 'follow' link
So, let's look at what we've got:
Backgrounds: Dark Grey, White, Black, Diminished White, Semi-Dark Grey, Turqoise, Orange, Light Grey, Red (!)
Text: 50 Shades of Grey
-- 2. Comments (minor):
The comment system has lost one of its most important features: the ability to tell, at a glance, which comment is 'original' (top-level comment on the article) and which are 'nested' replies. Furthermore, the nesting level isn't immediately discernible.
The strength of the comment styling in the previous design was that I could immediately recognize 'replies' and choose to skip over them until I found the next 'original' comment. This has been made a lot more difficult.
Also, and I admit I'm not sure how this was handled in the previous design, the pagination of the comments results in many 'orphaned' replies at the top. What I mean is that a 'nested' reply to another comment might get pushed to the next page. Loading that page displays the 'reply' at the top, withouth the ability to find out to what comment excactly it is replying to without going back a page.
This should be coded so that nested replies always appear on the same page as the originating comment, even if this exceeds the usual number of 'comments per page'.
Talking about code: why are comments (and their replies) not semantically nested? It's a single unordered list. In trying to re-work the stylesheet (more on this later) this fact proved a major headache, resulting in very unstable 'hacks'.
Finally, please (please, please!) add a pagination navigation to the TOP of the comment list in addition to the one at the bottom. Navigating comment pages becomes a huge scroll-fest this way (also due to the javascript that scrolls to the top of the comments after asyncing the next page).
Oh and could you add a 'resize: vertical' CSS property to the comment input box? :)
-----------
Now, I'm not just venting hot air here; I've put in a bit of work to try and 'fix' the problems I've encountered by creating my own stylesheet:
http://userstyles.org/styles/84286/anandtech-com-2...
This isn't entirely a shameless plug, since it also gives you the ability to see how some issues *might* be fixed if you decide to do so in the future.
Here are two images for side-by-side comparison:
http://nyro.de/misc/anandtech_2013_Original.jpg
http://nyro.de/misc/anandtech_2013_Alternative.jpg
Sorry for the long post, I figured if you're gonna read 400+ comments you might as well read my novel ;)
Cheers,
Awesome A.D.
haplo602 - Wednesday, March 13, 2013 - link
awesome, worlds better then the original design ... much more consistent.