The Personal Disquiet of

Mark Boulton

Blog Category: design

Responsive Advertising

Recently at Mark Boulton Design, we’ve been working on a redesign of the global visual language for a large sports network. Like many web sites delivering news and editorial content, they rely on advertising for their revenue — either through multiple ad slots on the page, or from video pre-rolls.

Early on in the project, we discussed Responsive Web Design at length. From an editorial and product perspective, it makes perfect sense. Who wouldn’t want their content adapting to a device their reading it on? Who wants to pinch-zoom again and again? From a business and product perspective, we’ve seen this from multiple clients who want to take advantage of certain interactions on certain devices — swiping for example — for users to better engage with the content in a more native way. All good. And then advertising comes along and things get challenging.

Here’s the problem as I see it:

  • A large number of sites rely on advertising for revenue. Many of those sites will benefit from a Responsive Web Design approach.
  • Web advertising is a whole other industry.
  • Ad units are fixed, standardised sizes.
  • They are commissioned, sold and created on the basis of their size and position on the page
  • Many ads are rich (including takeovers, video, pop-overs, flyouts and interactions)

Let me go through each one of these in turn:

A large number of sites rely on advertising for revenue. Many of those sites will benefit from a Responsive Web Design approach.

The content for free expectation on the web has been around since it started. Many websites — where you pay for the content in other forms, such as newspapers — had to adopt this model, but use advertising dollars to pay for it. With the absence of any other revenue stream on these sites, the only other alternative is paywalls/subscriptions, and we’re seeing a few of these start to come through in mainstream newspapers now — The Times, for example.

As I mentioned earlier, many of these websites will benefit from a responsive web design approach. The consumption of this content has changed along with the plethora of devices and viewports. As I’ve talked about before, designing a ‘best fit page’ is becoming increasingly challenging if you acknowledge how usage has changed and will continue to change in the coming years.

Web advertising is a whole other industry.

There are sub-industries within web design as a whole that generally don’t talk to each other — such as gaming, gambling, porn, seo. Web advertising is another. These sub-sets each produce technology advances that everyone else benefits from. They deeply understand their audiences and how they interact within those verticals. But they don’t talk. Generally. For an industry that is built upon open standards, sharing, communication then this can be damaging.

Ad units are fixed, standardised sizes.

Hurray for standards! Because of the inherent reuse of advertising colatoral, this stuff had to be standardised. The Internet Advertising Bureau has been documenting emerging standards in web advertising for years now.

This is all good, especially for creating grid systems. Khoi Vinh talked about deriving a grid from an ad unit (PDF slides) when I shared a stage with him in SXSW in 2007. They are a fixed content element — unchangeable and standardised across a website. They’re knowable.

They are commissioned, sold and created on the basis of their size and position on the page.

This is perhaps the biggest issue for me. For example, a sales teams basically have a page ‘template’ with ad slots. Position A, B and C. In A, you can fit a Leaderboard. In B an MMU, and C a button. Also, if an advertiser pays lots of money, they can have a takeover. A takeover includes banners down either side of the page which join up to create a wrapper. Sometimes Leaderboards in position A can be pop-overs or flyouts. Sometimes, crazy stuff can happen where someone throws a ball from ad position B to A. Yes. Seriously.

The sales team then proceeds in selling the slots to advertisers who in turn provide the ‘creative’. This could be animation, video, graphics - increasingly a combination of all three - that are embedded in the page by a scheduling application. They’re sold based on the impressions rather than clicks.

That’s a lot of variables to account for. But, web advertising is becoming an increasingly aggressive industry. Advertisers and web sites are looking to innovate to engage users through marketing campaigns that align across multiple media. And web sites need to be accommodating.

Sales teams through many industries are also largely commission-based. As a sales person, you have a basic salary (or sometimes you don’t), and then you earn more depending on what you sell in the month. And here’s the thing. A sales team need a simple model in order to sell ads: a template with slots and a list of ads that can go in then. Now, let’s introduce Responsive Web Design into this.

Let’s say, you have the minimum amount of break-points: desktop, tablet and small screen. A sales team has a template with Slot A (the primary slot) that accommodates a Leaderboard for the desktop. But then that changes to a MMU for tablet. And changes again to a thin banner for small screen. A sales person has to understand they’re selling ONE slot for this. And an advertiser has to understand they’re paying for ONE slot for this. However, they’re supplying three times the amount of creative. And this is just a very simple use case. What happens with a takeover? Everyone wants as much bang for their buck as they can muster.

