10 minute read.

Mobile Application Development – the Essential Toolkit

Paul Anthony / June 26, 2011

Posted in: Archive

I’ve been sitting on this post for quite some time. It’s seems with the rapid pace of mobile development on the web, and the increased focus that this brings to developers, that there isn’t a day goes by without someone bringing something new to the table. Whether that be a new library, a new framework, or simply their own mobile application development guidelines, curating information on this particularly hot topic for others is a never ending, and constantly evolving process. Well anyway, without further ado; hopefully some of you will find this mobile developers toolkit, and subsequent collection of information and links that I’ve found be some use in your everyday work.

Every good developer knows that building on a prebuilt framework makes complete sense. It enables you to get up and running quicker, and deliver the end solution on time and on budget. This collection of mobile frameworks use a collection of CSS and Javascript to deliver the bare bones that any mobile developer would need.

Skeleton – One of skeleton’s strengths is the fact that it has been designed to be responsive. For this reason it can be used as a basis for templates which will be used on larger displays, minimising the overlap between mobile and desktop development. Media queries used are optimal on Apple iOS devices, but will scale to fit, giving future flexibility.

HTML5Boilerplate – Whereas Skeleton concentrates on being a one size fits all solution, HTML5 Boilerplate have decided to go for a ‘best practice’ for mobile approach, bundling mobile development/debugging tools along with the solution. If you are detecting server side whether to deliver a mobile experience, it’s probably a better starting point for your development.

320 and up – Andy Clarkes framework is a ‘responsible’ responsive framework, it starts with the smallest possible viewport, and builds ontop of it. Media Queries then load assets and layout styles progressively and only as they’re needed, keeping the requests at a minimum, and speeds on mobile devices high.

Less Framework – Less framework contains a number of preset grid styles and layouts for different devices. Where 320 and up has a progressive enhancement approach, Less feels more like graceful degradation, starting with a 992px layout that old browsers will use, and for the browsers which support media queries, the alternative child styles will be served.

CssGrid – CSS Grid is a 1140px wide grid designed for 1280px monitors. Due to the columns used, it will work on any monitor, stacking the columns logically on top of each other for smaller devices.

GridLess – Gridless starts from mobile viewports and builds up to desktop sizes, it is much more simplistic in it’s approach, with no extra css styles added,  leaving most code and markup decisions more in developers hands.

iWebKit – Contains basic HTML and CSS for creating great web applications which look and feel like native applications. It is built on the premise that the more familiar we make UI for mobile, the easier it will be to use.

iUi – iUI is a framework consisting of a JavaScript library, CSS, and images for developing advanced mobile webapps.
Made with only iPhone in mind in the first place (reason of i UI), it now supports most smartphones & tablets.

Sencha Touch –  Sencha Touch is the world’s first app framework built specifically to leverage HTML5, CSS3, and Javascript for the highest level of power, flexibility, and optimization. Altogether, the entire library is under 120kb (gzipped and minified), and it’s trivial to make that number even smaller by disabling unused components or styles.

NimbleKit – Offers developers a way to create native iOS applications using nothing more than HTML5 and Javascript, NimbleKit is a commercial bridging solution, which provies its own API on top of Cocoa Touch, allowing developers to access core iPhone functionality with Javascript functions. It can be licensed for a one time fee of $99.

PhoneGap – Phone Gap is an open source cross platform HTML5 solution which results in a Hybrid application, with the main rendering performed using WebView as opposed to the native API calls. Relying heavily on device browses, it’s a completely free solution that has widespread adoption, and Apple support.

Appcelerator Titanium – Titanium uses javascript to map to a set of API’s inside the Titanium platform. For that reason, Titanium creates a more genuine native application, across mobile platforms. Again it’s a commercial platform, but the community edition provides access to a basic API set that will get you up and running to test it out.

QuickConnect –  The QuickConnect crossover project, supports major javascript libraries such as JQuery, iUI, or XUI. All QuickConnectFamily applications are compatible with these major mobile Javascript libraries, giving you the flexibility to develop once deploy on many devices.

Rhodes – Using the Ruby language, Rhodes provides a cross platform solution with an MVC approach to development – (separating code from presentation layer) for ALL mobile platforms, not just Android and iPhone.

Android Patterns – to prevent you from reinventing the wheel, Android patterns have produced a selection of interactions that have previously proved successful on the Android platform to gain user interface input.

MOObileFramework curated by Hannah Milan MOObileFramework is a dedicated Tumblr account which collects design patterns and wireframeframes from around the web relating to mobile development.

Mobile Patterns – takes a look at the various mobile design patterns used on known , and not so well known applications and splits them up into useful categories.

Pttrns – a more extensive selection of design patterns for mobile, again categorised for certain types of actions on mobile platforms.

