Responsive Web Design

4,761 views
4,724 views

Published on

A hands-on introduction to Responsive Web Design presented by Mario Hernandez at Socal CodeCamp 2012, San Diego .Net User Group 2013, San Diego SoCal CodeCamp 2013 at UCSD & SoCal CodeCamp 2013 at USC, Online Webinars throughout 2014.

Published in: Design, Business, Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
4,761
On SlideShare
0
From Embeds
0
Number of Embeds
2,581
Actions
Shares
0
Downloads
78
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide
  • 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?
  • Is determined by the theme that is being given, the text on the page, and the titles and descriptions that are given.
  • How fast is your site and does it work properly?
  • First introduced in 2009 by Ethan Marcotte who has also written a book with the same title and which I also recommend.\n\nI’ve spent the last two years learning about and really digging into responsive Web design and I’ve gotta say, It is the beginning of a new era in the Web.\n\n\n
  • First introduced in 2009 by Ethan Marcotte who has also written a book with the same title and which I also recommend.\n\nI’ve spent the last two years learning about and really digging into responsive Web design and I’ve gotta say, It is the beginning of a new era in the Web.\n\n\n
  • First introduced in 2009 by Ethan Marcotte who has also written a book with the same title and which I also recommend.\n\nI’ve spent the last two years learning about and really digging into responsive Web design and I’ve gotta say, It is the beginning of a new era in the Web.\n\n\n
  • First introduced in 2009 by Ethan Marcotte who has also written a book with the same title and which I also recommend.\n\nI’ve spent the last two years learning about and really digging into responsive Web design and I’ve gotta say, It is the beginning of a new era in the Web.\n\n\n
  • First introduced in 2009 by Ethan Marcotte who has also written a book with the same title and which I also recommend.\n\nI’ve spent the last two years learning about and really digging into responsive Web design and I’ve gotta say, It is the beginning of a new era in the Web.\n\n\n
  • \n
  • \n
  • First introduced in 2009 by Ethan Marcotte who has also written a book with the same title and which I also recommend.\n\nI’ve spent the last two years learning about and really digging into responsive Web design and I’ve gotta say, It is the beginning of a new era in the Web.\n\n\n
  • \n
  • First introduced in 2009 by Ethan Marcotte who has also written a book with the same title and which I also recommend.\n\nI’ve spent the last two years learning about and really digging into responsive Web design and I’ve gotta say, It is the beginning of a new era in the Web.\n\n\n
  • Regardless of what approach you take, you should always consider “Mobile First”.\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’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
  • 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’t a one approach solution.\n
  • 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’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’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
  • \n
  • Introduce Neil and tell the audience how he was able to incorporate what we have done on Drupal into .Net\n
  • Introduce Neil and tell the audience how he was able to incorporate what we have done on Drupal into .Net\n
  • Responsive Web Design

    1. 1. Responsive Web Design (RWD) by Mario Hernandez
    2. 2. Web: http://DesignsDrive.com Email: designsdrive@gmail.com Twitter: @DesignsDrive Slides available at: http://slideshare.net/marequi MARIO HERNANDEZ Front-End Developer
    3. 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. 4. Agenda Session One: Grid Systems What are 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. 5. Agenda Session One: Responsive Web Design or RWD
    6. 6. mariohernandez.github.io/responsive Our Project
    7. 7. SEO Search Engine Optimization
    8. 8. What search engines are looking for
    9. 9. What search engines are looking for Content
    10. 10. What search engines are looking for Content Performance
    11. 11. What search engines are looking for Content Performance Authority
    12. 12. What search engines are looking for Content Performance Authority User Experience Source: http://searchenginewatch.com/article/2259693/SEO-Basics-8-Essentials-When-Optimizing-Your-Site
    13. 13. What search engines are NOT looking for
    14. 14. What search engines are NOT looking for Keyword Stuffing
    15. 15. What search engines are NOT looking for Keyword Stuffing Purchased Links
    16. 16. What search engines are NOT looking for Keyword Stuffing Purchased Links Poor User Experience
    17. 17. Be consistent with Domain Names
    18. 18. HTML5 Document Object Model (DOM)
    19. 19. IT’S NOT ONE BIG THING How can I start using HTML5 if browsers don’t support it?
    20. 20. IT’S NOT ONE BIG 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. 21. You don’t need to 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. 22. IT’S EASY TO GET STARTED
    23. 23. GRACEFUL DEGRADATION Graceful Degradation is a widely used term which ideology is basically using the latest technologies first, and then fix anything that needs fixing for older browsers.
    24. 24. PROGRESSIVE ENHANCEMENT Progressive Enhancement refers to the habit of building first for the less capable, outdated browser and then enhance for the latest technologies.
    25. 25. DOM The Document Object Model (DOM) is a cross- platform and language-independent convention for representing and interacting with objects in HTML, XHTML and XML documents.
    26. 26. DOM
    27. 27. DOCTYPE A Document Type Declaration, 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. 28. DOCTYPE The doctype for HTML 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. 29. DOCTYPE Here’s the doctype for 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. 30. DOCTYPE HTML5: <!DOCTYPE html> Source: Book: HTML5 For Web Designers by Jeremy Keith
    31. 31. What is RWD? Responsive Web 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. 32. http://www.abookapart.com/products/responsive-web-design
    33. 33. Elements of RWD ● Fluid Grid
    34. 34. Elements of RWD ● Fluid Grid ● Resizable Images (media)
    35. 35. Elements of RWD ● Fluid Grid ● Resizable Images (media) ● Media Queries
    36. 36. Elements of RWD ● Fluid Grid ● Resizable Images (media) ● Media Queries + a lot more stuff you need to deal with
    37. 37. Fonts
    38. 38. Fonts - PXs Fixed size
    39. 39. Fonts - PXs Fixed size Not resizable
    40. 40. Fonts - PXs Fixed size Not resizable Not relative
    41. 41. Fonts - EMs
    42. 42. Fonts - EMs Base font size is based on M
    43. 43. Fonts - EMs Base font size is based on M 1em = Browser default body font size = 16px 1em = 100% the default body font size
    44. 44. Fonts - EMs Base font size is based on M 1em = Browser default body font size = 16px 1em = 100% the default body font size 2em = 32px
    45. 45. Fonts - EMs Base font 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. 46. Fonts - EMs Problems with EMs
    47. 47. Fonts - EMs Problems with EMs The cascade/compounding problem, em's are relative to font size of parent
    48. 48. Fonts - EMs Problems with 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. 49. Fonts - REMs REMs like EMs, but based on root HTML element size
    50. 50. Fonts - REMs REMs like EMs, but based on root HTML element size Supported by all modern browsers CodePen Demo
    51. 51. Fonts - REMs REMs like 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. 52. Grid Systems
    53. 53. Skeleton Neat csswizardry-grids Foundatio Singularity GS Sussy Profound Grid Responsive Grid System
    54. 54. Why Grids?
    55. 55. How do Grids work? ● Grid systems are built using rows & columns ● A fluid grid uses percentages instead of pixels
    56. 56. Media Queries
    57. 57. Media Queries Media Queries is 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. 58. Devices
    59. 59. Common Breakpoints Label Layout Width Smartphones 480px and below Portrait Tablets 480px to 768px Landscape Tablets 768px to 940px Desktops 940px and up Large Screen 1210px and up
    60. 60. Resizable Images img { max-width: 100%; height: auto; }
    61. 61. Resizable Images img, embed, object, video, iframe { max-width: 100%; height: auto; }
    62. 62. Viewport meta tag <meta name="viewport" content="width=device-width" />
    63. 63. What do you do when you lose 80% of your canvas?
    64. 64. http://www.abookapart.com/products/mobile-first
    65. 65. Building a Responsive Website
    66. 66. Planning ● Reset or normalize? ● Viewport meta tag ● Browser and device support ● Navigation ● Resizable Images/Media ● CSS3
    67. 67. Layout ● Sketching and/or Wireframing ● Content decisions ● Source Ordering
    68. 68. Navigation ● The concept ● Options ● Issues to consider ● Fixes and Hacks
    69. 69. Testing ● Browser test ● Simulator test ● Device test
    70. 70. Addressing Issues ● Internet Explorer and HTML5 elements ● Internet Explorer and Media Queries ● Proactively implementing fallbacks
    71. 71. What’s next? ● Versioning control ● Putting your site up on github ● Accessing your website on the web ● Additional resources (review relevant resources and information)
    72. 72. Front-End Frameworks
    73. 73. Comparing Frameworks ● Bootstrap ● Foundation
    74. 74. Helpful Resources ● Font Size 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/
    75. 75. Web: http://DesignsDrive.com Email: designsdrive@gmail.com Twitter: @DesignsDrive Slides available at: http://slideshare.net/marequi MARIO HERNANDEZ Front-End Developer

    ×