AIDS.gov Responsive Design

Jeremy Vanderlan

What I Do

Technical Lead

Co-Chair, ICF Mobile

Technology Center

3

June 27 is National HIV Testing Day

• RWD overview• AIDS.gov approach• Challenges & Choices

AIDS.gov Responsive Design

5

What is Responsive Design?

Photo Credit: Flickr – Luc Legay

6

What is Responsive Design?

• Fluid Grids Change dimension depending on

screen size

• Flexible Images and Media Render appropriately depending

on device

• Media Queries Establish design breakpoints

7

AIDS.gov Approach

2006Site Launch

2007Podcasting and Social

Media

2008Blog.aids.gov Launches

2009Content

Redeveloped and Release of

AIDS.gov HIV/AIDS Service Provider

Locator

2010AIDS.gov Mobile

Site

2011Release of Locator

APIFacing.aids.gov

responsive campaign

2012Responsive

Design

8Photo Credit: Flickr – likablerodent

Responsive Design is a result of:

• Adherence to web standards

• Reorganized content• Separation of content

and presentation• Emphasis on mobile

Why?

Why AIDS.gov responsive design?Mobile Search

Top mobile health-related searches in 2011: chlamydia, bipolar disorder, depression,

herpes, and smoking/quit smoking Future-

FriendlyWe don’t know what’s coming next, but we want to be ready

Client-side solution

Server environment has prevented us from implementing a robust

device-detection solution.Exponential mobile growth

June 2010, AIDS.gov mobile traffic = 2.5%June 2012, AIDS.gov mobile traffic = 25%

Digital DivideCommunities of color are

proportionally more at-risk for HIV and use mobile more frequently to

access online resources.

Challenges and Choices

• Navigation• Responsive Images• Multimedia• Touch Events• Performance• Device Testing

Navigation

Desktop and Tablet

Mobile

Responsive Images

For more info: https://github.com/filamentgroup/Responsive-Images/

Desktop and Tablet

Mobile

Multimedia

Old Site New Site

Touch EventsSwipeable Images

Performance

• Page Size – Even with Responsive Images, we are serving a lot of information

• Responsive Design will result in more calls to the server

• Solutions are evolving, so sites must evolve with them

• Social Media can be a huge performance hit

Dislike for Responsive Design!

Image credit: techthebest.com

Device Testing

Connect• Twitter - @thulcandrian• email - jvanderlan@icfi.com

AIDS.gov resources• Newly responsive site – aids.gov• Locator - locator.aids.gov• Facing AIDS campaign – facing.aids.gov• Twitter - @AIDSgov• Blog - blog.aids.gov