You can use percentages for both page elements and text. Ems are used for text,

Transcription

1 By Megan Doutt

2 Speaking broadly, responsive web design is about starting from a reference resolution, and using media queries to adapt it to other contexts. - Ethan Marcotte (creator of the term Responsive Web Design) Responsive web design is the approach that suggests that design and development should respond to the user s behavior and environment based on screen size, platform and orientation. - Kayla Knight

3 Flexible Layouts ems and percentages are the ground work for a flexible layout. You can use percentages for both page elements and text. Ems are used for text,

4 Instead of establishing the size of your page elements with pixels, you should use percentages when working with RWD. This is the best way to build a flexible grid which is crucial for responsive web design. Ethan Marcotte has a very handy formula for figuring out proportional sizes based on an image Target / context = result Example: Say you want a font size of 24px, and you use a restyle CSS sheet that sets the default font size to 16px. You would simply divide 24 by 16 and get the resulting value in a flexible percentage. 24 (target) / 16 (context) = 1.5 (result) If the result in your equation is a really long decimal, don t round up or down. That number perfectly represents your desired text size.

5 The target / context = result formula also works for page layout. But it s a little trickier. Example: It is easy to apply the target/ context = result formula to widths of elements. Starting from a mock up image. In your mock up the body element to 600px. And you have a column that is 500px wide. To find the percentage you just take your target (500px) and divide it by your context (600px) which gives you a result of or 83.33%. Where it gets tricky The context is determined by the parent of your element. So say inside your column there is another column that is 200px wide. Then your formula would be 200 (target) / 500 (size of containing element) which would equal.4 or 40%

6 The context is different for margins and padding so remember. When setting flexible margins, the context is the width of the element s container. When setting flexible padding, the context is the width of the element itself. Example margins: In your mock up there is a margin of 24 px on an <article> tag contained in div class= container with a width of 400px. Your formula would be 24/400=.06. Which would be placed in our CSS as 6%. Example padding: In your <article> tag you want 24px of padding. You would need the width of your <article> tag. Say it s 200px. Then your formula would be 24/200= 12% If the width of your tag is not defined it inherits the width of it s containing element.

7 Ems and percentages work basically the same way when used for fonts. 1 em = 100% What Is an em? An em is a unit of measurement brought to web design from graphic design. 1 em is equal to what ever the default text size is for your web site. If not set, the em uses the browser default which is usually 16 px. So if you set the text to 2ems in your CSS without setting the base text size, your text would be 32 px.

8 Where it gets tricky Font size is an inherited property Example: Say you set the base font size of your web page to 16px. In your page you have a div tag that has the font size set to 24px. All of the tags inside your div tag would inherit that text size as their base size. Inside your div tag is a <p> tag that you want to be the default (16px) text size. Because of inheritance your <p> tag would also be 24px. To change that your formula would look like this. 16(target) / 24(context) = But any tags inside the <p> tag would inherit the base size set in the <p> tag. So if you had a <strong> tag that s size was set to.5em it would be really be 8px tall because the base size of 16px is inherited from the <p> tag and then multiplied by.5 For more information on font sizing read pages in CSS the missing manual

9 Images are somewhat difficult to incorporate into a responsive site with out a little work. Max-width property A very handy CSS property is the max-width property. You set a percentage based on the containing element and the browser automatically resizes when the screen size changes. Works on img, embed, object, and video tags. Problems No support in Internet Explorer 6 and below You can include a separate IE6 specific style sheet where max-width: 100% property is replaced with the width: 100% A word of caution, you shouldn t rely on your browser to scale up images or video. The quality is almost always very bad.

10 More Problems with Windows based browsers Adds artifacts to images when scaled up Only effects IE7 and lower. There is a work around called AlphaImageLoader. Ethan Marcotte has created some JavaScript to automate the AlphaImageLoader process. You can download it at You can also set the overflow of an image to hidden in the CSS. This however will clip the image and can degrade the meaning of your page.

11 You can also ask JavaScript to resize your images for you. Filament Group s Responsive Images The Filament Group has put together a tutorial that not only makes images responsive, it also reduces the resolution based on the device viewing the page. It is written so only the files that are right for the device are downloaded. This link takes you to the latest version.

