Definitive Mobile Guide – 40+ Tools, Frameworks And Tutorials

Posted in Tutorials2 years ago • Written by 16 Comments

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.

App Inventor (beta)

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.

DHTMLX Touch

One of the most well-known frameworks. Helps a lot when you know a little JS and HTML5 and want to create powerful apps.

EmbedJS

EmbedJS is a JavaScript framework for embedded devices (mobile phones, TVs, etc.). It takes a different approach than other frameworks by shipping just the code needed for each device. That means, there’s less code going over the wire, less code branching at runtime and less memory usage.

Gury

Gury (pronounced “jury”) is a JavaScript library designed to aid in the creation of HTML5/Canvas applications by providing an easy-to-use chain based interface.

iOSFrameworks.com

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

iWebKit is a file package designed to help you create your own iPhone, iPod Touch and iPad compatible website or webapp.

iUI

Web UI Framework for mobile devices – iOS, Android, Palm, and others.

JoApp

Framework for mobile development with a lot of cool features, like native-like widgets, multiple ways to code, and heavy use of CSS3.

jQuery Mobile

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).

jQTouch

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 UI

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.

Lime.JS

Do you like games? Yeah, you, me and Lime.js do. Build games faster than ever with this HTML5 game framework.

MOBL

Feel like learning a new language? Mobl is a new programming language for mobile devices. Sounds cool, huh?

NEXT Interfaces

NEXT is a free, open source Java and HTML5 framework for building Native Looking web applications for smartphones and tablets.

NimbleKit

NimbleKit is the fastest way to create applications for iOS. You don’t need to know Objective-C or the iOS SDK. All you need is to know how to write an HTML page with JavaScript code.

PhoneGap

Using the free open source framework or PhoneGap build you can get access to native APIs.

Sencha Touch

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.

The M-Project

It’s a really good framework, with great documentation, built to allow you to develop easily cross-platform mobile apps.

Titanium

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.

Touchy

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.

WebApp.Net

WebApp.Net is a light weight, powerful JavaScript framework taking advantage of AJAX technology. It provides a full set of ready to use components to help you develop, quickly and easily, advanced mobile web applications.

Wink Toolkit

Wink Toolkit is a lightweight JavaScript toolkit, designed and developed to meet the specific constraints of the mobile environment. The toolkit’s core offers all the basic functionalities a mobile developer would need from touch event handling to DOM manipulation objects or CSS transforms utilities.

Zepto.Js

Zepto.js is a minimalist JavaScript framework for mobile WebKit browsers, with a jQuery-compatible syntax.

Miscellaneous tools

Here we have everything from validators to image gallery plugins.

320 and up

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.

960 Grid on jQuery-Mobile

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.

Animatable

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.

Dynamic carousel

Responsive carousel script. Check it out!

Galleria.Aino.Se

Galleria is a cool image gallery script that works nice from desktop to mobile.

HTML5 Boilerplate / 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.

Initializr 2

Since it uses the HTML5 Boilerplate it has the same cool features.

Masonry

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.

Mobile Emulators & Simulators: The Ultimate Guide – MobileXWeb

A complete guide of mobile emulators and tools to help you test your apps.

Not Just A Grid

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.

MobiReady

The mobiReady testing tool evaluates mobile-readiness using industry best practices & standards.

Treesaver

Treesaver is a JavaScript framework for creating magazine-style layouts using standards-compliant HTML and CSS.

W3C Mobile Validator

It’s from W3C.  No more description needed, right?

Wijmo

Wijmo is a complete kit of over 30 UI widgets with everything from interactive menus to rich charts.

WP Touch

WPtouch: A simple, powerful and elegant mobile theme for your website. WPtouch automatically transforms your WordPress blog into an iPhone application.

Tutorials and Articles

Mobile Web Design Trends and Best Practices – DesignModo

A long and very well written guide with all the basics you need to know before getting started with this mobile development thing.

Building Mobile Web Apps the Right Way: Tips and Techniques – SixRevisions

Good guide with a comparison of what you’re used to doing for desktop development and what you should be doing for mobile interfaces.

10 handy jQuery mobile tips and snippets to get you started – WebDesignerDepot

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!

Build a Responsive, Mobile-Friendly Web Page With Skeleton – DesignShack

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.

Awesome Mobile Image Gallery Web App – Codrops

Check it with your mobile device and be as amazed as I was at first. Pretty cool :)

