Fast Responsive Design for Higher Education
Post on 28-Jul-2015
2184 Views
Preview:
Transcript
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
top related