aids.gov responsive design webinar
Post on 06-Sep-2014
527 Views
Preview:
DESCRIPTION
TRANSCRIPT
AIDS.gov Responsive Design
Jeremy Vanderlan
What I Do
Technical Lead
Co-Chair, ICF Mobile
Technology Center
3
June 27 is National HIV Testing Day
• RWD overview• AIDS.gov approach• Challenges & Choices
AIDS.gov Responsive Design
5
What is Responsive Design?
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
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
8Photo Credit: Flickr – likablerodent
Responsive Design is a result of:
• Adherence to web standards
• Reorganized content• Separation of content
and presentation• Emphasis on mobile
Why?
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.
Challenges and Choices
• Navigation• Responsive Images• Multimedia• Touch Events• Performance• Device Testing
Navigation
Desktop and Tablet
Mobile
Responsive Images
For more info: https://github.com/filamentgroup/Responsive-Images/
Desktop and Tablet
Mobile
Multimedia
Old 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: techthebest.com
Device Testing
Connect• Twitter - @thulcandrian• email - jvanderlan@icfi.com
AIDS.gov resources• Newly responsive site – aids.gov• Locator - locator.aids.gov• Facing AIDS campaign – facing.aids.gov• Twitter - @AIDSgov• Blog - blog.aids.gov
top related