ifactory: fast responsive design for higher education- terminalfour tforum2013
TRANSCRIPT
Fast Responsive Design for Higher Education
1. Background
2. Principles
3. Process
4. Design: Best Practices
Houston Community College A case study
A focus on higher educationStrategy
UX
Design
Development
Social media
iFactory
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
14,000 pages
81 subdomains
7 colleges
20 locations
8+ audiences
Massive site
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
4 months
Aggressive timeline
July November
Principles
1A great user experience and extensible / maintainable
2Don’t dumb down mobile – offer same functionality on all devices
3Prioritize calls to action
4Avoid an accidental look – always appear intentional
Process
Wireframe 5 most important screens
Step 1: On-site working session
Home Typical Program & Course Finder
College Home
Academic Dept
Step 2: Desktop designs
Step 3: Tablet & phone designs
Chrome
Firefox
IE9
IE8
Step 4: Build & Test
iPhone
iPad
Android 4 phone
Android 4 tablet
Android 2.3 phone
Design: Best Practices
Primary navigation & search
Navigation
Mega menus
Navigation
Section navigation
Navigation
Filters
Navigation
Manage white space – don’t fear it
Layout
Hover & click – multiple actions on same link
Touch
Large tap targets
Touch
Swipeable carousels
Touch
Logos, icons, shapes
Resolution
Optimized Not Optimized
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
Thank You
Facebook iFactoryBoston
Twitter @iFactoryBoston