We are really busy here at Foliovision, designing and launching a few websites per week.
Most of our sites are custom designs built on top of existing themes. We really like the bundled WordPress theme TwentyTen. Recently we’ve started the move to responsive design and have started working with TwentyTwelve (Twenty Eleven was a bit of a dog, neither fish nor fowl).
Responsive design means calculating REM units. As a designer, my math is kind of crappy. Especially the doing it in the head kind. I don’t like to fill my head with figures when I’m working on making a site look good.
Calculating sizes means some extra work time, as all dimensions (widths, heights, margins, paddings, line-heights) have to be calculated double, one in pixels as a fallback option and one in REM. Plus you have 3 different screensizes set up in the CSS. That means 3 different calculations just for one element. Not to speak of the fact, that line-height has a different variable from the rest of the mesurements.
To make my (and yours easier), I asked the programmers here (thanks Peter) to build a simple calculator to convert pixels to REM units so we can get on with our lives.
Just type the value in pixels and hit Enter. You will get two results – one to be used for font-size, width, height, margin, padding and the other result for line-height. There are two calculators, because TwentyTwelve is using 14px=1rem as the initial variable, but some other themes might be using 16px=1rem. Always check your theme first for initial font-size and pick the calculator that applies to you.
Tip: A single click then selects the whole result, after that you can copy and paste it to your CSS.
Please let us know if you have any ideas on how we can improve this. I hope it helps you as much as it helps me (and our other CSS designers).
Further thoughts on responsive design and specifically TwentyTwelve
After having the calculator in place, it gave us more freedom to explore the different nuances of responsive themes. So we started to play around. At the moment we can sum up our ideas in a few points, but more testing was already done and we will update the list soon.
- There are situations, where the elements will jump all over the place. As said above, 3 different screensizes are covered in the CSS file. Especially when you are close to the border to the next screensize, some elements might slip.
- You also have to remember, that it’s written in HTML5. Which means, fallbacks for IE7 and IE8 have to be in place.
- You have to leave a significant portion of your CSS tricks behind, as these simply won’t work anymore. With a flexible theme you just cannot give the element a fix-sized wrapping div. Floats behave sometimes nasty too, when resizing a browser window.
- Responsive themes might have some new limitations, so a close cooperation between designers (CSS and Photoshop) is a must. CSS designer must pick up the new scheme and communicate what is possible and what is not.
- My impression so far is that TwentyTwelve is a great theme, but since it’s built mobile-first, content and structure would have to adjust to the theme, not the other way around. Let’s not forget this when tempted to bulk up the theme to a complex one.
Helpful Extract from TwentyTwelve style.css intro comments:
This stylesheet uses rem values with a pixel fallback. The rem
values (and line heights) are calculated using two variables:
* Use a pixel value with a rem fallback for font-size, padding, margins, etc.
padding: 5px 0;
padding: 0.357142857rem 0; (5 / $rembase)
* Set a font-size and then set a line-height based on the font-size
font-size: 1.142857143rem; (16 / $rembase)
line-height: 1.5; ($line-height / 16)
---------- Vertical spacing
Vertical spacing between most elements should use 24px or 48px
to maintain vertical rhythm:
margin: 24px 0;
margin: 1.714285714rem 0; ( 24 / $rembase )