[vc_row][vc_column width=”1/1″][vc_column_text]David Moth, of Econsultancy, interviews Steve Davies about the challenges of making on-line advertising work on a mobile-first responsive website.[/vc_column_text][vc_separator color=”grey”][vc_column_text]
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.
Potential downsides
Once you’ve worked with some of the many robust frameworks (Bootstrap, Foundation, Boilerplate) there’s really no going back – while there’s a steep learning curve, once you’ve got there it is much quicker to turn out new sites (from concept through to full-tested and live environments).
I wouldn’t overplay the slow loading time, especially when you design mobile-first. While there may be additional scripts loaded (such as html5shiv), the amount of content (especially image sprites) can be tailored using CSS and javascript. Development time will be shorter, of that I am certain, although initially higher when first starting out. One of the most common benefits of a responsive workflow is that it pushes the design away from wireframes and photoshop, with design being started using markup (i.e. you build a real prototype rather than saying ‘this is what the prototype will look like’). The time saved by adopting a truly iterative development is not to be underestimated, likewise the benefit of applying client changes to a real website, so nothing gets lost in translation.
Web developers should be catering for different user’s behaviours (responsive or not), so this is not a real overhead.
Advertising is the biggest PITA – it is simpler dealing with flash based object code (which can be targeted through javascript) than the increasingly common iframe ads, which are inflexible and troublesome. Most sites choose to stack (or hide) ads rather than trying to make them fit the site’s fluid resizing. Add in the nasty habits of interstitials or page takeovers and the headaches multiply.
Scrolling is fully within the designer’s scope, and not a given. Content can be located off-page (and swing open when requested), tabs can be used and/or accordion-type stacking – there’s no excuse for an overly long page that spoils the user experience.
As I say, testing is eventually easier, because the use cases are more consistent between projects. There are also some great tools available, such as Firefox’s Responsive Design View which is built into the browser.
We use large images on our desktop view of the site, most of which have a wide-frame composition, but also detailed close-ups for specific articles. Using one of the modernizr based toolsets it is pretty straightforward to detect and provide a different image per device, although this is usually a matter of choice rather than necessity.
In our experience, the biggest problems come from third-party content (Ads, Twitter or Facebook widgets) and Internet Explorer which continues to be the browser most developers would put in the Room 101 bin. It seems that whenever web standards advance IE is left behind, causing a train wreck of frustration for anyone that has to work with it.
Repsonsive makes sense for any site where accessibility and a consistent user experience is of value.
– Steve Davies.
To find out more about the problems faced by site owners who use responsive design, I spoke to Steve Davies of Fitch Media about their automotive website Skiddmark.
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 visit – 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 728×90 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.[/vc_column_text][/vc_column][/vc_row]