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

Posted by Matthew Smart
Matthew Smart
12,567 Points

Responsive website question: How to start?

What would you suggest, making a website and then making it responsive by converting the pixels to percent. Or should i start of making the website with percentage?

Its just on the responsive css course, at the part i'm at its converting a pixel site to percentage.

2 Answers

Pavle Lucic
Pavle Lucic
10,801 Points

Take a look of this piece of code. This is how Twitter bootstrap framework defines their container.

@media (min-width: 768px) {
  .container {
    width: 750px;
  }
}
@media (min-width: 992px) {
  .container {
    width: 970px;
  }
}
@media (min-width: 1200px) {
  .container {
    width: 1170px;
  }

Containers are the main building block for website. As you can see they uses pixels.

This is how they define rest of elements:

 img {
    max-width: 100% !important;
  }

.btn-group-vertical > .btn-group > .btn {
  display: block;
  float: none;
  width: 100%;
  max-width: 100%;
}

They use percentages or ems.

*According to this logic, during the construction of the site, you need to define a container / wrapper in pixels. And other elements can create in percentages or ems. When the parent element is defined in pixels, you can easily do the calculations for elements in percentages. *

Chris Shaw
Chris Shaw
26,676 Points
Chris Shaw
Chris Shaw
26,676 Points

Hi Matthew,

I think you're confusing the difference between what percentage values mean vs responsive design, any time you use a percentage on the main page wrapper you're creating a fluid design which adapts to the width of the screen but doesn't respond to it which can give you some very unexpected results as percentages can do weird things in sub-pixel layouts.

In responsive design you would typically use either the px or em units along with media queries which is explained later on in the course, the biggest difference is media queries allow you to specifically tell the device/browser how handle the site for the media query that it relates to which gives your site a much richer experience and it fits very nicely.

Typically these days if you're thinking about responsive design it's best to think mobile first as explained by ZURB in this article, the main reason why is it's easier to design for a mobile and go up as then you know exactly what will happen compared to going down which can be a nightmare as you have to account for elements moving around in a way that typically doesn't flow like it does on a desktop browser.

To read about it more I highly recommend you head over to A List Apart as their article is probably one of the best I've ever read in regard to building sites in a responsive and maintainable way.