Responsive Design in iMIS
Andrea RobertsonUI/UX Developer
ASI
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
How we use our phones
94% use their phone to access the internet92% use it to place phone calls
source: http://pewrsr.ch/19JDwMd
Where we use our phones
99% at home82% in car/public transportation69% at work53% waiting in line50% walking from place to place
source: http://pewrsr.ch/19JDwMd photo: https://flic.kr/p/q2RzMU
"Users won't do that on mobile."
"Users won't do that on mobile."
13%of all US smartphone owners have
submitted a job application from their phone
source: http://pewrsr.ch/19JDwMd
34%of US millennial smartphone owners have
submitted a job application from their phone
source: http://pewrsr.ch/19JDwMd
If you're still not convinced...
Why responsive?
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 AugustineEngineering manager at Airbnb
source: http://bit.ly/1GpfTag
How to achieve RWD
The Three Ingredients of RWD
1.Flexible layouts1
1
2 3 4
1
2
3
The three ingredients of RWD
2. Flexible images and video
1
2 3 4
2
1
2
3
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
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/
Mobile First workflowStarting with a small piece of the overall design:
1. Create sketches of the component at different screen sizes.
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:
Start with the small screen first,then expand until it looks like shit.
Time for a breakpoint!Stephen Hay
RWD tools in iMIS
Austin Responsive
available in 20.1.13 and later
London Responsive
available in 20.1.13 and later
Toronto Responsive
available in 20.2 and later
Orion
available in the next release
iMIS RWD Toolkit: Hiding Content
iPart config options:
Utility classes:
Don't forget!
Good content is good content.
Think about performance.
Demo
Primary Navigation
Auxiliary Navigation
nav-aux-accountnav-aux-button
nav-aux-cartnav-aux-button
nav-aux-primary-switch +
Demo
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>
Code Demo: Footer
Screen size: < 500px
Code Demo: Footer
Screen size: 500px - 767px
Code Demo: Footer@media (min-width: 500px) {
.footer-content-section {
float: left;
width: 50%;
} }
Code Demo: Footer
Screen size: > 767px
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%;
} }
A note about IE8
IE8 does not support media queries
...which means...
IE8 does not support responsive
design
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%;
}
Making it a little easier...
+
Sass + BreakpointThe 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
Sass + BreakpointThe 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%;
}
Testing
Testing recommendations
● Use real devices as much as possible.
● Test in a wide range of screen sizes.
● Try portrait and landscape orientations.
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
Testing Tools
Chrome Developer Tools
Web Developer Extension
Open Device Labs
Have no fear of perfection.You'll never reach it.
Salvador Dali
Design is about making things good (and then better) and right (and
fantastic) for the people who use and encounter them.
Matt Beale
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.
Resources
iMIS Helphelp.imis.com/20.2
Lots of great articles and resources to make the most of RWD in iMIS.
Roanokeon iMIS Community
Barebones responsive theme for the Cities Responsive master page.
iMIS Website PortfolioRiSE Website Showcase
A few responsive RiSE sites are featured here. Lots of good ideas to borrow!
Thank you!
Andrea Robertson@RoboAndie
Join us for usability testing!
Sign up at the ASI table by registration
