This document discusses principles and best practices for responsive design for higher education websites. It covers using a front-end framework, wireframing, designing, prototyping, and testing across devices. Key principles are to create a great user experience on all devices without dumbing down mobile, prioritize calls to action, and have an intentional look. Design best practices include managing whitespace, altering content order, using a flexible grid, and addressing touchscreen interactions.

1. Fast Responsive Design
for Higher Education

2. 1. Background
2. Principles
3. Process
4. Design Best Practices
Agenda

3. A focus on higher education
Strategy
UX
Design
Development
Social media
iFactory

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. It’s not...
a separate mobile site
a native app

8. Principles

9. 1
Create a great user experience
and be extensible / maintainable

10. 2
Don’t dumb down mobile –
offer same functionality
on all devices

11. 3
Prioritize calls to action

12. 4
Avoid an accidental look –
always appear intentional

13. Process

14. Use a front-end framework
Step 1: Wireframe

15. Step 2: Design

16. Step 3: Prototype

17. Chrome
Firefox
Safari
IE9+
IE8
Step 4: Build & Test
iPhone
iPad
Android 4 phone
Android 4 tablet
Android 2.3 phone

18. Design Best Practices

19. Navigation

20. Primary navigation & search
Navigation

21. Mega menus
Navigation

22. Section navigation
Navigation

23. Search filters
Navigation

24. Layout

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

26. Altering order
Layout

27. Flexible grid system
Layout

28. Abbreviating content
Layout

29. Touch

30. Hover
and click
conflicts
Touch

31. Tap targets
Touch

32. Large and small screens
Touch

33. Gestures
Touch

34. Logos, icons, shapes
Resolution
Optimized Not Optimized

35. 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

36. Thank You
Twitter @iFactoryBoston