Responsive Web Design in iMIS (NiUG Austin 2015)

1. Responsive Design in iMIS Andrea Robertson UI/UX Developer ASI

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. How we use our phones source: http://pewrsr.ch/19JDwMd

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. 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. "Users won't do that on mobile."

7. "Users won't do that on mobile."

8. of all US smartphone owners have submitted a job application from their phone source: http://pewrsr.ch/19JDwMd

9. of US millennial smartphone owners have submitted a job application from their phone source: http://pewrsr.ch/19JDwMd

10. If you're still not convinced...

11. Why responsive?

12. Android device fragmentation source: http://bit.ly/1q4iXyk

13. Android screen sizes source: http://bit.ly/1q4iXyk

14. photo: https://flic.kr/p/77mETv RWD + Accessibility = .

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. How to achieve RWD

17. The Three Ingredients of RWD 1. Flexible layouts1 1 2 3 4 1 2 3

18. The three ingredients of RWD 2. Flexible images and video 1 2 3 4 2 1 2 3

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. 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. source: http://bit.ly/1GpjsNy

22. Mobile First workflow Starting with a small piece of the overall design: 1. Create sketches of the component at different screen sizes.

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. Start with the small screen first, then expand until it looks like shit. Time for a breakpoint! Stephen Hay

25. RWD tools in iMIS

26. Austin Responsive available in 20.1.13 and later

27. London Responsive available in 20.1.13 and later

28. Toronto Responsive available in 20.2 and later

29. Orion available in the next release

30. iMIS RWD Toolkit: Grids getbootstrap.com/css/#grid

31. iMIS RWD Toolkit: Hiding Content iPart config options: Utility classes:

32. Don't forget!

33. Good content is good content.

34. Think about performance.

35. Demo

36. Primary Navigation

37. Auxiliary Navigation

38. nav-aux-account nav-aux-button nav-aux-cart nav-aux-button

39. nav-aux-primary-switch +

40. Demo

41. Code Demo: Footer <footer id="ft" class="footer"> <div class="footer-content"> <div class="container"> <div class="row">  <div class="footer-content-section footer-social"> <h2>Connect with us</h2>  </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>  </div> </div> </div>  </footer>

42. Code Demo: Footer Screen size: < 500px

43. Code Demo: Footer Screen size: 500px - 767px

44. Code Demo: Footer @media (min-width: 500px) { .footer-content-section { float: left; width: 50%; } }

45. Code Demo: Footer Screen size: > 767px

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. A note about IE8 IE8 does not support media queries ...which means... IE8 does not support responsive design

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. Making it a little easier... +

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. 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. Testing

53. photo: http://bit.ly/1IOZ4TB

54. Testing recommendations ● Use real devices as much as possible. ● Test in a wide range of screen sizes. ● Try portrait and landscape orientations.

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. Testing Tools

57. Chrome Developer Tools

58. Web Developer Extension

59. pen Device Labs

60. Have no fear of perfection. You'll never reach it. Salvador Dali

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. 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. 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. Thank you! Andrea Robertson @RoboAndie

65. Join us for usability testing! Sign up at the ASI table by registration