1. Getting familiar with the technology – Books and initial reading material

There’s a huge amount of reading material available on Mobile App design and development. If you’re planning on designing an iOS app (iPhone, iPad or iPod Touch) then you’re in luck. Apple has released several free books on designing and developing for iOS on the Apple Bookstore as well as an online developer library to get you started at no cost.

• iOS Human Interface Guidelines also available as PDF (for some reason I was unable to find this book in the bookstore, might just be missing from the Australian store)
• iOS Technology Overview
• Object Oriented Programming With Objective-C
• iOS Application Programming Guide
• Cocoa Fundamentals Guide
• The Objective-C Programming Language

Unless you’re a developer the first 2 books are probably what you’ll want to stick to. All of the books (apart from the first one) can be found on the Apple Bookstore, just search for the book names and download them for free to your iPhone, iPad or iPod Touch.

Moving from Clicks to Touch Gestures

One of the key differences to come to grips with when coming from a web or desktop design is how people on touch screen devices interact with the devices. Instead of clicks you have taps and gestures. Some things are no longer available like the hover state, other gestures are completely new. Tapping also requires consideration for minimum target size of icons buttons etc. as it can be harder to hit a small target with a finger compared to using the mouse pointer. Apple recommends minimum 44×44 pts for tapping. Form interactions are also somewhat different and you have the abillity to display a context aware keyboard to make input easier, e.g. show @, .com and remove spacebar when entering email addresses.

Touch Gesture Guide (PDF)

Be inspired by the best

Books and theory are one thing but nothing beats the hands on experience of using beautifully designed apps. If you plan on developing an iPhone or an iPad app and you don’t have an iPhone or iPad then I strongly suggest you buy or borrow one as soon as possible, you’ll need this both to get a feel for and be inspired by other apps as well as for testing later on, even if it’s just a static or interactive prototype/mock-up.

Play around with and analyse the apps that you already love and top rated apps in the category you’re targetting. Identify visual elements and functionality that you really like. Download and test apps that have similar functionality to what you’re planning, see what they’re doing right and what they’re doing wrong. Find things that you can improve upon and note down which elements you want to incorporate into your own app. You might not be able to replicate the style or interaction of the best apps yet but it’s good to have a vision or goal to strive towards. Hopefully this will take you a step further to understanding what makes a good app tick and give you ideas and inspiration for your own app.

2. Mobile UI Prototyping Tools

Once you’re familiar with the technology, its constraints and strengths it’s time to familiarise yourself with the standard UI elements. If you’re designing for an iPhone then there will be certain hardware limitations and a set resolution that will limit what you can do as an Interface Designer but at least you can be fairly certain that the User Experience will be fairly consistent across the board. If you’re coming from web design then the device limitations, pre-defined UI elements and controlled environment can actually feel somewhat liberating. You now have a narrower set of variables to consider when designing the UI and you have more control over the end User Experience instead of having to try to design for a myriad of different resolutions, browsers and platforms.

Printable sketch paper for iPhone, iPad and Mobile UIs

Once you’ve got a concept or an idea for a Mobile App it can be a good idea to start sketching out some rough ideas with a pencil on paper. To help you get started there are several wireframing and sketching templates available that provide a great starting point. Before or during early sketching it’s usually a good idea to list all the visual elements your app might require then consider which elements are more important and start building a visual hierarchy. With a few rough sketches you’ll discover what you can fit on each screen and perhaps reconsider what elements are important and start trimming the fat off. As mentioned earlier if you’re from a design background the design and UX process really isn’t that different from what you’re used to, you’re just dealing with a different set of limitations which will in turn have an impact on UI and UX priorities and hierarchy.

• Printable iPhone Application Sketch Template (300DPI JPEG)
• Printable iPad Application Sketch Template (300DPI JPEG)
• iPhone Wireframe Templates for Sketching (PDF and Visio)
• iPhone App Wireframe Template, Landscape & Portrait with notes (PDF)
• Andriod Wireframe Templates (PDF)

BONUS: iPhone Stencil Kit with one of these I’m sure we’ll be the envy of our peers

GUI Kits for iPhone and iPad

