Fast Responsive Design for Higher Education

1. Background

2. Principles

3. Process

4. Design Best Practices

Agenda

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

It’s not...

a separate mobile site

a native app

Principles

1Create a great user experience and be 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

Use a front-end framework

Step 1: Wireframe

Step 2: Design

Step 3: Prototype

Chrome

Firefox

Safari

IE9+

IE8

Step 4: Build & Test

iPhone

iPad

Android 4 phone

Android 4 tablet

Android 2.3 phone

Design Best Practices

Navigation

Primary navigation & search

Navigation

Mega menus

Navigation

Section navigation

Navigation

Search filters

Navigation

Layout

Manage white space – don’t fear it

Layout

Altering order

Layout

Flexible grid system

Layout

Abbreviating content

Layout

Touch

Hover and click conflicts

Touch

Tap targets

Touch

Large and small screens

Touch

Gestures

Touch

Logos, icons, shapes

Resolution

Optimized Not Optimized

1. Let principles drive tradeoffs

2. Prototype to identify problems early

3. Test on the most popular devices

4. Avoid reinventing the wheel by following best practices for design

Time-saving tips

Thank You

Twitter @iFactoryBoston