Viewport meta tags used by the 20 sites that are listed in Social Driver's "20 Best Responsive Web Design Examples of 2012"

viewport-meta-in-20-best-responsive-designs.md

Intro

http://socialdriver.com/2012/07/20-best-responsive-websites/ lists 20 sites that are supposedly best-in-class when it comes to responsive design techniques. I had a look at the viewport meta tags used in these sites.

Findings

• All sites use width=device-width, with in most cases an additional initial-scale=1. This is good practice.

However:

• 8 sites turn off pinch-zooming by setting maximum-scale to 1, or using user-scalable=no. While there are some corner use cases for this, it does not make sense to do this on text-heavy sites as it impairs accessibility.
• 3 sites use semi-colons as delimiters between viewport values. While this works in newer mobile browsers, it's not officially supported, and breaks in older mobile browser versions.
• 1 site has 2 viewport meta tags (with different values) in the source...
• 1 site sets an explicit value for target-densitydpi. While there are some corner use cases for this, it's better to leave this up to the browser to decide. In this case, the site's fonts look strangely big on high-DPI screens.

Data

(collected on July 17th, 2012, with Opera/9.80 (Macintosh; Intel Mac OS X 10.7.3; U; en) Presto/2.10.289 Version/12.00)

http://www.bostonglobe.com/

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">

http://www.smashingmagazine.com/

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

http://foodsense.is/

<meta name="viewport" content="width=device-width; initial-scale=1.0">

http://www.anderssonwise.com/

<meta name=viewport id=viewport content="width=device-width, initial-scale=1.0, maximum-scale=1.0">

http://www.gosphero.com/

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">

http://css-tricks.com/

<meta name="viewport" content="width=device-width">

http://www.greygoose.com/

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />

http://2012.newadventuresconf.com/

<meta name="viewport" content="width=device-width, initial-scale=1">

http://www.lancs.ac.uk/

<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, maximum-scale=1.0, minimum-scale=1.0" />

https://www.fundraise.com/>

<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no' name='viewport'>

http://webdesignerwall.com/

<meta name="viewport" content="width=device-width; initial-scale=1.0">

http://heathlife.co.uk/

<meta name="viewport" content="width=device-width,initial-scale=1">

http://www.londonandpartners.com/

<meta name="viewport" content="width=device-width, initial-scale=1.0"/>

http://oliverrussell.com/

<meta name="viewport" content="width=device-width, target-densitydpi=160dpi, initial-scale=1">

http://rourkery.com/

<meta name="viewport" content="width=device-width, initial-scale=1.0">

http://jessicahische.is/

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;" />

http://www.fork-cms.com/

<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" />

http://ethanmarcotte.com/

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

http://www.unitedpixelworkers.com/

<meta name = "viewport" content = "width = device-width">

http://trentwalton.com/

<meta name="viewport" content="width=device-width, initial-scale=1.0"/>

I'm curious how IE10 plans to deal with this since they dont support meta viewport and only support @-ms-viewport:
h5bp/html5-boilerplate#1047

And I'm curious if Webkit and Mozilla will use @Viewport - conceptually, it makes more sense (as it's visual/styling related) to keep this in CSS rather than in HTML.

Great analysis. Perhaps the title of the post should have read "20 Best Looking Responsive Web Design Examples of 2012"