Responsive Review: Aids.gov

Aids.gov is the first US Government website to tackle responsive web design (not counting www.barackobama.com/ which tecnically isn’t a .gov site).

After a quick troll through the trusty view source we noticed a few things worth pointing out.

• HTML5 doctype used, although no use of HTML5 elements (header, article, section etc)
• Specific focus on the Windows IEMobile 7
• Use of Modernizr
• Use of the a Responsive Images script (by Scott Jehl)
• Use of 320 and up framework

The website uses Andy Clarkes 320 and up script to provide a linear version of the site for anyone viewing the site sans media query capabilities. 

The theory behind this approach is to start with the smallest screen first and build up additional CSS at increasing breakpoints as required.  This has become the preferred approach when it comes to responsive design, however you will usually only see it implemented on sites that are redesigned from scratch. If you’re implementing a responsive design on an existing design you will probably work the other way around.

Media Queries

@media only screen and (min-width: 480px) {
// styles here
}

@media only screen and (min-width: 600px) {
// styles here
}

@media only screen and (min-width: 768px) {	
// styles here
}

@media only screen and (min-width: 992px) {
// styles here
}

@media only screen and (min-width: 1008px){		
// styles here
}

@media only screen and (min-width: 1382px){		
// styles here
}

@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (min-device-pixel-ratio: 1.5){}

Responsive Images

The Aids.gov site makes use of a lot of images to make their site more visually appealing, and while you find most sites apply the basic requirements for responsive images img {max-width:100%;} they have taken further steps to cover this area.

Internet explorer is known to have a few issues with responsive images, here’s what Ethan Marcotte had to say:

So that’s why I whipped up this little script. In short, it cycles through your document, swaps out the images for a transparentGIF, and applies the AlphaImageLoader property to each one. Then, whenever the window’s resized, the script automatically recalculates the proper, proportional height and width of the image, and resizes the spacer graphic accordingly.

 You can download the imgSizer.js yourself.

Responsive Design Tools & Resources

The site has used a number of resources that enhance the website across multiple devices, lets take a look at what they’ve used.

Framework

• 320 and Up

Javascript

• jQuery Slim Scroll: a small (2.8KB) jQuery plugin that transforms any div into a scrollable area with a nice scrollbar – similar to the one Facebook and Google started using in their products recently.
• HTML5 Placeholder jQuery Plugin: A jQuery plugin that enables HTML5 placeholder behavior for browsers that aren’t trying hard enough yet.
• Swipe 1.0: Swipe is a lightweight mobile slider with 1:1 touch movement, resistant bounds, scroll prevention, and completely library agnostic.

Responsive Images

• imgSizer
• Responsive Images
• Swipe 1.0: Swipe is a lightweight mobile slider with 1:1 touch movement, resistant bounds, scroll prevention, and completely library agnostic.