I have been designing applications, mobile sites and whatnot for the last 4-5 years at least. It have have been a challenge and a lot of trial-and-error type of thinking. What works? What doesn't work? Why not? Image formats, quality, and compression rates have been a big part of everyday work.

Lately, though a lot of tools have been developed that will help you when designing mobile applications and mobile web a lot. Lets go through the tools and some tips and tricks that will make your life as a designer easier.

Mirroring your design on your mobile

Of course, you want to see how your design looks on the actual device. To double-check that buttons are large enough, font sizes are not too small, margins are correct etc etc. Depending on the platform you are developing for there are four tools available:

Live View

First screen broadcasting tool I discovered and it works like a charm. It sends whatever is in LiveView's visible area to your iPhone or iPad. It's possible to view the broadcast on several iOS devices at the same time. The master iOS device can even control interactions (taps). Best setup if you are running a Mac and an external screen is to duplicate the workspace and keep that duplicate and LiveView on the Mac while working on the external screen.

Skala Preview

Similar to LiveView for iOS but with some advantages especially if you are running Photoshop CS5 or the CS6 beta. If so whatever you are working on in Photoshop is realtime broadcasted to your iOS device. If you are still with CS4 you have to copy the workspace to Skala Preview to be able to see your design in your iOS device. Skala Preview is $4,99 and you can read more and download the app for Mac and iOS as well here

Adobe Shadow

Adobe Shadow is a tool for mobile web development. Available for Windows and Mac it uses a Chrome extension to mirror the current website on your computer to the iOS or Android application. When you update your browser window all connected devices get updated views as well! Perfect for testing out responsive web design.

Android Design Preview

Similar to Live View and Skala Preview but this is for Android applications and the software is available for Windows, Linux and Mac. You also need to connect your Android device to your computer via USB. Read more and download Android Design Preview for free here.

Mirroring your mobile to your computer

The opposite to the above examples is if you want to mirror whatever is on your mobile to your computer. A nice way to show an application or mobile website on a seminar or in a workshop. In that case check out Reflection app. It's $14,99 but there is a trial version available. You need iPhone 4S, iPad 2 or iPad 3 to be able to use it. Reflection app is using AirPlay to transfer image and sound to your computer.

Links from the computer to your mobile and vice versa

A few other tools/apps that might make life easier are some tools to send links back and forth from your computer and mobile. The tools are Chrome to Phone and Push Browser for $1,99 (available as Push Browser HD as well).

Some tips and tricks

Finally, some tips and tricks that might come in handy for you as a designer or developer.

First one is the iOS application Screenshot Journal that collects all your screenshots on your iOS device in one place. It's possible to zoom in to see all details and it's also possible to back up all screenshots locally so you can delete them from your photo library. Screenshot Journal is $1,99.

The other one is a combination of using iCloud for your images and a smart folder on your Mac. When you take a screenshot on your iOS device it automatically shows up in a smart folder on your Mac. No more emailing screenshots to your self…

Do you have more tools, tips and trick, please leave a comment, email me or send me a tweet at @glvstn