In this week's tip, we'll be exploring the finer points of one of our most important quality assurance notes: percentage positioning.
After QA'ing numerous pages on numerous devices, we have consistently found that using percentages for positioning, namely margin and padding, best preserves the layout of your page as the browser window shrinks. We understand that many Splash designers have formed a habit of using rems or ems for positioning and we also understand that these are indeed responsive units of measure.
However, we believe that percentages are truly the most relational unit of measure and here's why.
Within Splash, the percentage you choose is relative to the parent container on which you are setting the margin or padding. For example, if I put 4% padding on either side of my cover block, that space will always equal 4% of the cover block regardless of how wide or narrow the cover block becomes. This is helpful as the width of your page will change constantly based on the device that each guest is using. Some folks will view your page on a 13 inch laptop, while others will be using a 27 inch monitor.
We’ve all seen em and rem positioning work just fine, but using percentages protects us from broken design intent because percentage is truly the most relational unit of measure.
Ems are determined by the font size specified within the element on which they are being used and rems are determined by the root font size specified for the entire page. Either way, that root value is measured in pixels so while ems and rems are responsive units of measure, they stem from something that is less fluid than a percentage. They're great for type (we recommend rems for type, but we'll save that for a future entry) but since responsive design is such a relational art, we recommend using the most relational unit of measure for positioning.
There are, of course, exceptions to every rule. You’ll notice I didn't mention pixels, but we do use them for things like max widths and email layout.