Responsive design question on grids

[cybershot]

Why do responsive frameworks like bootstrap and foundation have small, medium and large grid sizes? If you are coding for all screens with the framework, would you just use large columns? When would I need to use small vs medium vs large?

[Paulie_D]

For different layouts on different devices and added flexibility.

I’m not entirely sure what your questions is.

[cybershot]

I am just getting into responsive design. I have 3 23 inch wide screens hooked up at home. Responsive design is suppose to work by changing the layout to fit whatever screen. It looks like bootstrap 3 has col-xs-1, col-md-1, col-lg-1. Why does it need three different size columns? My thinking is that if you just use the lg version of that column, it would scale to fit all screens. I am just not sure when to apply the other columns.

[tomek]

You don’t want responsive layout to fit each device and still look the same everywhere, believe me :) If you have a site that’s based on three columns, it will look good on large devices. But on mobiles and smaller tablets (and this kinda weird thing called phablets)? You need to have less important columns dropped down, and the most important one – the content – to be brought up. The point is – user, when accessing your site on mobile – has to get the informations he wanted fast, and I mean, really fast, otherwise he’ll get out and go someplace else. So, using large columns is great for main layout.

But Bootstrap 3 crew got to solve the problem that was pretty huge (for me) with BS2. What happens when you have some small portion of data which looks good only being presented side-by-side? Like an avatar with nickname and date on your comments. This is where small columns comes into play. By using various combinations of column sizes you can easily adjust the flow of your content while still maintaining great readability and ease of access to the crucial informations you provide.

There’s also mixing columns. You can go use, on one element, all the types of sizes! When you’ll go with something like this:

<div class="col-xs-6 col-sm-6 col-md-4 col-lg-3">...</div><div class="col-xs-6 col-sm-6 col-md-8 col-lg-9">...</div>

You’ll get a layout that’s equally divided in to on both mobiles and small tablets and that has bigger right side on larger devices.

So, basically, different columns sizes are – in theory – purely a design matter, but in practice – you can use them not only to create better looking websites on mobile devices, but also to provide better illustrated and described content.

Well, that’s my first post here – hello all – and I hope it is – at least somewhat – helpful :)

[cybershot]

Thanks for sharing guys. I found a tutorial series on lynda.com that really explains it well with a nice example

http://www.lynda.com/Bootstrap-tutorials/Up-Running-Bootstrap-3/133339-2.html

[Author]

Posts