Design for Mobiles

2005 may well go down as the year the future began. The information revolution has been a long one, beginning with the popularisation of desktop computers, continuing with the birth of the web and coming to full fruition with the mobile explosion of the 21st century. Current statistics suggest that there are now more mobile phones in the UK than there are people - around 80 per cent of us use them.

These numbers may be impressive, but what's really happening to mobile technology? Mobile phones are no longer just phones (in truth, they never were). The analysts missed out on this at first, not realising that the killer app wouldn't be voice-to-voice, but data services. This phenomenon took phone manufacturers and networks by surprise. In early 2000, text messaging was considered a marginal feature and provided for free, but the popularity and impact on systems became so great that the networks soon had to start charging. A wise decision considering that, in the UK alone, we now send around 50 million text messages a day.

But why is SMS so significant? It's a gateway technology that enables networks to deliver other types of content. The system the networks predicted would be the standard was the Wireless Application Protocol (WAP) - a mobile technology based on internet standards. WAP is still significant, and becoming more important as mobile connection speeds get faster, but SMS enables networks to charge for content in ways that users find easy and familiar.

While SMS is essential for payment structures, the key delivery technologies have only recently entered the mainstream, following a successful bidding war for "3G" bandwidth in 2004. 3G is much like broadband for mobile phones - a way of connecting to data services alongside voice traffic. 3G services are "always on" connections with typical data rates of 384Kbits per second - although they're capable of up to 1920Kbits/s. More widely used 2.5G or GPRS services connect at a more sedate 56Kbits per second.



The devices themselves are becoming more like mobile media centres than phones. They're MP3 players, PDAs, game consoles, cameras, animation players and video clip viewers. And these applications are going to need designers like you to provide exciting new content.

3D and video, and not all of it requires specialist programming or layout skills. At the bottom rung of the ladder are mobile phone themes, background images and wallpaper. This type of content is easy to create for designers used to working with standard illustration and photo-editing tools and, alongside ring tones, accounts for a large proportion of the ubiquitously advertised mobile content market.

With most handsets now capable of displaying colour images in standard GIF, PNG or JPEG formats, you don't need specialist programs to do the job - though there are tools for specific handsets. You may only be able to charge £1.50 a time, but hit the right market and you could soon find yourself in the money.

The same holds true for animated screensavers. They may sound complex, but they're simply animated GIF files - you know, those things that used to annoy everyone on the web a few years back - and frame-by-frame GIF animation capabilities are built into Photoshop CS2, ImageReady and Macromedia Fireworks.

