Responsive ROI

Impressive stats:

We took a popular ecommerce store (O’Neill Clothing) that we’d recently redesigned and monitored conversions, transactions and revenue for three weeks. Then we quietly deployed the responsive conditions to the already live site and monitored for another three weeks.

Here’s what we found:

iPhone/iPod:
Conversions: + 65.71% Up
Transactions: + 112.50% Up
Revenue: + 101.25% Up

Android Devices:
Conversions: + 407.32% Up
Transactions: + 333.33% Up
Revenue: + 591.42% Up

You like apples?Electric Pulp

Quick, easy and free prototyping on Heroku

Matt Griffin’s recent article on A List Apart about designing responsive sites in HTML, rather than something like OmniGraffle or Photoshop is a great idea and something I’ve done a few times before.

Clients love it as it let’s them click through a site, resize their browser, look at it on their smartphone and see hover states – rather than go through pages and pages of ‘static’ designs. You do spend longer on the wireframe and design phases than you would traditionally, but as the article mentions, you’ll have a boat load of frontend work done before you go full on into build.

One new thing that caught my attention was the use of Heroku as the service where they hosted the wireframes, which is a great idea – you get everything in version control from the start, don’t have to worry about setting up hosting or domains on your own servers and best of all it’s free.

I spent a couple of hours this afternoon getting to grips with the platform and knocking together a lean prototyping kit, which I’d like to release after I’ve given it a bit more polish. You can’t just host static content on Heroku, but it’s easy to use one of the supported languages (PHP is supported, but currently undocumented), to wrap up and serve any static content.

With just a couple of dozen lines using the Express framework on Node.js you can build an app that serves plain ol’ HTML as well as doing cleverer stuff using Jade templates and routing (a bit like fancy permalinks in WordPress).

Responsive web design requires a whole new way of thinking about how sites are built, so having a tools like this makes the process better for clients and easier for developers.

Bringing responsive web design to P2

The P2 WordPress theme has had over a 280,000 downloads from the theme directory, is used on over 40,000 wordpress.com blogs and changed how Automattic communicates internally.

Reading the WordPress development blog, which uses P2, I noticed that it was serving a iPhone specific stylesheet but wasn’t responsive. Since I use WordPress so much myself and for clients I thought a good way to contribute to the community that makes such lovely open-source software would be to spend some time making P2 responsive.

The layout of P2 isn’t that complicated and the theme files are fairly logical so it didn’t take too long. Most of the adjustments were made with CSS, but there were a few things that needed moving around in the markup so they displayed well on small screens.

Today I’m making my work available as a child theme on GitHub. There’s one small Gotcha, which is the iPhone stylesheet. P2 serves the stylesheet using some code in the functions file in such a way as it can’t be overridden from a child theme, so you’ll need to comment out or delete lines 443-453 in p2/functions.php. It will work without this modification to the parent theme, but may appear incorrectly on iPhone’s.

Unfortunately I was only able to test it on the few devices I own, so I’d love to hear from anyone on an Android tablet or phone. But it should work fine in all modern browsers and iOS devices.

I’ve submitted my work to the Automattic theme team so hopefully in not too long a while the changes will be merged into the parent theme. In the meantime you can try out a demo of the theme or download a copy from GitHub.

Update – 16/1/2014v1.1.0 is now out which removes the need to modify the parent theme.

Walking the responsive web design walk

Between the massive portions of food I wolfed down over Christmas I spent some time converting my site to a responsive web design, which I’ve pushed to the site today.

It took a little longer than I thought it might because I rewrote a lot of the CSS with Compass, which should make it easier to maintain in the future and I restyled the comments section to be a bit cleaner and readable.

There were a few backend changes as well. I’m deploying the theme via Git which makes it easy to roll back any changes that might break the site and push and track changes from multiple machines.

I’ve also abstracted out the clients section to a Custom Post Type so in the future I’ll be adding more information about client sites and hopefully getting some glowing testimonials as well.

Converting to a responsive design wasn’t too difficult as most of the site uses a one column design and the only complex layout was the portfolio page that previously used jQuery Masonry. The fluid options for it weren’t what I wanted so I dropped it and switched to a square grid design that resizes nicely instead.

Unfortunately this means quite a heavy penalty on my Google Page Speed test score, but that’s just a guide for development really and other pages that don’t have lots of responsive images still score highly – so I’m doing everything else right. Hopefully in the future the test won’t penalise resized images as responsive designs become more widespread.

Following this first foray into responsive design I’ve made a (sort of New Years) resolution to make all the sites I design in the future responsive. Obviously it’s much easier to build a responsive site from the start than trying to retrofit it into an existing design.

So here’s to a new year with a fresh design and new technology.

The year of responsive web design

Reading through WebDesignTuts ‘How the experts saw 2011’ article one thing screams out: Responsive web design.

Which is a little surprising considering it’s not that new a technology and had broad browser support for some time (apart from IE of course – obligatory JS polyfill). I guess it takes time for developers to find interesting things to do with the massive array of tools modern browsers offer us.

Have a look at mediaqueri.es to see what’s possible with responsive web design.