Bummer!

This is just a preview. You need to be signed in with a Basic or Pro account to view the entire video.

Start a free Silver trial
to watch this video

Sign up for Treehouse

Converting Pixels to Percentages

3:54

In this video, we'll use the target ÷ context = result formula to convert the fixed grid that the Smells like Bakin' website was built on into a fluid grid. This will define its layout proportionately, rather than in absolute values.


Teacher's Notes

Things to Consider

  • Convert pixels to percentages using the formula target ÷ context = result
  • Carry the decimal of your result over two places to the right to get your percentage
  • Do not round up your percentages, no matter how ugly or long the decimal is!

Extra Credit

Fluid Grids

The grid that the Smells Like Bakin website was built on used the tool Gridulator to create a 1000px wide, 12 column grid. Each column is currently 65px with a gutter width of 20px.

Using the same overall width of 1000px, rewrite the grid to have each column instead be 54px wide with a gutter width of 32px.

Then, using the formula target ÷ context = result, convert the new column widths to percentages.

Video Transcript

  • 0:00

    [treehouse]

  • 0:03

    [Website Waters Island 2: Stage 2: Creating a Fluid Foundation with Allison Grayce]

  • 0:06

    Hey guys and welcome back to Website Waters Island 2.

  • 0:10

    Let's review what we learned in the previous stage.

  • 0:12

    We learned how to use the formula target/context = result

  • 0:16

    to convert font sizes from pixels to EMs.

  • 0:20

    We also learned the basic differences between fixed, fluid,

  • 0:23

    adaptive, and responsive web design.

  • 0:26

    Finally, we learned that the key to a responsive website is building it on a fluid foundation.

  • 0:31

    That's just what we'll do.

  • 0:33

    In this stage, we'll convert the fixed grid you worked on in the previous Island

  • 0:36

    into a fluid grid. Let's get started.

  • 0:40

    At this point, all of your font sizes in the Smells like Bakin' website

  • 0:43

    should be converted to EMs if they aren't already.

  • 0:45

    You might not see a lot of change visually when you view the website in the browser,

  • 0:49

    but know that it's on its way to becoming a much more scalable and fluid website.

  • 0:53

    Now go ahead and open up the grid style sheet in your text editor

  • 0:56

    so we can convert the grid from a fixed to a fluid layout.

  • 1:00

    The Smells Like Bakin' website was designed at a total width of 1000 pixels.

  • 1:05

    These 1000 pixels were divided up evenly into a 12-column grid.

  • 1:10

    Each column is 65 pixels wide with a gutter of 20 pixels between them.

  • 1:16

    Designing around a grid, while it can be tricky at first to get used to,

  • 1:19

    is great, because it results in a solid visual and structural balance.

  • 1:24

    It improve legibility and hierarchy and provides us with the good kinds of constraints.

  • 1:29

    If we look at the CSS, these 12 classes are the widths of our columns in the grid.

  • 1:34

    Right now they're in pixels, and we need to change them to percentages.

  • 1:39

    Below our columns towards the bottom of the style sheet is our website's container div.

  • 1:45

    Currently, it's set to a width of 1000 pixels.

  • 1:48

    Now, this is a fixed width, which is fine,

  • 1:51

    but the problem is that this won't scale with the view port size.

  • 1:54

    So, we want to change this value to percentages so it scales.

  • 1:58

    Let's change this width to 90%.

  • 2:02

    There is no science or formula to this number.

  • 2:05

    It just makes sure that we have a little bit of buffer or padding between

  • 2:07

    the browser window and the content of our website.

  • 2:10

    We're also going to give it a max width of 1000 pixels,

  • 2:14

    so that our website doesn't continue scaling up past this size.

  • 2:22

    Now we're going to focus our attention back to our columns

  • 2:25

    and change the value of the largest column, grid_12, to 100%,

  • 2:31

    since it should take up 100% of the width of the container.

  • 2:37

    Now it's time to revisit our favorite formula Target /Context = Result.

  • 2:43

    Focus on grid_11.

  • 2:45

    Using the column width 915 pixels as our target,

  • 2:50

    divide by the width of the entire website--1000 pixels,

  • 2:54

    which is our context--and we get 0.915.

  • 2:59

    Now, to convert this number to a percentage,

  • 3:01

    we need to move the decimal over two places to the right,

  • 3:05

    so our percentage width is 91.5%.

  • 3:12

    Consider taking note of the pixel width of the column to the right

  • 3:16

    by commenting it out with a forward slash and an asterisk,

  • 3:19

    and then closing it out with an asterisk and a forward slash, like this.

  • 3:26

    This can be helpful for those of us who are more comfortable with pixel values.

  • 3:30

    Let's do the same thing for grid_10.

  • 3:34

    830 pixel divided by 1000 pixels equals 0.83.

  • 3:39

    Carry the decimal over, and we get 83%.

  • 3:45

    Continue to work your way down the grid until they're all into percentages.

Show full transcript

Workspace

You have to sign up for Treehouse in order to create workspaces.

Sign up

Downloads

You have to sign up for Treehouse in order to download course videos.

Sign up

Instructor

  • Allison Grayce

    Allison is a freelance web designer and UX consultant with experience working at small interactive agencies and large advertising firms.