Responsive design

E

Edge

Active Member
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...
 
sdesign1 said:
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...
Click to expand...

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!
 
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 ;)
 
richimgd said:
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 ;)
Click to expand...

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.
 
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 :icon_wink:

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?
 
Last edited:
richimgd said:
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.
Click to expand...

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.
 
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 :icon_wink:
 
richimgd said:
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.
Click to expand...

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?
 
I was just proving a point that it is possible to change the layout simply by resizing the browser window which can trigger less than ideal looking results. If I can do that deliberately, then someone else could arrive on the website at that window size and see the layout in that way and just assume the website is supposed to look like that. To me this is proof that in that case making the website respond to browser width is actually at the cost of the design its self.

How do you define responsive design? To me it is a website which responds to the type of device it is viewed on - rather than simply the width of the browser window as I think there is a big difference.
So the same website can be displayed to best make use of the type of experience you get from that device.

The main point I was making which of course is only my opinion and is only really just to balance the argument since everyone seems to only see the benefits of 'responsive design': I think making it possible to view a mobile layout on desktop is perhaps taking things too far. Since a desktop is capable of much more than this. The way I would prevent this from happening from a technical point of view (as a starting point at least) is focus more on what a device (desktop, tablet or mobile etc) would be capable of displaying by using standard media query max-device-width / min-device-width properties rather than max-width / min-width since this provides the actual maximum width the device can display. I.e on my desktop it would be 1920px wide which this fact alone means it doesn't have to respond to the point that the layout resembles one found on a mobile optimised website. With this information I could tailor the desktop layout to better match the screen area of a desktop, saving the more mobile friendly layouts for the smaller devices i.e mobiles. Having tighter control in this way would help prevent random gaps such as on the Time magazine website.

You're right that there becomes a bit of a grey area between tablet/ipad since the resolution of an ipad in landscape is pretty much the entry level desktop resolution. A simple media query could make the website effectively resize its self for iPad quite nicely. Again, device-width can be used for this since an ipad portrait is 768px. Javascript / user agent sniffing could be used to fill in any gaps but I think device-width alone is a good starting point.

I have lots to read up on this from a technical point of view, so have probably missed quite a lot of things out but it was really just the concept of what responsive design is, to me anyway. I am not saying I am right and don't wish to cause an argument with anyone, only a good debate. :icon_smile:
 
richimgd said:
I think making it possible to view a mobile layout on desktop is perhaps taking things too far. Since a desktop is capable of much more than this. The way I would prevent this from happening from a technical point of view (as a starting point at least) is focus more on what a device (desktop, tablet or mobile etc) would be capable of displaying by using standard media query max-device-width / min-device-width properties
Click to expand...

We need to stop talking in terms of mobile versions and desktop versions. the market is so awash with devices of different sizes it's no longer useful to talk about mobile and desktop. We have content and that's it. When you increase window size and it starts to look naff you use a media queries break point to change layout. Continue to increase window size and as layout starts to look naff again use a media queries break point again to optimise the layout. So in summary there is no mobile version or desktop version - just scalable content which uses media queries to respond to screen size, which is what you seem to be saying anyway - just cut out the talk of mobile and desktop versions as that's not what responsive design aims to produce.
 
My view is theres a difference between a 4" hand held touchscreen phone and a desktop computer with a 24" widescreen monitor since its a different type of user experience. I wouldn't say the boundaries are as blurred as you suggest. But I agree with you that the content is the important thing and websites will be viewed on all kinds of devices with varying screen shapes and sizes so being able to respond to this is crucial.

So, I agree responsive is the right approach going forward - but I am talking about responsive to device type - not specifically browser width. For me being able to be smarter with responsive design and knowing that a user is on a device with a screen big enough to give them the best possible experience for that device is surely a good thing?

Its probably easier to show another 2 examples, for and against what i am talking about:

1. Here is the Currys website showing responsive by browser width. You can see here on a desktop computer the website changes from 3 drastically different layouts. If you view this site on a desktop / widescreen monitor you can see the content makes use of the available screen space pretty well. It actually responds to fit both a big and a smaller desktop size screen - even though it is a sudden jump. Reducing your browser window smaller reveals what I would call a tablet style layout (although this works ok on desktop, it just happens to lend its self to a tablet pretty well). The main thing for me is if you reduce the width of the browser even further is it shows something clearly resembling a mobile layout. The top nav (or side nav as per the 'tablet' layout) is moved all the way to the bottom of the page - a design choice you would have to make on mobile because of the available space - but on a desktop? This is an example of a desktop site taking a hit on usability as a result of this type of responsive design. Yes you can view the webiste on a larger screen - but a lot of people probably dont realise you can do this since the type of responsive design is so good at making the website appear that it is supposed to look like because of the content fitting the window.

2. Here is the 2nd example from Argos with their newly relaunched website. I will assume again you are looking at it on desktop as its easier to talk though it. At first it looks like a standard desktop website, but in actual fact it is a responsive website. The website knows you are viewing it on a device capable of displaying content suited to the screen size as it knows this information - so it displays content 'without compromise'. If you click on any page on the site and view it on mobile or tablet, the exact same link will render differently (or respond) to the devices screen dimensions. This is what I would call a smarter responsive site since it responds to device type, not simply browser width - although concept of responsive design is similar. I just think targeting device type more rather than simply browser width allows greater opportunity to improve experience without compromising the design and accessibility of a website.
 
Last edited:
Edit - ok that Argos example probably wasn't the best one as I realised it actually has some kind of UA / device detection going on rather than media queries. I'll look for another example ;)
 
Last edited:
To be honest there's little point trying to do device sniffing - what you going to sniff for? Which device? There's tons of them and increasing all the time. I'm sorry but the scenario of people making their windows small on a large screen is not something we have to worry about - as you say 'responsive design is so good at making the website appear that it is supposed to look like because of the content fitting the window' so why worry about it?
 
windows small on a large screen is not something we have to worry about
Click to expand...
Not necessarily, think about snapping the window to the edge of the screen on Windows or lining up two sites on the same screen. Rather than having to scroll across instead the site has adapted its design to the constraints of the viewport - how this is bad is beyond me.
 
chris_17 said:
Not necessarily, think about snapping the window to the edge of the screen on Windows or lining up two sites on the same screen. Rather than having to scroll across instead the site has adapted its design to the constraints of the viewport - how this is bad is beyond me.
Click to expand...
But a responsive design will then serve up a nice layout in that small window - so what's the problem?
 
chris_17 said:
Not necessarily, think about snapping the window to the edge of the screen on Windows or lining up two sites on the same screen. Rather than having to scroll across instead the site has adapted its design to the constraints of the viewport - how this is bad is beyond me.
Click to expand...
I'm only trying to look at it from all angles. To me I see it as the potential risk of making it possible for users to unknowingly manipulate a website to the point that usability takes a hit - e.g on the Currys website where the navigation moves to the bottom of the screen. I take the point that this can be a good thing in cases where your multi tasking and would otherwise need to horizontally scroll to view content when you are reading content on a website with a reduced size browser window.

Again - I'm only trying to challenge what responsive really means and this is helping me have more of an open approach to how I apply it to current and future work.
 
OK - I'll let you have the last word but technically to do that you'll have to reply to this post
 
You must log in or register to reply here.
Back
Top