Elated: Redesigning a website for mobile…

Author: Simon Meek @ Elated

Redesigning a Site For Mobile: What's Involved?

Recently, Matt Doyle here at Elated published an excellent piece called 10 Ways the Mobile Web is Different. Reading it, I realised that the current Elated site really isn’t all that great on a mobile device, and I started wondering how it would best be presented. In my day job, I do quite a lot of mobile web design, but when it’s closer to home it’s harder to be dispassionate about how a site should be revamped for mobile.

Here’s how the site currently looks on my phone:

Elated.com screenshot on iPhone
Elated.com on my iPhone. It renders acceptably, but it’s not that easy to find anything.

There are clearly things that we need to change to make it work on mobile. Our ultra-cute menus function, but are very fiddly, and because you have to pinch and zoom around to see the content, it’s easy to lose your place on the page. Overall it’s a slightly unsatisfactory experience.

Approaching a mobile web design

For me, the process of working through a mobile website design is one of simplification and reducing the feature set to the bare minimum. That means thinking about what people might want from a mobile version of the site and then ruthlessly culling features until you can present them with something that feels native to the mobile experience.

On the visual side, the design challenge when presenting a mobile site is to produce a usable design which finds “space” in such a small area. An older iPhone 3GS for instance has a screen resolution of 320x480px. When presenting information in that kind of area it’s hard to retain enough white space to make it feel elegant and pleasurable to use. Still, I like a challenge.

Features: What goes, what stays?

Elated has several areas to the site, which may be more or less relevant to the mobile user. Here’s a rough list of the content on Elated:

  • Articles & tutorials. This is really our bread and butter.
  • Forums
  • Web templates
  • Stock images
  • Photoshop actions
  • Search
  • Other “infrastructure pages” like “About us”, “Contact Us”, “FAQ”, Newsletter signup etc.
  • Links to social media
  • Ads. Not really content as such, but very important!

We know that people visiting from a mobile device will likely be looking for specific things, and not “browsing” as such, though they might well be looking to read a particular article.

For me, there are obvious things that we can kill off immediately: web templates, stock images and Photoshop actions. These are things you want in a production environment, not on a phone. I’ll keep a cut-down “About and Contact” link, and as it is on the main site, relegate it to a footer.

Forums is a tricky one. It is the sort of thing that you might want to do on a phone, but forming coherent replies using a tiny keyboard is not my idea of fun. For that reason, I’ll leave them out too.

By this reasoning, we’re now down to the much more manageable and focused:

  • Articles & tutorials
  • Search
  • Social media links
  • Ads

Visual design

Now we’ve established what content we’ll be presenting, it’s time to start thinking visually. I’ll start with an iPhone Photoshop template which is generously provided by the lovely people at Teehan & Lax.

If you’re a developer, it’s just as valid of course to do the design process in code. Indeed, I’d say it’s probably a better approach!

Designing our header

I’ll start by creating a header, which will preserve a sense of the Elated identity. Here’s how it looks on the Elated site right now:

Elated.com header
The current Elated header

We can simplify this greatly, knowing that we want to lose a lot of the content. In fact, I’ll start with just the background and the logo. I’m keeping the background to just 65px high to allow as much screen real estate for the content itself as possible.. You can see my version below:

The header with just the logo and background
The header with just the logo and background

We’ve had to lose some detail from the logo. Rather than make it cramped by keeping everything, I’ve lost our “Helping people make websites” tagline and the type ornaments, and reduced the size of the logo “tab” considerably. To make it feel at home in this new rather tiny environment, I’ve dropped the stroke width around the tab down to just two pixels.

We also needed a search option and links to social media. For the search, I’m going to keep this to just a button right now, in anticipation of discussing how the functionality would work with a developer. I’d envisage a search area that pushes out from the top of the page when the button’s tapped, or maybe a different page entirely.

We’ll copy the logo tab, change the gradient, and drop in a search icon, enlarged from the main site to make tapping easier. I’ll also add in our two most important social media links, Facebook and Twitter. Adding delineating lines between the three options gives us the completed header below:

The header with logo and minimal buttons
Our new, stripped-back header

This works for me. It preserves the essence of the Elated identity without taking up too much room, and the tabs fit well in the limited space.

Laying out the homepage

Here, for the sake of simplicity, I’m just going to redesign the homepage of the site, which mainly consists of a list of article headlines.

On the main site, we have a nicely generous area to promote articles on the homepage, but on a phone, we have no such luxury. I’ll take the executive decision to retain just the publication date, the title and the first 10 or so words of the introductory blurb beneath.

