Fast Responsive Design for Higher Education
- 1. Fast Responsive Design for Higher Education
- 2. Houston Community College A case study 1. Background 2. Principles 3. Process 4. Design: Best Practices
- 3. iFactory A focus on higher education Strategy UX Design Development Social media
- 5. What is Responsive Design?
- 6. A site whose visual display responds to the device on which it is used
- 7. “Make our site work on mobile”
- 8. It’s not... a separate mobile site a native app a site that talks to you
- 10. Massive site 14,000 pages 81 subdomains 7 colleges 20 locations 8+ audiences
- 11. Skyrocketing mobile use 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
- 13. Principles
- 14. 1 A great user experience and extensible / maintainable
- 15. 2 Don’t dumb down mobile – offer same functionality on all devices
- 16. 3 Prioritize calls to action
- 17. 4 Avoid an accidental look – always appear intentional
- 18. Process
- 19. Step 1: On-site working session Wireframe 5 most important screens Home Typical Program & Course Finder College Home Academic Dept
- 20. Step 2: Desktop designs
- 21. Step 3: Tablet & phone designs
- 22. Step 4: Build & Test Chrome iPhone Firefox iPad IE9 Android 4 phone IE8 Android 4 tablet Android 2.3 phone
- 24. Navigation Primary navigation & search
- 28. Layout Manage white space – don’t fear it
- 29. Touch Hover & click – multiple actions on same link
- 32. Resolution Logos, icons, shapes Optimized Not Optimized
- 33. Time-saving tips 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
- 34. Thank You Facebook iFactoryBoston Twitter @iFactoryBoston