Responsive Design

[Edge]

I rarely ever start a thread so for once I'll actually contribute rather than hanging onto the coat tails of others.

Responsive design. It appears to be the biggest thing happening in web design at the moment and I'm inviting thoughts from this community. I'd appreciate something better than. 'Responsive design - it's the way to go' etc. I'm looking for more studied comments.

Here's where I'm at with it at the moment:

• Design for mobile first
• Design in your browser
• Use media queries to make breakpoints when layout starts to look shite
• Don't try to target devices
• Use flexible images using max-width property
• Don't set maximum-scale=1" in meta viewport element
• Display: none doesn't stop a mother*****ng image being loaded by a handheld device it just stops it being displayed
• Use SASS (or LESS)
• Modernizr to support IE7 & 8
• Mobile isn't a device it's a user state

 

[chrishirst]

Or you could just use ex & em for dimensions and let the layout scale to fit any viewport size.

 

[Edge]

Or you could just use ex & em for dimensions and let the layout scale to fit any viewport size.

and have a three column layout on an iPhone?

 

[chrishirst]

min-width and appropriate use of positioning can easily make a layout "collapse" into a usable state.

Dealing with different display sizes isn't really something new. There are simply different ways of handling it.

 

[leroy30]

@ chrishirst - I believe in both methods although I would think they both fall within the 'responsive design' category. They both respond to available screen size by adjusting themselves to offer the best user experience given the size of the window or device being used.

 

[Edge]

min-width and appropriate use of positioning can easily make a layout "collapse" into a usable state.

Dealing with different display sizes isn't really something new. There are simply different ways of handling it.

That's true and we used to be ardent advocates of liquid layout years back as opposed to fixed width. You seem to be saying, though, in order to be responsive, all we need to do is use ems and have a min-width on any columns. What minimum width would you use? You have a myriad of screen sizes to deal with. Would you also set image sizes in ems? Would you also use max-width?

 

[Edge]

@ chrishirst - I believe in both methods although I would think they both fall within the 'responsive design' category.

If we take responsive design to be defined by the creator of that phrase, Ethan Marcotte, then elastic layouts (i.e. solely using ems and no media queries) is not responsive design.

 

[ronaldroe]

If we take responsive design to be defined by the creator of that phrase, Ethan Marcotte, then elastic layouts (i.e. solely using ems and no media queries) is not responsive design.

I'd be willing to bet he'd disagree with you. However you go about it, responsive/adaptive design is more about creating an adaptive design than media queries. If you can accomplish it without them, that isn't a problem. I go with an "all of the above" approach, myself.

 

[Phreaddee]

definition! thats been the major sticking point with responsive design.
what exactly is it?

personally I've settled into a fixed width component based layout based on a grid of 320. yes it uses flexible images and media queries but doesn't use a flexible layout. for all "technical" definitions of RWD, it doesn't fit the mold. personally I think it does, and better than a flexible grid in my opinion.

to me I see RWD as an extension of fluid/liquid layouts...rather than fluid/liquid layouts being "responsive"
yes chris is technically correct. appropriate usage of positioning would make it flow and function as a responsive site would. however Sdesign1 is pretty much on the money though that 99.999% of times it would result in a 3 col layout being displayed as a three col layout on a ph and therefore unreadable.

 

[Edge]

I'd be willing to bet he'd disagree with you.

And how much would you be willing to bet ?
In his book, 'Responsive Web Design', he does say,

..and this is why media queries are the final component of a responsive website.

and spends an entire chapter on media queries.

I'm not saying everything he says is Gospel but seeing as he came up with the phrase in the first place he'd be my first stop if I wanted a definition.

 

[Edge]

Aside from differing interpretations of what RWD is, what really interests me is how the design process is shifting from mock-ups for a 1024 x 768 screen to designing in the browser with the help of SASS and LESS and designing for mobile first. Not actually tried it yet to be honest. Anyone tried it?

 

[Phreaddee]

I don't really use sass or less that often, although I am sure they are very handy.

mobile first makes a lot of sense in many circumstances and it helps to declutter the stage for when you move on to the next breakpoint whilst having the content mainly where it needs to be. going the other way around I always felt like I was stuffing things into a suitcase, and min-width media queries I've always found a lot easier to work with.

 

[Phreaddee]

A picture tells a thousand words, apparently, I found this funny image of me checking out our website (which is responsive)

I don't think I've got enough devices!

 

[ronaldroe]

Sass is incredibly handy, and I use it exclusively. I haven't tried Less, but IIRC, it's just a matter of different syntax. I prefer the SCSS format, which is essentially all the power of Sass, but it makes regular CSS perfectly valid SCSS code.

And regarding this:

In his book, 'Responsive Web Design', he does say,

Quote:
..and this is why media queries are the final component of a responsive website.
and spends an entire chapter on media queries.

I'm not saying everything he says is Gospel but seeing as he came up with the phrase in the first place he'd be my first stop if I wanted a definition.

I'll ask him what he thinks next time I talk to him.