Responsive design

[Edge]

I thought I'd throw this into the mix and invite responses and discussion. I've been studying responsive design for a while now and moving forwards it's probably going to be a modus operandi for us. We've done some retro-fit mobile versions but I think we really need to put it at the core of our process now.

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

• Use 360 grid layouts
• Design for mobile first
• Design in your browser
• Use media queries to make breakpoints when layout starts to look naff (not for specific widths)
• Don't try to target devices (there's too many!)
• Use flexible images using max-width=100%
• Don't set maximum-scale=1" in meta viewport element as it stops people with poor eyesight being able to zoom
• Display: none doesn't stop a huge image being loaded by a handheld device it just stops it being displayed
• Use SASS (or LESS)
• Use Modernizr to support IE7 & 8 (that's more of an HTML 5 requirement tbh which isn't responsive design per se)
• Mobile isn't a device it's a user state

The thing which interests me is the design process and how the recommendation seems to be moving towards designing in the browser. Anyone tried that? The alternative is multiple mockups for a variety of resolutions and if you go down that route where does it end? Also, if you do design in the browser how do you bring the client along with you? Your thoughts, please folks...

[chris_17]

I thought I'd throw this into the mix and invite responses and discussion. I've been studying responsive design for a while now and moving forwards it's probably going to be a modus operandi for us. We've done some retro-fit mobile versions but I think we really need to put it at the core of our process now.

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

• Use 360 grid layouts
• Design for mobile first
• Design in your browser
• Use media queries to make breakpoints when layout starts to look naff (not for specific widths)
• Don't try to target devices (there's too many!)
• Use flexible images using max-width=100%
• Don't set maximum-scale=1" in meta viewport element as it stops people with poor eyesight being able to zoom
• Display: none doesn't stop a huge image being loaded by a handheld device it just stops it being displayed
• Use SASS (or LESS)
• Use Modernizr to support IE7 & 8 (that's more of an HTML 5 requirement tbh which isn't responsive design per se)
• Mobile isn't a device it's a user state

The thing which interests me is the design process and how the recommendation seems to be moving towards designing in the browser. Anyone tried that? The alternative is multiple mockups for a variety of resolutions and if you go down that route where does it end? Also, if you do design in the browser how do you bring the client along with you? Your thoughts, please folks...

Been doing it for a while now on client sites and personal stuff. You're right it's the way forward, and definitely with don't target specific devices, although it's quite easy to do as everyone just thinks a tablet is an iPad.

Images are a problem atm, there's been a lot of discussion about how to serve different image sizes on different devices, i believe that the W3C are looking at a picture element which may allow us to do this which is pretty interesting.

SASS! I love sass, it's brilliant, I wouldn't recommend everyone to use it, only if you have a v.good knowledge of CSS architecture and how to code properly in many ways as with any pre-processor you can bloated and horrible markup.

Check out responsive patterns for a whole load more info Responsive Web Design Patterns | This Is Responsive

Good post though!

[Edge]

Good resource, Chris, thanks.

[richimgd]

The thing that concerns me with many responsive websites out there is that its possible to view a mobile or tablet optimised layout on a desktop since the website is programmed to respond to the width of the users window, not device width. I cant understand why anyone would want this, yet many big organisations are going with this approach. I.e check out Currys | Sale Now On. Electricals, Kitchen Appliances & Latest Technology - look how you can totally compromise the desktop experience just because you happen to have your browser set a bit narrower so you trigger a clearly ipad or mobile optimised layout. I really dont understand why you would want this?

I think part of it is confusion down to what is and is not possible. In my opinion putting a mobile layout on a desktop, or a tablet layout on desktop risks watering down the impact of the design and overall experience. These devices provide a different experience! Its not just about screen width since buttons and navigation on smaller devices are often totally different - so why make this possible to view these on a desktop? A tablet experience is optimised for that device - hand held and operated by touch. In my opinion it should not be possible to view a tablet layout on a desktop and indeed a mobile layout on a desktop but it seems to be the norm with responsive design. Simple techniques to detect the device-width rather than the window width will make it possible to deliver the best possible experience by not mixing up layouts and providing the layout specific to the device the user is using.

