{{ searchResult.published_at | date:'d MMMM yyyy' }}

Loading ...
Loading ...

Enter a search term such as “mobile analytics” or browse our content using the filters above.

No_results

That’s not only a poor Scrabble score but we also couldn’t find any results matching “”.
Check your spelling or try broadening your search.

Logo_distressed

Sorry about this, there is a problem with our search at the moment.
Please try again later.

Responsive design is widely considered to be the future of web design as it allows site owners to adopt a user-centric and mobile-first approach.

In a nutshell, responsive design allows websites to work from a single set of code that resizes itself to fit whatever screen a particular visitor is using, thereby negating the need for a separate mobile site.

It’s a topic we’ve looked at in more detail in posts about why sites should consider responsive design and another citing 10 great examples of ecommerce sites using the technology.

But while there are many benefits to using responsive design, there are still major problems to be overcome in regards to advertising.

At the moment ad formats are generally incompatible with responsive design, forcing site owners to either find hacks to rescale them or hide the ads altogether on mobile screens.

Obviously neither option is ideal, and there doesn’t appear to be a solution on the horizon.

To find out more about the problems faced by site owners who use responsive design, I spoke to Skiddmark CEO Steve Fitch...

What initially motivated you to use responsive design for your website?

I see a lot of websites which fall into the trap of adding more – more content, more ads, more call-to-action buttons – they’re a mess and yet there seems no respite.  

I’ve always had a thing for matching design with technology – a good looking site is a more effective site, so we use large images, distinctive typography and like to distinguish between different parts of a web page to set a visitor’s expectation and make it easier to browse. 

Our first website won an IMA award in 2007, even though I don’t believe it deserved to – the agency we worked with had more experience with designing show sites (for films and celebrities like J.K. Rowling and M. Night Shyamalan) whereas this was an editorial site and therefore the index pages (home, archive) could look a bit broken sometimes depending on the content being shown.  

We started exploring adaptive designs and came across the splendid responsive site by Simon Collison (Colly) which is such a pleasant place to read – especially when the site collapses for smaller devices.   

I call this a content-first model, where the content comes first on a page with as few distractions as possible.

This then triggered a search for more of these responsive sites – which looked as good on smaller devices as they did on larger ones. Media Queries is a great resource to use.  

Like many people I browse the web mostly from my iPhone and iPad, and soon realised we needed to make our content more accessible without losing the design we’d spent so much time developing.  

Many sites opt-out when optimising for mobile, either using a plugin solution like WPTouch or just stripping the CSS from the site and turning it into a simple looking blog.  

These all fail to appreciate the importance of design in the user experience.

Can you briefly explain the problems you encountered with advertising on your site? 

Most of the ads we use are video ads with call-to-action buttons for more information, or to connect with the brand on social media.  

Advertisers, in their wisdom, have moved away from flash based ads (which believe it or not are easy to make responsive by dynamically changing the size using JavaScript) and now use <iframes>, which allow the advertisers complete control, but remove control from the hosting website.  

How have you sought to get around these problems?

We run a mixture of JavaScript and CSS in our pages which detect a video embed or iframe, add an HTML container, then absolute position the ad within this container.  

There’s a great little script by Chris Coyer and Dave Rupert called FitVids that automatically does this.  

For regular spots, we position the ad within a containing wrapper which then scales with the rest of the site, but some of the ads we use contain forced height and width (!important overrides) in their inline CSS.   

This causes them to break out of the container when the site scales. 

The harsh solution is to use media queries to remove the ad from the site when the viewport size is within a certain range – which is bad for the advertiser and the site, although another option might be to reposition the ad container inside the main article content.  

Another solution is to use adaptive ad tags – there’s more upfront work involved in loading the additional tags, these can then be served and displayed (or hidden) depending on the viewport size. Messy, but it works, especially if starting with 728x90 sized ads.

Either way, advertisers need to recognise that there is no longer an ‘above the fold’ or standard placement with responsive websites and their ad may end up in a number of different positions (or not at all), depending on the user’s device. 

