Your SlideShare is downloading. ×
  • Like Responsive Design Webinar
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.


Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply
Published presentation on responsive design for the GSA Webinar 6.27.2012. presentation on responsive design for the GSA Webinar 6.27.2012.

Published in Technology , Health & Medicine
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads


Total Views
On SlideShare
From Embeds
Number of Embeds



Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

    No notes for slide


  • 1. Responsive Design Jeremy Vanderlan
  • 2. What I DoTechnical Lead Interactive ICF Mobile Co-Chair, Media Lead Technology Center
  • 3. June 27 is National HIV Testing Day 3
  • 4. Responsive Design• RWD overview• 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. Approach 2008 2012 2006 2010 ResponsiveSite Launch Launches Mobile Site Design 2007 2009 2011 Podcasting and Content Redeveloped and Release of Locator API Social Media Release of 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 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, mobile traffic = 2.5% June 2012, mobile traffic = 25%
  • 11. Challenges and Choices• Navigation• Responsive Images• Multimedia• Touch Events• Performance• Device Testing
  • 12. Navigation MobileDesktop and Tablet
  • 13. Responsive Images MobileDesktop and TabletFor more info:
  • 14. MultimediaOld Site New Site
  • 15. Touch EventsSwipeable 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:
  • 17. Device Testing
  • 18. resources• Newly responsive site –• Locator -• Facing AIDS campaign –• Twitter - @AIDSgov• Blog - Connect• Twitter - @thulcandrian• email -