Building Mobile Web Apps the Right Way: Tips and Techniques [09May11] - 0 views
-
Here’s a quick breakdown of the big differences between desktop and mobile platforms: Mobile device hardware is smaller and generally tends to have lower hardware resources than desktops/laptops. Smaller screens bring about different design considerations and challenges. Touchscreen technology introduces new interaction concepts that differ from traditional input devices (keyboard and mouse). With a mobile device, internet connectivity is not always as reliable as a hard-wired broadband connection, which means internet connectivity is a concern and data transfer could be significantly slower. Although these sound as if they are hurdles to get over, with careful thought and consideration, there’s no reason why they should be. Touchscreen technology is exciting. The smaller screen design will really make you think about how to get the user to interact with your mobile web app in the most satisfying way possible. What we should really be doing is looking at the list of differences above and seeing opportunities to deliver our content in a different way. Building mobile web apps will be a paradigm shift from traditional web development and web design.
-
In the next sections, we will discuss development/design considerations, as well as concepts and techniques for building mobile web apps.
-
Leveraging CSS3 Mobile web browsers these days are pretty advanced. Android devices use a mobile version of Google Chrome, whilst the iPhone does the same with Apple’s Safari. Some mobile devices come with mobile Opera and others allow you to install a browser of your choice such as mobile Firefox. So we’re talking about some pretty good browsers in terms of CSS3 and HTML5 feature support. CSS3 allows us to render things through code that would previously have required an image. We can use color gradients, draw rounded corners, create drop shadows, apply multiple backgrounds to HTML elements, and more — all of which can help improve performance and decrease development times.
- ...11 more annotations...
-
Dealing with Image Performance We want to try to get rid of as many images as we can. For the images we keep, we want them to be as lightweight as possible. If images are a necessity for particular parts of your mobile web app design, then there are a couple of extra steps we can use to trim off any excess fat from your files.
-
Using ImageAlpha If Fireworks sounds like too much of a bother, check out ImageAlpha. Once installed, all you need to do is drag your images into its main window and then tweak the export settings to remove excess data from the images.
-
If you look at a typical application interface via your smartphone, it’s almost guaranteed that you’ll find CSS3 being used.
-
By using CSS3, we can reduce data transfer — particularly images and possibly excess HTML markup. We let the browser and the device do the work to render the interface more quickly.
-
HTML Canvas If you fancy a little more work, then you can improve speed even further using the canvas element. Although using CSS gradients eradicates the loading of a physical image, that method still causes the device’s rendering engine to construct an image in the browser, which can result in a performance reduction depending on the device and browser.
-
Hardware Acceleration When it comes to mobile web apps, Apple’s mobile devices are a major consideration that we need to be aware of because of the current popularity of the iPhone and iPad. Safari 5 (on all platforms) brings hardware acceleration into the mix. If you’re not familiar with the feature, Apple describes it as follows: "Safari supports hardware acceleration on Mac and PC. With hardware acceleration, Safari can tap into graphics processing units to display computing-intensive graphics and animations, so standards like HTML5 and CSS3 can deliver rich, interactive media smoothly in the browser."
-
Be Cautious of CSS3 Rendering Performance As brilliant as CSS3 is, certain properties can slow down a web page. WebKit-based browsers, for instance, really seem to struggle with shadows in particular, so just be careful that you don’t apply too many of these to elements of your interface until the issue has been resolved.