Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.



Published on

html5 responsiveness

Published in: Internet
  • Be the first to comment

  • Be the first to like this


  1. 1. Responsiveness 2
  2. 2. Layouts 3
  3. 3. Fixed and Fluid Layouts
  4. 4. Devices 5
  5. 5. 6Fixed-width and Fluid Layouts  Fixed-width layout: Web designer defines exact size of every table element in absolute units such as pixels.  Gives designer precise control over appearance, but does not take into account the size of the browser window  Fluid layout: one or more table elements are sized as a percentage of the page width  Page content flows into blank areas as the size of the browser window increases, but sometimes results in long lines of text
  6. 6. Elastic Layouts  Some designers propose the use of elastic layouts, in which all measurements are expressed relative to the default font size using the em unit  If a user or the designer increases the font size, the width, height, and location of all of the other page elements, including images, change to match
  7. 7. Floating Elements  Floating an element takes that element out of the normal flow of the document and positions it along the left or right edge of its containing element float: position;
  8. 8. Floating Elements  Clearing a float clear: position;
  9. 9.  The em size unit is recommended by the W3C.  1em is equal to the current font size. The default text size in browsers is 16px. So, the default size of 1em is 16px.  The size can be calculated from pixels to em using this formula: pixels/16=em em font size 10
  10. 10. Flexible Layout: Example 1 <h1>Digital Media Showcase <a href=""> Read more &raquo;</a></h1>
  11. 11. Flexible Layout: Example 1 start styling it <style> body { background-color: #DCDBD9; color: #2C2C2C; font: normal 100% Cambria, Georgia, serif; } slight changes: heavy serifs; grey background
  12. 12. Flexible Layout: Example 1 traditional styling in px: h1 { font-size: 24px; font-style: italic; font-weight: normal; } h1 a { color: #747474; font: bold 11px Calibri, Optima, Arial, sans-serif; letter-spacing: 3.6px; text-transform: uppercase; text-decoration: none; }
  13. 13. Flexible Layout: Step 1 To create a flexible version, we move to ems. (What's an em?) The 'average' width of a character, in current default font. originally: the width of the 'm' character "Contextual healing": Our 'target' font size is 24px. Our 'context' font size is 16 px – the containing element's default size for h1. so let's scale h1 to result = target/context = 24/16 = 1.5em and likewise, h1 a to 11/24 = 0.4583333333333 em
  14. 14. Flexible Layout: Step 1 styled in ems: h1 { font-size: 1.5em; /* 24 px/36 px */ font-style: italic; font-weight: normal; } h1 a { color: #747474; font: bold 0.458333333333em Calibri, Optima, Arial, sans-serif; /* 11px/24px */ letter-spacing: 0.15em; text-transform: uppercase; text-decoration: none; }
  15. 15. Why 11/24 not 11/16? The <a> is INSIDE the <h1> (see?) <h1>Digital Media Showcase <a href=""> Read more</a></h1> and so the CONTEXT of the <a> has its default set to 24px in the original example, or (1.5em in the relative version)
  16. 16. Flexible Everything • Fluid or Liquid Layouts • Proportionally Scaled Images • Media Queries 17
  17. 17. Flexible Everything – Flexible Layout • Use percents and ems • Don’t use finite values like pixels • How do you convert? It’s easy: .figure {width: 20.833%; /* 200px / 960px */ } .headerText {font-size: 0.75em; /* 12px / 16px */ } 18
  18. 18. Flexible Everything - Proportionally Scaled Images 19 • Hiding and Revealing Portions of Images • Deliver different images depending on device • Foreground Images That Scale With the Layout
  19. 19. Flexible Everything – Media Queries • They’ve been around since CSS 2.1 • You’ve already used them <link rel="stylesheet" type="text/css" href=“screen.css" media="screen" /> <link rel="stylesheet" type="text/css" href="print.css" media="print" /> • When CSS3 came out the W3C extended media queries 20
  20. 20. Responsive Web Design 21
  21. 21. Who needs RWD? You need RWD if:  You’re starting from scratch.  You want to keep costs low  You want it to work even when new devices are released 22
  23. 23. Why is it relevant? RWD allows us to tweak the layout and present the relevant information first: hours, phone number, directions and perhaps a link to the menu. Meanwhile back at your desk, the restaurant’s page has all the bells and whistles you didn’t care for while browsing on your phone. 24
  24. 24. FoodSense 25
  25. 25. Clean Air Commute Challenge 26
  26. 26. FlexSlider 27
  27. 27. OK! YOU GET THE POINT! 28
  28. 28. Responsive Web Design  RWD is the concept of developing a website in a way that allows the layout to adjust according to the user’s screen resolution  (view port) using media queries 29
  29. 29. Responsive Web Design Why? • Regular websites are almost useless on mobile devices • Creating 'mobile' versions of websites is impractical • New devices constantly appear • Life is all about change; get with it!
  30. 30. CSS3 & Media Queries In your CSS: @media screen and (min-width: 480px) { .content { float: left; } .social_icons { display: none } // and so on... } 31
  31. 31. CSS3 & Media Queries On the header of your website: <link rel="stylesheet" href="this.css" media="(min-width: 960px)"> 32
  32. 32. CSS3 & Media Queries By restricting CSS rules to a certain width of the device displaying a web page, one can tailor the page's representation to devices with varying screen resolution (view port). 33
  33. 33. Popular Viewport Sizes 34
  34. 34. How do we design for RWD Simple: Use the Mobile First Approach and favor Progressive Enhancement instead of the traditional Graceful Degradation 35
  35. 35. Graceful Degradation • Focuses on building the website for the most advanced/capable browsers. • Older browsers are expected to have a poor, but passable experience. • Small fixes may be made to accommodate a particular browser ( they are not the focus ) 36
  36. 36. Progressive Enhancement • Focuses on the content. ( not browsers ) • Think from the content out. ( Peanut M&M ) – Peanut: Content marked up in rich semantic (x)html – Coated with rich creamy CSS – Added JS as the hard candy shell 37
  37. 37. Progressive Enhancement Progressive Enhancement consists of the following core principles: •basic content and functionality should be accessible to all web browsers •semantic markup contains all content •enhanced layout  external CSS •enhanced behavior  external JavaScript •end-user web browser preferences are respected 38
  38. 38. Progressive Enhancement Benefits: •Accessibility: PE pages are by nature more accessible. •SEO: Since basic content is always accessible 39
  39. 39. Step 1  Add the view port meta tag , to make the viewport to fit the device width. <meta name=”viewport” content=”width=device-width, minimum-scale=1.0, maximum-scale=1.0″ /> 40
  40. 40. Step 2 <body> <div id="wrapper"> <div id="header"> <img src="logo.png" id="logo"/> </div> <div id="content"> </div> <div id="sidebar"> </div> </div> </body>  The wrapper is used to adjust its width based on the screen size of the device. 41
  41. 41. Step 3 – Add some media queries /*media queries*/ @media screen and (max-width:600px) { #sidebar { display: none; } #wrapper { width:100% } #content {  Just change #sidebars display to none when your screen size is less than 600px.Also we have to make the wrapper of the website and the content area to cover the entire width of the screen.Hence make that 100%(First content area is 80% and sidebar will be 20% width). 42