

Mashable's Responsive Redesign - gisikw
http://beta.mashable.com

======
akshat
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.

------
tangue
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.

~~~
meritt
We should pitch in and buy the design team at Mashable a few copies of
[http://www.amazon.com/Think-Common-Sense-Approach-
Usability/...](http://www.amazon.com/Think-Common-Sense-Approach-
Usability/dp/0789723107)

------
rmrfrmrf
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.

~~~
thetrendycyborg
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.

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

~~~
thetrendycyborg
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.

------
levymetal
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/>

~~~
cheald
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.

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

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

------
bluetidepro
> " _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

~~~
gisikw
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 :-)

~~~
bluetidepro
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! :)

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

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

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

~~~
cheald
(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!)

~~~
meritt
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.

~~~
cheald
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. :)

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

~~~
cheald
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.

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

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

~~~
tsiokos
Should we expect a tech stack overview blog post?

~~~
cheald
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. :)

------
mischov
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.

------
laacz
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.

~~~
cheald
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.

------
dw0rm
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.

~~~
cheald
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!

~~~
dw0rm
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.

------
klapinat0r
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?

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

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

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

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

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

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

~~~
nunomaia
No.

------
chucknelson
Content...overload...

------
halayli
The site is overwhelming.

~~~
scottscanlon
My first impression as well.

------
camus
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.

