Mashable's Responsive Redesign | Hacker News Reader

Mashable's Responsive Redesign

beta.mashable.com

21 pointsgisikw48 comments

I found the design distracting, and was not sure where to look first. I normally look for the main content on the left side of the screen.

Since "The next big thing" column is in green, I expected that to be the primary section, but then because it was smaller, moved to the right section.

Overall, I prefer blogs to have the more traditional feel.

Such a lack of hierarchy... Too many conflicting visuals patterns at the same levels. White space, alignment... It's responsive yes, but is it pleasant for the reader ? I'm not talking about beauty, de gustibus et coloribus non disputandum , just of the whole interaction.

We should pitch in and buy the design team at Mashable a few copies of http://www.amazon.com/Think-Common-Sense-Approach-Usability/...

Shades of the Gawker redesign here. I just don't see the benefit of having 3 distracting, content-filled columns with the most important information being on the far right (on the desktop and tablet versions, anyway), unless their target audience was using Arabic or Hebrew as their primary language.

The reason that the big content is on the right is that it is the most popular content, likely already read. The new stuff is on the left, and we want the eye to move across the page in the natural way to help promote newer and rising content.

Why would content that you've already read be the most prominent? Following the convention of 'newest on top' would make more sense.

The big content is for the people who jump into the site and want to read just a few articles. It's the "most important". It gets clicks. The people who sit on the site all day are going to appreciate the left column, but it doesn't have the same prominence, because we already have their attention.

By throwing the big stuff on the right, we're also making people who jump into the site for the big stuff move their eyes across the content, which might prompt a click.

We've thought very hard about who our site is designed for and the path their eyes will take. The column hierarchy is designed for different groups of people looking for different content.

Simulation of eye-movement on laptop:

focus Oh look, a big picture on the right.

down I wonder what that picture is about.

left and up Hey! Another picture!

down Part of another picture!

left and up What are these little things on the left? Meh, too small to my eye which have just scanned big pictures and headlines. Ignore.

weird left to right diagonal thing between 2nd and 3rd column as I scroll down

If the primary goal is discovery of new content then I think it works pretty well. I'd prefer the "Rising" and "Hot" columns swapped, but perhaps I'm not the primary audience. I'd also like to see excerpts in the "Rising" column to help make a decision of whether I want to skim or go into detail.

Also, scrolling seems to lag pretty badly when new content is loading. Using Chrome on a 2011 13" MacBook Pro. Tried InfinityJS? http://airbnb.github.com/infinity/

The scroll lag is, unfortunately, due to loading in the ad units. We're using all the usual tricks (precompiled template builders, batching builds in a document fragment and doing a single append to the DOM), but the ad iframes are just brutal on performance. We aren't using the "usual" social buttons there for similar reasons; a glut of iframes is performance death. Unfortunately, ads pay the bills, so they're less negotiable.

We're working on it, though, and aren't happy to be content with it just yet. My goal is to be able to achieve smooth scrolling on low-end hardware, and while we're admittedly not there yet, we're gunning for it.

Hey, are you calling my MacBook low-end? :p

Hah, no. I just mean that when I'm done with it, it'll ideally feel like butter on a Raspberry Pi. :P

> "Use anything from your Nexus 7 to your mom's iPhone 4 to browse Mashable's new adaptive design." (A quote from within the left column marketing image)

Is it often referred to as "adaptive design", I've only heard it as "Responsive Redesign". Is there a difference between the two in any way? I doubt so, but I just figured I would ask so I don't miss something with the lingo...

Also, for the record, my mom actually has an iPhone 5 and I only have an iPhone 4. ;) Ha

It's largely a semantics game. Some people use one to refer to device-responsiveness versus screen-resolution-adaptiveness. Under that definition, both apply to our redesign :-)

Oh, okay. Awesome. I figured as much, but you never know these days and I didn't want seem like an idiot down the road using the wrong term or something! Haha Great design, by the way. I personally love it! :)

There is actually a difference if we're talking about "adaptive layout" vs "liquid layout". In adaptive layout, the layout is adjusted in steps according to a limited number of sizes (various screen sizes, usually). While in responsive layout, the layout is adjusted continuously to every possible width.[1] When we're talking about responsive design, most example uses liquid layout.

Adaptive layout, though, is arguably better for readability. Optimal readability involves having control of the line-length of a body of text, which can be achieved with adaptive layout. In the case of liquid layout, line-length varies wildly over every width change, which is sub-optimal readability-wise.

[1] http://informationarchitects.net/blog/responsive-typography-...

Am I the only one who doesn't like this trend?

YANA. - Just made my day I got to use that!

I too, do not like this trend. Does the average consumer (statistically)?

(I'm the tech lead at Mashable and on this project)

Our analytics and testing have indicated that there's a direct correlation between how visual (versus textual) our presentation is and how well it performs. Personally, I prefer a much more linear and text-heavy presentation (I spend all day on HN!), but our core audience is apparently different from me. Over the past couple of years, our audience has grown to be much more general and less tech-oriented (as I'm sure many HN readers have noticed), and the new design was done with that in mind.

