iPhone Microsites or Web Apps?
When designing a website for iPhone, the finished product is often labeled a web app. The term “web app” is often broadly applied to describe all iPhone-optimized web content, when much of the content would be better described as iPhone-optimized website content.
Wikipedia defines a web app as an application that is accessed via Web browser over a network. Web apps interact with databases, or handle online transactions, or function as message boards; things of this nature. An iPhone Microsite is more accurately defined as an individual web page or cluster of pages which are meant to function as an supplement to, or as a primary website for display on an iPhone. The functionality has no bearing on the intended platform.
For example, A website which exists to provide directions to local neighborhood restaurants is classic example of a web app; the iPhone-optimized website of the steak house downtown which displays the menu and address when you tap your selection is an iPhone Microsite. It’s been optimized for delivery over the web to the iPhone, but it may not even be an app in the traditional sense of the term. Technically, many of the iPhone websites in existence today are would be better described as microsites.
In the early days of mobile web development, sites created to display a website were often simplified presentations referred to as WAP sites. With the release of the iPhone, mobile web development took off and, since there was no way to create “Native” iPhone applications in 2007, developers set out to create application-style website content and the term “web app” emerged as a logical choice.
Viewport
The viewable screen area of the MobileSafari browser is referred to as the viewport. Technically speaking, it’s made up of a 3.5-inch (diagonal) widescreen Multi-Touch display, and uses 480-by-320-pixel resolution at 163 ppi.
The main point to note is unlike a traditional desktop on which you move content around, a viewport is “fixed” in position and you shift the content underneath, providing a “port” through which to view the content.
In keeping with the design aesthetic of native applications, iPhone sites often sport “chrome”, a term used to describe the header and footer elements often found on these mobile applications.
To learn more about viewports, visit:
http://en.wikipedia.org/wiki/Viewport
http://developer.apple.com/iPhone/library/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html
Memory/Processor Specifications
The iPhone is truly a miniature computer in your pocket. The memory and processor specifications are faster and better than the top-of-the-line Apple computer I bought about 10 years ago.
CPU (central processing unit):
original iPhone: ARM 11, 412 MHz
iPhone 3G: ARM 11, 412 MHz
iPhone 3GS: ARM Cortex, 600 MHz
RAM (random access memory):
original iPhone: 128 MB
iPhone 3G: 128 MB
iPhone 3GS: 256 MB
Languages
The iPhone supports a wide range of languages. As of this writing, it supports English (U.S), English (UK), French (France), German, Traditional Chinese, Simplified Chinese, Dutch, Italian, Spanish, Portuguese (Brazil), Portuguese (Portugal), Danish, Swedish, Finnish, Norwegian, Korean, Japanese, Russian, Polish, Turkish, Ukrainian, Arabic, Thai, Czech, Greek, Hebrew, Indonesian, Malay, Romanian, Slovak, and Croatian.
Audio/Video Formats
Audio formats supported: AAC, Protected AAC, MP3, MP3 VBR, Audible (formats 2, 3, and 4), Apple Lossless, AIFF, and WAV/Video Specifications
Video formats supported: H.264 video, up to 1.5 Mbps, 640 by 480 pixels, 30 frames per second, Low-Complexity version of the H.264 Baseline Profile with AAC-LC audio up to 160 Kbps, 48kHz, stereo audio in .m4v, .mp4, and .mov file formats; H.264 video, up to 2.5 Mbps, 640 by 480 pixels, 30 frames per second, Baseline Profile up to Level 3.0 with AAC-LC audio up to 160 Kbps, 48kHz, stereo audio in .m4v, .mp4, and .mov file formats; MPEG-4 video, up to 2.5 Mbps, 640 by 480 pixels, 30 frames per second, Simple Profile with AAC-LC audio up to 160 Kbps, 48kHz, stereo audio in .m4v, .mp4, and .mov file formats
Fonts
Most of the iPhone doesn’t make use of alternate fonts — the applications, UI elements and your data all render in Helvetica. However, microsites viewed in MobileSafari will render using whatever font is specified in a page’s markup. If your project is iPhone specific you no longer need to specify multiple fonts – though it’s good practice to do so. Just keep in mind that MobileSafari is limited to these fonts:
American Typewriter
Arial
Arial Rounded MT Bold
Courier
Courier New
Georgia
Helvetica
Helvetica Neue
Marker Felt
Times New Roman
Trebuchet MS
Verdana
Zapfino
Type appears noticeably crisper on iPhone when compared to Mac desktop displays. The smaller pixels render extremely crisp and appear similar to printed type.
This is in part to the increased resolution compared to traditional desktop monitors.
One point about the list of fonts included with the iPhone is that it’s only 11 typeface families. While every megabyte matters with the iPhone’s relatively limited storage and RAM, fonts aren’t that big! Most font families weigh under 1 MB, and with a minimum of 4 GB of storage and 128 MB of RAM, the iPhone is roughly equivalent in terms of storage and memory to an OS 8 or 9 systems from a decade ago — machines that shipped with a much wider range of fonts.
Take Usability Cue’s from Native Apps
If you’ve ever taken a look at the similarities in native smartphone applications, you’ve no doubt noticed they all share certain common design elements. For example, there is often a “header” bar that contains a title in the middle and a main action button in the upper right corner (email or search typically). Also, when you drill down a level into the program, there is often a “back” button shown in the upper left hand of the screen, in this bar. This is no coincidence. The user interface of many native applications look similar in style and appearance. This is because the user has become accustomed to seeing these controls in certain places, the same way we have become accustomed to having website menu links display across the top or down the left hand side of traditional website designs.
These UI cues enable you to design a mobile web presentation that is both familiar and intuitive. I suggest you spend some time considering the usability of your designs, and make adjustments as necessary to ensure your design will translate well to the mobile platform.
Why develop websites for iPhone?
If all the aforementioned limitations apply, one may begin to wonder if it’s even worth it develop web content for iPhone. The next 2 chapters aim to provide some basic reasons you should consider this a worthwhile investment of both time and money.
Largely Untapped Marketplace
The iPhone users are not programmed against mobile advertising from the beginning, because they haven’t had a chance to live with it for years and become numb to the message. Add to that the enhanced presentation capabilities, described below, and you have a winning combination.
Over 85 Million Users
At WWDC this year, it was announced that Apple had sold over 85 Million iPhones and iPod touches – And that number is always increasing.
iPhone Sites Work Great On Android Too
The Android OS’s browser uses WebKit, the same engine MobileSafari on the iPhone uses. This means that your sites will look nearly identical across both devices.
New Marketing Capabilities
Incorporating native application support greatly enhances the effectiveness of your site. Click-to-call and Click-to-maps are great ways to increase customer response, and interactive advertising for mobile is certainly one of the most engaging methods of advertising I’ve ever experienced.
Mobile Web Development is becoming commonplace
The mobile internet is not optimized for heavy graphics, multi-page forms or flash animations, it truly is the information superhighway and information is literally at the customers fingertips. They’ll happily surf over to your competitor and click-to-checkout.