I believe the BBC have got it right, or at least partly right. They have a desktop website which makes use of the larger screen size. If people are viewing it on a small window and cannot read the whole page they probably know by now how to maximise the window. I think in 2012 this is a fair assumption? The BBC site also responds to individual groups of devices, so smart phones with varying screen sizes (and portrait / landscape mode) and tablets with there own range of screen sizes - so the experience is always optimised to the relevant device. I think the single URL approach can be used here in a similar way by using the other responsive principles, but focusing more on device-width rather than the window of the window. I just think 'responsive design' or 'adaptive design?' could be more intelligent and respond within the parameters of device groups. There you go, intelligent responsive design - the future ;)

[chris_17]

The thing that concerns me with many responsive websites out there is that its possible to view a mobile or tablet optimised layout on a desktop since the website is programmed to respond to the width of the users window, not device width. I cant understand why anyone would want this, yet many big organisations are going with this approach. I.e check out Currys | Sale Now On. Electricals, Kitchen Appliances & Latest Technology - look how you can totally compromise the desktop experience just because you happen to have your browser set a bit narrower so you trigger a clearly ipad or mobile optimised layout. I really dont understand why you would want this?

I think part of it is confusion down to what is and is not possible. In my opinion putting a mobile layout on a desktop, or a tablet layout on desktop risks watering down the impact of the design and overall experience. These devices provide a different experience! Its not just about screen width since buttons and navigation on smaller devices are often totally different - so why make this possible to view these on a desktop? A tablet experience is optimised for that device - hand held and operated by touch. In my opinion it should not be possible to view a tablet layout on a desktop and indeed a mobile layout on a desktop but it seems to be the norm with responsive design. Simple techniques to detect the device-width rather than the window width will make it possible to deliver the best possible experience by not mixing up layouts and providing the layout specific to the device the user is using.

I believe the BBC have got it right, or at least partly right. They have a desktop website which makes use of the larger screen size. If people are viewing it on a small window and cannot read the whole page they probably know by now how to maximise the window. I think in 2012 this is a fair assumption? The BBC site also responds to individual groups of devices, so smart phones with varying screen sizes (and portrait / landscape mode) and tablets with there own range of screen sizes - so the experience is always optimised to the relevant device. I think the single URL approach can be used here in a similar way by using the other responsive principles, but focusing more on device-width rather than the window of the window. I just think 'responsive design' or 'adaptive design?' could be more intelligent and respond within the parameters of device groups. There you go, intelligent responsive design - the future ;)

I'm not sure if we're on the same page here, with responsive design you're not creating a sole mobile site, you're compromising the desktop experience, far from it, all your doing is adding to the mobile experience. Take my site as an example, it's primary purpose is desktop, but, if you visit on a mobile/tablet device the design changes to suit the viewport.

As to why you would want to use RWD on browser width and not just device width, well because you can adapt the design for the requirements of the viewport, you wouldn't a user to scroll horizontally when browsing a site for example. It's more intuitive to use RWD to create a more usable experience. There's so many different sized computers out there at the minute that this is becoming more relevant, likewise, not just screen sizes but also pixel density and having to serve up retina x2 images. Again with my site when you view the site on a retina device you get a x2 logo, to look sharper and clearer.

There's more to RWD that just device widths, there's things like zoom to consider, without wishing to sound like a stuck record but if you zoom in on my site (a lot, pretty much as far as you can go) and refresh the page you see that the size uses a mobile optimised version, without it you would have to scroll and that limits the accessibility.

But...Responsive design is still very new and no one knows the best approach to it yet, so we're just kind of fumbling around until we get either better standards and features from W3C or until a standardised way of creating a mobile/tablet experience is found.

[richimgd]