Once you’re past a few iterations of the initial sketching phase it’s time to create some more polished UI mock-ups. Luckily there are loads of templates available that contain pretty much all the standard UI elements in iOS, Andriod or pretty much any other platform you’re looking at designing for. When you’re first getting started it’s probably best to stick to the established and standard UI elements rather than trying to radically reinvent the wheel. Good UX isn’t about being different it’s about making the unfamiliar seem familiar. When you’ve done a few apps and have come to grips with the basics then it’s time to consider experimenting and innovating. As they say; you should learn the rules before you break them.

• Teehan+Lax: iPhone 4 GUI PSD (retina display)
• Teehan+Lax: iPhone GUI PSD version 4 (non-retina display)
• Teehan+Lax: iPad GUI PSD version 2
• Smashing Magazine: iPhone PSD Vector Kit
• Iconshock: iPad Vector GUI Elements (Adobe Illustrator)
• Metaspark: Fireworks Toolkit for Creating iPhone UI Mockups
• Information Architects: iPad Stencil for Omnigraffle
• Yahoo! Developer Network: Stencil Kit (available in multiple formats includes elements beyond iPhone)

GUI Kits for Andriod

• Andriod GUI Kit (Omnigraffle)
• Android GUI Kit (Fireworks)
• Android GUI Kit (PSD)

Additional Prototyping Tools for Mobile Apps

InVision – UX Prototyping and Wireframing

InVision is a UX Prototyping Tool that allows you to create interactive mock-ups or wireframes by adding clickable areas to mock-ups you’ve created. Somewhat reminiscent of old HTML image maps, but a lot more sophisticated, it can enable you to create faux interaction using a series of static screen mock-ups either as rough wireframes or as high-quality mock-ups and easily share or present to stakeholders. You can import JPEG, PNG or GIF files so you can create your design mock-ups in Fireworks, PSD, Illustrator or pretty much whatever you want as long as you can output it as one of those formats. InVision works for all types of prototyping not just mobile apps, to test on mobile apps you just need to create your mock-ups in the right size and share the link with your stakeholders.

InVision isn’t free however, you’ll have to pay a monthly subscription ranging between $8-199 depending on the plan and number of active projects you need, but if you’re working in a company with multiple designers and need to collaborate with multiple stakeholders and/or clients then the time saved will more than cover the costs.

MockApp – iPhone App Design for the rest of us

MockApp allows you to quickly create iPhone App mock-ups in either Keynote or PowerPoint, even though it’s targeted more at non-designers it could be useful for professionals as well, in particular if you still need to present your mock-ups in PowerPoint or Keynote. It doesn’t allow for interactive prototyping but it can allow you to quickly and easily create some pretty polished looking mock-ups to present to stakeholders.

MockApp is also free, more or less, all you need to do is let the world know that you appreciate MockApp on Twitter, your blog, Facebook or some other means at your disposal.

iPhone Prototype Firefox Plugin

A simple GUI prototyping tool for creating iPhone mock-ups, available for free as a Firefox Plugin.

Pencil Project – Open Source GUI Prototyping Tool

The Pencil Project, available either as a Firefox plugin or as a standalone desktop application (Windows and Linux only for now, Mac support coming soon), is extremely versatile and can be a lightweight alternative to Visio, allow you to create quick interface mock-ups, web layouts and much more.

It’s open source and completely free, highly recommended.

Prototyping for the Apple iPhone using Fireworks

This article covers in a fair bit of detail how to quickly prototype iPhone applications using Fireworks with some jQuery and PHP to provide you with an interactive prototype that you can test no your iPhone. It’s a slightly different approach but it does seem to work and gives a surprisingly good User Experience for testing elements and functionality of an app very early on.

Balsamiq Mockups – Rapid Wireframing Tool

Balsamiq Mockups allows you to quickly create low-fidelity wireframes with a sketchy look and feel. It comes with a wide array of pre-defined UI elements and icons and allows you to create semi-interative prototypes with click-throughs. Balsamiq Mockups can be used for prototyping iPhone and other mobile apps but works just as well for desktop or web apps.

Balsamiq Mockups runs on Windows, Mac, and Linux via Adobe Air and is also available as a plugin for JIRA, Confluence, FogBugz and XWiki. It is available as a seven day free trial, a full version costs $79.

4. Native Mobile Apps vs. HTML5

The question of developing native apps versus HTML5 web apps is a whole other topic, I’ll try to summarise the basics here.

