0
AIDS.gov Responsive Design                     Jeremy Vanderlan
What I DoTechnical Lead  Interactive ICF Mobile   Co-Chair, Media Lead    Technology Center
June 27 is National HIV Testing Day                                 3
AIDS.gov Responsive Design• RWD overview• AIDS.gov approach• Challenges & Choices
What is Responsive Design?                     Photo Credit: Flickr – Luc Legay                                           ...
What is Responsive Design?• Fluid Grids   Change dimension depending on screen size• Flexible Images and Media   Render ...
AIDS.gov Approach                               2008                                               2012    2006           ...
Responsive Design is a result of:• Adherence to web standards• Reorganized content• Separation of content and  presentatio...
Why?
Why AIDS.gov responsive design?    Mobile Search                                    Digital DivideTop mobile health-relate...
Challenges and Choices•   Navigation•   Responsive Images•   Multimedia•   Touch Events•   Performance•   Device Testing
Navigation                       MobileDesktop and Tablet
Responsive Images                                                    MobileDesktop and TabletFor more info: https://github...
MultimediaOld Site            New Site
Touch EventsSwipeable Images
Performance•   Page Size – Even with Responsive Images, we are serving    a lot of information•   Responsive Design will r...
Device Testing
AIDS.gov resources•   Newly responsive site – aids.gov•   Locator - locator.aids.gov•   Facing AIDS campaign – facing.aids...
Upcoming SlideShare
Loading in...5
×

AIDS.gov Responsive Design Webinar

384

Published on

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

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
384
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "AIDS.gov Responsive Design Webinar"

  1. 1. AIDS.gov Responsive Design Jeremy Vanderlan
  2. 2. What I DoTechnical Lead Interactive ICF Mobile Co-Chair, Media Lead Technology Center
  3. 3. June 27 is National HIV Testing Day 3
  4. 4. AIDS.gov Responsive Design• RWD overview• AIDS.gov approach• Challenges & Choices
  5. 5. What is Responsive Design? Photo Credit: Flickr – Luc Legay 5
  6. 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. 7. AIDS.gov Approach 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 7
  8. 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. 9. Why?
  10. 10. 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%
  11. 11. Challenges and Choices• Navigation• Responsive Images• Multimedia• Touch Events• Performance• Device Testing
  12. 12. Navigation MobileDesktop and Tablet
  13. 13. Responsive Images MobileDesktop and TabletFor more info: https://github.com/filamentgroup/Responsive-Images/
  14. 14. MultimediaOld Site New Site
  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. 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.

×