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 in iMIS (NiUG Austin 2015)

797 views

Published on

Introduction to Responsive Web Design and how it applies to your iMIS RiSE website.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Responsive Web Design in iMIS (NiUG Austin 2015)

  1. 1. Responsive Design in iMIS Andrea Robertson UI/UX Developer ASI
  2. 2. Responsive web design is the practice of building a website suitable to work on every device and every screen size, no matter how large or small, mobile or desktop. – Shay Howe, An Advanced Guide to HTML & CSS
  3. 3. How we use our phones source: http://pewrsr.ch/19JDwMd
  4. 4. How we use our phones 94% use their phone to access the internet 92% use it to place phone calls source: http://pewrsr.ch/19JDwMd
  5. 5. Where we use our phones 99% at home 82% in car/public transportation 69% at work 53% waiting in line 50% walking from place to place source: http://pewrsr.ch/19JDwMd photo: https://flic.kr/p/q2RzMU
  6. 6. "Users won't do that on mobile."
  7. 7. "Users won't do that on mobile."
  8. 8. of all US smartphone owners have submitted a job application from their phone source: http://pewrsr.ch/19JDwMd
  9. 9. of US millennial smartphone owners have submitted a job application from their phone source: http://pewrsr.ch/19JDwMd
  10. 10. If you're still not convinced...
  11. 11. Why responsive?
  12. 12. Android device fragmentation source: http://bit.ly/1q4iXyk
  13. 13. Android screen sizes source: http://bit.ly/1q4iXyk
  14. 14. photo: https://flic.kr/p/77mETv RWD + Accessibility = .
  15. 15. Mobile is so important to your business that you can’t afford to be sending people to a poor experience. So, my advice is to avoid building a separate web application just for mobile sites. Just go responsive. Dave Augustine Engineering manager at Airbnb source: http://bit.ly/1GpfTag
  16. 16. How to achieve RWD
  17. 17. The Three Ingredients of RWD 1. Flexible layouts1 1 2 3 4 1 2 3
  18. 18. The three ingredients of RWD 2. Flexible images and video 1 2 3 4 2 1 2 3
  19. 19. 3. CSS media queries The three ingredients of RWD .lead { margin-bottom: 1.5em; font-size: 115%; } @media (min-width: 768px) { .lead { font-size: 150%; } } Register now for our Annual Conference! 2 3 4 3 Register now for our Annual Conference! 2 3
  20. 20. Think Mobile First Mobile First is the idea that web sites should first be designed for mobile devices, including only those tasks/items that website visitors use most. Then as screen real estate increases, add in tasks/features as needed based on user priority. http://www.digitalgov.gov/2013/09/30/mobile-first/
  21. 21. source: http://bit.ly/1GpjsNy
  22. 22. Mobile First workflow Starting with a small piece of the overall design: 1. Create sketches of the component at different screen sizes.
  23. 23. Mobile First workflow 1. Create sketches of the component at different screen sizes. 2. Open the component in the browser at ~320px and make it look good. 3. Make the browser wider until the component looks bad. Use media queries to fix it. 4. Repeat step 3 until you reach the widest width. 5. Check to make sure all screen sizes still look good in your browser. 6. Test in real devices. Fix any issues. Starting with a small piece of the overall design:
  24. 24. Start with the small screen first, then expand until it looks like shit. Time for a breakpoint! Stephen Hay
  25. 25. RWD tools in iMIS
  26. 26. Austin Responsive available in 20.1.13 and later
  27. 27. London Responsive available in 20.1.13 and later
  28. 28. Toronto Responsive available in 20.2 and later
  29. 29. Orion available in the next release
  30. 30. iMIS RWD Toolkit: Grids getbootstrap.com/css/#grid
  31. 31. iMIS RWD Toolkit: Hiding Content iPart config options: Utility classes:
  32. 32. Don't forget!
  33. 33. Good content is good content.
  34. 34. Think about performance.
  35. 35. Demo
  36. 36. Primary Navigation
  37. 37. Auxiliary Navigation
  38. 38. nav-aux-account nav-aux-button nav-aux-cart nav-aux-button
  39. 39. nav-aux-primary-switch +
  40. 40. Demo
  41. 41. Code Demo: Footer <footer id="ft" class="footer"> <div class="footer-content"> <div class="container"> <div class="row"> <!-- begin FooterCommunications content area --> <div class="footer-content-section footer-social"> <h2>Connect with us</h2> <!-- social icons go here --> </div> <div class="footer-content-section footer-promo-container"> <div class="promo"> <p class="lead">Join us for the upcoming Annual Conference</p> <a href="[~]iMISAnnualConference" class="TextButton">Go to Annual Conference site »</a> </div> </div> <!-- end FooterCommunications content area --> </div> </div> </div> <!-- .footer-nav-copyright goes here --> </footer>
  42. 42. Code Demo: Footer Screen size: < 500px
  43. 43. Code Demo: Footer Screen size: 500px - 767px
  44. 44. Code Demo: Footer @media (min-width: 500px) { .footer-content-section { float: left; width: 50%; } }
  45. 45. Code Demo: Footer Screen size: > 767px
  46. 46. Code Demo: Footer @media (min-width: 480px) { .footer-content-section { float: left; width: 50%; } } @media (min-width: 768px) { .footer .footer-social { width: 33.3333333333%; } .footer .footer-promo-container { width: 66.6666666667%; } }
  47. 47. A note about IE8 IE8 does not support media queries ...which means... IE8 does not support responsive design
  48. 48. IE8 solution: Fallback class .no-mqs @media (min-width: 480px) { .footer-content-section { float: left; width: 50%; } } @media (min-width: 768px) { .footer .footer-social { width: 33.3333333333%; } .footer .footer-promo-container { width: 66.6666666667%; } } .no-mqs .footer-content-section { float: left; } .no-mqs .footer .footer-social { width: 33.3333333333%; } .no-mqs .footer .footer-promo-container { width: 66.6666666667%; }
  49. 49. Making it a little easier... +
  50. 50. Sass + Breakpoint The Sass $breakpoint-no-queries: true; $breakpoint-no-query-fallbacks: false; .footer-content-section { @include breakpoint(min-width 480px, $no-query '.no-mqs') { float: left; width: 50%; } } .footer { @include breakpoint(min-width 768px, $no-query '.no-mqs') { .footer-social { width: 33.3333333333%; } .footer-promo-container { width: 66.6666666667%; } } } 99-Austin.scss
  51. 51. Sass + Breakpoint The CSS @media (min-width: 480px) { .footer-content-section { float: left; width: 50%; } } @media (min-width: 768px) { .footer .footer-social { width: 33.3333333333%; } .footer .footer-promo-container { width: 66.6666666667%; } } 99-Austin.css .no-mqs .footer-content-section { float: left; width: 50%; } .no-mqs .footer .footer-social { width: 33.3333333333%; } .no-mqs .footer .footer-promo-container { width: 66.6666666667%; }
  52. 52. Testing
  53. 53. photo: http://bit.ly/1IOZ4TB
  54. 54. Testing recommendations ● Use real devices as much as possible. ● Test in a wide range of screen sizes. ● Try portrait and landscape orientations.
  55. 55. Suggested browsers & devices ● IE8 and 11 (time permitting, also test 9 & 10) ● Latest version of Firefox ● Latest version of Chrome ● Latest version of Safari on OSX ● Safari on iOS (iPhone, iPod, iPad, iPad Mini) ● Chrome on Android ● Android stock browser
  56. 56. Testing Tools
  57. 57. Chrome Developer Tools
  58. 58. Web Developer Extension
  59. 59. pen Device Labs
  60. 60. Have no fear of perfection. You'll never reach it. Salvador Dali
  61. 61. Design is about making things good (and then better) and right (and fantastic) for the people who use and encounter them. Matt Beale
  62. 62. Resources Responsive Web Design by Ethan Marcotte A perfect place to begin for anyone who has never implemented a responsive design. Also check out the article and the podcast. This is Responsive by Brad Frost Large collection of responsive patterns and resources. Bootstrap Responsive front-end framework Used sparingly in iMIS. Great source of code snippets and components.
  63. 63. Resources iMIS Help help.imis.com/20.2 Lots of great articles and resources to make the most of RWD in iMIS. Roanoke on iMIS Community Barebones responsive theme for the Cities Responsive master page. iMIS Website Portfolio RiSE Website Showcase A few responsive RiSE sites are featured here. Lots of good ideas to borrow!
  64. 64. Thank you! Andrea Robertson @RoboAndie
  65. 65. Join us for usability testing! Sign up at the ASI table by registration

×