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.
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
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.
Comments