Responsive Design Webinar
Upcoming SlideShare
Loading in...5
× presentation on responsive design for the GSA Webinar 6.27.2012. presentation on responsive design for the GSA Webinar 6.27.2012.



Total Views
Views on SlideShare
Embed Views



0 Embeds 0

No embeds


Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment Responsive Design Webinar Responsive Design Webinar Presentation Transcript

  • 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
  • Responsive Design• RWD overview• approach• Challenges & Choices
  • What is Responsive Design? Photo Credit: Flickr – Luc Legay 5
  • 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
  • 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
  • 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
  • Why?
  • 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%
  • Challenges and Choices• Navigation• Responsive Images• Multimedia• Touch Events• Performance• Device Testing
  • Navigation MobileDesktop and Tablet
  • Responsive Images MobileDesktop and TabletFor more info:
  • MultimediaOld Site New Site
  • Touch EventsSwipeable Images
  • 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:
  • Device Testing
  • resources• Newly responsive site –• Locator -• Facing AIDS campaign –• Twitter - @AIDSgov• Blog - Connect• Twitter - @thulcandrian• email -