Your SlideShare is downloading. ×
0
AIDS.gov Responsive DesignDrupal4Gov – August 29, 2012                      Jeremy Vanderlan
What I DoTechnical Lead  Interactive ICF Mobile   Co-Chair, Media Lead    Technology Center
Making AIDS.gov ready for responsive design                               2008                                            ...
Why AIDS.gov responsive design?    Mobile Search                                    Digital DivideTop mobile health-relate...
Know your mobile audience                            5
Develop to Web Standards                           6
Use Experimental Features                            7
Mobile is Everyone’s Job                           8
Top Tasks are Mobile Friendly                                9
Plan to Keep Working               Photo credit – Brad Frost - Flickr                                            10
AIDS.gov responsive design                             11
Navigation                       MobileDesktop and Tablet
Navigation Patterns- The Multi-Toggle- The Ol’ Right to Left- The ‘Skip the Sub-Nav’- The Priority+- Off-Canvas Flyout- Th...
Responsive Images                                                    MobileDesktop and TabletFor more info: https://github...
Touch EventsSwipeable Images
Performance•   Page Size – Even with Responsive Images, we are serving    a lot of information•   Responsive Design will r...
Device Testing
Drupal Specific• Modules continue to be experimental and  require customization• Get a responsive grid and get to work• Om...
Using Responsive Design with DrupalThere are several responsive add-ons available for Drupal. Omega is Responsive and Mobi...
Hybrid Apps• Native UI container• Content rendered responsively• Government example  – CDC Fetal Alcohol Syndrome app     ...
FASD responsive content                          21
AIDS.gov resources•   Newly responsive site – aids.gov•   Locator - locator.aids.gov•   Facing AIDS campaign – facing.aids...
Upcoming SlideShare
Loading in...5
×

AIDS.gov Drupal4Gov Responsive Design

761

Published on

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

Published in: Technology, Health & Medicine
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
761
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
6
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "AIDS.gov Drupal4Gov Responsive Design"

  1. 1. AIDS.gov Responsive DesignDrupal4Gov – August 29, 2012 Jeremy Vanderlan
  2. 2. What I DoTechnical Lead Interactive ICF Mobile Co-Chair, Media Lead Technology Center
  3. 3. Making AIDS.gov ready for responsive design 2008 2012 2006 Blog.aids.gov 2010 ResponsiveSite 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. 4. Why AIDS.gov responsive design? Mobile Search Digital DivideTop 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-FriendlyServer 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. 5. Know your mobile audience 5
  6. 6. Develop to Web Standards 6
  7. 7. Use Experimental Features 7
  8. 8. Mobile is Everyone’s Job 8
  9. 9. Top Tasks are Mobile Friendly 9
  10. 10. Plan to Keep Working Photo credit – Brad Frost - Flickr 10
  11. 11. AIDS.gov responsive design 11
  12. 12. Navigation MobileDesktop and Tablet
  13. 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. 14. Responsive Images MobileDesktop and TabletFor more info: https://github.com/filamentgroup/Responsive-Images/
  15. 15. Touch EventsSwipeable Images
  16. 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. 17. Device Testing
  18. 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. 19. Using Responsive Design with DrupalThere are several responsive add-ons available for Drupal. Omega is Responsive and Mobile First Drupal Base Themebased 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. 20. Hybrid Apps• Native UI container• Content rendered responsively• Government example – CDC Fetal Alcohol Syndrome app 20
  21. 21. FASD responsive content 21
  22. 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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×