Yeah I totally understand the benefits of using one site and use media queries etc to make for a better experience on devices with smaller screens, such as smart phones and tablets. It was mainly the argument for desktop which I think suffers a lot since for me, seeing a mobile layout on desktop seems strange when a desktop can display information better because of its screen size. On my next website project I would plan to take the approach of using responsive design, but within certain parameters per device. So you would get a desktop layout on desktop - but specific to certain screen widths - so a bigger monitor could handle more of a widescreen format potentially, whereas a 1024x768 would get something a bit more optimised. It would only be on mobiles where you would get more of a typical single column mobile type layout. Tablet would be somewhere between the 2.

I am still unsure of the best approach but I am not totally sold on the way many people use responsive design to make it possible to view a mobile or tablet layout on desktop. It seems the desktop experience suffers. In my opinion anyway.

Looking around different articles on the net, I cant really mind many people who share my view though...! But I until I can be convinced otherwise, I think I'm onto something

Btw, I checked your site and dont think the logo swaps to a x2 logo - I'm on a retina macbook - not sure if you made it to be ipad / iphone only?

[NUGFX]

i love responsive web design its great, i learned it through this website

Learn Web Design, Web Development & More | Treehouse hope this helps if anyone is looking at this :) it has very easy and understandable vid tutorials :)

[Edge]

I am still unsure of the best approach but I am not totally sold on the way many people use responsive design to make it possible to view a mobile or tablet layout on desktop. It seems the desktop experience suffers.

Not if implemented properly. Responsive design should be serving up a layout that is optimised for the available screen width. So a widescreen desktop should get a layout suited for it - if it doesn't, it's a poor implementation. The desktop experience should in fact improve in widescreens.

[richimgd]

I think something like this forum is a good example of what I mean. It scales to the browser width within cetain parameters. This could be a really big / widescreen monitor or a smaller 1024x768 monitor. At the same time when you reduce the width of your browser it also condenses the content, BUT it has a cut off point where if the browser width gets to just under 1024px it stops responding and remains a 'desktop layout'. Yes you would have to scroll horizontally to view all the content, but because you are on desktop you can extent the size of the browser or full screen it - if anyone says this is bad for usably, I would argue that its 2012, a post pc era when most peoples parents / grand parents know the basic principle of full screening an app.

I would argue that making it possible to make a website respond to the extremes on desktop - i.e change it to a mobile layout is totally compromising all the time and effort designing the website. I think instead of concentrating on the message a website is saying, the flow of information and structure of the content, people are concentrating on how it can move around. Check out the time magazine website: Breaking News, Analysis, Politics, Blogs, News Photos, Video, Tech Reviews - TIME.com
Look how its possible to adjust your browser width and it is possible to create massive pockets of unsightly empty space where the responsive design fails. Wouldn't it be better to accept you are viewing the website on a desktop, embrace this fact and make the layout as best as possible? It seems with responsive you are making it 'ok on all devices' rather than being more smart with it.


I do think responsive layouts are great - but for heaven sake there is a time and a place for a mobile layout and I dont think its on a desktop.

Thats my view anyway until I can be convinced otherwise

[Edge]

Look how its possible to adjust your browser width and it is possible to create massive pockets of unsightly empty space where the responsive design fails. Wouldn't it be better to accept you are viewing the website on a desktop, embrace this fact and make the layout as best as possible? It seems with responsive you are making it 'ok on all devices' rather than being more smart with it.

I had a play round with it in my browser and yes, you can get a big gap under the latest headlines if you reduce window size. I kind of think, well, if you willingly reduce window size on 'desktop' (i.e large screen?) then you can hardly start complaining about the layout. Make the window larger if it sucks - you said yourself in this day and age people know how to do that - anyway the only alternative I can think of is a fixed width layout with a horizontal scroll bar for your smaller window size. Also how would you specifically target a 'desktop' anyway? What do you mean by desktop too? Screen sizes larger than and including 1024 x 768? Any user agent which doesn't identify itself as mobile? What about iPad in portrait mode - what's that?