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 Design in iMIS Part 2

762 views

Published on

Further steps for implementing Responsive Web Design in iMIS 20.2.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Responsive Design in iMIS Part 2

  1. 1. Responsive Design in iMIS Part 2: Deep Dive Andrea Robertson Melissa Burpo
  2. 2. Agenda
  3. 3. Responsive design can be… overwhelming.
  4. 4. Where should you begin?
  5. 5. 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/
  6. 6. Mobile First • For design and development, start with the smallest size and work your way up • Advantages: – Focus on the content that you really need – Faster performance for mobile
  7. 7. Mobile First Workflow Starting with a small piece of the overall design: 1. Create sketches of the component at different screen sizes.
  8. 8. Mobile First Workflow Starting with a small piece of the overall design: 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.
  9. 9. Demo .container { max-width: 960px; /* ... */ } @media (min-width: 500px) { .footer-content-section { float: left; width: 50%; } } @media (min-width: 768px) { .footer .footer-social { width: 33.3333333333%; } .footer .footer-promo-container { width: 66.6666666667%; } } @media (max-width: 768px) { .header-social { display: none !important; } }
  10. 10. Start with the small screen first, then expand until it looks like shit. Time for a breakpoint! Stephen Hay
  11. 11. Design Considerations You may want to consider: • Increasing base font size • Making buttons bigger • Providing secondary navigation • Increasing width of desktop layout
  12. 12. Design Considerations This is a good time to refactor: • Inline styling • Inline JavaScript • Tables for layouts • Text in images • Replace image gradients and rounded corners with CSS3
  13. 13. Internet Explorer 8 + Responsive Design • The problem: – IE8 does not support media queries – Only styles outside of a media query are interpreted – For mobile-first designs, they will get the mobile experience
  14. 14. Internet Explorer 8 Using a fallback class • Our solution: – Use Modernizr to detect Media Query support – Add class ‘no-mqs’ to the <html> tag – Repeat any styles that apply to desktop using a .no-mqs wrapper
  15. 15. Internet Explorer 8 Using a fallback class .nav-primary { text-transform: uppercase; } @media (min-width: 768px) { .nav-primary { float: right; clear: right; margin-top: 9px; } } .no-mqs .nav-primary { float: right; clear: right; margin-top: 9px; }
  16. 16. Sass + Breakpoint Use Sass and the Breakpoint plugin to quickly generate media queries and .no-mqs fallbacks
  17. 17. Sass + Breakpoint The Sass 99-Austin.scss: $breakpoint-no-queries: false; $breakpoint-no-query-fallbacks: true; .nav-primary { text-transform: uppercase; } .nav-primary { @include breakpoint(min-width 768px; $no-query: '.no-mqs') { float: right; clear: right; margin-top: 9px; } }
  18. 18. .nav-primary { text-transform: uppercase; } @media (min-width: 768px) { .nav-primary { float: right; clear: right; margin-top: 9px; } } .no-mqs .nav-primary { float: right; clear: right; margin-top: 9px; } Sass + Breakpoint Compiled CSS 99-Austin.css:
  19. 19. Testing
  20. 20. Testing Recommendations • Use real devices as much as possible • Test in a wide range of screen sizes • Try portrait and landscape orientations
  21. 21. Suggested Browsers and Devices • IE8, 9 and 11 • Latest version of Firefox • Latest version of Chrome • Latest version of OSX Safari • Safari on one iOS device (iPhone, iPod, iPad, iPad Mini) • Default browser on one or two Android devices
  22. 22. Testing Tools
  23. 23. Chrome Developer Tools
  24. 24. Web Developer Extension
  25. 25. Ghostlab & Adobe Edge Inspect
  26. 26. Open Device Labs
  27. 27. Design is about making things good (and then better) and right (and fantastic) for the people who use and encounter them. Matt Beale
  28. 28. Recommended Resources Responsive Web Design by Ethan Marcotte A perfect place to begin for anyone who has never implemented a responsive design. 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.
  29. 29. Thanks! Andrea Robertson @RoboAndie Melissa Burpo @MelissaBurpo

×