Turning Web Pages into Apps with Dreamweaver CS5.5
Do you want to build an app? Do you need to build an app? What's the difference between an app and a mobile-friendly website? And is there an easy way to create apps? If you'd like basic answers to these questions, plus step-by-step directions for building an app with coding or other technical techniques, and you've got about an hour to learn all this, you're reading the right article.
Apps Versus Mobile-Friendly Websites
Let's start by addressing our three existential questions:
- What's the difference between an app and a mobile-friendly website?
- Do you want to build an app?
- Do you need to build an app?
Very briefly (remember, we only have an hour!), mobile-friendly websites and apps have much in common. Both look and function well in mobile devices. Mainly that means that they don't have any features that work well on laptops but not on mobile devices. For example, hovering the pointer over a drop-down menu is convenient on a laptop (see Figure 1), but doesn't work in a mobile device because there's no hovering capability on a touchscreen. Columns and sidebars work well on laptops, but can take up too much space in a mobile device. So mobile pages are designed without much (if any) use of columns and sidebars, and they never include features that require hovering.
Figure 1 Moviefone's laptop page has features that wouldn't work well in a mobile device.
Figure 2 Moviefone's mobile page is stripped down to the basics, and behind-the-scenes technology makes it easier to navigate.
Advantages of Apps
Given that mobile-friendly pages solve many of the challenges of making content accessible for mobile devices, why build apps? Apps have some distinct advantages over mobile-friendly websites, from a user's point of view:
- Apps are supposed to work, even when a visitor is offline or out of Internet range (see Figure 3). This feature isn't always correctly implemented; the more complex and rapidly changing the app content, the more of a challenge this feature is to implement.
- Once an app is loaded into a device, navigation within the app can be faster than navigation within an online site that requires loading linked pages and content.
- Apps are a bit more customizable, in the sense that you create your own environment, and you don't have a browser interface taking up space and framing your content.
- Finally, apps can be distributed and sold, via sites such as Google's Android Market and Apple's iTunes, and from other sources online.
Figure 3 Apps are supposed to work, even when a visitor is offline or out of Internet range. Messages like this one indicate an improperly developed app.
Options for Creating Apps
- Program the app in Objective-C. If you already know Objective C, stop reading this article. Okay, I'm kidding. Keep readingboth for general understanding, and because you might find that some of the techniques I'm about to describe are useful for prototyping or saving time.
- Use PhoneGap. The widely employed alternative to writing apps in Objective C is to use PhoneGap, an open source technology embraced and supported by Adobe, which converts HTML web pages to apps. PhoneGap is at the root of Dreamweaver's app-generation tools.
Now that we've finished this micro-overview of the nature and role of apps, let's build one.