Responsive designs

hargi · 16 Nov 2012 at 10:41

Just a quick one whats the best way in your opinions of going about responsive designs.

I have just started playing with media queries.. which I can see the benefits of

Code:

 if max-width =900px then do something different

but what about divs for example I have always used px would there be any benefit of changing them all over to percentages?

BahBah · 16 Nov 2012 at 11:55

http://twitter.github.com/bootstrap/scaffolding.html#responsive

gord · 16 Nov 2012 at 12:34

A responsive design doesn't have to be completely fluid. My latest one has 4 tiers of resolutions for mobile portraits, mobile landscapes, tablets and desktops. It never obscures info because each subsequent tier takes over just before it would otherwise.

Tripnologist · 16 Nov 2012 at 14:19

gord said:
A responsive design doesn't have to be completely fluid. My latest one has 4 tiers of resolutions for mobile portraits, mobile landscapes, tablets and desktops. It never obscures info because each subsequent tier takes over just before it would otherwise.

What you've made then is an adaptive design, not responsive.

To OP:
Responsive is almost always better (fluid with media queries as break points), but adaptive (not fluid, but uses media queries as break points) is easier and allows more control. It's really up to you and the project you're working on.

Edit: http://uxdesign.smashingmagazine.com/2012/11/08/ux-design-qa-with-christian-holst/

gord · 16 Nov 2012 at 16:36

Tripnologist said:
What you've made then is an adaptive design, not responsive.

I don't get why you'd really use media queries with a fluid design. If the design is properly fluid then surely you don't need break points it just keeps scaling?

I kinda fibbed anyway, I think I would classify my design as responsive, it's a mix of techniques really: http://amtdev.amttraining.com/

Randomface74 · 16 Nov 2012 at 16:40

I think this stuff is an unnecessary cost for most sites. Unless you expect to make serious cash from going to the extra effort, why bother.

Eye seven · 16 Nov 2012 at 16:48

billysielu said:
I think this stuff is an unnecessary cost for most sites. Unless you expect to make serious cash from going to the extra effort, why bother.

Because every month mobile usage goes up. So at what point do you stop alienating users or at least give them a poorer experience?

Randomface74 · 16 Nov 2012 at 16:49

Eye seven said:
Because every month mobile usage goes up. So at what point do you stop alienating users or at least give them a poorer experience?

you record mobile usage for your site?

gord · 16 Nov 2012 at 16:55

billysielu said:
you record mobile usage for your site?

Who doesn't? You can't ignore the rampant growth of mobile devices used on the web. Even if you've got low mobile traffic now, think about a year down the line.

Randomface74 · 16 Nov 2012 at 17:35

You totally can ignore it, it's not necessarily relevant to you. But the cost of supporting it is.

UncleRuckus · 16 Nov 2012 at 19:23

I'd say it is unwise to ignore a growing demographic, even if it's a pain in the backside to implement.

The earlier you adapt the easier it will be to fit it in with your workflow, it just becomes another point in development.

this_is_gav · 16 Nov 2012 at 19:26

billysielu said:
You totally can ignore it, it's not necessarily relevant to you. But the cost of supporting it is.

That depends on what your site is, but unless your site is directed purely at desktop and laptop users, then you are basically calling a huge, and spiralling, proportion of internet users pointless.

If you're not planning a responsive or adaptive site, then you either know something other web designers don't, are stuck in the past, your site really isn't very popular at all, or your site's non-unique web-count is going to dwindle horribly in the coming months and years.

Randomface74 · 16 Nov 2012 at 19:37

So... you don't know if it makes you any money, but you think it would be unwise to not spend time working on it. Brilliant.

UncleRuckus · 16 Nov 2012 at 19:48

billysielu said:
So... you don't know if it makes you any money, but you think it would be unwise to not spend time working on it. Brilliant.

Providing a website which is accessible to it's users is a standard and yes, you can make money out of it if you are a UX dev offering a potential client a website update which is compatible with mobile devices.

Randomface74 · 16 Nov 2012 at 19:50

In that case I'm done... continue to evangelise ppl's money away.

UncleRuckus · 16 Nov 2012 at 20:08

billysielu said:
In that case I'm done... continue to evangelise ppl's money away.

You know it actually saves money for the users as well so they are able to spend more time on a website?

The escapist Magazine would be a good example of where this needs to be done. I visited there about a year ago using my mobile, it used up 2.5mb of my data just visiting one page!

That's a massive .5% of my monthly usage in a matter of seconds.

Also Facebook users benefited from it where they managed to reduce the size of css by 70% which rolled on to make it's pages load twice as fast.

simisker · 16 Nov 2012 at 20:55

gord said:
I don't get why you'd really use media queries with a fluid design. If the design is properly fluid then surely you don't need break points it just keeps scaling? [...]

Considerate treatment of type.
UI optimisations based on likely input device at certain scales [high-precision mouse pointer v low-precision jabby sausage finger. Also monotouch v polytouch].
Likely-device-sensitive content focus.

Trip will no doubt be along shortly with more

Tweaker · 16 Nov 2012 at 21:43

Mobile is the way forward see here http://www.bbc.co.uk/blogs/bbcinternet/2012/08/olympic_statistics_traffic_week.html

I work in for BBC working on the news responsive site, it is ultimately the future for all websites that have a diverse audience. If you look at certain things, like the Olympics, the US election, we saw a huge amount of traffic from mobile, much more than previous years.

There are a lot of people who live in the world of, everything should be an app or everything is either an iphone or a desktop computer, which is a shame.

If you want to read more about our approach, check this out http://blog.responsivenews.co.uk/

gord · 16 Nov 2012 at 22:25

simisker said:
Considerate treatment of type.
UI optimisations based on likely input device at certain scales [high-precision mouse pointer v low-precision jabby sausage finger. Also monotouch v polytouch].
Likely-device-sensitive content focus.

Trip will no doubt be along shortly with more

I'd go with UI optimisations. Not sure on treatment of type or device sensitive focus, I think I'd use something like Modernizr to satisfy those rather than a fluid design and media queries.

Addicted · 16 Nov 2012 at 22:27

As above, check out Bootstrap, it's an awesome framework and should provide you with good groundwork even if you don't use it, but use it as a reference.