A lot of the problems I’ve read about appear to be with ad imagery. How have you addressed the challenge of rescaling your own images on the site, and could a similar solution works with ads?

Scaling images on our site is simply a matter of setting the base CSS for images in our style sheet to ‘max-width:100%’ – this is easy and well within our control.  

This same style declaration will be applied to any ad imagery provided the advertiser hasn’t contained it within an iframe and applied inline fixed widths for its CSS.  

                      

Unfortunately this is precisely what advertisers do, so in that case we configure our site to either move or hide the ad.  

Advertisers clearly do not understand responsive advertising, which could work to their benefit but instead costs them exposure.

In your experience are ad networks and agencies willing to work with you in order to solve the problems?

In my experience they don’t yet understand there is a problem.

Has it made it more difficult for you to sell ad space on your site?

We are different to other sites in that advertising is used to reinforce branded content, not as an end in itself.  

We don’t monetise page views, so all of our discussions with advertisers are proposition based – in this respect we’re already used to discussing innovative ways of positioning ads that are relevant and engaging to our visitors.  

Clearly when a user visits on a smartphone (perhaps as they step out of a tube or jump on a bus) they’re unlikely to welcome an ad getting in the way of the content they clicked to view – we therefore don’t show them an ad. 

The Guardian’s mobile site does this well – it is content focused, and apart from a carousel of unobtrusive Google ads near the bottom, that’s all you will see when viewing on a smartphone. 

How do you think the ad industry needs to evolve in order to match up to the needs of site owners?

Undoubtedly responsive web design will drive more branded content, where advertising and promotion is part of the content that readers choose to see.  

Advertising as ‘interruption’ is ill-suited to mobile browsing, where a user may only have 60 seconds to browse a page before moving out of cell range or returning to the conversation they were having before clicking on a link.   

As advertisers become desperate for a user’s attention they try ever more intrusive forms of engagement – page takeovers, interstitials – whereas the smaller (and more mobile) the device, the more likely a user wishes to focus on the primary content of a site.

I also believe the ad industry needs to work together with site owners. As ads have become more complex and interactive, advertisers have sought to control them by serving them in iframes.  

This will never work for a site that adapts to suit the browser - instead advertisers need to understand the payback from helping site owners present their brand in line with the site’s personality and style.  

Whether this means developing ads with a range of JSON hooks that site owners can use to personalise their presentation, or working with sites on individual campaigns, the days of the one-size-fits-all approach are over – but then page-view driven advertising needs to change anyway.

If we truly believe the power of the web is in the hands of its users, then the user experience should be our utmost concern – and the concern of advertisers.  There are some amazing CSS3 animations that brands could be using to engage site visitors, adding to the content on the page.  

Advertisers could also interact with the media query breakpoints on a site (as a user tilts from portrait to landscape on their phone) and encourage publishers to create more dynamic transitions that they could become a part of. 

To finish on a positive note, what benefits have you seen from using responsive design to build your website?

Responsive web design has a number of simple mantras – content first, mobile first – you start designing from this perspective then add more as the viewport size increases (up to a point).  

The proposition (between site owner and user) is far clearer with a responsive site, and arguably more strategic, because it involves understanding the reason for a visit and ensuring a user’s journey through the site continues to reflect this for all use cases. 

This is the key difference I see between responsive and traditional web design – the web has evolved into a product-led entity with many sites being designed to showcase a brand or its content.  

Responsive design, at its very essence, is about convenience and the user-experience, both of these are outward-facing perspectives that reflect the needs of the user and ultimately lead to great engagement and value for the stakeholders involved.

David Moth

Published 30 January, 2013 by David Moth @ Econsultancy

David Moth is Editor and Head of Social at Econsultancy. You can follow him on Twitter or connect via Google+ and LinkedIn

1676 more posts from this author

Comments (9)

