Summary of a fairly extensive post from mobify.com, link here.
Style.com did a pretty great job with their adaptive website redesign, providing a great experience across a wide variety of devices and device capabilities. Here’s five ideas to steal (and one not to!).
2 Use those off-canvas flyouts, which are quickly becoming a standard navigation pattern in mobile as well as standard websites, to display dynamic content also. Style.com uses two, one for a fairly standard static nav, the other for a user’s recent history–a great shortcut.
3 Utilize pinch-to-zoom photos—but only on devices with the processing power to render them, such as a Retina iPhone.
4 Carefully optimize images for large-scale carousels. Style.com used mobify.js to make sure images are loaded only on-demand.
5 Use carousels to create slick alphabetical indexes. Style.com leveraged iscroll.js to great effect.
One weakness I identified: CSS styles that aren’t considering legibility carefully enough. Yes, the diminutive body text is strictly legible but that shouldn’t be the goal: it should be easily legible by a wide variety of users across all devices. The CSS renders text a little too small on a Retina iPhone as well. Look to sites/apps that rely heavily on legibility (such as nytimes.com) for example guidelines. You can also see how I handled this issue for Popular Mechanics’ tablet editions here.