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

1. Background

2. Strategy

3. Process

4. Design

5. Deployment

Eastern Virginia Medical School A case study

A focus on higher educationStrategy

UX

Design

Development

Social media

iFactory

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

EVMS

Background

Current Site

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

This won’t hurt one bit

Strategy

1Retrofit or redesign?

2Users shouldn’t suspect the site was retrofitted

3No disruption to desktop site

Process

Step 1: Catalog

Step 2: Mockups

Step 3: Functional Spec

Step 4: Static HTML

Design

High Resolution Images

Touch-friendly Links

Navigation

Carousels

Portal: Right Column

Deployment

Inserting T4 tags

Rigorous testing

Moving to production

Ongoing challenge: Tables & Images

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

Thank You

Facebook iFactoryBoston EVMSedu

Twitter @iFactoryBoston @EVMSedu