Many ads are rich (including takeovers, video, pop-overs, flyouts and interactions)

Increasingly, ad units are not confined by their pixel borders. Take-overs combine multiple ad units to give an overall effect of taking over the page. Flyouts show and hide a layer on hover. Pop-over do the same but in a different way. Video autoplays. Animation completely breaks out of the ad unit and can fly around the screen: how ever annoying that might be. My point is that the notion of advertising being confined by their pixels is also becoming increasingly grey. How would you accommodate a flyout for a small screen, for example? Another type of flyout for each breakpoint? So now the advertiser has to produce three times the amount of complex creative for the same, single ad slot? In order to make this commercially viable, they’d be looking for a deal then.

Those are some of the practical logistical things I can think of to challenge the notion that you can just ‘serve a different ad for each break point’. It’s just not that simple when millions of dollars are at stake.

So what can we do to improve this?

Well, some responsive sites are incorporating ad units now. But not many.

Boston Globe has incorporated an MMU ad unit. They’ve done this by fixing the width of that column and have the ad unit occupy that space as the viewport is reduced down to a single column.

Boston Globe screenshots on multiple devices

Boston Globe screenshots on multiple devices

The good news is, this is a problem a few in the industry are seeing as an opportunity. ADO published a press release just last week:

to deliver cross-media web innovation, user experience design and integrated advertising for brand, agency and publisher clients specifically around mobile full-service responsive web design.

Matthew Snyder, CEO of ADObjects adds:

We wanted to share our vision on 11.11.11 since we believe a critical part of the right digital strategy is to build a cross-media mobile strategy with complete 1-to-1 parity multi-screen design. With one recent client we were able to see 4x more traffic and 30% of the traffic to mobile via responsive design methods due to search and social link matching over conventional mobile web platforms

If these numbers are to be believed, then there is a considerable ROI for advertisers to work to adopt responsive design and an ad strategy that would match.

Now, let’s get down to brass tacks. How would approach building out a complex responsive web site that had multiple slots?

The Standard Model

The existing model is based on advertiser filling slots, as shown in this diagram. Each is sold to perfectly fit an available slot. If none are sold, the website defaults down to a stand-in.

The standard model of displaying and selling ads for the web

The standard model of displaying and selling ads for the web

A Responsive Model

Firstly, I’d sell slot ‘packages’ rather than single slots. This requires an ad sales team to clearly explain what those slots and sizes are, and they’d be served on that basis. For example, an advertiser would buy a package for slot A. The creative to deliver against that package would be a Leaderboard, an MMU and a small banner for small screen.

A proposed Responsive model of serving ads

A proposed Responsive model of serving ads

Then, of course, the templates need to be able to detect the various widths and serve the correct ad based on that width.

Complex ads such as flyouts and takeovers would require much more thought and change. How could you effectively engage with an audience across the various viewport sizes when there is rich interaction involved?

As I mentioned, of course all of this is with a caveat that the advertiser is buying a slot ‘package’, rather than a single ad to fill a single slot. And that a sales team would sell it as such. This is the crucial difference, and for me, the biggest barrier to this change - it’s cultural and not technical, that requires a lot of explaining, and they always take the longest to do.

The template > slot > ad mental model is engrained both in advertisers, planners and web sites. Providing space for ads needs to be broadened into multiple spaces for one ad concept. This requires closer collaboration between advertisers and web sites, designers and marketeers and sales teams.

Over the past six months I’ve been working on this problem: speaking to sales teams, product owners, designers and as @kerns mentioned on Twitter this morning, the one thing that is plainly lacking at the moment is demand. I’d go one step further and say that the thing that’s missing is benefit. If the benefit can be clearly shown to advertisers and websites — in terms of an increase in penetration, reach, and ultimately, revenue, then we’ll start to see some movement.

I’d love to discuss this further on Twitter, or on Google +, you can reach me on either if you have any questions

Filed in: business, css, design. Additional: advertising, design, responsive-web-design on November 15th, 2011

Something's afoot

I’ve just updated to Wordpress 3.0 without a problem (which was nice, and actually made a nice change). Why? Well, things are a changing here. I’ve got itchy feet and all this talk of responsive web design has got me all excited about possibilities again.

Stay tuned.

Filed in: markboulton-co-uk. Additional: design, this-site on July 1st, 2010

New shoes

I last redesigned my blog in 2006. Three years ago! I’ve looked at redesigning it for about two years now, so what got in the way?

