Choosing the Right Tools for Your Mobile Project
Mobile web browsing is the next big thing. At least that's what the pundits say. Recent data shows there are about 4 billion mobile users (almost half the planet) (source). In 2011, smartphone sales will surpass desktop/laptop computer sales, moving over 400 million units per year (source). But haven't we heard this all before? Hasn't the mobile web been the "next big thing" for each of the last several years? What gives? It doesn't really matter that 4 billion people have mobile phones unless they are using them to browse the web. In previous years, two big factors have prevented the mobile web from taking off like everyone thought: inferior hardware and sub-par web browsers. The iPhone changed both for the better in 2007. Smartphones have taken a giant leap forward in the last three years and mobile Safari has led to several WebKit-based mobile browsers being developed. So thanks to the iPhone and several other mobile innovations that proceeded it, mobile is for real this time. 25% of those 4 billion people are using the web from their phone today. (source). If you haven't built a mobile website before, the whole scene might seem a bit overwhelming. Today we're going to give you the information necessary to answer some of the tough questions that come up when designing a mobile experience:
- Do we need a dedicated mobile site or just a mobile-optimized one?
- What browsers do we optimize for? How can we test them?
- Should we use a mobile framework? If so, are we depending on it for the UI?
- Which mobile framework is the best fit for my project?
- Which frameworks work best for building a native app?
Mobile FirstLuke Wroblewski was the first to boldly proclaim that we should design websites for the Mobile First. Luke argues that designing for mobile first helps you focus on the most important elements since you have such limited screen space. He also says that mobile phones are now capable of more than desktop browsers, such as location-aware features and multi-touch gestures. So why not have the full arsenal of capabilities available to you when designing? Perhaps the most compelling reason to consider designing for mobile first revolves around media queries. Media queries are part of the CSS3 specification that allow you to specify certain styles based on device parameters, most notably width or height. With either of the following lines of code, I can show styles for a device no wider than 480px:
Meta TagsMobile meta tags aren't nearly as important as they used to be, but there are still three mobile-specific tags worth understanding:
<meta name="viewport" content="width=240, height=320, user-scalable=yes, initial-scale=2.5, maximum-scale=5.0, minimum-scale=1.0" />The viewport meta tag is the newest and most powerful when it comes to mobile, allowing developers to share the width/height of their content with the browser and control how the content is allowed to be zoomed/scaled by the user. Most modern mobile browsers support this tag. Apple gives a nice overview of what the viewport tag is capable of and also details a few iOS-specific tags in their HTML reference library.
<meta name="HandheldFriendly" content="true" />
<meta name="MobileOptimized" content="width" />When the viewport tag is not supported by the phone, it can fall back on one of two older meta tags. Both should become more obsolete in the coming years, but are a good fallback presently. "HandheldFriendly" simply identifies your site as "mobile friendly" to the phone, but doesn't let you set any additional parameters. "MobileOptimized" is a proprietary Microsoft tag, which does allow you to specify a width, but isn't flexible as to zooming or scaling. (source: http://davidbcalhoun.com/tag/mobileoptimized)
Use a Mobile FrameworkWhile it's not required, most great mobile experiences start with a framework. They help developers create rich, interactive mobile sites with minimal code and are optimized for several platforms out of the box. Popular frameworks also have growing communities, dedicated to improving the product across different browsers as the technology rapidly evolves.
jQTouchThis framework is primarily focused on optimizing websites for the iOS operating system, although it can be easily adjusted to work well for other WebKit-based browsers as well. It's very flexible and has a solid community of developers working to improve it. (http://jqtouch.com/) Pros
- Very popular framework with an active community
- Optimized for WebKit, especially iOS
- Great native-like animations and themes
- Nearly 70k minified, includes desktop version of jQuery
- It takes some research to find good tutorials
- Meant for smaller sites, probably not web applications
jQuery MobilejQuery is the big player we all know and love on the desktop. They have recently released an Alpha of their mobile framework, which brings a lot of the same goodness to mobile devices. What's most impressive about this framework is it's adaptability across all the most popular browsers and operating systems. Their graded browser support chart clearly outlines the support across all platforms. (http://jquerymobile.com) Pros
- Huge community
- Supports virtually every modern mobile browser
- Only 13k minified
- Great UI tools, better for cross-device consistency
- Great documentation, novices can pick it up easily
- Only in Alpha 2 phase, still has a little ways to go
- Doesn't really look "native" on any device because it supports so many browsers
ZeptoZepto, created by Thomas Fuchs (script.aculo.us author), is the perfect mobile framework for jQuery pros. It's less than 3 kb minified, enables jQuery-compatible syntax (most of it) and is optimized for mobile WebKit browsers. There are no default UI controls, so it's definitely for the more minimalist coders that are interested in a custom design. The fun chalk iPad project from 37signals was created with Zepto. (http://zeptojs.com/) Pros
- Only 3.3k minified!
- Designed with jQuery-compatible syntax
- No UI tools, only the basics
- Documentation is good, but demos are lacking
- Geared towards more experienced jQuery developers
- It's beautiful
- Great documentation and (paid) support
- Scalable, built for serious web apps
- Has all the UI tools you would need
- Only optimized for iPhone and Android so far
- Steep learning curve, must be experienced with EXT JS
- Runs fast, but framework is 369k
Yahoo! BlueprintBlueprint is a robust framework meant to optimize for literally thousands of different devices. It takes raw XML, communicates with Yahoo!'s web services to generate the pages, then renders the content optimized for the device. The SDK is for more advanced users, but for anyone that has experienced the mobile Yahoo! properties, you know it is very powerful. (http://mobile.yahoo.com/devcenter) Pros
- Comprehensive device support
- Robust features and APIs
- As mobile browsers evolve, this might be overkill
- Requires Yahoo! web services to work
- Steep learning curve
- Developer site and documentation is confusing
- Gives almost instant touch support to existing SproutCore apps
- Mature codebase with some big supporters, like Apple
- UI tools are beautiful on the desktop and mobile devices
- Steep learning curve
JoThis newer framework is lightweight (8k) and has some really nice elements to it. Compatible with webOS, iOS, Android and Symbian, it's probably a great fit for smaller sites that don't have a lot of UI demands. Jo is still new, but it will be really interesting to see how the open source community builds on this solid foundation. (http://joapp.com/) Pros
- Lightweight (8k), still has nice UI tools out of the box
- Compatible with several operating systems
- Community is not as active as with other frameworks
- UI doesn't really feel native on any device
- Codebase still needs more work to be considered with the top-tier frameworks
- Comprehensive UI tools to fit any need
- Built to do heavy lifting for web applications
- Cool drag & drop visual designer tool (see video)
- Rich feature set based on desktop framework, lots of potential as the framework grows
- Steep learning curve
- Still in Alpha at the time of writing, documentation is evolving
- Same HTML/CSS works for your desktop and mobile site
- Progressive enhancement at it's best thanks to media queries
- Not all designs can work with this framework; you have to design for it.
- No native or touch-friendly controls
- Best with smaller sites, probably wouldn't scale for a web application