Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Sam Bowers
Sam Bowers
5,111 Points
Posted by Sam Bowers
Sam Bowers
5,111 Points

When is it necessary to use ems or percentages in responsive web design?

I am about to embark on the next stage of my development as a web designer and have been offered to create a website for a local business. For this site, I would like to present as many skills as possible, especially RWD. Although, when trying to achieve this goal, I have found it difficult to know when to use units other than pixels, especially in the cases of padding, margin, etc. Please can somebody explain this to me?

Much Appreciated,

Sam Bowers

4 Answers

Miguel de Luis Espinosa
Miguel de Luis Espinosa
41,279 Points
Miguel de Luis Espinosa
Miguel de Luis Espinosa
41,279 Points

Dear Sam,

I think you should think in terms of what your client needs

I suggest you to use something like Bootstrap. That will speed up your work, make it easy to maintain and you will make less errors.

That said, generally speaking, you can always use rems See this article -> http://snook.ca/archives/html_and_css/font-size-with-rem

Alex Lewis
Alex Lewis
15,619 Points
Alex Lewis
Alex Lewis
15,619 Points

I agree with Miaguel, if you are building a responsive site there a ton of frameworks that already do the hard part for you in regards to setting up break points and the use of responsive utilities. While I would suggest bootstrap also, there are some lighter (and less opinionated) responsive frameworks such as neat (http://neat.bourbon.io/) that you can look at using.

Corwyn Wilkey
Corwyn Wilkey
7,971 Points
Corwyn Wilkey
Corwyn Wilkey
7,971 Points

I agree with MIguel, Check out a front end framework like Bootstrap or Foundation. Both great tools for rapid prototyping and development.

That being said, if you are working a heavily text based typographic design, ems or rems would probably be the best way to go as those units are going to help you easily manage your typographic styles. Also by using fixed integers for determining column widths and text sizes you'll be able to control line lengths more easily and thusly set styles appropriately for optimal line lengths.

Conversely, if your design and layout are heavily graphics based, then you might consider percentages for a more fluid experience that will scale easily and provide a more optimal browsing experience on the user end.

Again, as Miguel mentioned, always consider your clients needs first and proceed with your development accordingly.

jase richards
jase richards
10,379 Points
jase richards
jase richards
10,379 Points

In terms of responsive web design there are devices where the pixels won't be the same with the way technology is so before when using pixels would ensure that you have the same spacing/padding/size/etc. because it was to the pixel and the screen was always to that scale. Now it's not always the case so using a percentage ensures that no matter what the device, when you want to have a padding to stay consistent, using percentages will do that.