1. Native apps are usually faster and much more responsive. Unless they are really poorly designed and coded.
2. Native apps require that you develop apps for each individual platform or device which will significantly increase costs and require additional specialised development knowledge for each device.
3. Are you providing this as a free service or do you plan to sell your app for profit? If you’re planning on selling the app then you’ll need to go down the native app route but if it’s a free service or mainly aimed at conveying information then it’s worth considering whether it’s easier just to go with an HTML5 mobile web app instead.

Before choosing to go down the native app route consider the purpose of the application, the target audience and the costs involved for each platform/device. It might be that 90% of your mobile users are on iOS devices so you choose to develop a native iOS app and then provide a mobile website of HTML5 based mobile app for other devices rather than multiple native apps. Later down the track Andriod usage might increase enough for you to be able to justify developing a native Andriod app.

If you have the budget native apps is usually the best way to go though, but HTML5 apps are becoming faster and slicker and are usually a lot more cost effective to maintain, but are still significantly behind native apps in terms of speed, responsiveness and interaction.

Final Thoughts

I hope this has given you a good starting point for diving into mobile app design. I’m new to this myself and it can seem quite overwhelming at first until you realise that it’s not all that different from what you’ve been doing already. It’s an exciting area that’s growing at an incredible rate and staying on top of every new development is nearly impossible but I belive that a strong UX background and theory is much more important than knowing the latest trends in button design. General UX design principles are fairly device agnostic and there is still a place for both UX, UI and Usability knowledge when it comes to mobile, perhaps more so than in other more established areas.

Keeping up with the Mobile Revolution

Over the last few years the Internet has rapidly moved beyond the realm of PCs and laptops into a plethora of mobile devices with a wide range of screen sizes and capabilities. The huge popularity of all the new mobile devices, tablets and touch screen devices has forced a paradigm shift in web and UX design. This is both an exciting and challenging time to be a designer.

Mobile can extend the cababilities of your application and forces you to shift your focus on what’s really important

• GPS (location aware),
• Camera (augmented reality or image input),
• touch-screens and multi-touch controls

Mobile Limitations

Compared to laptop or desktop computers mobile devices typically “suffer” from the following limitations.

1. Smaller screen size
2. Lower bandwidth
3. Less powerful processing power

These limitations are however slowly but surely eroding as tablets and newer mobile devices are getting increasingly more powerful.

Responsive Web Design Techiques

• Fluid Layouts: Responsive design relies on Fluid Layouts or Non-Fixed Layouts. Whilst these can be harder to work with if you consider the alternative of either completely separate layouts for different resolutions or having layouts that don’t work all on some resolutions it’s a relatively small price to pay.
• Media Queries: Repsonsive design uses CSS Media Queries to load overriding CSS rules depending on resolution. This allows you to add additional styling to compensate for chokeholds at lower resolutions that the fluid designs aren’t fully capable of dealing with.
• Scalable Images: Rather than using fixed sizes for images repsonsive design uses percentage widths for images and allows the browser to resize the images based on the fluid width of the container elements. Note: browser scaling of images does not change the file size of the image so you are stuck with the size of the full image.
• Showing or Hiding Content: Sometimes it’s better to just get rid of some content for lower resolutions. Consider whether all that supplemental meta data or fancy icons are really vital for the users, if not it might be better just hide that content at lower resolutions.
• Hiding and Revealing Portions of Images & Using Sliding Composite Images: Anothre popular technique in responsive design is to dynamically crop or hide parts of images depending on the size of the container. This is usually achieved by setting a width or min-width on the container containing the image and hiding the overflow so that parts of the image is cropped when the browser window is smaller. Another way of doing this is to divide images into different regions, one part with the core visual information and the rest with supplemental information, this ensures that only the supplemental information is hidden.

Why use Responsive Web Design?

The prospect of being able to create adaptive layouts that look awesome on pretty much any device is very attractive to designers. CSS Media Queries allows you to do cool things like change from a 3 column layout to a 2 column layout depending on screen resolution, or even to a single column layout for even lower resolutions. Scaling down images or even removing some content completely allows your designs to not only look good but remain functional on multiple devices with a relatively small amount of extra effort.

When it comes to development this can greatly speed things up compared to building multiple completely different designs aimed at different devices. You can (potentially) streamline your development for a faster and easier deployment and reduced time to market.

Additional Reading

