Responsive Web Design in iMIS (NiUG Austin 2015)
-
Upload
andrea-robertson -
Category
Technology
-
view
50 -
download
2
Transcript of Responsive Web Design in iMIS (NiUG Austin 2015)
![Page 1: Responsive Web Design in iMIS (NiUG Austin 2015)](https://reader030.fdocuments.in/reader030/viewer/2022032504/55c45856bb61eb36678b47a0/html5/thumbnails/1.jpg)
Responsive Design in iMIS
Andrea RobertsonUI/UX Developer
ASI
![Page 2: Responsive Web Design in iMIS (NiUG Austin 2015)](https://reader030.fdocuments.in/reader030/viewer/2022032504/55c45856bb61eb36678b47a0/html5/thumbnails/2.jpg)
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
![Page 3: Responsive Web Design in iMIS (NiUG Austin 2015)](https://reader030.fdocuments.in/reader030/viewer/2022032504/55c45856bb61eb36678b47a0/html5/thumbnails/3.jpg)
![Page 4: Responsive Web Design in iMIS (NiUG Austin 2015)](https://reader030.fdocuments.in/reader030/viewer/2022032504/55c45856bb61eb36678b47a0/html5/thumbnails/4.jpg)
![Page 5: Responsive Web Design in iMIS (NiUG Austin 2015)](https://reader030.fdocuments.in/reader030/viewer/2022032504/55c45856bb61eb36678b47a0/html5/thumbnails/5.jpg)
![Page 6: Responsive Web Design in iMIS (NiUG Austin 2015)](https://reader030.fdocuments.in/reader030/viewer/2022032504/55c45856bb61eb36678b47a0/html5/thumbnails/6.jpg)
![Page 8: Responsive Web Design in iMIS (NiUG Austin 2015)](https://reader030.fdocuments.in/reader030/viewer/2022032504/55c45856bb61eb36678b47a0/html5/thumbnails/8.jpg)
How we use our phones
94% use their phone to access the internet92% use it to place phone calls
source: http://pewrsr.ch/19JDwMd
![Page 9: Responsive Web Design in iMIS (NiUG Austin 2015)](https://reader030.fdocuments.in/reader030/viewer/2022032504/55c45856bb61eb36678b47a0/html5/thumbnails/9.jpg)
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
![Page 10: Responsive Web Design in iMIS (NiUG Austin 2015)](https://reader030.fdocuments.in/reader030/viewer/2022032504/55c45856bb61eb36678b47a0/html5/thumbnails/10.jpg)
"Users won't do that on mobile."
![Page 11: Responsive Web Design in iMIS (NiUG Austin 2015)](https://reader030.fdocuments.in/reader030/viewer/2022032504/55c45856bb61eb36678b47a0/html5/thumbnails/11.jpg)
"Users won't do that on mobile."
![Page 12: Responsive Web Design in iMIS (NiUG Austin 2015)](https://reader030.fdocuments.in/reader030/viewer/2022032504/55c45856bb61eb36678b47a0/html5/thumbnails/12.jpg)
13%of all US smartphone owners have
submitted a job application from their phone
source: http://pewrsr.ch/19JDwMd
![Page 13: Responsive Web Design in iMIS (NiUG Austin 2015)](https://reader030.fdocuments.in/reader030/viewer/2022032504/55c45856bb61eb36678b47a0/html5/thumbnails/13.jpg)
34%of US millennial smartphone owners have
submitted a job application from their phone
source: http://pewrsr.ch/19JDwMd
![Page 14: Responsive Web Design in iMIS (NiUG Austin 2015)](https://reader030.fdocuments.in/reader030/viewer/2022032504/55c45856bb61eb36678b47a0/html5/thumbnails/14.jpg)
If you're still not convinced...
![Page 15: Responsive Web Design in iMIS (NiUG Austin 2015)](https://reader030.fdocuments.in/reader030/viewer/2022032504/55c45856bb61eb36678b47a0/html5/thumbnails/15.jpg)
![Page 16: Responsive Web Design in iMIS (NiUG Austin 2015)](https://reader030.fdocuments.in/reader030/viewer/2022032504/55c45856bb61eb36678b47a0/html5/thumbnails/16.jpg)
![Page 17: Responsive Web Design in iMIS (NiUG Austin 2015)](https://reader030.fdocuments.in/reader030/viewer/2022032504/55c45856bb61eb36678b47a0/html5/thumbnails/17.jpg)
Why responsive?
![Page 21: Responsive Web Design in iMIS (NiUG Austin 2015)](https://reader030.fdocuments.in/reader030/viewer/2022032504/55c45856bb61eb36678b47a0/html5/thumbnails/21.jpg)
![Page 22: Responsive Web Design in iMIS (NiUG Austin 2015)](https://reader030.fdocuments.in/reader030/viewer/2022032504/55c45856bb61eb36678b47a0/html5/thumbnails/22.jpg)
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
![Page 23: Responsive Web Design in iMIS (NiUG Austin 2015)](https://reader030.fdocuments.in/reader030/viewer/2022032504/55c45856bb61eb36678b47a0/html5/thumbnails/23.jpg)
How to achieve RWD
![Page 24: Responsive Web Design in iMIS (NiUG Austin 2015)](https://reader030.fdocuments.in/reader030/viewer/2022032504/55c45856bb61eb36678b47a0/html5/thumbnails/24.jpg)
The Three Ingredients of RWD
1.Flexible layouts1
1
2 3 4
1
2
3
![Page 25: Responsive Web Design in iMIS (NiUG Austin 2015)](https://reader030.fdocuments.in/reader030/viewer/2022032504/55c45856bb61eb36678b47a0/html5/thumbnails/25.jpg)
The three ingredients of RWD
2. Flexible images and video
1
2 3 4
2
1
2
3
![Page 26: Responsive Web Design in iMIS (NiUG Austin 2015)](https://reader030.fdocuments.in/reader030/viewer/2022032504/55c45856bb61eb36678b47a0/html5/thumbnails/26.jpg)
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
![Page 27: Responsive Web Design in iMIS (NiUG Austin 2015)](https://reader030.fdocuments.in/reader030/viewer/2022032504/55c45856bb61eb36678b47a0/html5/thumbnails/27.jpg)
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/
![Page 29: Responsive Web Design in iMIS (NiUG Austin 2015)](https://reader030.fdocuments.in/reader030/viewer/2022032504/55c45856bb61eb36678b47a0/html5/thumbnails/29.jpg)
Mobile First workflowStarting with a small piece of the overall design:
1. Create sketches of the component at different screen sizes.
![Page 30: Responsive Web Design in iMIS (NiUG Austin 2015)](https://reader030.fdocuments.in/reader030/viewer/2022032504/55c45856bb61eb36678b47a0/html5/thumbnails/30.jpg)
![Page 31: Responsive Web Design in iMIS (NiUG Austin 2015)](https://reader030.fdocuments.in/reader030/viewer/2022032504/55c45856bb61eb36678b47a0/html5/thumbnails/31.jpg)
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:
![Page 32: Responsive Web Design in iMIS (NiUG Austin 2015)](https://reader030.fdocuments.in/reader030/viewer/2022032504/55c45856bb61eb36678b47a0/html5/thumbnails/32.jpg)
Start with the small screen first,then expand until it looks like shit.
Time for a breakpoint!Stephen Hay
![Page 33: Responsive Web Design in iMIS (NiUG Austin 2015)](https://reader030.fdocuments.in/reader030/viewer/2022032504/55c45856bb61eb36678b47a0/html5/thumbnails/33.jpg)
RWD tools in iMIS
![Page 34: Responsive Web Design in iMIS (NiUG Austin 2015)](https://reader030.fdocuments.in/reader030/viewer/2022032504/55c45856bb61eb36678b47a0/html5/thumbnails/34.jpg)
Austin Responsive
available in 20.1.13 and later
![Page 35: Responsive Web Design in iMIS (NiUG Austin 2015)](https://reader030.fdocuments.in/reader030/viewer/2022032504/55c45856bb61eb36678b47a0/html5/thumbnails/35.jpg)
London Responsive
available in 20.1.13 and later
![Page 36: Responsive Web Design in iMIS (NiUG Austin 2015)](https://reader030.fdocuments.in/reader030/viewer/2022032504/55c45856bb61eb36678b47a0/html5/thumbnails/36.jpg)
Toronto Responsive
available in 20.2 and later
![Page 37: Responsive Web Design in iMIS (NiUG Austin 2015)](https://reader030.fdocuments.in/reader030/viewer/2022032504/55c45856bb61eb36678b47a0/html5/thumbnails/37.jpg)
Orion
available in the next release
![Page 39: Responsive Web Design in iMIS (NiUG Austin 2015)](https://reader030.fdocuments.in/reader030/viewer/2022032504/55c45856bb61eb36678b47a0/html5/thumbnails/39.jpg)
iMIS RWD Toolkit: Hiding Content
iPart config options:
Utility classes:
![Page 40: Responsive Web Design in iMIS (NiUG Austin 2015)](https://reader030.fdocuments.in/reader030/viewer/2022032504/55c45856bb61eb36678b47a0/html5/thumbnails/40.jpg)
Don't forget!
![Page 41: Responsive Web Design in iMIS (NiUG Austin 2015)](https://reader030.fdocuments.in/reader030/viewer/2022032504/55c45856bb61eb36678b47a0/html5/thumbnails/41.jpg)
Good content is good content.
![Page 42: Responsive Web Design in iMIS (NiUG Austin 2015)](https://reader030.fdocuments.in/reader030/viewer/2022032504/55c45856bb61eb36678b47a0/html5/thumbnails/42.jpg)
Think about performance.
![Page 43: Responsive Web Design in iMIS (NiUG Austin 2015)](https://reader030.fdocuments.in/reader030/viewer/2022032504/55c45856bb61eb36678b47a0/html5/thumbnails/43.jpg)
Demo
![Page 44: Responsive Web Design in iMIS (NiUG Austin 2015)](https://reader030.fdocuments.in/reader030/viewer/2022032504/55c45856bb61eb36678b47a0/html5/thumbnails/44.jpg)
Primary Navigation
![Page 45: Responsive Web Design in iMIS (NiUG Austin 2015)](https://reader030.fdocuments.in/reader030/viewer/2022032504/55c45856bb61eb36678b47a0/html5/thumbnails/45.jpg)
Auxiliary Navigation
![Page 46: Responsive Web Design in iMIS (NiUG Austin 2015)](https://reader030.fdocuments.in/reader030/viewer/2022032504/55c45856bb61eb36678b47a0/html5/thumbnails/46.jpg)
![Page 47: Responsive Web Design in iMIS (NiUG Austin 2015)](https://reader030.fdocuments.in/reader030/viewer/2022032504/55c45856bb61eb36678b47a0/html5/thumbnails/47.jpg)
nav-aux-accountnav-aux-button
nav-aux-cartnav-aux-button
![Page 48: Responsive Web Design in iMIS (NiUG Austin 2015)](https://reader030.fdocuments.in/reader030/viewer/2022032504/55c45856bb61eb36678b47a0/html5/thumbnails/48.jpg)
nav-aux-primary-switch +
![Page 49: Responsive Web Design in iMIS (NiUG Austin 2015)](https://reader030.fdocuments.in/reader030/viewer/2022032504/55c45856bb61eb36678b47a0/html5/thumbnails/49.jpg)
Demo
![Page 50: Responsive Web Design in iMIS (NiUG Austin 2015)](https://reader030.fdocuments.in/reader030/viewer/2022032504/55c45856bb61eb36678b47a0/html5/thumbnails/50.jpg)
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>
![Page 51: Responsive Web Design in iMIS (NiUG Austin 2015)](https://reader030.fdocuments.in/reader030/viewer/2022032504/55c45856bb61eb36678b47a0/html5/thumbnails/51.jpg)
Code Demo: Footer
Screen size: < 500px
![Page 52: Responsive Web Design in iMIS (NiUG Austin 2015)](https://reader030.fdocuments.in/reader030/viewer/2022032504/55c45856bb61eb36678b47a0/html5/thumbnails/52.jpg)
Code Demo: Footer
Screen size: 500px - 767px
![Page 53: Responsive Web Design in iMIS (NiUG Austin 2015)](https://reader030.fdocuments.in/reader030/viewer/2022032504/55c45856bb61eb36678b47a0/html5/thumbnails/53.jpg)
Code Demo: Footer@media (min-width: 500px) {
.footer-content-section {
float: left;
width: 50%;
} }
![Page 54: Responsive Web Design in iMIS (NiUG Austin 2015)](https://reader030.fdocuments.in/reader030/viewer/2022032504/55c45856bb61eb36678b47a0/html5/thumbnails/54.jpg)
Code Demo: Footer
Screen size: > 767px
![Page 55: Responsive Web Design in iMIS (NiUG Austin 2015)](https://reader030.fdocuments.in/reader030/viewer/2022032504/55c45856bb61eb36678b47a0/html5/thumbnails/55.jpg)
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%;
} }
![Page 56: Responsive Web Design in iMIS (NiUG Austin 2015)](https://reader030.fdocuments.in/reader030/viewer/2022032504/55c45856bb61eb36678b47a0/html5/thumbnails/56.jpg)
A note about IE8
IE8 does not support media queries
...which means...
IE8 does not support responsive
design
![Page 57: Responsive Web Design in iMIS (NiUG Austin 2015)](https://reader030.fdocuments.in/reader030/viewer/2022032504/55c45856bb61eb36678b47a0/html5/thumbnails/57.jpg)
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%;
}
![Page 58: Responsive Web Design in iMIS (NiUG Austin 2015)](https://reader030.fdocuments.in/reader030/viewer/2022032504/55c45856bb61eb36678b47a0/html5/thumbnails/58.jpg)
Making it a little easier...
+
![Page 59: Responsive Web Design in iMIS (NiUG Austin 2015)](https://reader030.fdocuments.in/reader030/viewer/2022032504/55c45856bb61eb36678b47a0/html5/thumbnails/59.jpg)
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
![Page 60: Responsive Web Design in iMIS (NiUG Austin 2015)](https://reader030.fdocuments.in/reader030/viewer/2022032504/55c45856bb61eb36678b47a0/html5/thumbnails/60.jpg)
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%;
}
![Page 61: Responsive Web Design in iMIS (NiUG Austin 2015)](https://reader030.fdocuments.in/reader030/viewer/2022032504/55c45856bb61eb36678b47a0/html5/thumbnails/61.jpg)
Testing
![Page 62: Responsive Web Design in iMIS (NiUG Austin 2015)](https://reader030.fdocuments.in/reader030/viewer/2022032504/55c45856bb61eb36678b47a0/html5/thumbnails/62.jpg)
![Page 64: Responsive Web Design in iMIS (NiUG Austin 2015)](https://reader030.fdocuments.in/reader030/viewer/2022032504/55c45856bb61eb36678b47a0/html5/thumbnails/64.jpg)
![Page 65: Responsive Web Design in iMIS (NiUG Austin 2015)](https://reader030.fdocuments.in/reader030/viewer/2022032504/55c45856bb61eb36678b47a0/html5/thumbnails/65.jpg)
Testing recommendations
● Use real devices as much as possible.
● Test in a wide range of screen sizes.
● Try portrait and landscape orientations.
![Page 66: Responsive Web Design in iMIS (NiUG Austin 2015)](https://reader030.fdocuments.in/reader030/viewer/2022032504/55c45856bb61eb36678b47a0/html5/thumbnails/66.jpg)
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
![Page 67: Responsive Web Design in iMIS (NiUG Austin 2015)](https://reader030.fdocuments.in/reader030/viewer/2022032504/55c45856bb61eb36678b47a0/html5/thumbnails/67.jpg)
Testing Tools
![Page 68: Responsive Web Design in iMIS (NiUG Austin 2015)](https://reader030.fdocuments.in/reader030/viewer/2022032504/55c45856bb61eb36678b47a0/html5/thumbnails/68.jpg)
Chrome Developer Tools
![Page 69: Responsive Web Design in iMIS (NiUG Austin 2015)](https://reader030.fdocuments.in/reader030/viewer/2022032504/55c45856bb61eb36678b47a0/html5/thumbnails/69.jpg)
Web Developer Extension
![Page 70: Responsive Web Design in iMIS (NiUG Austin 2015)](https://reader030.fdocuments.in/reader030/viewer/2022032504/55c45856bb61eb36678b47a0/html5/thumbnails/70.jpg)
Open Device Labs
![Page 71: Responsive Web Design in iMIS (NiUG Austin 2015)](https://reader030.fdocuments.in/reader030/viewer/2022032504/55c45856bb61eb36678b47a0/html5/thumbnails/71.jpg)
Have no fear of perfection.You'll never reach it.
Salvador Dali
![Page 72: Responsive Web Design in iMIS (NiUG Austin 2015)](https://reader030.fdocuments.in/reader030/viewer/2022032504/55c45856bb61eb36678b47a0/html5/thumbnails/72.jpg)
Design is about making things good (and then better) and right (and
fantastic) for the people who use and encounter them.
Matt Beale
![Page 73: Responsive Web Design in iMIS (NiUG Austin 2015)](https://reader030.fdocuments.in/reader030/viewer/2022032504/55c45856bb61eb36678b47a0/html5/thumbnails/73.jpg)
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.
![Page 74: Responsive Web Design in iMIS (NiUG Austin 2015)](https://reader030.fdocuments.in/reader030/viewer/2022032504/55c45856bb61eb36678b47a0/html5/thumbnails/74.jpg)
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!
![Page 75: Responsive Web Design in iMIS (NiUG Austin 2015)](https://reader030.fdocuments.in/reader030/viewer/2022032504/55c45856bb61eb36678b47a0/html5/thumbnails/75.jpg)
Thank you!
Andrea Robertson@RoboAndie
![Page 76: Responsive Web Design in iMIS (NiUG Austin 2015)](https://reader030.fdocuments.in/reader030/viewer/2022032504/55c45856bb61eb36678b47a0/html5/thumbnails/76.jpg)
Join us for usability testing!
Sign up at the ASI table by registration