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%
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/
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
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