Responsive Web Design in iMIS (NiUG Austin 2015)

Responsive Design in iMIS
Andrea Robertson
UI/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
source: http://pewrsr.ch/19JDwMd

How we use our phones
94% use their phone to access the internet
92% use it to place phone calls

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

"Users won't do that
on mobile."

of all US smartphone owners have
submitted a job application from their phone

of US millennial smartphone owners have
submitted a job application from their phone

If you're still not convinced...

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

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

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

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

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 workflow
Starting 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

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: Grids
getbootstrap.com/css/#grid

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

nav-aux-account
nav-aux-button
nav-aux-cart
nav-aux-button

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>

Code Demo: Footer
Screen size: < 500px

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

Code Demo: Footer
.footer-content-section {
float: left;
width: 50%;
}
}

Code Demo: Footer
Screen size: > 767px

Code Demo: Footer
float: left;
width: 50%;
}
}
.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
float: left;
width: 50%;
} }
width: 33.3333333333%;
}
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 + Breakpoint
The Sass
$breakpoint-no-queries: true;
$breakpoint-no-query-fallbacks: false;
@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 + Breakpoint
The CSS
float: left;
width: 50%;
} }
width: 33.3333333333%;
}
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 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

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 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!

Thank you!
Andrea Robertson
@RoboAndie

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

Responsive Web Design in iMIS (NiUG Austin 2015)

Recommandé

Recommandé

Contenu connexe

Similaire à Responsive Web Design in iMIS (NiUG Austin 2015)

Similaire à Responsive Web Design in iMIS (NiUG Austin 2015) (20)

Plus de Andrea Robertson

Plus de Andrea Robertson (10)

Dernier

Dernier (20)

Responsive Web Design in iMIS (NiUG Austin 2015)