Fast Responsive Design
for Higher Education
Houston Community College
A case study
1. Background
2. Principles
3. Process
4. Design: Best Practices
iFactory
A focus on higher education
Strategy
UX
Design
Development
Social media
My brain

Designer

Developer
What is Responsive Design?
A site whose visual display
responds to the device
on which it is used
“Make our site work on mobile”
It’s not...
a separate mobile site
a native app
a site that talks to you
HCC Redesign: Challenges
Massive site
14,000 pages
81 subdomains
7 colleges
20 locations
8+ audiences
Skyrocketing mobile use
25% of traffic from mobile
Would be higher if mobile experience was good
For many users, mobile is...
Aggressive timeline
4 months
July

November
Principles
1
A great user experience
and extensible / maintainable
2
Don’t dumb down mobile –
offer same functionality
on all devices
3
Prioritize calls to action
4
Avoid an accidental look –
always appear intentional
Process
Step 1: On-site working session
Wireframe 5 most important screens
Home

Typical

Program
& Course
Finder

College
Home

A...
Step 2: Desktop designs
Step 3: Tablet & phone designs
Step 4: Build & Test
Chrome

iPhone

Firefox

iPad

IE9

Android 4 phone

IE8

Android 4 tablet
Android 2.3 phone
Design: Best Practices
Navigation
Primary navigation & search
Navigation
Mega menus
Navigation
Section navigation
Navigation
Filters
Layout
Manage white space – don’t fear it
Touch
Hover & click – multiple actions on same link
Touch
Large tap targets
Touch
Swipeable carousels
Resolution
Logos, icons, shapes
Optimized

Not Optimized
Time-saving tips
1. Let principles drive tradeoffs
2. Abbreviate the process via working sessions
3. Test on the most popu...
Thank You
Facebook 	 iFactoryBoston
Twitter		 @iFactoryBoston
Upcoming SlideShare
Loading in …5
×

iFactory: Fast Responsive design for Higher Education- TERMINALFOUR tforum2013

680 views
516 views

Published on

'Fast Responsive design for Higher Education': Jeremy Perkins, Art Director, iFactory demonstrates the practical aspects of planning, implementing, and maintaining a responsive site in a short time-frame using Houston Community College as a client example.

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

  • Be the first to like this

No Downloads
Views
Total views
680
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

iFactory: Fast Responsive design for Higher Education- TERMINALFOUR tforum2013

  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

×