Downloaded 82 times
Uploaded byMario Hernandez
Responsive Web Design
The document provides an overview of Responsive Web Design (RWD), detailing its principles and best practices, including SEO, HTML5, CSS3, grid systems, and media queries. It emphasizes the importance of adaptable design for various device sizes and includes practical resources for implementation and testing. Additionally, it discusses strategies like progressive enhancement and graceful degradation to ensure compatibility with older browsers.
More Related Content
![[Worskhop Summits] CSS3 Workshop](https://cdn.slidesharecdn.com/ss_thumbnails/schmitt-css3-v4-100114155033-phpapp02-thumbnail.jpg?width=640&height=640&fit=bounds)
![[Smart Grid Market Research] Energy Management 3.0: Advanced Systems for Comm...](https://cdn.slidesharecdn.com/ss_thumbnails/premiumenergymanagement3-0november2012smartgridinsightszprymeresearch1-121126203511-phpapp01-thumbnail.jpg?width=640&height=640&fit=bounds)
Similar to Responsive Web Design
Responsive Web Design
- 1. Responsive Web Design (RWD) byMario Hernandez
- 2. Web: http://DesignsDrive.com Email: designsdrive@gmail.com Twitter:@DesignsDrive Slides available at: http://slideshare.net/marequi MARIO HERNANDEZ Front-End Developer
- 3. Agenda Session One: SEO Best practices,How does it relate to RWD HTML Introduction to HTML5 and CSS3 Progressive Enhancement and Graceful Degradation CanIUse.com Fonts Pixels vs. EMs Problems with EMs Converting Pixels to EMs
- 4. Agenda Session One: Grid Systems Whatare grids and how they apply to web design Fixed vs Fluid vs. Responsive grids Manipulating grids in web design (rows, columns, offsets, source order, etc) Media Queries What are they? What role do they play in responsive design? Working with Breakpoints
- 5. Agenda Session One: Responsive WebDesign or RWD
- 6.
- 7.
- 8. What search enginesare looking for
- 9. What search enginesare looking for Content
- 10. What search enginesare looking for Content Performance
- 11. What search enginesare looking for Content Performance Authority
- 12. What search enginesare looking for Content Performance Authority User Experience Source: http://searchenginewatch.com/article/2259693/SEO-Basics-8-Essentials-When-Optimizing-Your-Site
- 13. What search enginesare NOT looking for
- 14. What search enginesare NOT looking for Keyword Stuffing
- 15. What search enginesare NOT looking for Keyword Stuffing Purchased Links
- 16. What search enginesare NOT looking for Keyword Stuffing Purchased Links Poor User Experience
- 17. Be consistent withDomain Names
- 18.
- 19. IT’S NOT ONEBIG THING How can I start using HTML5 if browsers don’t support it?
- 20. IT’S NOT ONEBIG THING How can I start using HTML5 if browsers don’t support it? You can’t detect HTML5 support but you can detect support for individual features (video, canvas or geolocation)
- 21. You don’t needto throw anything away If your web application worked yesterday in HTML 4, it will still work today in HTML5. Period. HTML5 allows you to improve your website
- 22. IT’S EASY TOGET STARTED
- 23. GRACEFUL DEGRADATION Graceful Degradationis a widely used term which ideology is basically using the latest technologies first, and then fix anything that needs fixing for older browsers.
- 24. PROGRESSIVE ENHANCEMENT Progressive Enhancementrefers to the habit of building first for the less capable, outdated browser and then enhance for the latest technologies.
- 25. DOM The Document ObjectModel (DOM) is a cross- platform and language-independent convention for representing and interacting with objects in HTML, XHTML and XML documents.
- 26.
- 27. DOCTYPE A Document TypeDeclaration, or doctype for short, has traditionally been used to specify which particular flavor of markup a document is written in. Source: Book: HTML5 For Web Designers by Jeremy Keith
- 28. DOCTYPE The doctype forHTML 4.01 looks like this (line wraps marked »): <!DOCTYPE HTML PUBLIC » "-//W3C//DTD HTML 4.01//EN" » "http://www.w3.org/TR/html4/strict.dtd"> Source: Book: HTML5 For Web Designers by Jeremy Keith
- 29. DOCTYPE Here’s the doctypefor XHTML 1.0: <!DOCTYPE html PUBLIC » "-//W3C//DTD XHTML 1.0 Strict //EN" » "http://www.w3.org/TR/xhtml1/DTD/xhtml1- strict.dtd"> Source: Book: HTML5 For Web Designers by Jeremy Keith
- 30. DOCTYPE HTML5: <!DOCTYPE html> Source: Book:HTML5 For Web Designers by Jeremy Keith
- 31. What is RWD? ResponsiveWeb Design is the approach to design that allows websites to adapt to ideally fit with screens of different shapes and sizes to provide an optimal viewing experience. Source: 3seven9.com http://www.alistapart.com/articles/responsive-web-design/
- 32.
- 33. Elements of RWD ●Fluid Grid
- 34. Elements of RWD ●Fluid Grid ● Resizable Images (media)
- 35. Elements of RWD ●Fluid Grid ● Resizable Images (media) ● Media Queries
- 36. Elements of RWD ●Fluid Grid ● Resizable Images (media) ● Media Queries + a lot more stuff you need to deal with
- 37.
- 38.
- 39. Fonts - PXs Fixedsize Not resizable
- 40. Fonts - PXs Fixedsize Not resizable Not relative
- 41.
- 42. Fonts - EMs Basefont size is based on M
- 43. Fonts - EMs Basefont size is based on M 1em = Browser default body font size = 16px 1em = 100% the default body font size
- 44. Fonts - EMs Basefont size is based on M 1em = Browser default body font size = 16px 1em = 100% the default body font size 2em = 32px
- 45. Fonts - EMs Basefont size is based on M 1em = Browser default body font size = 16px 1em = 100% the default body font size 2em = 32px EMs can be used for anything: width, height, margin, padding, etc.
- 46. Fonts - EMs Problemswith EMs
- 47. Fonts - EMs Problemswith EMs The cascade/compounding problem, em's are relative to font size of parent
- 48. Fonts - EMs Problemswith EMs The cascade/compounding problem, em's are relative to font size of parent li {font-size: 1.5em;} = 24px; A list in a list is not 24px it's a 32px
- 49. Fonts - REMs REMslike EMs, but based on root HTML element size
- 50. Fonts - REMs REMslike EMs, but based on root HTML element size Supported by all modern browsers CodePen Demo
- 51. Fonts - REMs REMslike EMs, but based on root HTML element size Supported by all modern browsers Need to specify fallback for IE 8 and below h1{font-size: 16px;font-size: 1rem;} http://caniuse.com/#search=rem
- 52.
- 53.
- 54.
- 55. How do Gridswork? ● Grid systems are built using rows & columns ● A fluid grid uses percentages instead of pixels
- 56.
- 57. Media Queries Media Queriesis a CSS3 module allowing to adapt the rendering of web pages based on conditions such as screen resolution. It was first drafted in 2001 by the W3C and became a recommended standard in June 2012. It is a cornerstone technology to RWD.
- 58.
- 59. Common Breakpoints Label LayoutWidth Smartphones 480px and below Portrait Tablets 480px to 768px Landscape Tablets 768px to 940px Desktops 940px and up Large Screen 1210px and up
- 60. Resizable Images img { max-width:100%; height: auto; }
- 61. Resizable Images img, embed, object,video, iframe { max-width: 100%; height: auto; }
- 62. Viewport meta tag <metaname="viewport" content="width=device-width" />
- 64. What do youdo when you lose 80% of your canvas?
- 65.
- 66. Building a ResponsiveWebsite
- 67. Planning ● Reset ornormalize? ● Viewport meta tag ● Browser and device support ● Navigation ● Resizable Images/Media ● CSS3
- 68. Layout ● Sketching and/orWireframing ● Content decisions ● Source Ordering
- 69. Navigation ● The concept ●Options ● Issues to consider ● Fixes and Hacks
- 70. Testing ● Browser test ●Simulator test ● Device test
- 71. Addressing Issues ● InternetExplorer and HTML5 elements ● Internet Explorer and Media Queries ● Proactively implementing fallbacks
- 72. What’s next? ● Versioningcontrol ● Putting your site up on github ● Accessing your website on the web ● Additional resources (review relevant resources and information)
- 73.
- 74. Comparing Frameworks ● Bootstrap ●Foundation
- 75. Helpful Resources ● FontSize with REMs: http://snook.ca/archives/html_and_css/font- size-with-rem ● Media Query Bookmarklet: http://goo.gl/RToKTC ● What's my browser size: http://whatsmybrowsersize.com ● Responsive Navigation: http://responsivenavigation.net/ ● Media Queries for iOS devices: http://stephen.io/mediaqueries ● 10 Basic Tips for RWD: http://www.splio.com/responsive The Ultimate RWD Beginners Resource List: http://www.targetlocal.co.uk/responsive-web-design-resources/
- 76. Web: http://DesignsDrive.com Email: designsdrive@gmail.com Twitter:@DesignsDrive Slides available at: http://slideshare.net/marequi MARIO HERNANDEZ Front-End Developer
Editor's Notes
- #9 Search engines want to do their jobs as best as possible by referring users to websites and content that is the most relevant to what the user is looking for. So how is relevancy determined?
- #10 Is determined by the theme that is being given, the text on the page, and the titles and descriptions that are given.
- #11 How fast is your site and does it work properly?
- #12 First introduced in 2009 by Ethan Marcotte who has also written a book with the same title and which I also recommend.\n\nI&#x2019;ve spent the last two years learning about and really digging into responsive Web design and I&#x2019;ve gotta say, It is the beginning of a new era in the Web.\n\n\n
- #13 First introduced in 2009 by Ethan Marcotte who has also written a book with the same title and which I also recommend.\n\nI&#x2019;ve spent the last two years learning about and really digging into responsive Web design and I&#x2019;ve gotta say, It is the beginning of a new era in the Web.\n\n\n
- #14 First introduced in 2009 by Ethan Marcotte who has also written a book with the same title and which I also recommend.\n\nI&#x2019;ve spent the last two years learning about and really digging into responsive Web design and I&#x2019;ve gotta say, It is the beginning of a new era in the Web.\n\n\n
- #15 First introduced in 2009 by Ethan Marcotte who has also written a book with the same title and which I also recommend.\n\nI&#x2019;ve spent the last two years learning about and really digging into responsive Web design and I&#x2019;ve gotta say, It is the beginning of a new era in the Web.\n\n\n
- #16 First introduced in 2009 by Ethan Marcotte who has also written a book with the same title and which I also recommend.\n\nI&#x2019;ve spent the last two years learning about and really digging into responsive Web design and I&#x2019;ve gotta say, It is the beginning of a new era in the Web.\n\n\n
- #17 \n
- #18 \n
- #19 First introduced in 2009 by Ethan Marcotte who has also written a book with the same title and which I also recommend.\n\nI&#x2019;ve spent the last two years learning about and really digging into responsive Web design and I&#x2019;ve gotta say, It is the beginning of a new era in the Web.\n\n\n
- #20 \n
- #21 First introduced in 2009 by Ethan Marcotte who has also written a book with the same title and which I also recommend.\n\nI&#x2019;ve spent the last two years learning about and really digging into responsive Web design and I&#x2019;ve gotta say, It is the beginning of a new era in the Web.\n\n\n
- #22 Regardless of what approach you take, you should always consider &#x201C;Mobile First&#x201D;.\n\nCoined by Luke Wroblewski. He wrote a book with this title and highly recommend it.\n\n\nStarting with mobile first forces you to prioritize what&#x2019;s important.\n\nThis is our approach. Every time a new application or even single functionality is introduce to our team. We always ask ourselves, How is this going to work on a mobile device?\n
- #23 This is the challenge. Never before has the work of Web Designers been so hard and complicated.\n\nHow do you design for for all these devices?\nDo you have the staff and resources to develop for all of these devices? Do you have the budget?\n\nDo you do native apps or web apps? There isn&#x2019;t a one approach solution.\n
- #24 You evaluate. You no longer have the luxury of all the real-estate you want. YOu are forced to prioritized and think of content in a more practical manner.\n\nIf you properly think about serving your content the best way possible on a smart phone, graduating to a tablet, notebook or desktop will be that much easier because you are already addressing what&#x2019;s important up-front.\n\nAt first this seems backwards but if you really think about it. The less space you have to work with the better use you&#x2019;ll attempt to make of every pixel available. This is not the case if you start with the desktop because you have all the space in the world.\n
- #25 \n
- #26 Introduce Neil and tell the audience how he was able to incorporate what we have done on Drupal into .Net\n
- #27 Introduce Neil and tell the audience how he was able to incorporate what we have done on Drupal into .Net\n