Imgenes y Fotos Stock

es.123rf.com Navega Nuestra Extensa Coleccin y. Compra un Paquete de Crdito Hoy!

Sponsored by

Intel

HP

<

Essenti al Ja va Script: the to p five MVC fra mewo rks

Do wnlo ad this free boo k on digita l desi gn to da y!

>

(/javascript/essential-javascript-top-five-mvcframeworks-11122767)

(/graphic-design/ustwo-release-pixel-perfectprecision-handbook-2-5132769)

>

CSS3 TUTORIAL

Create fluid layouts with HTML5 and CSS3

Mar 6, 2014 14:47 pm >5 comments (/css3/create-fluid-layouts-html5-and-css3-3142768#comments-list) 151
Tw eet

39
Like

80

6
Share

Ben Frain explains how to create fluid layouts by converting pixel-based grids to proportions.
When I first started making websites at the end of the 1990s, layout structures were table-based. More often than not, sectioning up screen real estate was done with percentages. For example, a left navigation column might be 20 percent whilst the main content area would be 80 percent. There weren't the vast differences in browser viewports we see today, so these layouts scaled well across the limited range of viewports. Nobody much cared that sentences looked a little different on one screen compared to another. However, as CSS-based designs took over, it enabled web-based designs to more closely mimic print. With that transition, for many (including myself), proportionally based layouts dwindled for many years in favor of their rigid, pixel-based counterparts. But like all things, proportional designs have come back around. The Mini, permed hair (I wish!) and flared jeans have all made their comebacks over the years. Now, it's time for proportional layouts to make a re-appearance.

Software: Text editor, browser Project time: 1-2 hours Skills: Learn why proportional layouts are necessary for responsive design, convert pixel-based element widths to proportional percentages, convert pixel-based typography sizes to their em-based equivalent, understand how to find the context for any element Support file (http://mos.creativebloq.com/tutorials/2012/netmagcreate-fluid-layouts-with-html5-and-css3.zip)

01. Fixed layouts aren't future-proof

As I mentioned, since the 'table layout' days, I've had little call to use proportional layouts. Typically, I've been asked to code HTML and CSS that best matches a design composite that almost always measures 950-1000 pixels wide. If the layout was ever built with a proportional width (say, 90 percent), the complaints would have arrived quickly: "It looks different on my monitor". Web pages with fixed, pixel-based dimensions were the easiest way to match the fixed, pixel-based dimensions of the composite. Even in more recent times, when using media queries to produce a tweaked version of a layout specific to a certain popular device such as an iPad or iPhone, the dimensions could still be pixel-based, as the viewport was known. However, while developers might enjoy the possibility of re-charging a client each time they need a site tweaked for today's newest gizmo, it's not exactly a future-proof way of building web pages. As more and more varied viewports are being introduced, we need some way of provisioning for the unknown.

02. Why proportional layouts are essential for responsive designs

Whilst media queries are powerful, we are now aware of some limitations. Any fixed-width design, using only media queries to adapt for different viewports, will merely 'snap' from one set of CSS media query rules to the next with no linear progression between the two.

Instead, we want to create a design that flexes and looks good on all viewports, not just particular ones specified in a media query. I'll cut to the chase: we need to switch our fixed, pixel-based layouts to fluid, proportional ones. This will enable elements to scale relative to the viewport until one media query or another modifies the styling.

03. Proportional layouts and media queries

Ethan Marcotte wrote the definitive article (http://www.alistapart.com/articles/responsive-web-design/) on Responsive Web Design at A List Apart. Whilst the tools he used (fluid layout and images, and media queries) were not new, the application and embodiment of the ideas into a single coherent methodology was. For many working in web design, his article was the genesis of new possibilities new ways to create web pages that offered the best of both worlds: a way to have a fluid flexible design based on a proportional layout, whilst being able to limit how far elements could flex with media queries. Putting them together forms the core of a responsive design, creating something truly greater than the sum of its parts.

04. Amending a design from a fixed to a proportional layout

For the foreseeable future, any design composite you receive or create is likely to have fixed dimensions. Currently we measure (in pixels) the element sizes, margins, and so on within the graphics files from Photoshop, Fireworks, and so on. We then punch these dimensions directly into our CSS. The same goes for text sizes. We click on a text element in our image editor of choice, note the font size, and then enter the value (again, often measured in pixels) into the relevant CSS rule. So how do we convert our fixed dimensions into proportional ones?

05. A formula to remember

It's possible I'm coming off as too much of an Ethan Marcotte fanboy, but at this point it's essential that I provide another large tip of the hat (it should probably be a bow, maybe even a kneel) to him. In Dan Cederholm's excellent book, Handcrafted CSS (http://handcraftedcss.com/), Mr. Marcotte contributed a chapter covering fluid grids. In it, he provided a simple and consistent formula for converting fixed width pixels into proportional percentages: target context = result Does that smell a bit like an equation to you? Fear not, when creating a responsive design, this formula soon becomes your new best friend. Rather than talk any more theory, let's put it to work converting the fixed-dimension design for the fictional movie website And The Winner Isn't... (http://www.andthewinnerisnt.com/index.html) to a fluid percentage-based layout.

06. Embracing Fluid Layouts

At the minute, the basic markup structure of the site looks like this:
1. 2. 3. 4. 5. 6. <d i v (http://december.com/html/4/element/div.html) id="wrapper"> <!-- the header and navigation --> <d i v (http://december.com/html/4/element/div.html) id="header"> <d i v (http://december.com/html/4/element/div.html) id="navigation"> <u l (http://december.com/html/4/element/ul.html)> <l i (http://december.com/html/4/element/li.html)><a (http://december.com/html/4/element/a.html) href="#">navigation1</a (http://december.com/html/4/element/a.html)></l i (http://december.com/html/4/element/li.html)> <l i (http://december.com/html/4/element/li.html)><a (http://december.com/html/4/element/a.html) href="#">navigation2</a (http://december.com/html/4/element/a.html)></l i (http://december.com/html/4/element/li.html)> </u l (http://december.com/html/4/element/ul.html)> </d i v (http://december.com/html/4/element/div.html)> </d i v (http://december.com/html/4/element/div.html)> <!-- the sidebar --> <d i v (http://december.com/html/4/element/div.html) id="sidebar"> <p (http://december.com/html/4/element/p.html)>here is the sidebar</p (http://december.com/html/4/element/p.html)> </d i v (http://december.com/html/4/element/div.html)> <!-- the content --> <d i v (http://december.com/html/4/element/div.html) id="content">

7.

8. 9. 10. 11. 12. 13. 14. 15. 16.

17. 18. 19. 20. 21. 22. 23.

<p (http://december.com/html/4/element/p.html)>here is the content</p (http://december.com/html/4/element/p.html)> </d i v (http://december.com/html/4/element/div.html)> <!-- the footer --> <d i v (http://december.com/html/4/element/div.html) id="footer"> <p (http://december.com/html/4/element/p.html)>Here is the footer</p (http://december.com/html/4/element/p.html)> </d i v (http://december.com/html/4/element/div.html)> </d i v (http://december.com/html/4/element/div.html)>

What's important to note here is the CSS we are currently using to set the widths of the main structural (header, navigation, sidebar, content, and footer) elements. I've omitted many of the styling rules so we can concentrate on structure:
1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19. 20. 21. 22. 23. 24. 25. 26. 27. 28. 29. 30. 31. 32. 33. 34. 35. 36. 37. 38. 39. 40. 41. 42. 43. 44. 45. 46. #wrapper { m a r g i n - r i g h t : auto; m a r g i n - l e f t : auto; w i d t h : 960px; } #header { m a r g i n - r i g h t : 10px; m a r g i n - l e f t : 10px; w i d t h : 940px; } #navigation { p a d d i n g - b o t t o m : 25px; m a r g i n - t o p : 26px; m a r g i n - l e f t : -10px; p a d d i n g - r i g h t : 10px; p a d d i n g - l e f t : 10px; w i d t h : 940px; } #navigation ul li { d i s p l a y : inline-block; } #c o n t e n t { m a r g i n - t o p : 58px; m a r g i n - r i g h t : 10px; float: right; w i d t h : 698px; } #sidebar { b o r d e r - r i g h t - c o l o r : #e8e8e8; b o r d e r - r i g h t - s t y l e : solid; b o r d e r - r i g h t - w i d t h : 2px; m a r g i n - t o p : 58px; p a d d i n g - r i g h t : 10px; m a r g i n - r i g h t : 10px; m a r g i n - l e f t : 10px; float: left; w i d t h : 220px; } #footer { float: left; m a r g i n - t o p : 20px; m a r g i n - r i g h t : 10px; m a r g i n - l e f t : 10px; c l e a r : both; w i d t h : 940px; }

All the values are currently set using pixels. Let's work from the outermost element and change them to proportional percentages using the target context = result formula. All our content currently sits within a div with an ID of #wrapper. You can see by the CSS above that it's set with automatic margin and a width of 960 px. As the outermost div, how do we define what percentage of the viewport width it should be?

07. Setting a context for proportional elements

We need something to 'hold' and become the context for all the proportional elements (content, sidebar, footer, and so on) we intend to contain within our design. We therefore need to set a proportional value for the width that the #wrapper should be in relation to the viewport size. For now, let's knock off a nought and roll with 96 percent and see what happens. Here's the amended rule for #wrapper:
1. 2. 3. 4. 5. #wrapper { m a r g i n - r i g h t : auto; m a r g i n - l e f t : auto; w i d t h : 96%; /* Holding outermost DIV */

And here's how it looks in the browser window:

> The site with a #wrapper width setting of 96%

So far, so good! 96 percent actually works quite well here, although we could have opted for 100 or 90 per cent whatever set the design within the viewport in the most aesthetically pleasing manner. Changing from fixed to proportional gets a little more complicated as we move inwards. Let's look at the header section first. Consider the formula again: target context = result. Our #header div (the target) sits within the #wrapper div (the context). Therefore, we take our #header (the target) width of 940 pixels, divide it by the width of the context (the #wrapper), which was 960 px, and the result is .979166667. We can turn this into a percentage by moving the decimal place two digits to the right and we now have a percentage width for the header of 97.9166667. Let's add that to our CSS:
1. 2. 3. 4. #header { m a r g i n - r i g h t : 10px; m a r g i n - l e f t : 10px; w i d t h : 97.9166667%; /* 940 divided by 960 */

5.

And as both the #navigation and the #footer divs also have the same declared width, we can swap both of those pixel values to the same percentage-based rule. Finally, before we take a peek in the browser, let's turn to the #content and #sidebar divs. As the context is still the same (960 px), we just need to divide our target size by that figure. Our #content is currently 698 px, so divide that value by 960 and the answer is .727083333. Move the decimal place and we have a result of 72.7083333 percent that's the width of the #content div in percentage terms. Our sidebar is currently 220 px but there's also a 2 px border to consider. I don't want the thickness of the right-hand border to expand or contract, so that will stay at 2 px. Because of that, I need to subtract its thickness from the width of the sidebar, then perform the same calculation. Divide the target (now 218 px) by the context (960 px) and the answer is .227083333. Shift the decimal and we have a result of 22.7083333 percent for the sidebar. After amending all the pixel widths to percentages, the relevant CSS looks like this:

A ds by M edia P lay er Ds1O zY7N zs4O zk7M TA 7M TE 7M TI7M TM 7M TQ mYT02M jA w JnM 9M TA w M S Z3P Xd3dy 5jcmV hdG l2ZWJsb3E uY29tJmI9YmQ y JnJkP S Zy aT0=)

1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19. 20.

#wrapper { m a r g i n - r i g h t : auto; m a r g i n - l e f t : auto; w i d t h : 96%; /* Holding outermost DIV */ } #header { m a r g i n - r i g h t : 10px; m a r g i n - l e f t : 10px; w i d t h : 97.9166667%; /* 940 divided by 960 */ } #navigation { p a d d i n g - b o t t o m : 25px; m a r g i n - t o p : 26px; m a r g i n - l e f t : -10px; p a d d i n g - r i g h t : 10px; p a d d i n g - l e f t : 10px; w i d t h : 72.7083333%; /* 698 divided by 960 */ } #navigation ul li { d i s p l a y : inline-block;

21. 22. 23. 24. 25. 26. 27. 28. 29. 30. 31. 32. 33. 34. 35. 36. 37. 38. 39. 40. 41. 42.

} #c o n t e n t { m a r g i n - t o p : 58px; m a r g i n - r i g h t : 10px; float: right; w i d t h : 72.7083333%; /* 698 divided by 960 */ } #sidebar { b o r d e r - r i g h t - c o l o r : #e8e8e8; b o r d e r - r i g h t - s t y l e : solid; b o r d e r - r i g h t - w i d t h : 2px; m a r g i n - t o p : 58px; m a r g i n - r i g h t : 10px; m a r g i n - l e f t : 10px; float: left; w i d t h : 22.7083333%; /* 218 divided by 960 */ } #footer { float: left; m a r g i n - t o p : 20px; m a r g i n - r i g h t : 10px; m a r g i n - l e f t : 10px; c l e a r : both; w i d t h : 97.9166667%; /* 940 divided by 960 */ }

The following screenshot shows the result in Firefox with the viewport around 1000 px wide:

> The developing fluid layout, viewed in Firefox

08. Can't we just round the numbers?

Let's take some time out from the layout to consider the issue of decimal precision. Some critics of responsive design techniques (for example, see this article by James Pearce (http://tripleodeon.com/2010/10/not-amobile-web-merely-a-320px-wide-one/)) argue that entering numbers such as .550724638 em into stylesheets is daft. You may wonder yourself why they aren't simply rounded to something more sensible. The counter-argument is that unrounded values are a more accurate answer to the question being asked. Providing a browser with the most accurate answer should make it more able to display that answer in the most accurate manner.

As a related aside, if you stayed awake through more than a couple math classes, you will have heard of the Golden Ratio (http://en.wikipedia.org/wiki/Golden_ ratio). The mathematical ratio, used in almost every discipline, is expressed as approximately 1:1.61803398874989 (if you want it to 10,000 decimal places, knock yourself out here (http://www.maths.surrey.ac.uk/hostedsites/R.Knott/Fibonacci/ phi10000dps.txt)). Not a neat number by any means, but quite an important one. If the Golden Ratio can suffer such precise measurements, I'm inclined to believe our web designs can too. Right, back to our fluid layout.

09. Converting the other layout elements

Now, let's go ahead and replace all the 10 px instances used for padding and margin throughout with their proportional equivalent using the same target context = result formula. As all the 10 px widths have the same 960 px context, the width in percentage terms is 1.0416667 percent (10 960). Everything still looks fine at the same viewport size. However, the navigation area isn't behaving. If I bring the viewport size in just a little, the links start to span two lines:

> Notice the problem with the site navigation?

Furthermore, if I expand my viewport, the margin between the links doesn't increase proportionally. Let's take a look at the CSS associated with the navigation and try and figure out why:
1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19. #navigation { p a d d i n g - b o t t o m : 25px; m a r g i n - t o p : 26px; m a r g i n - l e f t : -1.0416667%; /* 10 divided by 960 */ p a d d i n g - r i g h t : 1.0416667%; /* 10 divided by 960 */ p a d d i n g - l e f t : 1.0416667%; /* 10 divided by 960 */ w i d t h : 97.9166667%; /* 940 divided by 960 */ b a c k g r o u n d - r e p e a t : repeat-x; b a c k g r o u n d - i m a g e : url(../img/atwiNavBg.png); b o r d e r - b o t t o m - c o l o r : #bfbfbf; b o r d e r - b o t t o m - s t y l e : double; b o r d e r - b o t t o m w i d t h : 4px; } #navigation ul li { d i s p l a y : inline-block; } #navigation ul li a { h e i g h t : 42px; l i n e - h e i g h t : 42px; m a r g i n - r i g h t : 25px;

20. 21. 22. 23. 24. 25.

serif; }

t e x t - d e c o r a t i o n : none; t e x t - t r a n s f o r m : uppercase; f o n t - f a m i l y : Arial, "Lucida Grande", Verdana, sansf o n t - s i z e : 27px; color: black;

Our third rule, the #navigation ul li a, still has a pixel-based margin of 25 px. Let's go ahead and fix that with our trusty formula. As the #navigation div is based on 940 px, our result should be 2.6595745 percent. So we'll amend the code as follows:
1. 2. 3. 4. 5. 6. 7. 8. 9. #navigation ul li a { h e i g h t : 42px; l i n e - h e i g h t : 42px; m a r g i n - r i g h t : 2.6595745%; /* 25 divided by 940 */ t e x t - d e c o r a t i o n : none; t e x t - t r a n s f o r m : uppercase; f o n t - f a m i l y : Arial, "Lucida Grande", Verdana, sansserif; f o n t - s i z e : 27px; color: black; }

That was easy enough! Let's just check all is okay in the browser...

> The result of our change to the link layout: fixing one problem has created

another

Oh wait: that isn't exactly what we were gunning for. Okay, the links aren't spanning two lines but we don't have the correct proportional margin value, clearly. The navigation links look like one big word, and not one I can find in my dictionary...

10. Always remember the context

Considering our formula again (target context = result), it's possible to understand why this issue is occurring. Our problem here is the context. Here's the relevant markup:

A ds by M edia P lay er Ds1O zY7N zs4O zk7M TA 7M TE 7M TI7M TM 7M TQ mYT02M jA w JnM 9M TA w M S Z3P Xd3dy 5jcmV hdG l2ZWJsb3E uY29tJmI9YmQ y JnJkP S Zy aT0=)

1. 2. 3.

4.

5.

6.

7.

8.

9. 10.

<d i v (http://december.com/html/4/element/div.html) id="navigation"> <u l (http://december.com/html/4/element/ul.html)> <l i (http://december.com/html/4/element/li.html)><a (http://december.com/html/4/element/a.html) href="#">Why? </a (http://december.com/html/4/element/a.html)></l i (http://december.com/html/4/element/li.html)> <l i (http://december.com/html/4/element/li.html)><a (http://december.com/html/4/element/a.html) href="#">Synopsis</a (http://december.com/html/4/element/a.html)></l i (http://december.com/html/4/element/li.html)> <l i (http://december.com/html/4/element/li.html)><a (http://december.com/html/4/element/a.html) href="#">Stills/Photos</a (http://december.com/html/4/element/a.html)></l i (http://december.com/html/4/element/li.html)> <l i (http://december.com/html/4/element/li.html)><a (http://december.com/html/4/element/a.html) href="#">Videos/clips</a (http://december.com/html/4/element/a.html)></l i (http://december.com/html/4/element/li.html)> <l i (http://december.com/html/4/element/li.html)><a (http://december.com/html/4/element/a.html) href="#">Quotes</a (http://december.com/html/4/element/a.html)></l i (http://december.com/html/4/element/li.html)> <l i (http://december.com/html/4/element/li.html)><a (http://december.com/html/4/element/a.html) href="#">Quiz</a (http://december.com/html/4/element/a.html)></l i (http://december.com/html/4/element/li.html)> </u l (http://december.com/html/4/element/ul.html)> </d i v (http://december.com/html/4/element/div.html)>

As you can see, our <a href="#"> links sit within the <li> tags. They are the context for our proportional margin. Looking at the CSS for the <li> tags, we can see there are no width values set: #navigation ul li { display: inline-block; } As is often the case, it turns out that there are various ways of solving this problem. We could add an explicit width to the <li> tags, but that would either have to be fixed-width pixels or a percentage of the containing element (the navigation div) neither of which allows any flexibility for the text that ultimately sits within them. We could instead amend the CSS for the <li> tags, changing inlineblock to inline:
1. 2. 3. #navigation ul li { d i s p l a y : inline; }

Opting for display: inline; (which stops the <li> elements behaving like block-level elements) also makes the navigation render horizontally in earlier versions of Internet Explorer (versions 6 and 7) that have problems with inline-block. However, I'm a fan of inline-block as it gives greater control over the margins and padding for modern browsers, so instead I'm going to leave the <li> tags as inline-blocks (and perhaps add an override style for IE 6 and IE 7 later) and instead move my percentage-based margin rule from the <a> tag (which has no explicit context) to the containing <li> block instead. Here's what the amended rules now look like:
#navigation ul li { d i s p l a y : inline-block; m a r g i n - r i g h t : 2.6595745%; /* 25 divided by 940 */ } #navigation ul li a { h e i g h t : 42px; l i n e - h e i g h t : 42px; t e x t - d e c o r a t i o n : none; t e x t - t r a n s f o r m : uppercase; f o n t - f a m i l y : Arial, "Lucida Grande", Verdana, sansserif; 11. o nthis t-si z e : 27px; x We use cookiesfon website. By using this site, you agree 12. c o l o r : b l a c k ; that we may store and access cookies on your device. Find out 13. } 1. 2. 3. 4. 5. 6. 7. 8. 9. 10.

more and set your preferences here (http://www.futureplc.com/cookies-policy/) And here's how the result looks in the browser with a viewport 1200 px wide:

> The updated layout viewed in a viewport 1200 px wide: that's one

navigation problem fixed!

The navigation is getting there now, but I still have the problem of the navigation links spanning two lines as the viewport gets smaller, at least until I get below 768 px wide, when the media query we wrote earlier [in Chapter 2 of the book from which this article is an excerpt] overrides the current navigation styles. Before we start fixing the navigation, I'm going to switch all my typography sizes from fixed-size pixels to the proportional unit, ems.

11. Using ems rather than pixels for typography

In years gone by, web designers primarily used ems for sizing typography, rather than pixels, because earlier versions of Internet Explorer were unable to zoom text set in pixels. For some time, modern

browsers have been able to zoom text on screen, even if the size values of the text were declared in pixels. So, why is using ems instead of pixels preferable? Here are two obvious reasons: firstly anyone still using Internet Explorer 6 (yes, those two people) automatically gets the ability to zoom the text; and secondly, it makes life for you, the designer/developer, much easier. The size of an em is determined in relation to the size of its context. If we set a font size of 100 percent to our <body> tag and style all further typography using ems, they will all be affected by that initial declaration. The upshot of this is that if, having completed all the necessary typesetting, a client asks for all our fonts to be a little bigger, we can merely change the body font size and all other typography changes in proportion. Using our same target context = result formula, I'm going to convert every pixel-based font size to ems. It's worth knowing that all modern desktop browsers use 16 px as the default font size (unless explicitly stated otherwise). Therefore, from the outset, applying any of the following rules to the body tag will provide the same result:
1. 2. 3. f o n t - s i z e : 100%; f o n t - s i z e : 16px; f o n t - s i z e : 1em;

As an example, the first pixel-based font size in our stylesheet controls the site's title, And The Winner Isn't... at the top left of the screen:
1. 2. 3. 4. 5. 6. 7. 8. 9. 10. #logo { d i s p l a y : block; p a d d i n g - t o p : 75px; c o l o r : #0d0c0c; t e x t - t r a n s f o r m : uppercase; f o n t - f a m i l y : Arial, "Lucida Grande", Verdana, sansserif; f o n t - s i z e : 48px; } #logo span { c o l o r : #dfdada; }

As 48 16 = 3, our style changes as follows:

A ds by M edia P lay er

Ds1O zY7N zs4O zk7M TA 7M TE 7M TI7M TM 7M TQ mYT02M 1. #logo { jA w JnM 9M TA w M S Z3P Xd3dy 5jcmV hdG l2ZWJsb3E uY29tJmI9YmQ y JnJkP S Zy aT0=)

2. 3. 4. 5. 6. 7.

d i s p l a y : block; p a d d i n g - t o p : 75px; c o l o r : #0d0c0c; t e x t - t r a n s f o r m : uppercase; f o n t - f a m i l y : Arial, "Lucida Grande", Verdana, sansserif; f o n t - s i z e : 3em; /* 48 divided by 16 = 3*/ }

You can apply the same logic throughout. If at any point things go haywire, it's probable the context for your target has changed. For example, consider the <h1> within the markup of our page:
1. <h 1 (http://december.com/html/4/element/h1.html)>Every year <s p a n (http://december.com/html/4/element/span.html)>when I watch the Oscars I'm annoyed...</s p a n (http://december.com/html/4/element/span.html)></h 1 (http://december.com/html/4/element/h1.html)>

Our new em-based CSS looks like this:

1. 2. 3. 4. 5. 6. 7. 8. #c o n t e n t h1 { f o n t - f a m i l y : Arial, Helvetica, Verdana, sans-serif; t e x t - t r a n s f o r m : uppercase; f o n t - s i z e : 4.3125em; } /* 69 divided by 16 */ #c o n t e n t h1 span { d i s p l a y : block; l i n e - h e i g h t : 1.052631579em; /* 40 divided by 38 */ c o l o r : #757474; f o n t - s i z e : .550724638em; /* 38 divided by 69 */ }

You can see here that the font size (which was 38 px) of the <span> element is in relation to the parent element (which was 69 px). Furthermore, the line-height (which was 40 px) is set in relation to the font itself (which was 38 px).

But what on earth is an em?

The term 'em' is simply a way of expressing the letter M in written form and is pronounced in the same way. (Historically, the letter M was used to establish the size of a given font, since it is the widest of the letters.) Nowadays, em as a measurement defines the proportion of a given letter's width and height with respect to the point size of a given font.

Going further

By now, the structure of the website is resizing correctly when viewed in viewports of differing sizes, and we've switched our pixel-based type to ems. We still have to figure out how to scale images as the viewport resizes... but that's a topic for the book itself. Words: Ben Frain This article is an exclusive excerpt from Ben Frain's book Responsive Web Design with HTML5 and CSS3, published by Packt Publishing (http://www.packtpub.com/). The eBook edition currently costs 12.71, and the print edition 22.49, including the eBook. You can buy them both here (http://www.packtpub.com/responsive-web-designwith-html-5-and-css3/book).

Liked this? Read these!

How to build an app (http://www.creativebloq.com/app-design/howbuild-app-tutorials-12121473) The ultimate guide to designing the best logos (http://www.creativebloq.com/graphic-design/pro-guide-logo-design21221) The best free web fonts (http://www.creativebloq.com/typography/best-free-web-fonts1131610) for designers Discover what's next for Augmented Reality (http://www.creativebloq.com/3d/whats-next-augmented-reality11121313)

Tags: CSS3 (/tag/css3), HTML5 (/tag/html5), netmag (/tag/netmag), Web design (/tag/web-design), Tutorial (/tag/tutorial)

A ds by M edia P lay er Ds1O zY7N zs4O zk7M TA 7M TE 7M TI7M TM 7M TQ mYT02M jA w JnM 9M TA w M S Z3P Xd3dy 5jcmV hdG l2ZWJsb3E uY29tJmI9YmQ y JnJkP S Zy aT0=)

BEST FROM AROUND THE WEB

(http://www.evergage.com/blog/real-time-marketing-isnt-what-you-think-itis) (http://www.titan-seo.com/NewsArticles/seo-terms.html) (http://www.decisionaire.com/accessing-the-future-of-content-marketing/) (http://mds.ricoh.com/blog/getting_personal_new_ways_of_working)

Real-Time Marketing Isnt What You Think It Is

(Evergage)

10 Essential SEO Terms Accessing The Future Of 67% of Adults are

Recommended by

5 COMMENTS

very useful post. thanks for sharing

(/users/sswebdevteam) sswebdevteam September 27, 2013 at 12:19 Report abuse (/future/report/comment/3889?destination=node%2F2768)

Thank you for this great job! But if I want to begin creating my new site from the scratch using (/users/mrs123) mrs123 March 05, 2014 at 02:07 percentages? Is there a formula or a method to calculate the dimensions of the elements? Any help would be appreciated.

Report abuse (/future/report/comment/6151?destination=node%2F2768)

mrs123, (/users/thor) Thor (http://google.com) March 07, 2014 at 02:34 I've made a few websites from scratch using percentage widths to keep it fluid. You don't need to calculate pixel dimensions, and you don't want to. It takes a while to get used to, but once you train yourself to work that way it makes things so much easier. Report abuse (/future/report/comment/6176?destination=node%2F2768)

Thank you Thor. I'm already working on that way and it's easier than I thought. (/users/mrs123) mrs123 March 09, 2014 at 12:13

Report abuse (/future/report/comment/6203?destination=node%2F2768)

Always responsive website makes your business success, it will very helpful for getting more number of customers in your (/users/jimmyanderson49) jimmyanderson49 March 10, 2014 at 23:35 business. So we should take care while hiring the website designing services. http://www.webdesignbizz.com/

(http://www.webdesignbizz.com/) Report abuse (/future/report/comment/6236?destination=node%2F2768)

Log in to Creative Bloq with your preferred social network to comment

or log in with your Creative Bloq account

Username

Password

Log in

Forgotten your username or password? (/user/password)

Don't have an account?

Join now. It's completely free and takes seconds

Join (/user/register)

Advertising (/Advertising)

About Us (/About-Us)

Contact (/Contact)

Future is AOP & PPA Digital Publisher of the Year and BMA Media Company of the Year. Creative Bloq is part of Future plc, an international media group and leading digital publisher. We produce content across five core areas: Technology Entertainment Music Creative

Top

TechRadar (http://w w w .techradar.com/) CVG (http://w w w .computerandvideogames.com/) MusicRadar (http://w w w .musicradar.com/) Digital Camera World (http://w w w .digitalcamera T3 (http://w w w .t3.com/) PC Gamer (http://w w w .pcgamer.com/) Guitarist (http://w w w .musicradar.com/guitarist) Mollie Makes (http://w w w .molliemakes.com/)

Mac|Life (http://w w w .maclife.com/)GamesRadar (http://w w w .gamesradar.com/) FutureMusic (http://w w w .musicradar.com/futuremusic) Photography Week (http://photographyw eek.dig

Gizmodo UK (http://w w w .gizmodo.co.uk/) Total Film (http://w w w .totalfilm.com/) Rhythm (http://w w w .musicradar.com/rhythm) The Simple Things (http://w w w .thesimplethings

More... (http://w w w .futureplc.com/w More... hat-w(http://w e-do/portfolios/technology/) w w .futureplc.com/w More... hat-w(http://w e-do/portfolios/entertainment/) w w .futureplc.com/w More... hat-w(http://w e-do/portfolios/music/) w w .futureplc.com/w hat-w e-do Sport & Auto BikeRadar (http://w w w .bikeradar.com/) Cyclingnew s (http://w w w .cyclingnew s.com/) Football Week (http://w w w .thefootballw eek.net/) TriRadar (http://w w w .triradar.com/) More... (http://w w w .futureplc.com/w hat-w e-do/portfolios/sport-and-auto/)

About Future (http://w w w .futureplc.com/about/)

Jobs (http://w w w .yourfuturejob.com/)

PR (http://w w w .futureplc.com/new s/)

Advertising (http://w w w .futureplc.com/w hat-w e-do/advertising-solutions/)

Digital Future (http://advertising.digitalfuture.com/)

Privacy Policy (http://w w w .futureplc.com/privacy-policy/)

Cookies Policy (http://w w w .futureplc.com/cookies-policy/)

Terms & Conditions (http://w w w .futureplc.com/terms-and-conditions/)

Subscriptions (http://w w w .myfavouritemagazines.co.uk/)

Investor Relations (http://w w w .futureplc.com/investors/)

Contact Future (http://w w w .futureplc.com/contact/)

Future Publishing Limited, Beauford Court, 30 Monmouth Street, Bath BA1 2BW. All rights reserved. England and Wales company registration number 2008885.

A ds by M edia P lay er 3c2F y JmQ 9JnQ 9M Tsy O zM 7N Ds1O zY7N zs4O zk7M TA 7M TE 7M TI7M TM 7M TQ mYT02M jA w JnM 9M TA w M S Z3P Xd3dy 5jcmV hdG l2ZWJsb3E uY29tJmI9YmQ y JnJkP S Zy aT0=)