5 Dev Ideas to Steal from Style.com’s Adaptive Redesign

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!).

1 Leverage Javascript carousels. The fashion show calendar makes use of DOUBLE carousels for really compact and efficient navagation.

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.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s