1 / 18

AIDS Responsive Design

AIDS.gov Responsive Design. Jeremy Vanderlan. What I Do. Technical Lead. Co-Chair, ICF Mobile 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?. 5.

thad
Download Presentation

AIDS Responsive Design

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. AIDS.gov Responsive Design Jeremy Vanderlan

  2. What I Do Technical Lead Co-Chair, ICF Mobile Technology Center

  3. June 27 is National HIV Testing Day 3

  4. AIDS.gov Responsive Design • RWD overview • AIDS.gov approach • Challenges & Choices

  5. What is Responsive Design? 5 Photo Credit: Flickr – Luc Legay

  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. AIDS.gov Approach 2008 Blog.aids.gov Launches 2012 Responsive Design 2010 AIDS.gov Mobile Site 2006 Site Launch 2007 Podcasting and Social Media 2009 Content Redeveloped and Release of AIDS.gov HIV/AIDS Service Provider Locator 2011 Release of Locator API Facing.aids.gov responsive campaign 7

  8. Responsive Design is a result of: • Adherence to web standards • Reorganized content • Separation of content and presentation • Emphasis on mobile 8 Photo Credit: Flickr – likablerodent

  9. Why?

  10. Why AIDS.gov responsive design? Mobile Search Top mobile health-related searches in 2011: chlamydia, bipolar disorder, depression, herpes, and smoking/quit smoking Digital Divide Communities of color are proportionally more at-risk for HIV and use mobile more frequently to access online resources. Client-side solution Server environment has prevented us from implementing a robust device-detection solution. Future-Friendly We don’t know what’s coming next, but we want to be ready Exponential mobile growth June 2010, AIDS.gov mobile traffic = 2.5% June 2012, AIDS.gov mobile traffic = 25%

  11. Challenges and Choices • Navigation • Responsive Images • Multimedia • Touch Events • Performance • Device Testing

  12. Navigation Mobile Desktop and Tablet

  13. Responsive Images Mobile Desktop and Tablet For more info: https://github.com/filamentgroup/Responsive-Images/

  14. Multimedia Old Site New Site

  15. Touch Events Swipeable 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: techthebest.com

  17. Device Testing

  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 • Twitter - @thulcandrian • email - jvanderlan@icfi.com Connect

More Related