Why not include some CSS3 media queries to adapt the layouts to the screen sizes for mobile? I have written an extension to 960 so that at dimensions 320 & 480 the grids stack on top of each other and are full width to the container; which is confined to the max-width of the screen. At 600-959 width I redefined the grids so that they are proportionally similar so the design is the same but the text within grids is essentially larger on the screen without needing to mess with font-size-ing. And finally at widths 960 and greater I allow the original styles to do their magic.
I worked on this over this weekend so that I can continue to use 960 for my companies websites but to have a responsive feel on mobile devices and small screens. I haven't yet implemented it but I plan to very soon.
I would love to hear any comments you have.
added responsive css
Actually, that's why I made Adapt.js — As sort of a "have your cake and eat it too" — To allow older browsers (that don't understand media queries) to get the same benefits without having to scope via media queries...
Explanation and reasoning for it here...
I did look at that when starting out my learning about responsive design; I am still just starting out learning about responsive design. However I felt like adding additional CSS file dependancies and adding them in with JS to be a bit contrived. I'm not saying that I am any kind of authority but I believe that having one CSS file and optionally polyfilling IE6-8 with something like Respond.js (j.mp/respondjs) to be a better and more correct solution. Are there any performance benefits using one method over the other I wonder?
Luckily I have a very narrow target audience for my companies websites and a shallow pool of mobile browsers to respond to. Our sites don't really even need to polyfill IE at all since what we are attempting to be responsive to are mobile devices - most specifically iOS devices that will have good-enough CSS3 support - and on desktop machines we just use the default CSS styling.
I do appreciate the reply though. I am always unsure how people on the internet are going to take different ideas.
This is what initially made me want to try a "mobile first" approach (rather than serving desktop CSS to mobile, and resizing via media queries)...
Also, my failed attempt at conditional download blocking via media queries...
I guess it's a "six of one, half-dozen of another" approach. If you can dump old IE, then yeah... media queries served from a single stylesheet are probably the way to go.
I agree that adding some more CSS will not transform a desktop site into a mobile site but I think that as a simple first step the media queries route is a quick and dirty way to go in lieu of developing a full stack mobile site. I think this is going to be a good stop-gap solution.
Thanks for the articles.
Oops, somehow I'd just let this thread languish for years.
I'm going to close it, since there's Foldy 960…
And, in the interim, I ended up making a fluid grid system myself…