Fast Responsive Design for Higher Education

379 views
316 views

Published on

Presented by:
Jeremy Perkins, Art Director, iFactory

TerminalFour User Conference
Boston, MA
November 7, 2013

Published in: Design, Education, Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
379
On SlideShare
0
From Embeds
0
Number of Embeds
26
Actions
Shares
0
Downloads
9
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Fast Responsive Design for Higher Education

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

×