Before you reach for the dev tools, it makes sense to mockup and sketch your UI for your application. This collection of wireframing and mockup tools for mobile platforms are tailored towards that goal.

Mokk.me – A selection of iPhone widgets are available within Mokk.me to drag and drop onto a 320 sized mockup. You can easily create multiple mobile pages and widgets, and sharing functionality for your final masterpiece is built in.

If you normally start with photoshop for your wireframing. Smashing Magazine have done a fabulous roundup of free wireframing kits, UI’s and PSDs which would suit many mobile projects.

If paper is more your bag baby – this collection of stencils and ready printed sketch pads may be more what you are looking for.

iPhone mockup provides a web based mockup tool, in either ‘pencil’ or ‘illustration’ style.

Once you’ve got an application built, one of the fundamental stages prior to deployment is testing that it works on a variety of other platforms, and multiple device types. Some of these desktop and web based applications can help identify bugs and oversight on a variety of devices, prior to going live.

iPhone Tester – A complete web based emulator of the iPhone web browser, with built in swipe gestures. Works best in Safari, but works ok on other browsers.

iPhoney – an open source project, iPhoney as a free application which simulates web browsing in the visual shell of an iPhone. It has support for the alternative Zoom levels on a iPhone, making it a pretty close simulator. Runs on Mac OS X 10.4.7.

LiveView for iPhone and iPad. Have you ever wanted to bring the graphics you’ve lovingly created on your desktop easily across to your iPhone or iPad? Liveview lets you remotely broadcast your screen, making it even easier to illustrate concepts and designs on mobile platforms to your clients.

iPad Peek – iPad Peek provides a web based interface for quickly testing what a design may look like on an iPad web browser.

An open source iPad Simulator, Alex Altryne provides something to iPad Peek, and his code is available at Github for those of you who want to hack on it.

DroidDraw – WYSIWYG User Interface (UI) designer/editor/builder for cell phone and tablet application programming on the Android platform.

Three20 – released by the Facebook team as an open source project, Three20 is an objective C library on which the Facebook app is based. Masterminded by Joe Hewitt, Three20 provides a number of beautiful classes for development.

jQTouch – a jQuery plugin with transitions and javascript designed for forward thinking mobile platforms.

Appsamuck – learning by example is one of the best ways to get up and running. This collection of 31 iPhone applications does just that.

Apps by Google – offers a collection of open source Android applications created by Googlers. If you are looking to read java source code of a high quality, this is a brilliant resource.

Matt Gemmell – provides a collection of open source libraries and applications for iOs and iPhone dev which are well worth checking out.

WordPress for Android is available as an open source application.

A complete list of open source applications on the Android platform are available on this Wikipedia URL. If you are in need of other code to read, you could do a whole lot worse.

Game developers often require some level of prebuilt physics engine to allow the gamer to react with their interface. This collection of libraries will get you up and running much much quicker.

OoLong – The Oolong Engine is written in C++ with some help from Objective-C. It will help you to create new games and port existing games to the iPhone, the iPod touch and the iPad.

cocos2d for iPhone is a framework for building 2D games, demos, and other graphical/interactive applications for iPod Touch, iPhone, iPad and Mac. It is based on the cocos2d design but instead of using python it, uses objective-c.

Bullet is a 3D Game Multiphysics Library provides state of the art collision detection, soft body and rigid body dynamics.

Chipmunk is a C Physics library with an Objective C wrapper, currently used in thousands of games on the App Store.

Box2d is a widely adopted physics engine in use on high profile games such as Angry Birds.

AndEngine – Based on OpenGL, AndEngine is a free Android 2D game platform.

Unity3d is a commercial game engine which is now available on mobile platforms. It’s a widely adopted platform, with an active community.

This is one of the most thorough tutorials I’ve read on Java development  for Android, including the steps needed to setup Eclipse with the required libraries.

Dream In Code’s iPhone development tutorial is also a whole load of awesome for native applications.

iPhoneSDKArticles provides individual blog articles on iPhone development. Hasn’t been updated in a while, but is still a great resource for newbie developers to the platform.

iOS Developer Resources provide the official guide to iPhone development from the horses mouth.

iPhone application development, step by step – using OpenLaslo to create an iPhone application, takes you through the steps with this rapid development framework.

Put Your Content in My Pocket – a List Apart provide some quality CSS and HTML guidelines in this two part guide put Your Content in my Pocket, Part II provides insight into intrinsic browser quirks on mobile platforms.

Google Webmaster Central provide a great overview on developing mobile apps generally, both from a coding and search perspective. Well worth a read.

Hopefully this collection of resources will help you set sail on the ship that is mobile development. If there are any others missing, feel free to drop a comment.

  • css
  • development
  • html5
  • mobile
  • mobile device
  • mobile phone

One response to “Mobile Application Development – the Essential Toolkit

Leave a Reply

Your email address will not be published. Required fields are marked *