Responsive web design
•
1 like•680 views
The document discusses responsive web design and best practices for building flexible layouts. It defines fixed and fluid layouts, and explains how to design fluid layouts using percentages and ems rather than pixels. It covers principles of responsive web design like using a mobile-first approach and progressive enhancement. Key coding best practices are also outlined, such as proper doctype declaration, external CSS/JS, semantic HTML, and accessibility.
Report
Share
Related slideshows
Responsive web design
- 1. Richa Goel
- 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
- 4. Fixed and Fluid Layouts 4
- 5. 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 text 5
- 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 New Perspectives on HTML and CSS, 6th 6 Edition
- 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; 7
- 8. Floating Elements • Clearing a float clear: position; 8
- 9. Flexible Layout: Example 1 <h1>Digital Media Showcase <a href="https://showc.org"> Read more »</a></h1> -9 -
- 10. 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 -10 -
- 11. 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; } -11 -
- 12. 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 -12 -
- 13. 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; } -13 -
- 14. Why 11/24 not 11/16? The <a> is INSIDE the <h1> (see?) <h1>Digital Media Showcase <a href="https://showc.org"> 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) So the desired RELATIVE SIZE of the <a> is 11/24. -14 -
- 15. Flexible Everything • Fluid or Liquid Layouts • Proportionally Scaled Images • Media Queries
- 16. 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 */ }
- 17. Flexible Everything - Proportionally Scaled Images • Hiding and Revealing Portions of Images • Deliver different images depending on device • Foreground Images That Scale With the Layout
- 18. 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. 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
- 21. Responsive web design is the concept of developing a website in a way that helps the layout adjust according to the user’s computer screen resolution.
- 22. 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.
- 23. Food Sense
- 24. Clean Air Commute Chall
- 25. FlexSlider
- 26. You get the point!
- 27. 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
- 28. 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! -28 -
- 29. CSS3 & Media Queries In your CSS: @media screen and (min-width: 480px) { .content { float: left; } .social_icons { display: none } // and so on... }
- 30. CSS3 & Media Queries On the header of your website: <link rel="stylesheet" href="this.css" media="(min-width: 960px)">
- 31. 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).
- 32. Popular Viewport Sizes
- 33. How do we design for RWD Simple: Use the Mobile First Approach and favor Progressive Enhancement instead of the traditional Graceful Degradation
- 34. 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 )
- 35. 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
- 36. 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
- 37. Progressive Enhancement Benefits: •Accessibility: PE pages are by nature more accessible. •SEO: Since basic content is always accessible
- 38. 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
- 39. 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
Editor's Notes
- Most of us should be familiar with Flexible our Fluid layouts. This is the practice of using percents and “ems” as your unit of measurement rather than using finite values like pixels.While this does allow the layout to resize based on screen size, it doesn’t necessary optimize the experience.An em was originally equal to the size of the metal block used to cut a single letter of type for a specific font. It was roughly equivalent to the width of a capital letter “M”.
- A media query allows us to target not only certain device classes, but to actually inspect the physical characteristics of the device rendering our work.
- YOU’RE STARTING FROM SCRATCHDeveloping a whole new website or web application is a challenging process. You won’t know if the site will be successful until it’s live and in the world, so creating a separate mobile site or a mobile app in tandem with a website project could be a big waste time and money. It’s more efficient to get your new site performing well before you create an additional mobile site or application.YOU WANT TO KEEP COSTS LOWSolid responsive solutions require additional design and front-end development time, but doesn’t too heavily impact application development. It could take around 20-30 per cent longer to develop a responsive site, but it’s still faster than creating an additional mobile site or app. Developing a site this way also means that you only need to develop, manage, and maintain the one site, so it can reduce these costs too.YOU WANT IT TO WORK EVEN WHEN NEW DEVICES ARE RELEASEDA mobile site needs to be able to recognize the user’s device; when new devices are released, the site needs to be updated. As the responsive solution only recognizes the browser’s width, no new updates would need to be made. This means it’s much more future-proof and scalable.
- Source: http://designmodo.com/responsive-design-examples/#ixzz1dqSBtv2u
- Responsive web design is the concept of developing a website in a way that helps the layout adjust according to the user’s computer screen resolution.