Fast Responsive Design for Higher Education
Upcoming SlideShare
Loading in...5
×
 

Fast Responsive Design for Higher Education

on

  • 349 views

Presented by:

Presented by:
Jeremy Perkins, Art Director, iFactory

TerminalFour User Conference
Boston, MA
November 7, 2013

Statistics

Views

Total Views
349
Views on SlideShare
326
Embed Views
23

Actions

Likes
0
Downloads
7
Comments
0

1 Embed 23

http://www.scoop.it 23

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Fast Responsive Design for Higher Education Fast Responsive Design for Higher Education Presentation Transcript

    • 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 their primary or only means of web access
    • 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 Academic Dept
    • 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 popular devices 4. Avoid reinventing the wheel by following best practices for design
    • Thank You Facebook iFactoryBoston Twitter @iFactoryBoston