Download - Fast Responsive Design for Higher Education
![Page 1: Fast Responsive Design for Higher Education](https://reader033.vdocuments.mx/reader033/viewer/2022051610/548d0fb8b479597e6a8b48cf/html5/thumbnails/1.jpg)
Fast Responsive Design for Higher Education
![Page 2: Fast Responsive Design for Higher Education](https://reader033.vdocuments.mx/reader033/viewer/2022051610/548d0fb8b479597e6a8b48cf/html5/thumbnails/2.jpg)
1. Background
2. Principles
3. Process
4. Design: Best Practices
Houston Community College A case study
![Page 3: Fast Responsive Design for Higher Education](https://reader033.vdocuments.mx/reader033/viewer/2022051610/548d0fb8b479597e6a8b48cf/html5/thumbnails/3.jpg)
A focus on higher educationStrategy
UX
Design
Development
Social media
iFactory
![Page 4: Fast Responsive Design for Higher Education](https://reader033.vdocuments.mx/reader033/viewer/2022051610/548d0fb8b479597e6a8b48cf/html5/thumbnails/4.jpg)
My brain
Designer
Developer
![Page 5: Fast Responsive Design for Higher Education](https://reader033.vdocuments.mx/reader033/viewer/2022051610/548d0fb8b479597e6a8b48cf/html5/thumbnails/5.jpg)
What is Responsive Design?
![Page 6: Fast Responsive Design for Higher Education](https://reader033.vdocuments.mx/reader033/viewer/2022051610/548d0fb8b479597e6a8b48cf/html5/thumbnails/6.jpg)
A site whose visual display responds to the device on which it is used
![Page 7: Fast Responsive Design for Higher Education](https://reader033.vdocuments.mx/reader033/viewer/2022051610/548d0fb8b479597e6a8b48cf/html5/thumbnails/7.jpg)
“Make our site work on mobile”
![Page 8: Fast Responsive Design for Higher Education](https://reader033.vdocuments.mx/reader033/viewer/2022051610/548d0fb8b479597e6a8b48cf/html5/thumbnails/8.jpg)
It’s not...
a separate mobile site
a native app
a site that talks to you
![Page 9: Fast Responsive Design for Higher Education](https://reader033.vdocuments.mx/reader033/viewer/2022051610/548d0fb8b479597e6a8b48cf/html5/thumbnails/9.jpg)
HCC Redesign: Challenges
![Page 10: Fast Responsive Design for Higher Education](https://reader033.vdocuments.mx/reader033/viewer/2022051610/548d0fb8b479597e6a8b48cf/html5/thumbnails/10.jpg)
14,000 pages
81 subdomains
7 colleges
20 locations
8+ audiences
Massive site
![Page 11: Fast Responsive Design for Higher Education](https://reader033.vdocuments.mx/reader033/viewer/2022051610/548d0fb8b479597e6a8b48cf/html5/thumbnails/11.jpg)
25% of traffic from mobile
Would be higher if mobile experience was good
For many users, mobile is their primary or only means of web access
Skyrocketing mobile use
![Page 12: Fast Responsive Design for Higher Education](https://reader033.vdocuments.mx/reader033/viewer/2022051610/548d0fb8b479597e6a8b48cf/html5/thumbnails/12.jpg)
4 months
Aggressive timeline
July November
![Page 13: Fast Responsive Design for Higher Education](https://reader033.vdocuments.mx/reader033/viewer/2022051610/548d0fb8b479597e6a8b48cf/html5/thumbnails/13.jpg)
Principles
![Page 14: Fast Responsive Design for Higher Education](https://reader033.vdocuments.mx/reader033/viewer/2022051610/548d0fb8b479597e6a8b48cf/html5/thumbnails/14.jpg)
1A great user experience and extensible / maintainable
![Page 15: Fast Responsive Design for Higher Education](https://reader033.vdocuments.mx/reader033/viewer/2022051610/548d0fb8b479597e6a8b48cf/html5/thumbnails/15.jpg)
2Don’t dumb down mobile – offer same functionality on all devices
![Page 16: Fast Responsive Design for Higher Education](https://reader033.vdocuments.mx/reader033/viewer/2022051610/548d0fb8b479597e6a8b48cf/html5/thumbnails/16.jpg)
3Prioritize calls to action
![Page 17: Fast Responsive Design for Higher Education](https://reader033.vdocuments.mx/reader033/viewer/2022051610/548d0fb8b479597e6a8b48cf/html5/thumbnails/17.jpg)
4Avoid an accidental look – always appear intentional
![Page 18: Fast Responsive Design for Higher Education](https://reader033.vdocuments.mx/reader033/viewer/2022051610/548d0fb8b479597e6a8b48cf/html5/thumbnails/18.jpg)
Process
![Page 19: Fast Responsive Design for Higher Education](https://reader033.vdocuments.mx/reader033/viewer/2022051610/548d0fb8b479597e6a8b48cf/html5/thumbnails/19.jpg)
Wireframe 5 most important screens
Step 1: On-site working session
Home Typical Program & Course Finder
College Home
Academic Dept
![Page 20: Fast Responsive Design for Higher Education](https://reader033.vdocuments.mx/reader033/viewer/2022051610/548d0fb8b479597e6a8b48cf/html5/thumbnails/20.jpg)
Step 2: Desktop designs
![Page 21: Fast Responsive Design for Higher Education](https://reader033.vdocuments.mx/reader033/viewer/2022051610/548d0fb8b479597e6a8b48cf/html5/thumbnails/21.jpg)
Step 3: Tablet & phone designs
![Page 22: Fast Responsive Design for Higher Education](https://reader033.vdocuments.mx/reader033/viewer/2022051610/548d0fb8b479597e6a8b48cf/html5/thumbnails/22.jpg)
Chrome
Firefox
IE9
IE8
Step 4: Build & Test
iPhone
iPad
Android 4 phone
Android 4 tablet
Android 2.3 phone
![Page 23: Fast Responsive Design for Higher Education](https://reader033.vdocuments.mx/reader033/viewer/2022051610/548d0fb8b479597e6a8b48cf/html5/thumbnails/23.jpg)
Design: Best Practices
![Page 24: Fast Responsive Design for Higher Education](https://reader033.vdocuments.mx/reader033/viewer/2022051610/548d0fb8b479597e6a8b48cf/html5/thumbnails/24.jpg)
Primary navigation & search
Navigation
![Page 25: Fast Responsive Design for Higher Education](https://reader033.vdocuments.mx/reader033/viewer/2022051610/548d0fb8b479597e6a8b48cf/html5/thumbnails/25.jpg)
Mega menus
Navigation
![Page 26: Fast Responsive Design for Higher Education](https://reader033.vdocuments.mx/reader033/viewer/2022051610/548d0fb8b479597e6a8b48cf/html5/thumbnails/26.jpg)
Section navigation
Navigation
![Page 27: Fast Responsive Design for Higher Education](https://reader033.vdocuments.mx/reader033/viewer/2022051610/548d0fb8b479597e6a8b48cf/html5/thumbnails/27.jpg)
Filters
Navigation
![Page 28: Fast Responsive Design for Higher Education](https://reader033.vdocuments.mx/reader033/viewer/2022051610/548d0fb8b479597e6a8b48cf/html5/thumbnails/28.jpg)
Manage white space – don’t fear it
Layout
![Page 29: Fast Responsive Design for Higher Education](https://reader033.vdocuments.mx/reader033/viewer/2022051610/548d0fb8b479597e6a8b48cf/html5/thumbnails/29.jpg)
Hover & click – multiple actions on same link
Touch
![Page 30: Fast Responsive Design for Higher Education](https://reader033.vdocuments.mx/reader033/viewer/2022051610/548d0fb8b479597e6a8b48cf/html5/thumbnails/30.jpg)
Large tap targets
Touch
![Page 31: Fast Responsive Design for Higher Education](https://reader033.vdocuments.mx/reader033/viewer/2022051610/548d0fb8b479597e6a8b48cf/html5/thumbnails/31.jpg)
Swipeable carousels
Touch
![Page 32: Fast Responsive Design for Higher Education](https://reader033.vdocuments.mx/reader033/viewer/2022051610/548d0fb8b479597e6a8b48cf/html5/thumbnails/32.jpg)
Logos, icons, shapes
Resolution
Optimized Not Optimized
![Page 33: Fast Responsive Design for Higher Education](https://reader033.vdocuments.mx/reader033/viewer/2022051610/548d0fb8b479597e6a8b48cf/html5/thumbnails/33.jpg)
1. Let principles drive tradeoffs
2. Abbreviate the process via working sessions
3. Test on the most popular devices
4. Avoid reinventing the wheel by following best practices for design
Time-saving tips
![Page 34: Fast Responsive Design for Higher Education](https://reader033.vdocuments.mx/reader033/viewer/2022051610/548d0fb8b479597e6a8b48cf/html5/thumbnails/34.jpg)
Thank You
Facebook iFactoryBoston
Twitter @iFactoryBoston