Responsive Web Design

revlimiter · September 22, 2012, 5:25am

So, just to get this straight with responsive web design…
With @media-query and CSS3 I will:
a) not be needing JavaScript at all in order to target screen sizes @media-query screen sizes with the modern browsers that support CSS3?
b) only require response.js JavaScript fix for IE7 and IE8? (Does this fix IE6 or is IE6 fubar when it comes to responsive web designs)
c) want to build and design the mobile version first and then work my way outward to the tablet, netbook and desktop sizes afterwards? (To follow best design practice)
d) if JavaScript is disabled in IE8 and lower, the default desktop version will be applied to the site design? (No responsive web design)

Is there anything else I should keep in mind about about old browsers? Is that correct in assuming IE6 will not work with responsive web designs at all, and that response.js fixes @media-query screen size layouts for IE7 and IE8?

Also, is it only with Microsoft’s older browsers that they have a problem keeping up with @media-query or are there old Safari / Firefox / Chrome / Opera version that do not support it either? I think that’s all of the browsers that I will need to worry about. Perhaps I should be taking a much closer look at the mobile browsers too… Since after all, that’s kind of the reason for responsive web designs in the first place! Any known phones / OS versions that have a hard time with it?

Thanks!

ralphm · September 22, 2012, 5:36am

Yes, that’s right.

only require response.js JavaScript fix for IE7 and IE8?

If you can be bothered.

build and design the mobile version first and then work my way outward to the tablet, netbook and desktop sizes afterwards? (To follow best design practice)

It’s just one option, but not the only way. I personally build each ‘version’ at the same time. Depends on the site, I guess. Some would argue that its best to start with a basic, very simple layout that will work on all browsers, and then add in media queries for browsers that can understand them. From that perspective, even old version of iE will be fine, as they’ll get the basic styles.

if JavaScript is disabled in IE8 and lower, the default desktop version will be applied to the site design? (No responsive web design)

Well, it depends on what the basic design is. Responsive web design is actually not a new thing. It’s been around since the beginning of the web. The first websites—built just with HTML—were fully responsive, because HTML is responsive! It’s only CSS practices since then (like fixed widths) that have prevented sites from being responsive. So really the title of this should be “responsive CSS” … as this is all about styling sites in such a way that they can expand and flex depending on the viewport size.

You can build a fully responsive site without @media rules at all. Just avoid fixed widths on your wrappers etc.

are there old Safari / Firefox / Chrome / Opera version that do not support it either?

If you go backfar enough, they won’t support them, but it doesn’t really matter, as these browsers tend to auto update, so few people are using older versions. Again, though, if you have basic fallback styles, then any site will look decent, no matter how old the browser.

Perhaps I should be taking a much closer look at the mobile browsers too…

It’s only really the smartest smart phones that really support @media. The rest can just live with the basic fallback styles you create first up. Here’s a good resource on that:

revlimiter · September 22, 2012, 6:27am

ralph_m:

Yes, that’s right.

If you can be bothered.

It’s just one option, but not the only way. I personally build each ‘version’ at the same time. Depends on the site, I guess. Some would argue that its best to start with a basic, very simple layout that will work on all browsers, and then add in media queries for browsers that can understand them. From that perspective, even old version of iE will be fine, as they’ll get the basic styles.

Well, it depends on what the basic design is. Responsive web design is actually not a new thing. It’s been around since the beginning of the web. The first websites—built just with HTML—were fully responsive, because HTML is responsive! It’s only CSS practices since then (like fixed widths) that have prevented sites from being responsive. So really the title of this should be “responsive CSS” … as this is all about styling sites in such a way that they can expand and flex depending on the viewport size.

You can build a fully responsive site without @media rules at all. Just avoid fixed widths on your wrappers etc.

If you go backfar enough, they won’t support them, but it doesn’t really matter, as these browsers tend to auto update, so few people are using older versions. Again, though, if you have basic fallback styles, then any site will look decent, no matter how old the browser.

It’s only really the smartest smart phones that really support @media. The rest can just live with the basic fallback styles you create first up. Here’s a good resource on that:

http://www.slideshare.net/bryanrieger/rethinking-the-mobile-web-by-yiibu

Thanks for the very helpful information and link to the slideshow!

I’m not quite sure what it means on slides #39 - #41? Is it saying that the Opera mobile browser is using “free + unlimited bandwidth” with proxy server whereas my carrier’s 3G is using costly and limited bandwidth to browse the web? Or is this “OBML” only referring to older phones?

Thanks!

ralphm · September 22, 2012, 6:47am

Not totally sure of the details, but when you browse with Opera Mini, the site is first routed via Opera’s servers and stripped down into something much more lightweight, meaning you chew up a lot less bandwidth. Opera Mini is also great because you can disable images, also saving on bandwidth. I use it all the time.

revlimiter · September 22, 2012, 6:58am

Ah, OK - good to know, thanks!

It was an interesting Slideshare, I’m glad I read through it all. Thanks for linking it.

I noticed that it was made in 2010. Do you think that most of those figures are still fairly accurate today? Do you think WebKit could take over as the primary mobile browsing platform? (iPhone + Android) It sounds like a complete and awful mess out there… far too many mobile devices to keep track of. I was hoping a responsive site using @media-queries would resolve this for 90% for the mobile users, the other 10% would have to make due with the fallback design. (A complete wild guess in the dark at percentages)

In this case it sounds like media=screen and media=mobile within the CSS sourcing statements will help out for allowing less of a burden on mobile bandwidth. However, having the mobile version as the “default” version… doesn’t this also mean that an older browser that doesn’t support CSS3 will also be seeing the mobile version? Even if they are on a desktop? A lot of times a mobile version will be less featured so that the design is not as heavy and it is more straight forward to use. It would be a bummer to those older IE browsers if they could only see the fall-back which is a mobile optimized design?

