A digital renaissance is underway. The web has never looked so good.

The last nine months have seen transformations from many of the web's top publishers with a focus on usability, aesthetics and content. It's quite remarkable. 

Like butterflies coming out of their cocoons, many sites are shaking off their functional past and heading into an elegant future.

A few key characteristics are shared across this transformation.

Responsive, touch-friendly design

Time.com claimed the title as the the first global news site to roll out a fully responsive redesign optimized for mobile and tablet browsing last fall.

2013 has been said to be "the Year of Responsive Design."

Even sites that aren’t fully responsive are being constructed with such simple design and large fonts that they can be pleasantly experienced on devices.

As mobile web use continues to swell, sites can't become responsive fast enough.

Simple, floating, top-of-the-page navigation bars

Examples of minimalist navigation bars from the tops of popular sites.

Complex navigation is giving way to sleek navigation bars at the top of pages, with deeper information concealed until a hover or click expands a menu.

Icons replace text. “Search” is now a magnifying glass. Twitter is just a bird logo.

This goes in step with the trend away from skeumorphism and toward flat design online.

Bigger typography

Source: Smashing Magazine

Smashing Magazine’s study of the typography on 50 well-respected websites reveals that font sizes have increased quite substantially, with 14px and 16px showing the most usage, up from 12px and 14px just three years earlier.

As monitors get bigger and resolution gets higher, that jump in font size is helping make everything easier on the eyes.

Rethinking what is means to be a column

Mashable uses a masonry layout, which reflows items based on the size of the content and viewport.

The idea of a page as having a specific layout is giving way to design where sections cooperate in a more modular sense.

Content is now being treated more like tiles than images and text, being displayed fluidly across a site. Columns now often scroll independently of each other. This works in tandem with responsive design patterns as the columns can easily collapse to support a variety of screen sizes.

A New Approach to Digital Advertising

If the new web trend is to focus on usability and aesthetics then design is at the forefront of digital innovation. Trends in aesthetics are also increasingly being applied to advertising for the top publisher sites.

Advertising has long been the key for digital publishers to make money. All of the effort to transform a website into a thing of beauty doesn't matter if the way advertising is handled doesn't also change with it.

The ad-scattered sites of the past simply won’t cut it anymore. All of those ads peppered about — they seem strikingly out of place on any modern-looking site.

Bringing the integration of advertising into the design fold means careful consideration of a few factors:

  1. the amount of ads
  2. the placement of the ads
  3. the content within the ads

Often this means that sites are taking the premium approach of fewer, more impactful ads.

USA Today, who recently enlisted the help of Gannett for a website redesign, is at the vanguard of this change.

Just one ad appears on each page. For section pages, the ads are large, content-driven ads that can be collapsed. Many of them showcase videos which are as interesting as the site’s content itself.

There are so few ads on USA Today that one can’t help but continually look around the entire site. What few ads are there get noticed because as a user, we're not in a state of constant bombardment. An ad here or there isn't that disruptive.

Source: usatoday.com

The pushdown ad above may seem large an in-your-face, but the experience is quite the opposite. The ad loads up quickly, and collapses just as quickly if you're not interested. Once hidden, the entire page is ad-free other than a small sponsorship call-out which you can use to re-expand the ad.

On moving away from traditional banner advertising, David Payne, Chief Digital Officer at Gannett said,

“From a publisher’s standpoint, there really is no choice but to go this way... [The new USA Today site] is already at well over a 100 percent effective CPM compared to the old one and USA Today is hoping to lead the rest of the industry in the same direction.”

Newsweek/The Daily Beast also unveiled it’s own approach recently, also going all-premium with its ads (full disclosure: Newsweek is a Flite customer).

Here and there the sponsor’s ad appears, offering more content and information on expansion.

Source: thedailybeast.com

Once expanded, these ads offer a similar experience to the site itself: big, beautiful images and content. Like in the case of USA Today, the large canvas with lots of space gives the eye room too stretch. The ads are pleasing to look at the ad, unlike the cramped smaller formats they replace.

Ad on thedailybeast.com in its expanded state.

The results of these kinds of design efforts are amazing, and are having a transformative effect on how consumers perceive and interact with both the site content and its sponsors.

It was only 8 months ago that we featured Square’s Prateek Alsi as a guest blogger on this blog, in an article titled Where is Good Design in Digital Advertising?

I think he would be pleased that the ad world seems to have heard his call.