10 considerations when designing for mobile

This is the first 10 steps to take your mobile design skills to the next level

 Watch the animated version here

When designing for the desktop you can consider the end-user environment, when designing for print you can picture where the magazine will be read but when design for mobile the end-user scenarios are so varied and so far ranging that todays savvy mobile designer needs to develop an entirely different skill set.

This is the edited version of a presentation I gave at Mobile Meet Up on Tues 27th Sept about ‘10 key considerations when designing for mobile ‘.  I must stress this doesn’t mean there are only 10, in fact it’s the opposite, there are many more considerations. But here are my top 10:

1. Real Estate

---

Whether you coming from a desktop background or from advertising the canvas size you have to pay with is drastically reduced on the mobile environment.

Over the years the relative screen size difference has increased. The difference between the smallest (128 x 128) and the largest (800 x 480) is now a factor of 23. That means the largest screen is 23 times bigger than the smallest one.

2. Design with distraction front-of-mind

---

One of the biggest challenges in mobile web design and App development is the consideration that people are often doing something else whilst browsing your mobile site, i.e walking, taking lunch or even driving!

1. Make key information, such as your address and phone number, easy to find right away.
2. Make all links big and easy to click.
3. Use text and background colors with good contrast and stand-out

3. One-Column Layouts

---

As you think about layout, a single-column structure tends to work best. Not only does this help with managing limited space on the smaller screen, it also helps you easily scale between different device resolutions and flipping between portrait and landscape mode.

Using responsive web design techniques, you can take a multi-column desktop site layout and adapt it to a single-column layout.

4. Tiny Bandwidth

---

Remember the web pre-1995

5. Virtual demo or showcase

---

Give an impromptu presentation

6. Follow the YouTube model

---

Biggest site for video on the Web has made mobile a priority

7. Location, location, location

---

Optimise so search engines can easily find you

8. Minimise the Taps

---

Limit your options

9. Interactive feedback

---

Provide obvious feedback for any action

10. Test Your design

---

Try out your designs on as many devices as possible

---

And finally…

 Watch the animated version here

This is just a snapshot of the presentation ’10 considerations when designing for the mobile’ that russellwebbdesign generated for Mobile Meet Up on Tues 27th Sept 2011 at The Glassblowers on London’s Soho.