Many obstacles stand in the way of converting a large fixed-width site into a responsive one. How do you address usability problems while limiting the amount of recoding? How do you handle a layout that has organically evolved from its initial design through heavy use? How do you deploy major design alterations from one server to another without breaking current functionality? See how iFactory and EVMS worked together to not only surmount all of these obstacles, but establish design rules that allow EVMS to roll out new responsive sites over time.

1. Responsive Retrofit
Turning a rigid desktop site into a great mobile experience

2. 1. Background
2. Strategy
3. Process
4. Design
5. Deployment
Eastern Virginia Medical School
A case study

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

4. A school of medicine and
health professions founded
by the community, for the
community
EVMS

5. Background

6. Current Site

7. 5000 pages on public site
3000 pages on portal
23 page layouts on public site
34 page layouts on portal
70+ departments
120+ content contributors
Challenges

8. This won’t hurt one bit

9. Strategy

10. 1
Retrofit or redesign?

11. 2
Users shouldn’t suspect
the site was retrofitted

12. 3
No disruption to desktop site

13. Process

14. Step 1: Catalog

15. Step 2: Mockups

16. Step 3: Functional Spec

17. Step 4: Static HTML

18. Design

19. High Resolution Images

20. Touch-friendly Links

21. Navigation

22. Carousels

23. Portal: Right Column

24. Deployment

25. Inserting T4 tags

26. Rigorous testing

27. Moving to production

28. Ongoing challenge:
Tables & Images

29. 1. Should you retrofit or redesign?
2. Catalog your messiest pages
3. Work out your design in mockups and HTML
4. Adapt to organic site usage
5. Use hands-on deployment as a
learning resource
Tips

30. Thank You
Facebook iFactoryBoston EVMSedu
Twitter @iFactoryBoston @EVMSedu