12 Apple Automatic Resizing Stop it with this code placed in the <head> section (directly above your <title> is a good place) <meta name= viewport content= width=device-width, initial-scale=1, maximum-scale=1 This will stop devices from resizing your page automatically. CSS Working Group also added rule to CSS that works the same as the meta tag, but you place it in your style { width: device-width; initial-scale: 1; maximum-scale: 1; }

13 Media queries allow us to target certain device classes and detect the physical characteristics of the device being used. Parts 1. A media type. The available types are: all braille, embossed handheld print projection screen speech tty tv

14 2. And the actual query enclosed inside parentheses using a media feature to inspect, followed by the target value. Available media features are: color color-index min-aspect-ratio max-aspect-ratio device-aspect-ratio device-height min-device-height max-device-height min-device-length max-device-length grid height min-height max-height monochrome min-monochrome max-monochrome orientation min-resolution max-resolution scan min-width max-width There are also some browser specific queries. Media type Target value <link rel= stylesheet media= screen (max-width: 800px) href= newcss.css /> Media feature

15 You can place them in your html in the link attribute or in your CSS file with directive or embed the media query with directive If you wanted to put the media query in your link it would look like this <link rel= stylesheet type= text/css media= screen href= newcss.css /> If you wanted to link another stylesheet in your CSS it would look like url(css/newcss.css) screen (min-width: 481px) If you wanted to embed the media query in your CSS it would look like screen and (min-width: 481px) { /* Your different CSS would go here */ }

16 You can use media quires to change your design as you encounter breaking points at different screen sizes. These are just a few. To hide unimportant content for handheld devices To adjust columns To use flexible widths To tighten up white space To adjust font sizes To change navigation menus To change background images For more detail read pages in CSS: The Missing Manuel

17 While most modern browsers support media queries, there are still many in use today that do not. Browsers that Support Media Queries: Opera version 9.5 and newer Firefox version 3.5 and newer Safari 3+ Chrome Internet Explorer 9 WebKit-based Mobile Safari HP s webos Android s browser But widespread doesn t mean universal

18 There are a number of JavaScript based work arounds for older browsers. The Two most recommended are css-mediaqueries.js and respond.js css-mediaqueries.js Hasn t had a ton of active development Feature rich lots of code and slower download time respond.js Simply patches support for min-width and max-width queries. Does need a slight hack to work. You have to put /*/mediaquery*/ at the end of your media query. respond.js simply looks for this comment and is able to grab it faster, which means faster loading times.

19 According to many designers it is best to start thinking of your site with mobile first in mind. This way your most important content is established and ease of access to it is much larger. It is also a handy work around if you are trying to reach audiences who don t support media queries and don t have JavaScript. You can think desktop first if you are sure that s your audience, but try and be direct about the point of your website. If you design mobile first, you create agreement on what matters most. You can then apply the same rational to the desktop/laptop version of the web site. We agreed that this was the most important set of features and content for our customers and business- why should that change with more screen space? -Luke Wroblewski

20 It is important to remember your HTML source order when working with responsive web design. To ensure your most important content comes first (I believe thinking mobile first helps with this) Remember when using percentage based widths that adding borders and padding actually increase the size of your page elements. To have the padding and border be included in your set size you need to reset the box model with this code in your CSS. * { -moz-box-sizing: border-box; box-sizing: border-box; }

21 Responsive Web Design is a tool for designers to use It is hard, but it wouldn t be design if it were easy Know your audience! This is critical! If you are using JavaScript to create fluid images, remember that not all users have JavaScript on their devices. I think it s wise to think mobile first to avoid problems with users who don t support media queries and JavaScript. Remember font-size is an inherited property.

22 As designers shift to a responsive way of thinking, so will the web. I think this is a very exciting time to learn about responsive web design, and it will become more exciting in the years to come.

23 -for-responsive-web-design/ US/docs/Web/Guide/CSS/Media_queries CSS3: The Missing Manuel by David Sawyer McFarland Responsive Web Design by Ethan Marcotte