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.

Responsive web design


Published on

Published in: Technology

Responsive web design

  1. 1. Richa Goel
  2. 2. Contents• Fluid layouts• Difference between fixed and fluid layouts• Designing fluid layouts for different screen resolutions• What is responsive web design• Principles of responsive web design• Web page coding best practices
  3. 3. Fixed and Fluid Layouts 4
  4. 4. Fixed-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 text5
  5. 5. 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 New Perspectives on HTML and CSS, 6th 6 Edition
  6. 6. 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; 7
  7. 7. Floating Elements• Clearing a float clear: position; 8
  8. 8. Flexible Layout: Example 1 <h1>Digital Media Showcase <a href=""> Read more &raquo;</a></h1> -9 -
  9. 9. Flexible Layout: Example 1start styling it<style>body { background-color: #DCDBD9; color: #2C2C2C; font: normal 100% Cambria, Georgia, serif;}slight changes:heavy serifs; grey background -10 -
  10. 10. Flexible Layout: Example 1traditional 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;} -11 -
  11. 11. Flexible Layout: Step 1To create a flexible version, wemove to ems. (Whats 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 elements default size for h1. so lets scale h1 to result = target/context = 24/16 = 1.5em and likewise, h1 a to 11/24 = 0.4583333333333 em -12 -
  12. 12. Flexible Layout: Step 1styled 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;} -13 -
  13. 13. Why 11/24 not 11/16?The <a> is INSIDE the <h1> (see?)<h1>Digital Media Showcase <a href=""> Read more &raquo;</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)So the desired RELATIVE SIZE of the <a> is 11/24. -14 -
  14. 14. Flexible Everything• Fluid or Liquid Layouts• Proportionally Scaled Images• Media Queries
  15. 15. 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 */ }
  16. 16. Flexible Everything -Proportionally ScaledImages• Hiding and Revealing Portions of Images• Deliver different images depending ondevice• Foreground Images That Scale With theLayout
  17. 17. 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 mediaqueries
  18. 18. 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
  19. 19. Responsive web design is the concept ofdeveloping a website in a way that helps the layout adjust according to the user’s computer screen resolution.
  20. 20. Why is it relevant?RWD allows us to tweak the layout andpresent the relevant information first:hours, phone number, directions and perhapsa link to the menu.Meanwhile back at your desk, the restaurant’spage has all the bells and whistles you didn’tcare for while browsing on your phone.
  21. 21. Food Sense
  22. 22. Clean Air Commute Chall
  23. 23. FlexSlider
  24. 24. You get the point!
  25. 25. Responsive Web DesignRWD is the concept ofdeveloping a website in away that allows thelayout to adjustaccording to theuser’s screen resolution(view port) using mediaqueries
  26. 26. Responsive WebDesignWhy?• 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! -28 -
  27. 27. CSS3 & Media QueriesIn your CSS:@media screen and (min-width: 480px) { .content { float: left; } .social_icons { display: none } // and so on...}
  28. 28. CSS3 & Media QueriesOn the header of your website:<link rel="stylesheet" href="this.css"media="(min-width: 960px)">
  29. 29. CSS3 & Media QueriesBy restricting CSS rules to a certainwidth of the device displaying a webpage, one can tailor the pagesrepresentation to devices with varyingscreen resolution (view port).
  30. 30. Popular Viewport Sizes
  31. 31. How do wedesign for RWDSimple:Use the Mobile First Approachand favor ProgressiveEnhancement instead of thetraditional GracefulDegradation
  32. 32. 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 )
  33. 33. 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
  34. 34. Progressive EnhancementProgressive Enhancement consists of thefollowing core principles:•basic content and functionality should be accessible to allweb browsers•semantic markup contains all content•enhanced layout  external CSS•enhanced behavior  external JavaScript•end-user web browser preferences are respected
  35. 35. Progressive EnhancementBenefits:•Accessibility: PE pages are bynature more accessible.•SEO: Since basic content is alwaysaccessible
  36. 36. Best Coding Practices• Always close your tags• Declare the Correct DocType• Never Use Inline Styles• Place all External CSS Files Within the Head Tag• Consider Placing Javascript Files at the Bottom• Keep Your Tag Names Lowercase
  37. 37. Best Coding Practices• Wrap Navigation with an Unordered List• All Images Require “Alt” Attributes• Use a CSS Reset• If Building a Blog, Save the H1 for the Article Title• Work with tables intelligently