• Smashing Magazine: Guidelines for Responsive Web Design
• A List Apart: Responsive Web Design
• Smashing Magazine: Techniques For Gracefully Degrading Media Queries
• Think vitamin: Responsive Design Image Gotcha

Limitations of Responsive Web Design

Repsonsive Web Design is very good at addressing design considerations and adapting for different screen sizes, however it does not always address bandwidth and performance limitations of mobile devices.

Speed and Size

Speed and file size is paramount on mobile devices. This isn’t true in all cases but it’s still a key consideration when specifically targeting mobile devices. If you’re using an iPad over Wi-Fi you’re probably less concerned about shaving a few KBs off your download.

• CSS media queries do not optimise or remove unnecessary HTML or JavaScript that can slow down mobile browsers
• Letting the browser scale down large images does not reduce the bandwidth.
• Performance issues with heavy JavaScript usage and animations

Risk of Ignoring the mobile context

Mobile specific websites have a purpose (usually anyway) typically involving a quick and efficient way of conveying a subset of information. If all you do is scale down your full website to fit a lower resolution you’re probably not meeting all of the expectations of your target audience.

Overcoming the limitations

Some if not most of these issues can be overcome with the correct approach though. One way is to design for mobile frist, keeping it lean and minimal, then scale it up for higher resoluitions. This allows you to ensure that your mobile experience ticks the right boxes.

Responsive design does not have to be the only tool in your toolbox when it comes to moile development. There are JavaScript libraries aimed specifically at mobile app development like jQTouch and Sencha Touch that help bridge the gap.

Additional Reading

• Cloud Four: CSS Media Query for Mobile is Fool’s Gold
• CSS Wizardry: Forget Responsive Web Design…You Need Adaptive Web Design
• UX Magazine: Is Multiscreen Enough? Why Write once shouldn’t be the Goal
• Webcredible: 7 Usability Guidelines for websites on mobile devices
• Create An HTML/CSS Mobile Web App Using Sencha Touch

Final Words

Responsive web design is still new and exciting and still finding it’s place. Responsive design is particular attractive for for tablets and newer mobile devices where bandwidth and speed is starting to equal or even surpass that of older laptops, especially for the substantianl amount of users that use tablets over Wi-Fi. Being able to adapt your layouts for landscape or portait on touch devices is a nice little feature. Whilst most websites, that are fairly well coded, will work well on tablets without the use of responsive techniques however it’s those small extra touches that makes a site a joy to use on a mobile or touch screen device.

Context is vital though, and every project is different. Consider the whether responsive design and media queries is suitable for the aim of the project, the target audience and intended use. There’s still a need for the dedicated mobile websites, they are fast and very low bandwidth and usually serve specific purposes and have clear benefits for that purpose. Personally I don’t think it’s something that’s mutually exclusive either, you could use responsive and fluid techniques to cater for the desktop and tablet market as well as most modern phones then offer a mobile specific site aimed at older devices with the option for users to engage with the “full” site you can get the best of both worlds.

1. Firebug add-on for Firefox

Firebug add-on for Firefox

Apart from Dreamweaver and Photoshop Firebug is without a doubt the tool I use the most when designing, coding and debugging web pages. Firebug integrates seamlessly with Firefox and grants you a vast array of web development tools at your fingertips. You can inspect, edit, monitor and debug CSS, HTML and JavaScript on any live (or local) web page directly in the browser.

It is absolutely invaluable to debug and test CSS changes within a web page to identify where an element is inheriting  unwanted styles. You can even edit CSS and HTML directly in the browser and easily disable or enable CSS styles to test the outcome.  I think I could probably survive without Dreamweaver and just using Notepad++ or a similar text editor with code highlighting instead, but I’m not sure how long I’d last without Firebug.

If you use a lot of jQuery you should look into using FireQuery which is another addon that works together with Firebug and allows you to debug  jQuery scripts from within the browser.

Firebug Alternatives: A good alternative if you’re not using Firefox is the build in code inspector for Chrome. There is also a 100% JavaScript version called Firebug Lite which you can use in any browser through a simple JS include however it does not include all the features of the full Firebug addon. It’s better than nothing when testing in IE6 or IE7 though.

Get the Firebug Firefox add-on here

2. Web Developer add-on for Firefox

Web Developer add-on for Firefox