Well, we’ve been buzzing around working on all sorts of other projects at Mark Boulton Design, and that’s kept me busy. It’s been quite a journey and, rather than just writing a plain ‘ol blog post about this, I thought it would be fun if I shared it all with you in this interview with my friend Carolyn Wood.

CW: Let’s talk about the status of 5 Simple Steps. I had an early, advisory role in the birth of your book, before the writing really got going. The next thing I knew, you’d become a publishing house. Share the juicy details with us! It’s all very easy, right? ;)

MB: Yes. Piece of cake. Actually, I remember from those very early conversations we had, you mentioned the difficulties I could face when writing the book. I think I went through each one of them in turn: blind panic, sleepless nights, writer’s block, more panic, too much to do… the list goes on. It was back in 2006, and I really, really needed some help just getting off the ground with it. I had five popular blog posts but wanted to make them into something more substantial. I had left the BBC, started my own business, Emma and I had our daughter, and we were in the midst of having builders add an extension on our house.

All of that conspired against me a little. The dream of writing a book became somewhat of a foggy, festering cloud in the back of my mind. That’s exactly why I needed someone to help me take those first steps. It was like someone learning to ride a bike. They’re never perfect at first. They fall over, graze their knees. Do it again. Before you know it, they’re off leaving you standing and waving. But without those first encouraging words and helping hand from you, they’d still be walking about instead of riding. And that’s just what happened.

CW: So, I waved you on and you dug in and really started writing.

MB: Yes, suddenly the project had momentum. I was inspired to write, but I was increasingly interested in seeing if this one book could become more, and the Five Simple Steps imprint was born. We (Mark Boulton Design) hired a designer with a strong editorial and publishing background who spent three months designing, typesetting, and producing the final book. As I wrote, we also started to do pretty much everything else in-house from editing and proofreading to distribution (both electronic and traditional fulfilment). We were driven to get it done and out there.

