Responsive Design: How to make it right

I wrote a quick post about this on my site and thought I’d share my thoughts here as well to see what you guys think. I currently see designers taking sites made for desktops and just resizing them for mobile. To me this is the wrong approach. As Luke Wroblewski preaches: Mobile First. My more personal complaint is that I resize my browser fairly often for different reasons. It annoys me when words I’m reading start moving around and the whole site changes before my eyes. Yes it’s a cool trick, but not desirable. Stop hijacking my experience.

The Mobile First movement is definitely something to get behind. Although, regarding your personal complaint:

“My more personal complaint is that I resize my browser fairly often for different reasons. It annoys me when words I’m reading start moving around and the whole site changes before my eyes. Yes it’s a cool trick, but not desirable. Stop hijacking my experience. “

I hope you realize that content scaling is not trying to solve resizing browser windows, but to give a flexible experience to various screen resolutions.

The only practical solution I can see is to provide a link to switch content scaling on/off.

Mobile traffic for many sites is still in the 1% or less area. My design blog is at 2.7% this month, and with primarily designer audience (on the cutting edge usually) that skews much higher than the general population. 89% of that 2.7% are iOS devices.

The idea of starting the web design in a way that it displays on all mobile devices, which seems to imply more than iOS/Android, are we talking blackberry? even more primitive? — the idea of starting there then designing the experience for the other 98% seems ass-backwards to me.

If you’re in a situation where your stats make it worth it, then of course — but for a majority of sites it’s not.

And another point, most mobile devices (with browser) are running 3G speeds now, and within 18 months it’ll be 4G. The speeds are fast enough that the mobile sites don’t have to be 10k anymore. Don’t overload them like crazy, but the speeds are catching up.

A business owner should design the site for their target audience (what they are using). Look at the stats and make an informed decision. The time spent focusing on the target audience could be spent elsewhere, like increasing its performance instead of attempting to please a small number of people.

And who absorbs that extra cost? Are designers throwing in mobile compatible designs in the price for IE/Firefox/Safari/Chrome? That sounds like the beginning of a nightmare.

But the mobile first crowd is doing this with the intent of solving the mobile problem. All I’m saying is that scaling your site’s resolution back for mobile, while still loading the same images/scripts/css is the wrong approach for a device with a limited data plan. Especially when the device won’t even be using those scripts/css/images.
There’s some good information about this topic in a recent slide deck called Rethinking the Mobile Web.

When you’re working at 1024x768+, many columns, an expansive canvas, you can afford to be lazy. When you’re working with 480x320, you have to be ruthless, you have to cut, cut, cut until to cut anything more would make your website no longer do what it’s meant to do.

That’s exactly how you make a great design. That it can be thrust upon you by targeting mobile browsers is convenient coincidence.

max-device-width works, except that iOS devices always return the portrait width, regardless of orientation. You can combine it with the orientation query to get the layout to adapt to both widths, but that’s a little janky.

Toolbox

Comments

Related posts