Thoughts and advise on that?
Thanks again!

ralphm · September 22, 2012, 8:16am

At the bottom of this article you can see the current stats on mobile browsing:

iOS + Android seem to hold about 45% of the market.

having the mobile version as the “default” version… doesn’t this also mean that an older browser that doesn’t support CSS3 will also be seeing the mobile version?

That’s not quite the point of the slideshow. Their point is:

start with a very simple, no frills design (a few colors and other basic styles to jazz up otherwise plain HTML). This will be available to all browsers.
via @media rules, serve up styles variously for mobiles and desktop browsers that can handle them. Any browser that doesn’t understand @media will just fall back to the basic styles.

So the idea is not that IE will fall back to the mobile design. It will fall back to the basic, default design … as will mobiles that don’t support @media. Smartphones like iPhone and Android devices will get the styles targeting small screens, tablets will get the media rules targeting them and desktop browsers will get the media rules for them.

You don’t have to do it this way, of course. It’s just one option that some people are using.

revlimiter · September 22, 2012, 8:56am

ralph_m:

At the bottom of this article you can see the current stats on mobile browsing:

http://www.sitepoint.com/browser-trends-september-2012/

iOS + Android seem to hold about 45% of the market.

That’s not quite the point of the slideshow. Their point is:

start with a very simple, no frills design (a few colors and other basic styles to jazz up otherwise plain HTML). This will be available to all browsers.

via @media rules, serve up styles variously for mobiles and desktop browsers that can handle them. Any browser that doesn’t understand @media will just fall back to the basic styles.

So the idea is not that IE will fall back to the mobile design. It will fall back to the basic, default design … as will mobiles that don’t support @media. Smartphones like iPhone and Android devices will get the styles targeting small screens, tablets will get the media rules targeting them and desktop browsers will get the media rules for them.

You don’t have to do it this way, of course. It’s just one option that some people are using.

Ah, OK - thank you for the helpful replies. Out of that slideshow I don’t think I saw an example of a no frills default design. It pointed out what could be improved on some other sites but are there any examples of a no frills basic site design that can be used as default for the fall back method? It would help me out to see this in order to determine if I should indeed go this route or not… It sounds pretty good, I mean what seems to be the best option out there to support as many users as possible, even if the content will still be “squished” together for those mobile phones that don’t support @media-query.

Hope I didn’t miss any examples of what a “low fi” default design could look like in the Slideshare link?

Thanks!

ralphm · September 22, 2012, 9:52am

No, and I may have been thinking of other articles where it’s more clearly spelled out. But the key is in the statement (slide 79 ff.) where he says:

If you are radical about it, then you’d be happy for IE8 and below to get a really simple, plain layout which is pretty much just an HTML page flowing element by element down the page. I know Jeremy Keith went this way recently on his site (not sure if he has changed that now—you’d have to view in IE8 or under to check.) The alternative is to serve up separate styles for IE via conditional comments.

revlimiter · September 22, 2012, 6:18pm

Hmmm, I’m not too sure how I would feel about IE8, IE7 and IE6 using bare minimal site design. It just seems like a lot of work going into my amazing site design (making it more usable too) and they would be missing out with their back to basics long scrolling version. I would like to give all of them desktop versions too. Perhaps I be using <!-- if IE conditionals to spruce up these browsers even more.

I read A Book Apart’s Responsive Web Design and this is the website the author was teaching with:

Interestingly enough, IE6 and IE8 seem to render the responsive design fine. (Aside from the png fix in IE6 but that should be simple enough to adjust)
It’s IE7 that becomes a problem when squished down to smaller and smaller mobile dimensions. This tells me that IE7 is a worse off than IE6 for responsive web design? Either that, or there is perhaps some better code practice that can go into play here?

Maybe a IE7 conditional statement can fix this?
I do like the framework that is being used on the Robot Or Not website. It is very flexible to every web canvas size.

revlimiter · September 22, 2012, 6:26pm

Also, what is the benchmarking software that is being used on the websites in the SlideShare presentation? It looks very useful
The one being used for load times, optimizations with code and images, etc.

Thanks!

ralphm · September 22, 2012, 10:42pm

Yes, most of his styles are not served via @media, meaning they are available for all browsers. Personally, that’s currently my preferred method of layout.

It’s IE7 that becomes a problem when squished down to smaller and smaller mobile dimensions. This tells me that IE7 is a worse off than IE6 for responsive web design?

Probably not a realistic situation, anyway, as how many IE7 users are going to be narrowing their viewports to that width?

IE6 and 7 have less that 1% usage between them now, so I’m done with them.

I really don’t know how their software works. I believe you can upload a PDF and their software automatically converts it to that format, though.

charles_i · March 25, 2013, 7:45pm

Great book! I was a bit thrown off by this though, at the end of “Applying Relative Layout Units” - font and line-height are set here:

body {
  font: normal 100% Helvetica, Arial, sans-serif; /* 16px */
  line-height: 1.5;
}

and usage here:

p {
  font-size: 0.75em; /* 12px */
  padding: 0.5em; /* 6px */
}

but then there is an immediate jump of logic to this:

p {
  font: normal inherit 400 1em/1.5 Helvetica, Arial, sans-serif;
}

the explanation given is:

The simple formula (target ÷ context = result) we used for generating relative font sizes is going to come to our rescue once more with our fluid grid solution.

It’s a bit vague. Is this another example of the same p tag written like this? This is the first use of ‘inherit’ and I’m not sure how the number 400 was arrived at and what is 1em/1.5 doing as a CSS selector? And why is the font family in there at all when it’s already in the body tag?

Charles