Skip to content

Responsive Design #15

Closed
wants to merge 1 commit into from

2 participants

@kalisjoshua

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.

@nathansmith
Owner

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

http://adapt.960.gs

Explanation and reasoning for it here...

http://sonspring.com/journal/adapt-js-explained

@kalisjoshua

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.

@nathansmith
Owner

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)...

http://www.cloudfour.com/css-media-query-for-mobile-is-fools-gold

Also, my failed attempt at conditional download blocking via media queries...

http://host.sonspring.com/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.

@kalisjoshua

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.

@nathansmith
Owner

Oops, somehow I'd just let this thread languish for years.

I'm going to close it, since there's Foldy 960…

https://github.com/davatron5000/Foldy960

And, in the interim, I ended up making a fluid grid system myself…

http://unsemantic.com

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.