The mobile market is getting bigger and bigger. A lot of people are spending much more time mobile browsing than desktop. Sometimes I feel like developers aren’t paying proper attention to mobile interfaces. Maybe because we don’t have enough tools to do it, right? No, actually it isn’t.
Despite cool things like Safari Mobile that makes any (non-flash) website “browsable” it’s easy to see that conversion rates are much higher on interfaces design for mobile viewing.
So be ready to see A LOT of tools to help you create cool things for mobile with just what we know (HTML, CSS, JS).
Frameworks, plugins and development tools
Many of us know how to do things with HTML and JS. Sometimes seriously cool stuff using HTML5 effects and some of the newer coding options. Now you’ll see a lot of tools to help you to bring all your knowledge to create mobile interfaces easily.
If you like drag & drop, this one is for you. Actually you don’t need to know a single line of code to build your android apps with this great software. I’ve tried it myself and it works great despite a final app sizes being a little large.
One of the most well-known frameworks. Helps a lot when you know a little JS and HTML5 and want to create powerful apps.
For those who knows basic Objective-C, this one is a really useful collection of frameworks to help you in your projects. Really useful!
iWebKit is a file package designed to help you create your own iPhone, iPod Touch and iPad compatible website or webapp.
Web UI Framework for mobile devices – iOS, Android, Palm, and others.
Framework for mobile development with a lot of cool features, like native-like widgets, multiple ways to code, and heavy use of CSS3.
How could I forget this one? Well, this is our well known jQuery with a lot of mobile-optimized features. With its recent 1.0 launch it will be a default script for many sites (just like jQuery “normal” is now).
At first it may look like just another plugin for responsive layouts. Well, it’s actually almost a UI framework with a lot of cool features that will save you a lot of development hours. :)
Kendo has a lot of cool features for responsive UI. It does a lot of amazing things, like responsive charts being one of the most impressive performances you’ll find.
Do you like games? Yeah, you, me and Lime.js do. Build games faster than ever with this HTML5 game framework.
Feel like learning a new language? Mobl is a new programming language for mobile devices. Sounds cool, huh?
NEXT is a free, open source Java and HTML5 framework for building Native Looking web applications for smartphones and tablets.
Using the free open source framework or PhoneGap build you can get access to native APIs.
You’ve probably heard about this one, Sencha Touch allows you to develop mobile web apps that look and feel native on iPhone, Android, and BlackBerry touch devices.
It’s a really good framework, with great documentation, built to allow you to develop easily cross-platform mobile apps.
Titanium is different because after your development process it generates a compiled app for iOS or android, so you can get a higher performance with native apps without learning a line of Objective-C or Java.
More than just a boilerplate, it has a lot of built-in functions to do all the heavy lifting, so you can focus on getting your app out there. Touchy goes beyond just an HTML/CSS template, adding performance optimization tools, hardware accelerated animation, device API, fixed positioning and much more so you can really rock the mobile web.
Here we have everything from validators to image gallery plugins.
The ‘tiny screen first’ boilerplate extension. It prevents mobile devices from downloading desktop assets by using a tiny screen’s stylesheet as its starting point.
jQuery-mobile-960 is a port of 960 grid to jQuery mobile. It merges the flexibility of 960.gs, and the ease of jQuery mobile.
It’s not ready to use…yet. But you should bookmark this one. It’ll help us create animations for desktop, Android, Blackberry QNX, iOS and WebOS mobile devices.
Responsive carousel script. Check it out!
Galleria is a cool image gallery script that works nice from desktop to mobile.
HTML 5 Boilerplate has a set of cool features for mobile interfaces with a lot of guidelines to get the most from your mobile app.
Since it uses the HTML5 Boilerplate it has the same cool features.
It allows you to use crazy grids that would be just impossible with CSS floats. Plus, with a touch of creativity, you can do cool things, like this Scroll Wall with jQuery Mobile and Masonry.
A complete guide of mobile emulators and tools to help you test your apps.
Not Just a Grid is a flexible and modular CSS framework that is designed to assist in the rapid prototyping and development of websites. It has been designed for the future with larger screen sizes and the use of CSS3 for progressive enhancement and richer user experiences.
The mobiReady testing tool evaluates mobile-readiness using industry best practices & standards.
It’s from W3C. No more description needed, right?
Wijmo is a complete kit of over 30 UI widgets with everything from interactive menus to rich charts.
WPtouch: A simple, powerful and elegant mobile theme for your website. WPtouch automatically transforms your WordPress blog into an iPhone application.
Tutorials and Articles
A long and very well written guide with all the basics you need to know before getting started with this mobile development thing.
Good guide with a comparison of what you’re used to doing for desktop development and what you should be doing for mobile interfaces.
jQuery mobile is a great tool, indeed. But you need to know how to use it. This really helpful guide will help you get started with jQuery mobile!
I didn’t mention skeleton because this guide will help you understand it better. You can use these principles in all other mobile boilerplates out there.
Check it with your mobile device and be as amazed as I was at first. Pretty cool :)