The Responsive Designer

http://simonfosterdesign.com/blog/web-design/the-responsive-designer/

by japhyr • 14 years ago

52 16 14 years ago

jameswyse2• 14 years ago

Really good article! There's too many designers calling their work responsive when they only work on desktop and a couple of Apple devices. It's much better to design your CSS breakpoints around the content instead, so you can be sure it looks good at every size.

mddw• 14 years ago

At the begining, a responsive website was build around media queries.

Then it was media queries and a fluid grid.

Then it was media queries and a fluid grid and mobile first.

Now it's media queries and a fluid grid and mobile first and built around the content.

Tomorrow what ?

Meanwhile, responsive websites are as crappy as non responsive one, but 2x heavier because of the crazy CSS and all the async js.

If you can't detect the internet speed of your user, you can't make responsive websites, period. That's why the only good responsive websites are the text-content-only websites.

Come on, the linked post is nearly 2mb...

jameswyse2• 14 years ago

Sure the generally accepted 'right way' is constantly evolving, but progress is a always a good thing.

I'm not sure about your other points, I see no reason why a responsive site should be 2x heaver in file size than its non-responsive equivalent, after all it's only a few more bytes of CSS. The increase you're seeing is probably more to do with large JS libraries and in the case of the linked article, many large images.

billirvine3• 14 years ago

> Really good article! There's too many designers calling their work responsive when they only work on desktop and a couple of Apple devices.

It's good. Perhaps the inclination to tag "really good" is because of the trendy pictures?

But really, Simon's article/presentation/rant is presented as responsive design within a framework that is mobile-first. And the body of his works shows a distinctly mobile-first perspective. Which is not bad, but is also not necessarily responsive.

Really good responsive design gives an optimized desktop experience, and gracefully degrades to smaller screens. --OR-- Really good responsive design gives an optimized mobile experience, and gracefully expands for larger screens.

billirvine3• 14 years ago

The length of the article was not responsive, however. Way too long for users of small mobile screens.

japhyr• 14 years ago

I had the opposite reaction. Long articles are fairly easy to read on mobile sites that are designed well.

publicfig• 14 years ago

I'm not sure what you mean by that. The length doesn't seem to cause a problem with the design on mobile, at least on all the devices I have.

edit: Maybe you're trying to say that the length makes the article unfriendly to mobile. In that case, it's worth pointing out that responsive design is not synonymous with mobile design, but a separate process. While responsive design may affect the mobile layout, responsiveness has very little to do with factors such as article length.

billirvine3• 14 years ago

Being currently steeped in responsive design (not mobile-first, which really, the opening link for this thread is a mobile-first approach, that happens to be responsive), I concur. We have 6 small screens and 9 tablets we use for testing... design is important, but design is a wrapper for content... some better, some bad, some awesome.

The question being, as we consider stepping firmly into the scenario of an unpredictably wide range of screen sizes and use-cases accessing the content we create, should we also consider the amount of copy we impose on smaller screens and/or mobile users with unknown time/bandwidth for content consumption? I think responsible creators of digital content should consider content-length as much as UI.

adrianhoward• 14 years ago

Since I read it, with pleasure, on my iPhone I would beg to differ :)

(Also in the usability tests I've done I've never seen text length be an issue for readers on mobile. I'd be interested if you seen something different.)

crazygringo• 14 years ago

Sometimes I feel like I'm the only one who thinks "responsive" design is completely overblown.

I think it's absolutely necessary to have different layouts for desktop and mobile. But the idea that they need to "flow into each other", I just don't buy. I mean, I've never seen anyone (in a real-life use case) resize their browser window to be narrow on their desktop, and iPads deal quite well with desktop-sized sites (especially navigating in horizontal mode).

The problem I have with fluidly "responsive design" is that it drastically overcomplicates everything. Good design becomes a lot harder, because you can't really keep in your head all the possible variations. A/B testing is drastically overcomplicated, because maybe something works in large width, doesn't work in 3/4 width, works again in 1/2 width, and doesn't work again in 1/4 width, because of the way elements pop around. And it just severly limits the kind of layout you can do. And like I said previously, for what? People don't really use "in-between" sizes, at least not that I've seen.

To me, "responsive design" just seems like a clever theoretical idea, without any real-life benefits. When I make a mobile version of a site, it's usually drastically different from the desktop site -- because it's organized vertically, because there's less that can be shown at once, because mobile users often have a completely different set of use cases than desktop users. It's a completely different beast.

In the vast majority of cases, I think it's impossible to shoehorn a truly good desktop experience and a truly good mobile experience together into a single "responsive design". I get that people are trying, but I'm just not convinced by the efforts.

DanBC• 14 years ago

> I've never seen anyone (in a real-life use case) resize their browser window to be narrow on their desktop,

I do this very very often.

I will be watching a YouTube video or a BBC iPlayer video in one window. Then I'll open another browser window and resize it to be tall and thin.

It is infuriating just how poorly most website cope with this tall thin window. And really, most text is easier to read in a narrow column.

pault• 14 years ago

What about non-apple tablets and phones that may not have common screen formats? You'll get horizontal scrollbars or wasted horizontal space. Why not just work with a fluid grid and set max-width to something conservative like 960px?

TheHippo• 14 years ago

My favourite: "Apples are not the only fruit." This guy has never seens this his site on an Android browser, otherwise he would noticed that his webfont does not work on the default browser.

programminggeek• 14 years ago

I'm in the middle of a huge responsive site redesign and I'll just say that responsive is a lot of extra work up front, but having your site work beautifully across platforms, devices, browsers is cool. The really painful part is when you have many different layouts and per-page layouts. It's one thing to make a blog design responsive, or twitter responsive when it's basically the same layout. It's totally different to have tens of different landing pages each with their own responsive styles. Very few if any sites are doing that yet, so there aren't a ton of great examples or established patterns.

pootch• 14 years ago

All responsive design does is force you to spaghetti-fy your application to the point it cant be maintained. A web app using responsive design will never fit it on both android and iOS because it will not look like it belongs on those platforms, so it will to the user look like crap. But oh you say I can shoehorn iUI into the iphone version. Why would anyone bother with this when it is EASY to target these platforms separately. IMO RD is not worth the time. And that goes for phonegap and cross platform app kits. Total waste of time.

mnicole• 14 years ago

Brilliant article. Loved the bits about 'trends' and 'experts', that's exactly how I feel about placing emphasis on certain people and concepts on the web. It's a slippery slope when everyone follows the same path.

The Responsive Designer

Related Stories