This document discusses the redesign of the Houston Community College website to make it fully responsive. It outlines the challenges of redesigning a massive site with over 14,000 pages used on both desktop and mobile. It describes the principles followed, including providing the same functionality on all devices without dumbing down the mobile experience. The process involved on-site working sessions, desktop designs, tablet/phone designs, and testing. Best practices covered include navigation techniques, layout, touch optimizations, resolution, and time-saving tips.

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

4. My brain
Designer
Developer

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

9. HCC Redesign: Challenges

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

12. Aggressive timeline
4 months
July
November

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

23. Design: Best Practices

24. Navigation
Primary navigation & search

25. Navigation
Mega menus

26. Navigation
Section navigation

27. Navigation
Filters

28. Layout
Manage white space – don’t fear it

29. Touch
Hover & click – multiple actions on same link

30. Touch
Large tap targets

31. Touch
Swipeable carousels

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