We have fairly big plans for Five Simple Steps. During production of Designing for the Web and talking with other publishers, we discovered not only a gap in the market for books that provide clear, practical design guidance, but also an opportunity to publish and market books differently. Book distribution in the UK is basically controlled by two huge distributors. To be on their catalogue, you must have multiple titles, operate a minimum stock level in their warehouses, accept that they won’t pay you for 60 days, and so forth. This makes it quite impossible to be a small publisher and have your books sold in Borders or Waterstones in the UK. We learned that distributors only pay publishers about half the cover price of the book—sometimes less! That means margins—once you factor in production, shipping, and storage costs—are massively squeezed before you’ve even started. The industry’s system is broken for the small, independent publisher. So, we took things into our own hands. We’re learning as we go. Publishing itself is a creative process for us, too. We’re professional, but we’re indie publishers, too. We plan to be very flexible, perhaps even having a ‘crewing’ model for each book, bringing in a little help from different people outside of the team for each book, depending on its subject. We’ll see—we haven’t planned it all out yet. We’ve primarily used Twitter to announce offers, launch dates, etc. This was so successful that on the first day of the PDF launch, we sold over 1000 in 48 hours—but the server crashed, causing PayPal problems that took days to sort out! The printed book is only available as a limited edition (for now). We won’t print endless supplies of these, as we just can’t justify sitting on large amounts of stock, especially if we add more titles. Print on demand might be an option at some point. The process is exciting, complicated, scary, and rewarding, all at the same time. I heartily recommend that if you have an idea for a book, and have the people around to help you realise it—as well as an eager audience—there is little reason to go to a ‘normal’ publisher. CW: Our lives intersected again at the beginning of the open source/open design Drupal project, when I worked on the style guides. I admit I felt fortunate to be off in the corner in a limited role. You’ve been in the thick of things. What is the status of that project? Tell us: Is designing in the open more or less painful than sticking a fork in your eye? MB: Designing in the open is more painful than sticking a fork in your eye, but it’s also more productive and rewarding! Mark Boulton Design, Leisa Reichelt, and you were initially asked to work on aspects of the redesign of drupal.org, and Phase One of that project was completed last December. August to December were probably the most challenging months of my career. After our usual period of discovery, we launched headlong into a twelve-week iterative schedule with prototype releases, user testing, and evaluation, and a new design released every week. It was a killer schedule, but with that pace came great engagement from the Drupal community. During Phase One we’d done broad brushstrokes in terms of design, information architecture, branding, etc. CW: What happens in Phase Two? I wish you the best with that! There’s still much to be done: the copywriting and also more UX work—specifically documentation and many social aspects of the site. We simply ran out of time on most of this. However, as with Phase One, the majority of the work will be completed by the community, in the community. The biggest challenge has been to become comfortable with the fact that what we produce will be scrutinised, deconstructed, modified, and remodelled, all for the greater good. I’m still getting used to it! CW:What prompted the complete redesign of your blog and your decisions along the way? MB: Three years is a bloody long time in web design and in the personal growth of a designer. While I wanted the blog to be a reflection of the current quality of my work, I was even happier to break free from what people usually expect of me and create something that more accurately represents who I am as a designer.
The catalyst came from a ‘company away day’ in Fonmon Castle—just down the coast from our studio in South Wales—during a daylong workshop in the castle’s library. Adorning the walls were rows and rows of musty, seventeenth-century books. I resisted temptation for an hour or two, but  finally caved and started snapping shots of the most wonderful, letterpress-printed books. After that day, the blog design quickly took shape. I started the process with a simple but challenging constraint: What can I do with Georgia? Just Georgia. With all the talk of font-embedding, I could have used one of the middleware products cropping up, such as Fontdeck or Typekit, along with some great custom typefaces. But, I wanted to really get to know Georgia—as well as I know Helvetica. So far, Georgia hasn’t disappointed. It’s a wonderful typeface. Generalising here, serif typefaces have more character than sans serif typefaces. Yet, Georgia manages to mold itself really well to the content. Wordpress.org, Guardian.co.uk, this site all use Georgia, but appear very different due to the varying weights and styles. I also wanted a different grid, a greater focus on writing, and a simpler layout designed for reading. Perhaps the biggest change isn’t the design but the move from ExpressionEngine to WordPress. I’ve used EE since 2005, continue to use it almost weekly, and still recommend it to clients for certain projects. I’m an advocate for using the best tool for the job. Whilst EE is a very competent blogging engine, lately I’ve felt it (and Drupal, as well) much more suited to content-managed websites for clients. If you have a blog, Wordpress is pretty hard to beat; it was the best tool for this job. That said, the redevelopment of this site hasn’t been without its difficulties. Having used EE for so many years, I was used to its template-based theming approach, designed to neatly fit with a standards-based designer’s mental models. HTML templates can be simply slotted into place. PHP is extracted and replaced with a simple tagging language to hook in the site’s dynamic data.  Wordpress and Drupal could do with having a look at the strength of this because, to be honest, I feel a lot of designers will take one glance at the PHP in their theming systems and run a mile. EE still has this in the bag, in my opinion. CW: Please give us a peek at the next book and other MBD projects. MB: It’s a busy time for us; here’s a taste:
  • We’re working with some exciting clients. We’re designing an app based on Adobe Air for a leading film studio. I can’t talk about some work, but we’re heads-down on projects like arts council-funded web apps and a major redesign for an ethics organisation.
  • The Drupal 7 UX project is drawing to a close, and it’s been a fascinating seven months’ work. Drupal has great potential and I’m excited to help shape its future from a UX perspective and dedicated to continuing my involvement with the community.
  • We’re publishing two more titles this year. Designing Grid Systems will be available this autumn, and Designing the Invisible later this year, possibly early next. I’ve wanted to write the first one since 2006. I have tons of material to challenge current thinking in the web design community about subjects like grid systems, their appropriate use, and the advisability of using 16-column grids for website layouts.
  • We’re ramping up to run probably three workshops in three cities in the UK in November and December. They’ll be based on the book: practical design advice that people can immediately apply to their work.
  • I’ll be doing more speaking too, which I love. I’ll speak at the wonderful Web Directions South in Sydney, Australia in October on font embedding and CSS. In November, I’m speaking in Belfast at the Build Conference.
CW: Your wife Emma is now part of MBD. Is it difficult to have a normal home life? When you both drag yourselves in the door, who makes dinner? MB: That last question is probably the biggest issue of each day! Seriously though, Emma and I have received great advice on successfully working together. It’s been such a pleasure—she’s a smart cookie. She keeps my feet on the ground when I go off on one of my dreamy ‘let’s do this!’ ideas. With seven years in a strategic role at the BBC, she has a real vision for where our studio should be heading. But, let’s face it, Emma has always been part of the company; it’s just that now she sits in the same room as me.

Filed in: markboulton-co-uk. Additional: blog-design, design, interview on August 20th, 2009