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.
Mashable's Responsive Redesign
41–50 of 50 posts
Re: Mashable's Responsive Redesign
#42Earlier quoted context omitted.
(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 mu…
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)
Re: Mashable's Responsive Redesign
#43Earlier quoted context omitted.
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?
Re: Mashable's Responsive Redesign
#44Earlier quoted context omitted.
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. :)
Re: Mashable's Responsive Redesign
#45After "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?
Re: Mashable's Responsive Redesign
#46If 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 Infin…
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…
Hey, are you calling my MacBook low-end? :p
Re: Mashable's Responsive Redesign
#47Earlier quoted context omitted.
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…
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
Re: Mashable's Responsive Redesign
#48Earlier quoted context omitted.
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 e…
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 :)
Re: Mashable's Responsive Redesign
#49Earlier quoted context omitted.
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 e…
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…
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.
Re: Mashable's Responsive Redesign
#50When 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.