Another extremely useful Firefox add-on the Web Developer Toolbar adds a huge number of web development tools to your browser. Mostly I use the Web Developer Toolbar for the following:

• Quickly enable or disable JavaScript on pages
• Resize the browser window to different sizes to test page layouts
• Easy access to inspect cookie information on pages and disable cookies for testing

Get the Web Developer Firefox add-on here

3. Grid & Rule Bookmarklets

Grid and Rule bookmarlets

I’ve only recently discovered these handy bookmarklets. Grid overlays a customisable grid directly in the browser, “rule” adds rulers and the ability to add guide lines that snap to elements on the page. This is extremely useful for making sure layouts line up correctly and spaced evenly (if that’s what you want that is).

Get the Grid bookmarklet here, and the Rule bookmarklet here

UPDATE: Allan Jardine has now created a new bookmarklet called “Design” that includes both Grid and Rule as well as two additional tools Crosshair and Unit. Allan describes his Design bookmarklet as “a suite of web-design and development assistive tools which can be utilised on any web-page. Encompassing utilities for grid layout, measurement and alignment, Design is a uniquely powerful JavaScript bookmarklet”.

4. ColorZilla add-on for Firefox

ColorZilla add-on for Firefox

Another recent addition to my design toolbox ColorZilla allows you to use an eye-dropper tool from within the browser to quickly check any colour and copy the RGB or HEX code into another program, typically Dreamweaver or Photoshop. Previously I would have done a print screen, copied that into Photoshop and then check the colours from within Photoshop. Needless to say being able to do this directly in the browser eliminates several steps and avoids extra clutter of screenshots within Photoshop and reduces memory usage. The add-on has a very small visual footprint and only adds a very small eyedropper icon in the bottom left corner.

In addition to the extremely handy eyedropper tool ColorZilla also features a handy DOM colour analyser which quickly gives you a visual presentation of the colour palette any web page. There’s also a page zoom function which seems a bit redundant considering Firefox already supports this.

Get the ColorZilla Firefox addon here

5. HTML validator add-on for Firefox

HTML Validator add-on for Firefox

The HTML validator add-on provides quick and easy access to HTML tidy or SGML parser validation in the browser without the need to submit the HTML to an online validation service. It has a very small visual footprint and only adds a small icon in the bottom right corner with 3 different icons depending on whether the page is valid or if it has warnings or contains errors.

What the validator does is nothing revolutionary as you can always submit your a url or upload a file to the W3C validator, however you don’t really want to keep checking an online validator every 5 minutes. The HTML Validator add-on is always there and gives you an immediate little warning if you’ve added or changed something that isn’t valid. It’s a convenient way to ensure your code is valid along the way rather than doing a bulk change at the end and perhaps risk breaking the layout. It’s also a good way to spot potential typos or mistakes that might make during a quick edit or two.

It might also be good idea to run your site through a couple of different validators towards the end of a project to make sure everything is up to scratch just in case on of the validators does not pick up everything.

Get the HTML Validator Firefox add-on here

Conclusion and summary

That’s it for now. You may already be using some of these browser tools, if not then be sure to check them out. They are both useful and time saving and even better they’re all free.

Do you have your own favourites? Let me know what browser tools are in your design toolbox in the comments below.

Here are some of the most important and often overlooked website guidelines

Easy to read – Your text content is the most important part of your site; make sure it is easily readable

• High contrast between text and background.
• Avoid using background images behind text.
• Dark text on a light background works best.

Easy to navigate - This is important for your users but also vital for search engines

• Keep your navigation clear and consistent.
• Use text links for navigation and avoid using images.

Usability – Easy to Use

• Make sure your site is easy to use.
• Make functionality as clear and easy to use as possible

Consistency in design and layout

• Don’t move things around too much as this can confuse and frustrate your users.
• Keep your design and layout consistent to make it easier to locate similar things across multiple pages on your site.

Low weight – Fast download

• Keep your pages light,
• Compress images to keep the weight down
• Note: whilst this may not seem like it’s as important now with everybody and their dog using broadband it’s still an important factor. People are still impatient and won’t wait forever for your pages to load. At the very least you should ensure that your page framework and site design loads up quickly and then either offset heavy media or gallery loading via AJAX or just ensure that the page can load completely before media or heavy JavaScript or Flash stops anything.