With the latest handsets, and PDA hybrid "smart phones" in particular, things get a bit more sophisticated. The mobile games market is going through something of a renaissance, and last year's Nokia n-Gage now faces a number of challengers. You don't need a dedicated handset to play games, though - the most popular downloads on the mobile platform have been simple classics like Tetris (which last year spent eight months in the industry's download charts).

In the same way, a clever blend of imaginative graphics and straightforward game play sealed the recent success of Yetisports ( This time, you're a yeti batting around penguins with a baseball bat. Relying on simple interaction - you compete to beat your previous score and the scores of others - the design boasts a viral element that keeps you coming back for more. The Yetisports games are among many that run on Java-enabled phones, but as more handsets ship with vector animation players, we're likely to see an increase in made-for-mobile movies and viral cartoons. 3G networks such as Vodafone Live and the 3 Network are making much of the market for streamed video clips. How much designers will be able to contribute remains to be seen, but some lucrative deals have already been struck. The Grand National was recently delivered to 3 Network customers on demand, while NTL is trialling mobile TV services. But it's not all animation. WAP services are still breathing and as phones become more sophisticated it's getting easier to design for mobile devices, too. The current standard is a cut-down version of XHTML for mobile platforms, though many smart phones can now browse "normal" websites - providing they're W3C compliant. Award-winning apps such as the Live Departure Board system at lead the way with simple design and straightforward functionality.

As you can see, there are plenty of routes into the mobile content market. Not all of them are difficult to get into - but some, like games development and information site creation, require additional expertise. We wouldn't advise you to jump headfirst into games creation without some hefty programming know-how.

The design problems are, in some ways, a little more mundane. You'll be creating content that you hope will display gracefully on multiple handsets and at unpredictable resolutions. While 240x320 pixels seems to be default at the higher-end of the market, screen real estate can be much smaller. This means making a decision early on whether you want to target high-end phones, stick with the mid-range median of 180x220 or aim for a more generic 120x120.

Naturally, mobile phones are far less powerful than computers: "You need to consider that performance on old devices may be bad, but they still need to be supported," says Chris Hilgert, the brains behind Yetisports. "Games have to be highly optimised," he says. Such advice applies to bitmap and vector based animation, too.

As with any "new" development medium, there's a learning curve to climb, as Kris Honeycutt of cuttingedge mobile and web design company Solid Thinking admits: "I recently worked on a little Flash Lite (1.0) project, a small animation created from an imported sequence of alpha transparent PNG files," he explains. "But the transparency in the animation wouldn't work on the mobile platform I was porting it to." Honeycutt discovered that the solution was to export the files from Macromedia Fireworks at 32bits instead of Photoshop at 24. It's trial and error situations like this that underline the youth of the medium.

There are further issues of compatibility to consider, too - but as this is an area that's still developing, there's no broad agreement. Curiously, the situation on mobile platforms is virtually the reverse of the web. The predominant mobile technology for running interactive content such as games is a version of Java - J2ME. While Flash has saturated the web, Java's cross-platform, C-like structure has made it an ideal technology for writing games and mini-apps. This has made it hard for lone designers to make inroads into the market, but that's set to change. , now available on around 40 handsets, is Macromedia's cutdown version of Shockwave Flash for mobile phones. Exceedingly popular in Japan on the NTTDoCoMo network, it boasts ActionScript capabilities comparable to Flash 4, is adequate for delivering games and is an excellent method for creating animation. It has a rival, though. SVG (Scalable Vector Graphics) has made little impact on the web, but the World Wide Web Consortium-endorsed format is well represented on many mobile platforms. There are several Mobile SVG players in circulation - including the Flash Lite Player - but the tools for content creation lack the sophistication of Flash so far. However, given Adobe's recent acquisition of Macromedia, this problem could soon be rectified. There's already an impressive, if overpriced, production tool called Ikivo Animator, which looks like an early version of Flash and integrates well with the Mobile SVG support already included with Adobe GoLive CS2 and Illustrator.



Flash Lite

The mobile market is now ripe for computer literate designers to get in at ground level. With so much happening so quickly, demonstrating that you can create content for these platforms is a must. It's like the birth of the web all over again, except that this time there's money to be made.


1 If you already own Macromedia Flash MX 2004, you can already create animation for a growing number of mobile platforms. Flash Lite export is built into the package. Your first step should be to make sure you're running the latest version of the software.

2 Go to Help>AboutFlash. If you're running any version other than 7.2, you'll need to download an update from While you're at it, grab the Flash Lite CDK (Content Development Kit) from

3 Just about any animation can be repurposed for Flash, or you can develop new content from scratch. The program is bundled with a batch of templates to get you started. Check out File>New>Templates.

4 Once you've opened your chosen template, you can safely delete the top layer. Any content you add should be placed on the Content layer, or on layers below the Device layer. Alternatively, you could design at a generic size of around 120x120 pixels.

5 Optimisation is key when designing for mobile platforms. Jettison all unnecessary elements, optimise vector images by reducing the number of curves, and forget about gradient fills. Convert all elements into symbols, too.

6 Once you're ready to publish, go to File>PublishSettings and choose Flash Lite from the dropdown menu that appears. Choosing version 1.0 will give you less interactive capability, but will ensure the widest compatibility.


Price: £248.75
Platform: Windows 2000, XP
What does it do? SVG-Tiny animation tool that integrates with Adobe CS.

Price: £448.99
Platform: Windows, Mac OS X
What does it do? Create animations in the mobile Flash Lite format.

Price: Free
Platform: Linux, Windows
What does it do? Open source vector illustration tool with SVG output.

Price: £362.99
Platform: Windows, Mac OS X
What does it do? WAP authoring in WML and XHTML-MP, plus SVG-Tiny authoring.

Price: £19.99
Platform: Mac OS X, Windows
What does it do? Converts video clips to 3GPP format for mobile platforms.

The most direct way to make money from mobile content is to sell it yourself. With Open Source software such as Kannel, a free WAP and SMS server, you can easily serve content from your own website. Find out more by visiting

The alternative is to approach existing content providers - particularly those who syndicate content - and, for example.

Now check out 20 pro tips on creating a mobile website from Creative Bloq.

Thank you for reading 5 articles this month* Join now for unlimited access

Enjoy your first month for just £1 / $1 / €1

*Read 5 free articles per month without a subscription

Join now for unlimited access

Try first month for just £1 / $1 / €1

The Creative Bloq team is made up of a group of design fans, and has changed and evolved since Creative Bloq began back in 2012. The current website team consists of eight full-time members of staff: Editor Georgia Coggan, Deputy Editor Rosie Hilder, Deals Editor Beren Neale, Senior News Editor Daniel Piper, Digital Arts and Design Editor Ian Dean, Tech Reviews Editor Erlingur Einarsson and Ecommerce Writer Beth Nicholls and Staff Writer Natalie Fear, as well as a roster of freelancers from around the world. The 3D World and ImagineFX magazine teams also pitch in, ensuring that content from 3D World and ImagineFX is represented on Creative Bloq.