We use Typekit to show our headlines in Museo Slab, but Typekit doesn’t (yet) work on mobile devices so I’ll fall back on a standard sans-serif, starting with Helvetica for iOS, and Arial for other devices. I’ll also retain a small flourish from the main Elated site and keep the date in Georgia with the nice type ornament.

Laying that out we get the following, which is a nice compromise of readability with enough detail to be useful:

The page with 1 story headline
Adding the first story

Whenever I’m designing a mobile site or app in Photoshop, I use Live View to monitor what I’m doing on my iPhone. This system relies on an application running on a Mac (it’s Mac-only, sorry Windows folks) and a companion app running on an iPhone. Essentially, you see on your phone that portion of your screen where you’re working. It’s a quick and dirty method of making sure you have the font sizes correct and that buttons are of a decent size.

Adding the ads

Elated brings in a lot of its revenue through advertising, so we can’t ignore our advertisers when considering the mobile space. To that end I’ve added space for putting 125x125px adverts (which we normally have in the sidebar) between stories on the homepage, and have differentiated them from our own content with a grey background. I’ve gone for two stories and the ads “above the fold”. You can just see more content below the ads encouraging people to scroll past the ads.

The finished homepage
The finished homepage. We’ve added adverts and other headlines.

Conclusion

Here I’ve presented just my initial vision of how the Elated site might look if optimised for smartphones. We’ve made some massive compromises along the way, but it is now at least clear, simple, and (hopefully) easy-to-use on a phone.

I’d also like to add several disclaimers to this article:

  1. This is just my initial vision of what Elated could be on mobile. Like all designs, it would likely end up with different features in an iterative design and development process.

    For instance, when I showed a draft of this article to Matt, his initial reaction was to drop the ads to after the content rather than having them above the fold. We were immediately into a discussion over the trade-off between usability and click-throughs (or should that be tap-throughs?).

  2. I haven’t done an article page, which is actually more important from Elated’s point of view than the homepage. This would be a much more tricky prospect I suspect, due to code blocks, images, demos etc.
  3. This has been an academic exercise in how one might approach a mobile site design, which happens to use Elated as an example. While we’d love to have a mobile version of Elated, this article is not a hint of something about to launch!
  4. I am aware there are other devices than iPhones! iPads and Android phones/tablets for instance.

In this article, I’ve shown how important it is to think about what elements you need in your mobile site before you start work in Photoshop. I’ve only managed to show a simple, clear design here because I’ve gone through the stages of working out what’s really needed. Projects in the real world rarely start, or indeed end, with Photoshop.

To make the article easy to follow, I’ve presented the design work as though each element — header, story, ads, and so on — came to me as a nice, perfectly formed idea in a handy linear time-frame. In truth, like any design process, it was much messier, with ideas tried and rejected, blind alleys followed, and many parts of the design worked on at the same time.

Advertisements

About davidmorganjenkins
I am an experienced international, commercial, strategic business leader delivering customer focussed initiatives for world class leisure & sports brands. I have a credible track record of leadership and senior management experience in particular with business operations, marketing & business development within leisure, sport, ecommerce/retail & B2C sectors. I have a unique creative vision, supported by sound financial management & budgetary responsibility having increased brand awareness, sales & core revenue by 60% & profit 200 % at Football Aid over a 3 year period. In parallel, I am centred on attention to detail ensuring a consistent product offering and the greatest possible customer experience. This is delivered through strong collaborative teamwork and creating a culture of creativity, determination and enthusiasm amongst team members. I possess an ability to cement & develop relationships at all levels and can easily engage, report to & upwardly manage share & stakeholder alliances ensuring delivery of business objectives. Key skills Developing & implementing business plans focussing on sales, profits & volume Bringing sales & marketing strategy to life to inspire customers; making visions/dreams a reality Customer service; driving enhanced customer satisfaction & delivering a reputation for excellence Developing, influencing & implementing plans & partnerships that deliver competitive advantage Effective planning & delivery of multiple channel, venue & geographical programmes & projects Leading & managing operation, marketing & business development teams to believe in their ability to succeed Experience headlines Commercial; sales, strategy, development, marketing, sponsorship, promotion, customers service Business administration: P&L, performance, improvement & operational management Marketing & brand; communications, brand management, development & membership/loyalty Ecommerce & retail; FMCG, optimisation, data (CRM), social media, SEO, PPC & affiliates Technology; CRM, web TV, new media, smart phone/iPhone applications

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: