Redesigning a Site For Mobile: What's Involved?
This article shows how you might redesign an existing site for mobile, using (what else?) the Elated site for inspiration. We'll see how the process of paring down features can produce a clean and elegant mobile design.
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:
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.
- Web templates
- Stock images
- Photoshop actions
- 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
- Social media links
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:
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:
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:
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:
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.
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:
- 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?).
- 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.
- 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!
- 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.
I hope you enjoyed reading the article, and that it's given you some ideas for your mobile site designs. Let us know your thoughts on mobile web design in the comments below!
Responses to this article
7 responses (oldest first):
What techniques did you use to serve your mobile-optimized version of the website (actually, iPhone-optimized) to the relevant users?
Did you not consider the ideologies of 'responsive' web design?
Just that ive read up on using the same url to serve mobile content is the best way according to Google for SEO.
I've looked at ways to include and serve a separate css file and it doesnt seem very easy or reliable (http://www.alistapart.com/articles/return-of-the-mobile-stylesheet)
So i was looking to try to find how to best redirect people using a server side technique.
It's actually very easy, and very reliable.
My preferred method is to @import a new stylesheet called @queries.css (I like to keep them separate) and in there I have all of my media queries for different max-widths.
If we were to do it, we'd certainly look at a responsive version, which if possible, seems to me to be the way to go. I don't know if there's any ideology behind it though.
@bamme. Russel's approach seems like a good one to me,
@mauco Thanks for the feedback!
There are lots of good resources and examples here too:
Post a response
Want to add a comment, or ask a question about this article? Post a response.
To post responses you need to be a member. Not a member yet? Signing up is free, easy and only takes a minute. Sign up now.