Mediaburst mobile website

After reading about everybody else making mobile sites, I finally got the chance to put a lot of thought into practice as mediaburst asked me to build their mobile website.

Background

I met with mediaburst a couple of months ago and we both decided that the whole site didn’t need to be made mobile; instead just certain aspects of it did. We both agreed that people wouldn’t be likely to want to sign up for mediaburst products via a mobile site rather they’d want to read more about mediaburst via their blog posts and case studies.

Mediaburst also felt that not having a mobile site considering their position as a mobile supplier may look a bit odd so they wanted one to cover that gap. They didn’t feel a mobiles site would get a lot of traffic therefore it needed to be kept simple and within budget.

Content

I think it’s a common myth that people on their mobile phones are in a rush to get stuff done and don’t want to read that much. I spend a lot of time on my phone reading websites when I’m utterly bored e.g. when I’m on the bus or waiting for my girlfriend and in those situations I want content to read.

The homepage of the site leads customers in to read the work and blog posts – hopefully they will read enough of these for them to absorb the mediaburst brand and to get in touch about purchasing products/services from them. It also gives existing customers an easier way to stay in touch with mediaburst – perhaps they’re an existing customer who can’t be bothered to read the blog but when they’re on the train home after work they may feel more open to reading mediaburst blog posts.

Refactoring the design for mobile

StiffRowlands did such a great job branding the original site and creating a mobile version was simple – it was just a case of decided what information was paramount and which information could be cut away.

The idea was very much to keep it simple and to copy, where possible, existing iPhone design ideals such as Back buttons and next/previous arrows in page headers. The Guardian’s iPhone app was a major source of inspiration as I feel it does a great job of making lots of content easy to navigate through.

Separate mobile site vs CSS stylesheet

In a lot of cases, it makes sense to simple add a different CSS stylesheet to create a mobile version of a site – but in this case, the mediaburst.co.uk website is quite heavy; it uses lots of WordPress custom fields and lots of different templates for different pages and I felt that a mobile user should get a much more streamlined site – one that was quicker to download and respond because it was doing less work on the server.

Mobile URLs

The site lives at www.mediaburst.co.uk/m/ and further sections of the site have URLs like:

• mediaburst.co.uk/m/work
• mediaburst.co.uk/m/blog
• mediaburst.co.uk/m/blog/blog-post-slug

The /m/ is a handy way for me to a: keep the site structure simple and b: recognise when WordPress should be showing a mobile themed template. I could have opted for an m.mediaburst.co.uk subdomain but that would have complicated matters further and this was to be a small project with a quick turnaround time.

WordPress set-up

The three main pages: Home, Work and Blog are set-up as normal pages in WordPress (just with a mobile-friendly template) so the client can edit the title and introductory copy. The individual work posts and blog posts are complete copies from the full website blog and case study pages- I didn’t want the client to have to rewrite these posts to make them mobile friendly as it would have meant too much work for them There is a switch in the template that works out if the blog post/case study should be showing the mobile template (worked out by whether the /m/ is in the URL).

There is some jiggery-pokery in the functions.php which checks if the user is running a mobile and if they are it redirects them to the mobile site. At first I wanted to simply show the site with the option for mobile users to switch to the mobile version but mediaburst felt it was best to redirect clients automatically in case they missed the mobile site link.

Project duration

From start to finish this project took 4 days. Including all meetings, design work and client approval. A very fast turnaround time thanks in all to the commitment from both parties to keep the site very simple.

Further reading

Mediaburst wrote more about their new mobile website on their blog.