Part One: Sizing containers
This topic is the one that sends Designers spinning, mainly because… dun dun dun daaaaaaan… math is involved. In my HTML5 classes I give the following tips to make the process of assigning a size, to a responsive webpage element, go smoothly. The assumption is you have a basic understanding of how to work in HTML and CSS. These tips will work for creating a webpage in HTML5 or XHTML that is not built on a scaffolding/grid system. Also the focus is on tackling the concept of which measurement units to use when sizing the properties in your CSS.
First up => which measurement unit do I use when making a responsive web design (RWD)? I propose three: Percentages, EMs, and Pixels. In my three part blog series, I will iron out when to effectively use each. Back in the day, things were simple => all you used were pixels and that gave you consistency across all devices that reached the web. This was called a fixed layout, life (and sizing) was simple. Yeah but… back then, all you had to worry about was a 640 by 480px monitor (or perhaps 800 X 600px). Today there are too many devices/screen resolutions to keep up with… Enter the age of The Responsive Web, where your webpage is expected to be COMFORTABLELY navigated on ANY web-connected device. From Television to phone, now that is a wide spectrum of display. To read more detailed info, you can look into this page.
How do we now build layouts in this brave new RWD world? You learn which measurement works best for the element property you are working with. In this article I am going to talk about sizing for a PC monitor layout, but the concepts are transferable to tablet and phone layouts as well.
The workflow I use when starting a webpage is to draw it in Illustrator first (you could use Photoshop as well). The following would be an example of rectangles drawn to represent the top of my TaaDaa.com homepage:
In Illustrator I set up my web environment by creating an artboard to be the monitor size I am targeting (at the time of this writing: 1280 X 800px would be the target size) and set the ruler units to pixels. I create a large rectangle to cover the artboard, which would represent the monitor (edge-to-edge) and I draw a second rectangle, which will contain the webpage content. I call this process => determining my margins. By comparison, in Microsoft Word you don’t have to worry about that… All you do is open a new file and start typing. Not so in web design, you create the margins. This second rectangle holds all of the other smaller rectangles (div containers) that I have drawn on top. After drawing the “container” layout, I write down all of the measurements in pixels.
Now the challenge => how to do conversions for HTML. The first thing you need to tell yourself is => I am going to go through a little bit of pain because what I will gain is… a webpage that will resize itself! Translation => you only build one webpage for any viewing device!! To that end… we started with containers => in setting up a webpage, you always want to create the containers first (all elements on a webpage must be contained). For HTML5 we will convert all rectangles into semantic tags (header, section, article, footer, etc) or div tags, these are the containers. After reconstructing the layout (turning the rectangles into containers) in Dreamweaver or your favorite code editor, you are ready to size them using a Cascading Style Sheet (CSS).
- An explanation of the measurements:
- Pixels – most people know what these are, they represent the tiny rectangles on your screen, that when put all together is your monitor resolution.
- Percentage – this one also needs little introduction, but is one you will be using frequently. The challenge is… how to calculate it.
- EM – this is the one that needs explaining. If you are a Typographer, you will need to suspend your knowledge of EM. I am sure originally it came from working with text, but it has evolved into a different measurement than the one you would think of in InDesign. EM is a measurement that is relative to the default font size of the web browser. Currently the default font size for most browsers use is 16 pixels. Which means 1em = 16px. I would also like to add that 16px also equals, on most PCs, 12 points. So you could say => 1em = 16px = 12pt. Knowing the point equivalent will be helpful when working with text.
Simply put => when sizing containers use percentages for the width and (only) when necessary… use EM for height. Let me say that another way => do not assign a height unless absolutely necessary (typically the content determines the height). To calculate the width percentage, take the device resolution you are targeting (in our case a PC monitor) and divide that into the “rectangle” size you drew that represents the webpage content. In my illustration, the light yellow rectangle would represent the entire monitor edge-to-edge. The white rectangle would be the main content container. With my target screen width being 1,280px and my main container at 1,000px, the equation would be 1,000 divided by 1,280. The answer is 0.78125 which = 78.125%. I would round to 78% and call it a day ;~D The width for my main container would be 78%.
For the inside rectangles, their width will be calculated relative to their parent container. For instance when sizing the header tag, it would simply take up the entire width of the #container div.
Should you decide you want to assign a height to container (rarely done). You would need to calculate in em. On a PC monitor (and many other devices) 1em = 16 pixels.. Let’s say you decide to give a height to the header. You would take the measurement you had from Illustrator and divide it by 16. The height of the green rectangle is 90px. The equation would be 90 divided by 16. The answer is 5.625 which I would round to 5.6em.
Calculating the size of the four small green rectangles would work the same way. You would take their size of 216px and divide by 1,000. This would be equal 21.6% (easy enough to do in your head ;~D). I would use the
You would repeat for articles 2, 3 and 4. There would be two things different about article 4 though:
/* This was changed for article 4 */
/* End change */
I hope that cleared up some questions you may have had! I have to admit that working with the four boxes really pointed out how working with a responsive grid scaffolding is soooooo much easier. The scaffolding builds the columns and gaps for you => it’s pretty sweet! Another blog article!! Please come back for Part Two where I talk about sizing text. Happy Web Designing!!