If you enjoyed this article, get email updates (it's free).

Join over 77,235 Subscribers Today.

43 Written ArticlesWebsiteGoogle+

I'm a web designer and entrepreneur from Itajubá (MG), Brasil. I love writing about obscure topics and doing some cool stuff. And also I do some FREE stuff, check it out: http://www.roch.com.br/

16 Comments Best Comments First
  • hebbe

    Wednesday, November 30th, 2011 08:54

    1

    love this post , thank you share

    0
    • Rochester Oliveira

      Wednesday, November 30th, 2011 13:19

      2

      Hey hebbe, I’m glad you liked!

      thanks :)

      []‘s
      Rochester

      0
  • Ajay

    Wednesday, November 30th, 2011 08:45

    6

    Really nice collection Rochester

    i preffer PhoneGap

    0
    • Rochester Oliveira

      Wednesday, November 30th, 2011 13:20

      3

      Hi webdesignergeeks,

      I just love all of them. PhoneGap is really usefull indeed!

      []‘s
      Rochester

      0
  • Alex

    Wednesday, November 30th, 2011 12:05

    7

    Wow! loaded with mobile web tools and information. Thanks for sharing this.

    0
    • Rochester Oliveira

      Thursday, December 1st, 2011 15:52

      9

      Hey alex,

      I’m glad you liked! Hope to see you again soon.

      []‘s

      0
  • Avinash

    Wednesday, November 30th, 2011 07:47

    5

    Great guide! I learnt more from this post thanks a lot :)

    0
    • Rochester Oliveira

      Wednesday, November 30th, 2011 13:21

      4

      Hi Avinash,

      I’m glad to hear that. Tip: We’ll have much more on this soon, keep coming :)

      []‘s
      Rochester

      0
  • Dan

    Thursday, December 1st, 2011 07:18

    8

    Great Post!
    Thank you for sharing the resource with us.

    0
    • Rochester Oliveira

      Thursday, December 1st, 2011 15:53

      10

      Hi Dezudas,

      If you liked, help us sharing it ;)

      thanks!
      []‘s
      Rochester

      0
  • Jim

    Wednesday, December 7th, 2011 00:10

    15

    One way to run mobile apps and sites through these tests is to use a service that offers Remote User Testing for mobile sites and mobile apps.

    0
  • Aiden

    Thursday, December 1st, 2011 16:21

    11

    Thanks a lot Rochester for compiling the list. Very useful post for me. Will implement much of this into my own business.

    0
    • Rochester Oliveira

      Friday, December 2nd, 2011 14:27

      13

      Hey Web Design Watford,

      I’m glad to hear that, that’s why I do this sutff :)

      []‘s

      0
  • aditia

    Friday, December 2nd, 2011 05:30

    12

    I try to exploring phonegap now, look nice and promising

    0
    • Rochester Oliveira

      Friday, December 2nd, 2011 14:29

      14

      Hi aditia,

      thanks for sharing your experience. I’ve bookmarked your link ;)

      thanks again
      []‘s

      0
  • Jim

    Wednesday, December 7th, 2011 00:10

    15

    One way to run mobile apps and sites through these tests is to use a service that offers Remote User Testing for mobile sites and mobile apps.

    0
  • aditia

    Friday, December 2nd, 2011 05:30

    12

    I try to exploring phonegap now, look nice and promising

    0
    • Rochester Oliveira

      Friday, December 2nd, 2011 14:29

      14

      Hi aditia,

      thanks for sharing your experience. I’ve bookmarked your link ;)

      thanks again
      []‘s

      0
  • Aiden

    Thursday, December 1st, 2011 16:21

    11

    Thanks a lot Rochester for compiling the list. Very useful post for me. Will implement much of this into my own business.

    0
    • Rochester Oliveira

      Friday, December 2nd, 2011 14:27

      13

      Hey Web Design Watford,

      I’m glad to hear that, that’s why I do this sutff :)

      []‘s

      0
  • Dan

    Thursday, December 1st, 2011 07:18

    8

    Great Post!
    Thank you for sharing the resource with us.

    0
    • Rochester Oliveira

      Thursday, December 1st, 2011 15:53

      10

      Hi Dezudas,

      If you liked, help us sharing it ;)

      thanks!
      []‘s
      Rochester

      0
  • Alex

    Wednesday, November 30th, 2011 12:05

    7

    Wow! loaded with mobile web tools and information. Thanks for sharing this.

    0
    • Rochester Oliveira

      Thursday, December 1st, 2011 15:52

      9

      Hey alex,

      I’m glad you liked! Hope to see you again soon.

      []‘s

      0
  • Ajay

    Wednesday, November 30th, 2011 08:45

    6

    Really nice collection Rochester

    i preffer PhoneGap

    0
    • Rochester Oliveira

      Wednesday, November 30th, 2011 13:20

      3

      Hi webdesignergeeks,

      I just love all of them. PhoneGap is really usefull indeed!

      []‘s
      Rochester

      0
  • Avinash

    Wednesday, November 30th, 2011 07:47

    5

    Great guide! I learnt more from this post thanks a lot :)

    0
    • Rochester Oliveira

      Wednesday, November 30th, 2011 13:21

      4

      Hi Avinash,

      I’m glad to hear that. Tip: We’ll have much more on this soon, keep coming :)

      []‘s
      Rochester

      0
  • hebbe

    Wednesday, November 30th, 2011 08:54

    1

    love this post , thank you share

    0
    • Rochester Oliveira

      Wednesday, November 30th, 2011 13:19

      2

      Hey hebbe, I’m glad you liked!

      thanks :)

      []‘s
      Rochester

      0

Comments are closed.

50.19.74.67 - unknown - unknown - US