Responsive Design in iMIS Part 2
•Download as PPTX, PDF•
0 likes•1,013 views
The document discusses the mobile-first approach to responsive design. It recommends starting design by sketching components at small screen sizes and making the design look good on mobile, then expanding to larger screens and adding media queries as needed. It also covers considerations for refactoring code, supporting older browsers without media query support, and testing responsive designs on multiple devices.
Recommended
More Related Content
What's hot
Similar to Responsive Design in iMIS Part 2
Similar to Responsive Design in iMIS Part 2 (20)
More from Andrea Robertson
More from Andrea Robertson (10)
Recently uploaded
Recently uploaded (20)
Responsive Design in iMIS Part 2
- 1. Responsive Design in iMIS Part 2: Deep Dive Andrea Robertson Melissa Burpo
- 2. Agenda
- 3. Responsive design can be… overwhelming.
- 4. Where should you begin?
- 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. 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. Mobile First Workflow Starting with a small piece of the overall design: 1. Create sketches of the component at different screen sizes.
- 9. 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.
- 10. 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; } }
- 11. Start with the small screen first, then expand until it looks like shit. Time for a breakpoint! Stephen Hay
- 12. Design Considerations You may want to consider: • Increasing base font size • Making buttons bigger • Providing secondary navigation • Increasing width of desktop layout
- 13. 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
- 14. 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
- 15. 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
- 16. 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; }
- 17. Sass + Breakpoint Use Sass and the Breakpoint plugin to quickly generate media queries and .no-mqs fallbacks
- 18. 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; } }
- 19. .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:
- 20. Testing
- 22. Testing Recommendations • Use real devices as much as possible • Test in a wide range of screen sizes • Try portrait and landscape orientations
- 23. 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
- 24. Testing Tools
- 27. Ghostlab & Adobe Edge Inspect
- 28. Open Device Labs
- 30. Design is about making things good (and then better) and right (and fantastic) for the people who use and encounter them. Matt Beale
- 31. 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.
- 32. Thanks! Andrea Robertson @RoboAndie Melissa Burpo @MelissaBurpo
Editor's Notes
- RWD can be overwhelming There is a plethora of devices out there Wide range of capabilities and screen sizes (page)
- But… what does that mean? (page)
- Mobile first means that when you are designing AND when you are coding, start with the smallest size and work your way up This leads to better focus on good content Better performance on mobile – only loads the styles it needs
- Example sketches we created of the navigation controls in the Austin theme Recommend sketching at least mobile and desktop size – middle will work itself out in the process Try to get out of the design process fast It’s easier to design for RWD in the browser – much more variable
- Process is very straight forward if you’re starting with a mobile theme and working your way up But also works for retrofitting a site designed for desktop (will show in demo)
- Setup Open Member Responsive with the Copy of Austin theme selected Show that it is not responsive. Set Responsive="True" in ThemeSettings.xml Show that the grid are collapsing, but it's not resizing. In masterpage-default.css, change width: 960px to max-width: 960px. Show that it's now resizing. Mention header – will come back to this. Footer Go to footer. Size down to min width of Chrome. Mention that it looks like crap. Comment out lines 232 – 242 in masterpage--default.css. Show that the footer is now stacking. Resize until it looks like crap (~500px?). Uncomment lines 232 – 235 & surround with media query Mention that this means the style will be honored by browsers > 500px wide Show in browser. Resize until it looks like crap (~768px?). Uncomment the rest of the footer layout and surround with media query. Show in browser. Show that it looks good at all resolutions. Header Show that it's messy when it's small. Hide social icons on screens < 768px wide Uncomment lines 79 – 83 in ma 0sterpage-default.css Mention that this query is similar to the hidden-xs, hidden-sm, etc. classes that are available out of the box. Open Austin.skin. Remove PageNavR and PageSubNav controls and uncomment commented portion. Mention the new MenuDisplayStyle option (Classic/Responsive) Mention EnableEmbeddedBaseStyleSheets and class "rmNeedBaseStyles". Toggle the responsive nav css files. Demo in browser.
- To summarize the whole process… "Start with the small screen first, then expand until it looks like shit. Time for a breakpoint!” – Stephen Hay
- Some other design considerations you may want to consider First 3 points – better for touch devices Increase the size available for touch, so your users are less like to fat finger Secondary nav – because drop-down functionality does not work on all touch devices – give your users another way to get to the secondary pages Last point – take better advantage of large screen sizes
- These things do not work well in RWD – time to refactor!
- The problem: IE8 does not support media queries This means that for mobile-first designs, IE8 will only see the mobile version of the theme For some people this is okay – but want to show our solution
- The solution: Several solutions available We chose Modernizr + .no-mqs wrapper class Repeat all styles that apply to 1024px width
- Width greater than 768px => applies to desktop Repeat styles from inside the media query, using the .no-mqs wrapper class
- We recommend using Sass with the Breakpoint plugin to quickly generate fallback styles for IE8 Don’t want to spend a lot of time on this – link is provided on iC resources page Sass CSS preprocessor Compiled into CSS All CSS is valid Sass We deliver our Sass – feel free to take a look
- Breakpoint plugin: Accepts 2 parameters: The screen size being targeted The fallback class name (‘no-mqs’)
- Emulators are great for development and debugging, but cannot replace testing on real devices Test as many devices as you can get your hands on Borrow from your coworkers, friends, family – even Best Buy
- IE10 is dying faster than any other version of IE, so you can probably skip it Unfortunately, XP users cannot upgrade beyond IE8, so it is still a widely used browser Each Android device is unique – try to test as many as possible
- Chrome’s emulator function is great for quick looks and some debugging
- Web Developer (extension for Chrome and FireFox) Gives you a view of many different screen sizes on a single page
- Ghostlab and Adobe Edge Inspect Synchronized browsing Hook up your devices to your desktop (via wifi) Browse, scroll, etc. on all your devices simultaneously
- Devices labs – open to the public – test your website on their devices for free Find one in your area!
- Responsive design is overwhelming. Take a deep breath. Don’t panic about trying to make the website perfect in every single device, browser, situation What’s important is giving your users the content they want (page)
- Focus instead on giving the best possible experience to the majority of your users