13 Helpful Mobile Web Design Tools & Resources

It’s more important than ever to pay attention to the browsing experience of your sites on mobile platforms. People are doing more of their downtime browsing on devices like the iPad than ever before, and a morning commute read session on the iPhone isn’t uncommon.

Here are 13 mobile web design resources that’ll make it easy for you to deliver a snappy but aesthetically pleasing mobile web experience.

320 and Up

320 and Up is a HTML5 project starter kit that was created around the idea that, in a world where mobile browsing is prevalent, designers should start by designing for the smallest viewport and work the design upwards. It’s a stark contrast to the standard approach, which is to create a design for desktop and scale it down.

Mobile Boilerplate

Mobile Boilerplate is a sibling to the popular HTML5 Boilerplate, and comes packed with tools for creating mobile sites that support the best features of new, WebKit-based mobile browsers while gracefully degrading on legacy Blackberry, Symbian and IE Mobile browsers. Mobile Boilerplate differs from 320 and Up in that it’s best used to create separate versions of your site for mobile, rather than an all-in-one responsive designer.

jQuery Mobile

jQuery Mobile is a framework for smartphones and tablets, based on the popular jQuery and optimized for touch interfaces, allowing you to create interfaces for iOS, Android, Blackberry, Symbian, Windows Phone, webOS, bada and MeeGo in one web app.

960 Grid on jQuery Mobile

960 Grid on jQuery Mobile is a jQuery mobile plugin that makes it easier than ever before to create scaleable grid-based layouts for mobile devices, particularly tablets. You can use the same grid markup you’d use with 960.gs on the desktop.

Zepto.js

Zepto.js is a JavaScript framework like jQuery Mobile, but has been developed with a focus on minimalism and small file sizes. Zepto.js uses jQuery-compatible syntax, so you don’t need to do any re-learning.

jQTouch

jQTouch is a jQuery plugin that makes it easier to develop for the iPhone and Android, taking advantage of their unique means of interaction such as swiping.

Treesaver

Treesaver is a JavaScript framework that helps you create magazine-style layouts easily. These layouts work just as well on mobile platforms as they do in the desktop, and are useful if you’re trying to take advantage of the resurgence of interest in the magazine layout for relaxed tablet reading.

WPtouch Pro

WPtouch Pro is a relatively inexpensive WordPress plugin that takes all of the work out of creating mobile versions of your WordPress sites. After installing the plugin and doing some basic configuration, you’re good to go with a smartphone and iPad optimized version of your site, and you can create child themes to tweak the aesthetic to your liking.

W3C mobileOK Checker

Got your mobile design ready to go and want to make sure that it’s as mobile-friendly as possible? As always, the W3C has stepped up with mobileOK Checker, a validation tool of sorts. It checks things like file size, your use of absolute units, and how many external resources you’ve embedded.

Liquid CSS Layouts for iPhone

Designer Matthew James Taylor has released a whole bunch of layouts with different variations on column arrangement that will work well in desktop browsers but are liquid and compatible with the iPhone as well. Use these if you want to get off to a quick start without figuring out fluid numbers.

iPhoney

iPhoney isn’t so much an iPhone emulator as it is a viewport emulator. It allows you test your sites on the desktop in a 320 by 480 pixel canvas running on Safari, which is pretty much the same as testing on an iPhone (bar the ability to tap things).

iPadPeek

iPadPeek loads your website in an iPad-sized canvas and allows you to test in both landscape and portrait orientations. You’re best of using Firefox 3.5+, Chromium 5+ or Opera 10.5+ as it uses CSS3 transformations to scale your site in portrait mode. But as a web geek you’re using one of those browsers already, right?

Opera Mini Simulator

Opera Mini is still rather popular on certain handsets, and it makes sense to give it as much testing as you would the iPhone. Opera Software themselves have released an official emulator that runs in your browser under Java.