5 web design principles for 2013

Could be a big year ahead for web design, as publishers adapt to audience shifts toward mobile browsing.

The installed base of smartphones and tablets is expected to surpass desktop/notebook PCs in 2013, according to the latest Internet Trends report from Mary Meeker at Kleiner Perkins Caufield & Byers. Mobile traffic represents just 13% of all Internet traffic worldwide, but many publishers are seeing mobile devices drive upwards of 30% of traffic to their sites. Expect those numbers to rise further as tablet use increases.

As publishers rethink their digital strategies around mobile (and social as well), many are taking a fresh approach to their websites. Instead of the usual tinkering, we’ve seen wholesale website revamps over the past two months from a variety of publishers including The Atlantic, Mashable, USA Today and Engadget. If your website’s looking a bit moldy for the tablet age, consider these five guiding principles that are likely to take hold in 2013.

Create an “app-like” experience

Mobile devices are driving more than 30% of Mashable’s traffic and could surpass 50% by the end of 2013, CEO Pete Cashmore wrote in explaining Mashable’s move to responsive design. A recent Pew survey found that 40% of tablet users say they get their online news mainly through a browser, nearly double those who consume news mostly through apps.

These trends are convincing more publishers to embrace responsive design so that their content travels well across device types and screen sizes. They’re also adopting some design concepts of tablet apps such as Flipboard, including horizontal layouts that lend themselves better to swiping than scrolling.

The goal of USA Today’s redesign, launched in September, “was to have it be interactively more aligned to what you currently see on iPads,” Irene Pereyra, global director of UX and strategy for Fantasy Interactive, the agency that designed the site, told Poynter. “We were very, very influenced by iPad design.”

Reduce the clutter

Web designers are retreating from SEO-driven abominations to more user-friendly layouts. USA Today’s designers wanted to avoid what Pereyra described as “the overwhelming amount of content that you’re bombarded with as soon as you land on any page.” Instead, she explained, “We really wanted to focus the experience and allow people to really have almost snippets of what they care about as opposed to sort of a soup of content that they have to find their way through.”

Many sites are going to town on images, embracing a more visual web popularized by social sites such as Pinterest.

The Atlantic, for example, wanted to give its home page more “visual oomph,”digital editor Bob Cohn wrote in a guest post for Folio. “One strategic goal was to flex some visual muscle – to reflect the more visual nature of the site, to keep pace with other sites that publish much larger home page photos than we do even now, and to ensure the focus of the page didn’t shift too far toward ever-more sophisticated and visually emphatic ads.”

Others are focusing on a simplified presentation that avoids what Engadget Editor in Chief Tim Stevens calls “visual complexity.” “Don't let the design overpower the content,” Stevens wrote in a blog post describing the tech site’s newly launched design. 

This cleanup is being done at least in part with mobile presentation in mind. “The previous Engadget relied heavily on rendered graphical elements, images that simply didn't scale well on the latest ultra-high resolution displays,” Stevens wrote. “The new Engadget relies more on great typography and HTML 5,” resulting in “clean text and presentation at any resolution.”

Slim it down to speed it up

Sluggish page loads are a constant concern of any web team, but improving performance is even more of an imperative as mobile traffic increases, especially if you’re doing away with your mobile site in favor of responsive design.

Boosting performance on an older site may require more than cosmetic changes. Engadget, whose last major redesign was in 2009, had to “rip out all the site's spaghetti-like guts and replace them with a far leaner implementation that renders way more efficiently,” said Stevens. The full desktop page now is under 1MB, less than half its previous size, and testing shows the new homepage “loads 50 percent faster than before and makes half as many requests for content.”

Dig deep on social sharing

The “most-read” boxes that populate most content sites are beginning to give way to a new wave of popularity tools that measure not just on-site clicks, but social shares and conversations around content that extend beyond the publisher’s site.

The Atlantic now includes a social strip at the bottom of its home pagethat shows which stories are most frequently shared on Facebook, Twitter, LinkedIn and StumbleUpon.

Mashable is going a step further, using a proprietary algorithm along with social network data to promote not only which stories are most popular, but also predicting which stories are aboutto get hot.

Mashable’s “Next Big Thing” column, which runs down the center of the page, “keeps you ahead of the curve by letting you know what's going to be big news in the future,” Cashmore wrote in a blog post introducing the changes. Stories also include a “velocity graph,” which tracks how quickly readers are sharing an article.

Mashable also has enabled sharing of “microcontent” within a post – primarily images, videos and call-outs.

Integrate the ad experience

Some publishers are moving away from industry-standard display ad units such as leaderboards and adopting custom or “native” ad units designed to recharge their revenue models.

Many existing ad units are “made for screen resolutions that are not really appropriate anymore, so you always feel that they kind of hang out and stick out in awkward places in the design,” Pereyra told Poynter. Instead, USA Today’s designers created native solutions that emphasize interstitials – ads users see as they navigate between pages – rather than cluttering the pages themselves with ad inventory.

Unfortunately, interstitials are just as disruptive and annoying as they always have been, regardless of design.

The Atlantic has reduced its home page inventory from one banner and two boxes to one pushdown unit. “In some circumstances, the page features only one standard ad,” Cohn wrote, adding that The Atlantic will also be testing “new native promotions that will allow us to surface custom advertiser content, labeled as such.” We’ve seen some examples of this direction already on The Atlantic’s new brand, Quartz.

Mashable now has what it calls “storytelling units” that cascade down a page’s left and right columns. Cashmore said these units “add an element of fun by telling a story in multiple parts as you scroll down the page.” Tuesday’s home page, however, featured the same Microsoft ad in each of the 35 (count ‘em!) 300x250 and 300x600 display units on the page. Not much storytelling going on there.

These early efforts show there’s still plenty of work to do to come up with innovative ad models that support such significant redesigns.

What do you think? Do these principles sync up with your 2013 web strategy?