AIDS.gov presentation on responsive design for the GSA Webinar 6.27.2012.

1. AIDS.gov Responsive Design
Jeremy Vanderlan

2. What I Do
Technical Lead
Interactive ICF Mobile
Co-Chair, Media Lead
Technology Center

3. June 27 is National HIV Testing Day
3

4. AIDS.gov Responsive Design
• RWD overview
• AIDS.gov approach
• Challenges & Choices

5. What is Responsive Design?
Photo Credit: Flickr – Luc Legay
5

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
6

7. AIDS.gov Approach
2008 2012
2006 Blog.aids.gov 2010 Responsive
Site Launch Launches AIDS.gov Mobile Site Design
2007 2009 2011
Podcasting and Content Redeveloped and Release of Locator API
Social Media Release of AIDS.gov Facing.aids.gov
HIV/AIDS Service responsive campaign
Provider Locator
7

8. Responsive Design is a result of:
• Adherence to web standards
• Reorganized content
• Separation of content and
presentation
• Emphasis on mobile
Photo Credit: Flickr – likablerodent
8

9. Why?

10. Why AIDS.gov responsive design?
Mobile Search Digital Divide
Top mobile health-related searches in 2011: Communities of color are proportionally more
chlamydia, bipolar disorder, depression, at-risk for HIV and use mobile more
herpes, and smoking/quit smoking frequently to access online resources.
Client-side solution Future-Friendly
Server environment has prevented us from We don’t know what’s coming next, but
implementing a robust device-detection we want to be ready
solution.
Exponential mobile growth
June 2010, AIDS.gov mobile traffic = 2.5%
June 2012, AIDS.gov mobile traffic = 25%

11. Challenges and Choices
• Navigation
• Responsive Images
• Multimedia
• Touch Events
• Performance
• Device Testing

12. Navigation
Mobile
Desktop and Tablet

13. Responsive Images
Mobile
Desktop and Tablet
For more info: https://github.com/filamentgroup/Responsive-Images/

14. Multimedia
Old Site New Site

15. Touch Events
Swipeable Images

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

17. Device Testing

18. AIDS.gov resources
• Newly responsive site – aids.gov
• Locator - locator.aids.gov
• Facing AIDS campaign – facing.aids.gov
• Twitter - @AIDSgov
• Blog - blog.aids.gov
Connect
• Twitter - @thulcandrian
• email - jvanderlan@icfi.com