I didn't like it at first, but it's grown on me. The article pages are much more "traditional" in terms of presentation, as well, which helps (and yes, I know you can't see them right now; sorry!)

Keep an eye on your ad revenue because you have a serious case of information overload at this point and the well-padded banner advertisement went almost entirely unnoticed for me. Advertisers will see that consumers never click nor react to their ads (Unless it's a CPM media buy and they don't get to see stats...) any longer and will eventually seek higher performing placement.

We absolutely will be. We're trying to find ways to integrate advertising in ways that are less obtrusive than normal; we're readers, too, and hate obnoxious ads as much as the next guy. We do direct ad sales rather than through a middleman, so we have some leeway in how stuff is presented, and we work with our advertisers to make sure that everyone is happy.

At the end of the day, advertising pays the bills, so we have to figure out the right balance there. Initial feedback from our advertising partners has been very good, though, and we'll be watching it closely, because...well, we like being able to pay rent. :)

My basic beef with this is that I dont think design should behave like water (take the shape of its container). I like visual presentations, just not this one.

Can you elaborate on this a bit? Web presentation of dynamic content tends to be rectangular by nature; do you mean the "static breakpoints" responsive design style rather than the "fluid layout with breakpoints" design style?

We went the fluid route to try to accommodate as many screens/devices/orientations as possible without wasting a ton of space; a more rigid design is definitely sharper (and frankly, would be easier to produce), but we're gunning for a design that works on just about any screen size or aspect ratio, and found that rigid designs weren't cutting it.

Totally fair if you don't like, it, though. What would be the first thing you'd change?

(I don't lead design, so it's not my call; I'm just curious)

Speaking in general terms… IMPO responsive design is flawed with the same paradigm flaws of "print design ported to the web". The one size fits all approach, in the case of print to web did not work. And I think the beta design has these issues in the "web design ported to mobile". Print, web and mobile design have characteristic that do not port over to each other. Have you see the new usatoday.com they seem to have the opposite problem, mobile design ported to the web.

Speaking to the redesign… I agree with what others have said… what am I supposed to look at? Everything on the page is calling my attention. When I scroll up and down, I'm not sure if I missed a box. It also seems that the page should be flipped, larger squares on the left, smaller on the right.

In contrast with the current design, when I scroll down, I immediately know if I missed a post when I visited 2 hours ago.

To be honest, if your traffic/engagement numbers go up, who the hell cares :)

Some of the behavior of the site varies based on whether or not you're on a touch device - we're keenly aware of there being different usability concerns between desktop and mobile devices. But your point is well-taken. If there are specific areas where we're preserving a particular desktop-esque or mobile-esque paradigm at the expense of UX, it's probably something we need to address.

Interesting that you can't look at any of the articles without signing up. No thanks.

It's a technical measure, not a marketing one. We're going to open up pieces of the product to general use as we smoketest and validate their performance. The join page is more or less there to be served Very Very Fast (and still let people be notified when stuff opens up) more than it is to lock people out of content.

This iteration is a ground-up custom build rather than an iteration on Wordpress, so we're being conservative with our testing. It won't be that way for too long.

Are you guys moving away from WordPress or will the new design be ported over? Anyhow, I actually think it looks fantastic.

We're moving off of Wordpress with this redesign, and don't have any plans to port it at this time.

Should we expect a tech stack overview blog post?

Yes! We're going to let it simmer in production a bit before we do a writeup on it, but at some point we'll definitely do a breakdown of what we're doing and why we did it.

It's been a fun build, so we're looking forward to that. :)

It's not so bad when my browser is small enough to keep it at one column, but I find two or more columns disjointed, distracting, and hard to read.

I'm all for responsive but readable is good too.

Why on Earth they would not let me see anything else? I understand e-mail harvesting, but that just drove me away after one click.

Load control. We're keeping it gated for a short period while we make sure that we don't have any major performance issues that fall over under load. We'll be opening it up once we've smoketested it.

When I hear about responsive design I always try to resize the window and see how the things rearrange. This one feels really slow during the resize, almost freezes the browser.

And just a couple of clicks have caused redirect loop.

Yikes, you definitely shouldn't be seeing redirect loops. Do you happen to still have the URL you got it on? We're doing some muckery with Varnish that may be causing that issue; I'd like to track it down and kill it!

We're working on minimizing reflows and improving the speed of any given reflow, as well. It's not where we want it to be yet, especially on lower-spec hardware.

Thanks for the feedback!

Unfortunately, I don't have the URL as I have erased browser history since then. But I tried again and didn't see this issue.

After "The Next Big Thing"'s bulletin: Internet Eats Up Guy Fieri's Awesomely Bad NYT Restaurant Review it just stops, leaving me to scroll just two columns, with a blank in the middle.

Is this an error?

Why was this changed from "Show HN"? gisikw worked pretty hard on this.

Yep. Filled out that title box and the URL box and everything.

...oh, oh, you mean the redesign. Yeah, that too.

There's a write up of it here: http://mashable.com/2012/11/14/introducing-the-new-mashable/

Really horrible! They should adopt the HN design philosophy -- less is more!

Wouldn't it be cool if all three of the columns would scroll independently?

No.

Content...overload...

The site is overwhelming.

My first impression as well.

Great work ! the UI looks great and very appable ;) I would though if it would be better to have a big headline with a photo at the top then as many columns as you want at the bottom of the headline. The page needs its element to have a clear hierarchy. Good luck.

Reply on news.ycombinator.com