Comment
No-profile-pic
Save or Cancel
Avatar-blank-50x50

Anders Madsen

A lot of good pooints. I agree that user experience has to be the main concern. For some businesses I'd prefer dedicated mobile sites for som responsive.
On the backside I just checked out Skiddmark.com on my old iphone and a "Follow us" prompt blocked the site and coursed the browser to crash. Walk the talk. lol

over 3 years ago

Avatar-blank-50x50

Jeff Bruss

Some really good insight from a publisher's perspective. Nicely done and appreciated.

This model works well for Skiddmark primarily because of the style of ads they deploy (video). Traditional banner ad models aren't as flexible. SWF files are still, unfortunately, favorited by agencies for creativity and performance.

We recently launched 8 responsive sites for our magazines simultaneously. We are (working on) serving up different ads based on device viewport size. Problem is we now require multiple ads in multiple formats. Traditional IAB-sized SWF files are fine for desktop, but we require scaled GIFs for mobile compatibility. The irony is the SWF files are usually smaller and would increase performance if they were compatible for mobile.

I question the decision to not display any ads on mobile? Mobile traffic for most publishers currently rests around 15-20%. As that continues to increase, you'll lose more and more of your ad impressions. I think in time advertisers will demand that portion of the traffic. Ignoring 1/5 of your potential audience is not the answer to mobile advertising.

We moved to a more content-based strategy so the "ads" won't be device-centric. You're essentially contributing vetted, sponsored content to the site in the form of reviews, case studies, videos, etc. We'll see how it performs over time. So far most advertisers are still pigeon-holed into the "we want banner ads" world.

Thanks again, great article.

P.S. It's Chris *Coyier* with an i before the e.

over 3 years ago

Avatar-blank-50x50

Sara Domini

Everytime I go on the internet on my phone there are more and more ads that pop up. The mobile world is growing more and more each day and is grabbing the attention of advertising. Some days while ago I visited this useful post for collection of articles on responsive ads: http://www.impressivewebs.com/link-dump-on-responsive-ads/

over 3 years ago

Avatar-blank-50x50

Deri Jones, CEO at SciVisum.co.uk

Great article, and great quotes:

> Advertisers clearly do not understand responsive advertising, which could work to their benefit but instead costs them exposure.

> If we truly believe the power of the web is in the hands of its users, then the user experience should be our utmost concern – and the concern of advertisers.

>advertisers need to recognise that there is no longer an ‘above the fold’ or standard placement with responsive websites and their ad may end up in a number of different positions (or not at all), depending on the user’s device.

over 3 years ago

Avatar-blank-50x50

Stefanp

the font-size of your site sucks!

over 3 years ago

Avatar-blank-50x50

website design

Responsive web design is the buzz word in 2013 these websites open equally well in all size screens may it be i pads, tablets, smartphones, laptops, desktops.

over 3 years ago

Avatar-blank-50x50

Matthew Snyder

Yes Responsive Web Design is emerging and the Responsive Ad problem is something we gave tackled and the goal is to bring more value for the advertiser, publisher and user in this new shift. As "screen shifting" usage cases become more and more important for marketers so will these Responsive design and ad solutions. - Matthew Snyder, CEO ResponsiveAds

over 3 years ago

Avatar-blank-50x50

Atul Kumar Pandey

A lot of good points here yo explained, I really like it. I agree that user experience has to be the main concern. For some businesses I'd prefer dedicated mobile sites for some responsive way.

about 3 years ago

Avatar-blank-50x50

linda watts, Web developer at hotnous

Good information thanks.

about 3 years ago

Comment
No-profile-pic
Save or Cancel
Daily_pulse_signup_wide

Enjoying this article?

Get more just like this, delivered to your inbox.

Keep up to date with the latest analysis, inspiration and learning from the Econsultancy blog with our free Daily Pulse newsletter. Each weekday, you ll receive a hand-picked digest of the latest and greatest articles, as well as snippets of new market data, best practice guides and trends research.