Turning Web Pages into Apps with Dreamweaver CS5.5
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
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.
Mobile-friendly pages load fast, and they don't require a lot of navigation between pages. Instead, they use JavaScript to make portions of content appear and disappear. Those blocks of content (which may be text, images, or video) look and feel like pages in a website, but they're actually all in a single page (see Figure 2). In this sense, mobile-friendly websites and apps have much in common.
)
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
Apps are free-standing computer programs written in the Objective-C programming language, rather than in the typical combination of HTML, CSS, and JavaScript (or other technologies or languages) used to create mobile-friendly websites. You can create an app in one of two ways:
- Program the app in Objective-C. If you already know Objective C, stop reading this article. Okay, I'm kidding. Keep reading—both 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.