Mobile Web: The Good, The Bad, and The Ugly
Mobile Web is about writing an HTML5 web application that will run acceptably on mobile devices in a browser, rather than executing a native app on the device--and it is controversial. Mobile web is often looked down upon, especially after Facebook's Mark Zucker declared that betting on HTML5 was a mistake last year. Using mobile has been likened to putting the engine of a Smart Car into a Ferrari. I think it helps to make a distinction between developing a web site to also render well on mobile devices--surely a good idea that everyone can get behind--vs. deciding to create a mobile web solution in place of a true mobile app; it's the latter case that's controversial.
Let's try to take an even-handed look at mobile web. First of all, mobile web has some good things going for it, and that includes lower cost of development and easier to find developer skills. You create a single web solution, using web skills that you can readily find affordable developers for, that support a large variety of mobile devices. Compare that to developing an assortment of mobile app projects for each target platform, each in a different language, and you can appreciate the savings.
Mobile web is a bad choice when you have requirements a browser-based solution can't satisfy. That includes access to the camera and other hardware sensors on your phone; and access to the mobile operating system for such things as contacts and photos and videos. HTML5 does give you some access to your phone's sensors, such as Geolocation (GPS) support; and some access to your phone's operating system, such as Web Storage. But the bottom line is, there's far more denied to you than made available to you. And we should point out, the most innovative mobile apps tend to take advantage of the phone's hardware and operating system.
And then there's the ugly: mobile web implementations can be unfulfilling to use, for cosmetic or performance reasons. From a user experience standpoint, it takes extra work to make a browser-based web app shine on a mobile device, including detecting the device you're running on and honoring its user interface design philosophy. Overly-simplistic mobile web solutions stand out like a sore thumb because they aren't honoring your phone's conventions. Browser-based solutions can also perform quite poorly compared to native apps.
Mobile web apps are also not delivered through your device's App Store. However, it is possible on many mobile platforms, once you pull up a web app in a browser, to save it to your home screen so that it has the appearance of an installed app.
Having said all that, when is a mobile web approach worth considering? I would say, in these cases:
- When native development is not an option (perhaps you only have web developers available, or are cost-constrained).
- When you don't need access to your device hardware or its operating system beyond what HTML5 can give you.
- When your app is simple, and you don't have robust performance requirements.
- When you don't need to be in the mobile App Stores.
- When you want to provide a web experience for desktop computers that also shows acceptably on mobile devices.
- When you need a reasonable fallback for mobile devices that you won't be creating targeted native apps for.
Responsive Web Design
A key technique in mobile web is Responsive Web Design, which is all about detecting some of the characteristics of the device you are running on (especially screen dimensions) and adapting layout intelligently. Your layout follows a fluid grid model. You tend to use a lot of percentages and proportional style rules in RWD; for example, you might establish a left panel as 30% of available width and a main panel as 70% of available width. By using proportional measurements (which you can also apply to font selection and images), your app can be very tolerant of device size and orientation differences.
Just making your layout proportional is not enough, however: on tablets and phones you'll need to arrange things differently at times, reduce or leave out some content, and make different sizing decisions. To the rescue comes CSS Media Queries, a feature in CSS3 that allows you to have conditional style rules that apply only when certain criteria are satisfied. For example, the CSS media query below only applies when running on a phone-sized screen. Using CSS Media Queries, you can have a base set of CSS rules and then one or more sections of conditional rules that kick into action for some categories of devices.
/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
/* CSS styles for phones go here */
...
}
You can implement your own responsive web design, or leverage frameworks that do much of the work for you. If you're doing it on your own, I recommend devouring the book Responsive Web Design by Ethan Marcotte and taking it to heart. Below we examine some of the responsive frameworks that are available.
Twitter Bootstrap
Twitter Bootstrap is a popular open-source framework that automates responsive web design using a grid system. It's intended for web site development but has good support for mobile devices.
Bootstrap uses classes to define rows, columns, and spanning as shown in the sample HTML fragment below.
<div class="row">
<div class="span4">
<div class="row-fluid">
<div class="4">...</div>
<div class="4">...</div>
<div class="4">...</div>
</div>
</div>
<div class="span8">...</div>
</div>
Apps written in Bootstrap behave well on phones, tablets, and desktop-sized screens. For example, this sample renders quite differently on different size devices.
Rendering on an iPhone
Rendering on an iPad
Rendering on a desktop
jQuery Mobile is a popular mobile web framework, described as "a unified, HTML5-based user interface for all popular mobile device platforms, built on the rock-solid jQuery and jQuery UI foundation." As its name implies, jQuery Mobile is oriented toward mobile devices with touch interfaces.
Here's an example of HTML markup that uses jQuery Mobile. jQuery Mobile relies heavily on data-xxxx attributes in HTML elements.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link type="text/css" href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css" rel="stylesheet" />
</head>
<body>
<div data-role="page" id="first" data-theme="a">
<div data-role="header">
<h1>Page Title1</h1>
</div><!-- /header -->
<div data-role="content">
<p>Page content goes here.</p>
<a href="#second" data-transition="flip">Go to second page</a>
</div><!-- /content -->
<div data-role="footer">
<h4>Page Footer1</h4>
</div><!-- /footer -->
</div><!-- /page -->
<div data-role="page" id="second" data-theme="b">
<div data-role="header" data-add-back-btn="true">
<h1>Page Title2</h1>
</div><!-- /header -->
<div data-role="content">
<p>Page content goes here.</p>
</div><!-- /content -->
<div data-role="footer">
<h4>Page Footer2</h4>
</div><!-- /footer -->
</div><!-- /page -->
<!-- JavaScript placed at the end of the document so the pages load faster. -->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>
</body>
</html>
Let's look at an example. The Dodge mobile website, m.dodge.com, was made using jQuery Mobile, and looks like as follows on phone, tablet, and desktop size screens:
Rendering on an iPhone
Rendering on an iPad
Rendering on a desktop
There are certainly other frameworks out there, so if you're researching you might also want to check out Kendo UI Mobile and Sencha Touch, among others. Some of these frameworks are open source and free, others require a commercial license. Generally you'll find very good developer resources, online demos, and supporting tools for these frameworks.
Summary: Mobile Web
Mobile Web is often looked upon as a second-class citizen in the mobile development world, a fallback for those who can't develop true native apps. However, that's harsh: while mobile web isn't always the right approach, it certainly has its place in the mobile landscape. It especially makes sense when you have a web site that you want to also be consumable from mobile devices.
Next: Getting Started with Mobility, Part 10: A Mobile Back-end in the Cloud with Windows Azure Mobile Services
No comments:
Post a Comment