Responsive design question

[Doug_H]

Hello,
I’m starting to experiment with responsive design, targeting breakpoints with media queries in the main style sheet. My main purpose is to change the layout for mobile devices. From what I’ve read, older versions of IE do not recognize media queries, so solutions include css3-mediaqueries.js, respond.js, etc.

I’ve read that mobile devices now using the Windows OS do not use these older versions of IE. If that is the case, why do I need to target these older browsers with media queries? These js scripts would only be neccessary if I was targeting different desktop resolutions, is that correct?

Thanks for any input and help in understanding this!

Doug

[Paulie_D]

Media queries are, to a large extent, independent of the browser. If you serve up a single html page & css without media queries it will mean that this the only view available. This means that you are trying to serve a page intended for a 1200px+ monitor to a screen that might only be 960px or 480px wide.

That means the user has to zoom in/out or scroll. By using media queries you can tailor the view to a specific viewport size.

As for older versions of IE (actually any version of IE)…has that ever been used on mobile device?

What I am saying is you don’t target OS/browsers with media queries, you target viewport sizes.

[Doug_H]

Thank you for your response, Paulie, I appreciate your insight.

I do understand that the responsive aspect of design is relative to the viewport, and that targeting the design breakpoints relative to those different viewports is the primary purpose. So, that regardless of the viewport, the design layout is accessible, or displays as I desire.

Re:
What I am saying is you don’t target OS/browsers with media queries, you target viewport sizes.

Right, I understand that, but assuming that I am only targeting small viwports, i.e. mobile device viewports, to make layout changes, then media queries within the stylesheet should be recognized by all current devices, which would make the media queries not being recognized by older browsers a moot point for those devices/viewports, right? In other words, why would I need to ensure media query compatibility with older browsers if the smaller mobile viewports is the only segment that I am targeting for the responsive changes.

I guess that is the crux of my question. If I am initially only targeting mobile (small) viewports to change the design layout, and the desktop layout is served as essentially static, I wouldn’t need to worry about including respond, or css3 media queries js scripts to ensure older browser compatibility. This would only be relevent for desktop viewport changes where older browsers would come into play, is that correct?

Re:
As for older versions of IE (actually any version of IE)…has that ever been used on mobile device?

It was my understanding that the Windows phone browser was originally based on IE7, and enhanced with all the same features as the webkit browsers on competing platforms. So that if a website rendered or behaved incorrectly on desktop IE7 it would very likely have the same errors on the phone. But I have read that this is no longer a factor, as all Windows phones are now using an updated version where the old issues are no longer a problem. However, my understanding may be incorrect!

Thanks again, Paulie, for any insight.

Doug

[sap7724]

I am also new to the responsive design realm. Something I have found very helpful with my own introduction into responsive web design is using the 1140 grid system. I downloaded from this site here… http://www.columnal.com/ Included in the download are css files for IE issue fixes that are ready for you to drop your own css in. Just as a side note, i had some issues understanding their files in the beginning an had to email them a question. They responded very quickly and were really helpful. Hope this helps you.

[Doug_H]

Thank you, sap7724, I appreciate your recommendation. I have actually downloaded 1140, as well as several other responsive grid systems to look at. I have been resistent to switch to a grid system partly due to bloated code that I made not need, and also with the idea that if I do my own from scratch I will learn more, although the learning curve may be longer! I know I can modify, or remove code, I don’t need from the grid systems, but just haven’t decided to go that route yet. I probably should since it would speed up prototyping, and may yet. In any event thanks for the help, I may try 1140 yet!

[Author]

Posts