aids responsive design
DESCRIPTION
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. - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: AIDS Responsive Design](https://reader035.vdocuments.site/reader035/viewer/2022062808/56815414550346895dc2117f/html5/thumbnails/1.jpg)
AIDS.gov Responsive Design
Jeremy Vanderlan
![Page 2: AIDS Responsive Design](https://reader035.vdocuments.site/reader035/viewer/2022062808/56815414550346895dc2117f/html5/thumbnails/2.jpg)
What I Do
Technical Lead
Co-Chair, ICF Mobile
Technology Center
![Page 3: AIDS Responsive Design](https://reader035.vdocuments.site/reader035/viewer/2022062808/56815414550346895dc2117f/html5/thumbnails/3.jpg)
3
June 27 is National HIV Testing Day
![Page 4: AIDS Responsive Design](https://reader035.vdocuments.site/reader035/viewer/2022062808/56815414550346895dc2117f/html5/thumbnails/4.jpg)
• RWD overview• AIDS.gov approach• Challenges & Choices
AIDS.gov Responsive Design
![Page 5: AIDS Responsive Design](https://reader035.vdocuments.site/reader035/viewer/2022062808/56815414550346895dc2117f/html5/thumbnails/5.jpg)
5
What is Responsive Design?
Photo Credit: Flickr – Luc Legay
![Page 6: AIDS Responsive Design](https://reader035.vdocuments.site/reader035/viewer/2022062808/56815414550346895dc2117f/html5/thumbnails/6.jpg)
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
![Page 7: AIDS Responsive Design](https://reader035.vdocuments.site/reader035/viewer/2022062808/56815414550346895dc2117f/html5/thumbnails/7.jpg)
7
AIDS.gov Approach
2006Site Launch
2007Podcasting and Social
Media
2008Blog.aids.gov Launches
2009Content
Redeveloped and Release of
AIDS.gov HIV/AIDS Service Provider
Locator
2010AIDS.gov Mobile
Site
2011Release of Locator
APIFacing.aids.gov
responsive campaign
2012Responsive
Design
![Page 8: AIDS Responsive Design](https://reader035.vdocuments.site/reader035/viewer/2022062808/56815414550346895dc2117f/html5/thumbnails/8.jpg)
8Photo Credit: Flickr – likablerodent
Responsive Design is a result of:
• Adherence to web standards
• Reorganized content• Separation of content
and presentation• Emphasis on mobile
![Page 9: AIDS Responsive Design](https://reader035.vdocuments.site/reader035/viewer/2022062808/56815414550346895dc2117f/html5/thumbnails/9.jpg)
Why?
![Page 10: AIDS Responsive Design](https://reader035.vdocuments.site/reader035/viewer/2022062808/56815414550346895dc2117f/html5/thumbnails/10.jpg)
Why AIDS.gov responsive design?Mobile Search
Top mobile health-related searches in 2011: chlamydia, bipolar disorder, depression,
herpes, and smoking/quit smoking Future-
FriendlyWe don’t know what’s coming next, but we want to be ready
Client-side solution
Server environment has prevented us from implementing a robust
device-detection solution.Exponential mobile growth
June 2010, AIDS.gov mobile traffic = 2.5%June 2012, AIDS.gov mobile traffic = 25%
Digital DivideCommunities of color are
proportionally more at-risk for HIV and use mobile more frequently to
access online resources.
![Page 11: AIDS Responsive Design](https://reader035.vdocuments.site/reader035/viewer/2022062808/56815414550346895dc2117f/html5/thumbnails/11.jpg)
Challenges and Choices
• Navigation• Responsive Images• Multimedia• Touch Events• Performance• Device Testing
![Page 12: AIDS Responsive Design](https://reader035.vdocuments.site/reader035/viewer/2022062808/56815414550346895dc2117f/html5/thumbnails/12.jpg)
Navigation
Desktop and Tablet
Mobile
![Page 13: AIDS Responsive Design](https://reader035.vdocuments.site/reader035/viewer/2022062808/56815414550346895dc2117f/html5/thumbnails/13.jpg)
Responsive Images
For more info: https://github.com/filamentgroup/Responsive-Images/
Desktop and Tablet
Mobile
![Page 14: AIDS Responsive Design](https://reader035.vdocuments.site/reader035/viewer/2022062808/56815414550346895dc2117f/html5/thumbnails/14.jpg)
Multimedia
Old Site New Site
![Page 15: AIDS Responsive Design](https://reader035.vdocuments.site/reader035/viewer/2022062808/56815414550346895dc2117f/html5/thumbnails/15.jpg)
Touch EventsSwipeable Images
![Page 16: AIDS Responsive Design](https://reader035.vdocuments.site/reader035/viewer/2022062808/56815414550346895dc2117f/html5/thumbnails/16.jpg)
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
![Page 17: AIDS Responsive Design](https://reader035.vdocuments.site/reader035/viewer/2022062808/56815414550346895dc2117f/html5/thumbnails/17.jpg)
Device Testing
![Page 18: AIDS Responsive Design](https://reader035.vdocuments.site/reader035/viewer/2022062808/56815414550346895dc2117f/html5/thumbnails/18.jpg)
Connect• Twitter - @thulcandrian• email - [email protected]
AIDS.gov resources• Newly responsive site – aids.gov• Locator - locator.aids.gov• Facing AIDS campaign – facing.aids.gov• Twitter - @AIDSgov• Blog - blog.aids.gov