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
Slideshare-icon 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 -