No-one ever said that responsive web design was easy, but there's plenty that you can do to smooth out the process. If you can go into a responsive project without having to worry about the size of your grids then that'll save you at least one headache along the way.
Here is a quick breakdown of the standard measurements you can use across devices, depending on the width you choose to make the columns. Remember, the column widths should remain the same across device sizes, but you can adjust the initial width to fit your needs. I'll typically design a mobile website at 360px wide to work in this system.
120px-wide columns
Television
1,024 x 576 (1080p aspect ratio): 8 columns, 32px margin
Desktop
1,440 x 840: 12 columns, 0px margin
1,280 x 800: 10 columns, 40px margin left and right
Tablet
1,024 x 768: 8 columns, 32px margin left and right
960 x – : 8 columns, 0px margin
Mobile
320 x – : 3 columns, 0px margin
100px-wide columns
Television
1,024 x 576 (1080p ratio): 10 columns, 12px margin left and right
Desktop
1,440 x 840: 14 columns, 20px margin left and right
1,280 x 800: 12 columns, 40px margin left and right
Tablet
1,024 x 768: 10 columns, 12px margin left and right
960 x – : 9 columns, 30px margin left and right
Mobile
320 x – : 3 columns, 10px margin left and right
80px-wide columns
Television
1,024 x 576 (1080p ratio): 12 columns, 32px margin left and right
Desktop
1,440 x 840: 18 columns, 0px margin
1,280 x 800: 16 columns, 0px margin
Tablet
1,024 x 768: 12 columns, 32px margin left and right
960 x – : 12 columns, 0px margin
Mobile
320 x – : 4 columns, 0px margin
This article originally appeared in net magazine issue 281; buy it here!
