AIDS.gov Responsive Design Webinar
•Download as PPTX, PDF•
0 likes•608 views
The document discusses AIDS.gov's adoption of responsive design to make their website accessible across different devices like mobile phones and tablets. It provides an overview of responsive design and how AIDS.gov implemented this approach. Some of the challenges discussed include navigation, images, multimedia, touch events, and performance across various devices. The document promotes AIDS.gov's responsive resources and ways to connect with the technical lead. It aims to share their experience in transitioning to a mobile-friendly website design.
Recommended
More Related Content
Viewers also liked
Viewers also liked (10)
Similar to AIDS.gov Responsive Design Webinar
Similar to AIDS.gov Responsive Design Webinar (20)
More from HIV.gov, Office of HIV/AIDS and Infectious Disease Policy, HHS
More from HIV.gov, Office of HIV/AIDS and Infectious Disease Policy, HHS (20)
Recently uploaded
Recently uploaded (20)
AIDS.gov Responsive Design Webinar
- 1. AIDS.gov Responsive Design Jeremy Vanderlan
- 2. What I Do Technical Lead Interactive ICF Mobile Co-Chair, Media Lead 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? 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. AIDS.gov Approach 2008 2012 2006 Blog.aids.gov 2010 Responsive Site 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. 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 AIDS.gov responsive design? Mobile Search Digital Divide Top 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-Friendly Server 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. 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
- 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 Connect • Twitter - @thulcandrian • email - jvanderlan@icfi.com