Presentation on Responsive Design and AIDS.gov's process at the Drupal4Gov conference.

1. AIDS.gov Responsive Design
Drupal4Gov – August 29, 2012
Jeremy Vanderlan

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

3. Making AIDS.gov ready for responsive design
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
3

4. 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%

5. Know your mobile audience
5

6. Develop to Web Standards
6

7. Use Experimental Features
7

8. Mobile is Everyone’s Job
8

9. Top Tasks are Mobile Friendly
9

10. Plan to Keep Working
Photo credit – Brad Frost - Flickr
10

11. AIDS.gov responsive design
11

12. Navigation
Mobile
Desktop and Tablet

13. Navigation Patterns
- The Multi-Toggle
- The Ol’ Right to Left
- The ‘Skip the Sub-Nav’
- The Priority+
- Off-Canvas Flyout
- The Carousel+
http://bradfrostweb.com/blog/web/complex-navigation-patterns-for-responsive-
design/
13

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

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. Drupal Specific
• Modules continue to be experimental and
require customization
• Get a responsive grid and get to work
• Omega and Zen themes are good starting points
• For Drupal 7, nothing is “off-the-shelf” yet
18

19. Using Responsive Design with Drupal
There are several responsive add-ons available for Drupal. Omega is Responsive and Mobile First Drupal Base Theme
based on the 960 grid system. Other add-ons listed below can be used in conjunction with a responsive base theme.
Drupal 7
Responsive Base Themes
Omega Adaptive
Theme Theme
Modules
Omega Tools Touch Icons Adaptive Maximenu Mobile Tools*
Images
3rd Party Adapted Libraries
jQuery Mobile Flex Slider
All modules above can be found at http://www.drupal.org and more information about Omega can be found at
http://omega.developmentgeeks.com
ICF International
July 23, 2012

20. Hybrid Apps
• Native UI container
• Content rendered responsively
• Government example
– CDC Fetal Alcohol Syndrome app
20

21. FASD responsive content
21

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