In the example the misalignment is obvious because of the way the columns are shown, but in the real world it would barely be noticable, especially when dealing with ragged-right type.These days, businesses invest a lot of amounts to create their own websites to outshine their brand in the online arena. If you’re a pedant, this might keep you awake at night, but I tend to take a more pragmatic approach to web design and accept that a little inconsistency never killed anyone. In Webkit browsers, an error with the way the rendering engine treats percentages means that although we’re dealing with whole numbers, the widths can actually appear as if they’re slightly off: Left: at certain browser widths, Safari fails to interpret percentages correctly and introduces slight alignment inconsistencies. I expect some people will also complain about there only being six columns, but personally I like to keep things simple: nice big numbers and nice big columns. I’ve included guides in the PSD to indicate where they’d usually be, if that helps. Caveat 1: marginsĪ small caveat is that the 1000px grid assumes you’re not bothered about gutters on either side of the container, which might bother some people depending on the way you do your column margins.
The point is that it’s about making our lives easier, and 1000px happens to be an extremely easy number to deal with. In fact, I’m not even saying that we should all start using grids whose containers are specifically 1000px. I should point out here that I’m not proposing a new framework. The days of worrying about absolute widths have passed. If we’re building fluid designs, the simple reality is that your grid can be whatever size you want, because we’re concerned only with relative widths. But the 960 grid was born in a world of fixed-width layouts. That holy number has served us perfectly well, dividing easily into multiple columns and accounting for browser chrome on 1024 screens to define an accepted ‘safe area’.
And, in the interest of showing how a static Photoshop file can translate into a fluid web page, here’s an HTML demo.īut what about our precious 960 grids? I hear you cry. A 500px column in a 1000px container is 50%. A 140px column inside a 1000px container is 14%. Dividing by 1000 results in clean percentages and better still, dividing by 1000 is something we can do in our heads: just remove the zero. It doesn’t matter that there are great calculation tools built into TextMate to do the maths for you the point is that the final figure looks like an arbitrary number with no immediate relation to either the container’s pixel width (960) or the element’s pixel width (140).Ĭompare that to a container that has a width of 1000px. Now, I don’t know about you, but numbers like that look a little scary. If, for example, you’re designing with a 960px grid in Photoshop and you have six columns, each 140px wide, you divide 140 by 960 to get your percentage-based width: 14.583333%. In making the move to responsive web design, one of the potential hurdles is the rather awkward maths for calculating the percentage-based widths necessary for fluid layouts.
0 kommentar(er)
