Smashing eBook #4: Mobile Design for iPhone and iPad

Table of Contents
Preface Imprint Mobile Web Design Trends Mobile Web Design: Tips and Best Practices How to Build a Mobile Website Web Development for the iPhone and iPad: Getting Started How to Create Your First iPhone Application iPhone Apps Design Trends iPhone Apps Designs Reviewed iPhone Apps Design Mistakes: Over-Blown Visuals iPhone Apps Design Mistakes: Disregard of Context Useful Design Tips for Your iPad App Make it a Mobile Web App How to Use CSS3 Media Queries to Create a Mobile Website Forms on Mobile Devices Setting up Photoshop for Web and iPhone Development How to Market Your Mobile Application A Study of Trends in Mobile Design Study Results 1 Study Results 2 Study Results 3 Study Results 4 The Authors Smashing eBook Series

3 4 5 18 32 46 55 64 93 114 134 153 166 173 189 202 209 220 225 251 270 295 318 321

Smashing eBook #4: Mobile Design for iPhone and iPad

Web designers know that their industry changes quickly. Continuous adaption and development of skills is necessary in order to always stay up to date. Over the past few years, mobile web usage has increased to a point that web designers can no longer afford to ignore it. As a result, web designers have a growing need to be educated in this area and to be ready to design websites that accommodate this audience. This e-book presents articles on professional mobile design for the iPhone and iPad, including studies of trends in mobile design and guidelines for the development of mobile web pages. These articles are a selection of the best from Smashing Magazine in 2009 and 2010 dealing with mobile design for the iPhone and iPad plus an exclusive 90-page study about mobile web design trends. The articles have been carefully edited and prepared as a PDF version and versions for ePub and Mobipocket compatible e-book readers, such as the Apple iPad and Amazon Kindle. Some screenshots and links were removed in order to make the book easier to read and to print. This e-book is not protected by DRM. A copy costs only $9.90 and is available exclusively at Please respect our work and the hard efforts of our writers. If you received this book from a source other than the Smashing Shop, please support us by purchasing your copy in our online store. Thank you. Thomas Burkert e-book editor


Smashing eBook #4: Mobile Design for iPhone and iPad

This edition was first published in November 2010 © 2010 Smashing Media GmbH, Freiburg, Germany Book Cover Design: Andrea Austoni Layout & Editing: Thomas Burkert Concept: Sven Lennartz, Vitaly Friedman


Smashing eBook #4: Mobile Design for iPhone and iPad

Mobile Web Design Trends
By Steven Snell

Web designers know that the industry involves plenty of change, and continuous adaption and development of skills is required in order to stay up to date. In the past few years, one of the biggest areas of change has been the amount of Internet users who are accessing websites via phones and mobile devices. As a result, Web designers have a growing need to be educated in this area and to be ready to design websites that accommodate this audience. Because designing websites for mobile devices brings some unique situations and challenges into play, the subject requires a strategic approach from the designer and developer. In this article, we’ll look at the subject as a whole, including current trends, challenges, tips and a showcase of mobile websites. Plenty of helpful resources and articles are also linked to throughout this article, so, if you’re interested in learning more about designing for mobiles, you should have plenty of information at your fingertips.

1. Simple options
One of the most intriguing things about mobile websites is the scaleddown options that are available to visitors. The mobile home page of Digg, for example, contains only 17 simple headlines and links, a log-in link and a few very basic navigation options. When it comes to mobile websites, simplicity is key. Because of the lack of space on the screen and Internet connections that are often slower, it’s important for visitors to have access to what is most crucial, and as little else as possible.

Smashing eBook #4: Mobile Design for iPhone and iPad

In an age of crowded pages, the simplicity of mobile websites can be refreshing. What’s important is there, and what is most likely excess gets cut out. The simple options that a user has can make a mobile website much more usable than it would be otherwise, as long as the options allow for actions the visitor wants to take.

2. White space
White space is an important part of any design, and it’s something that’s usually a challenge in web design because there is a desire to get as much as possible in front of the visitor. White space becomes even more of a necessity in mobile design because the typical screen size is so much smaller. A jumbled website would be very user-unfriendly and very difficult to pull off in the mobile environment.


Smashing eBook #4: Mobile Design for iPhone and iPad As you browse through the websites shown in the gallery further down in this article or in real-world scenarios on your own mobile top-level domain (TLD) first became available. 4. the size of the screens can make many images difficult to see and content harder to read. you’ll find that many websites include ample white space. The average visitor on a desktop or laptop wants to see a visually engaging website. Visitors are more likely to be slowed down or concerned with use of their resources when they’re on a mobile. more opportunity exists to use images. 3. when it comes to mobile design. excessive use of images often does more harm than good. designers have been able to take more liberties with things like bandwidth-hogging video and images. it is currently more common to see companies use a sub7 . especially the ones that are helpful and easy to use. it’s very common to see minimal use of images in mobile Web design. a lot of buzz surrounded the news. For these reasons. because there is still a large percentage of users who are not using these devices. There is a great variety of speeds of mobile Internet connections and of pricing plans for access. as a result. While some websites use .mobi for mobile versions of their websites. and. Lack of images As high-speed Internet connections have become more common in recent years. images are heavily used. As a growing number of mobile users move to smart phones with larger screens and better connection speeds. However. many mobile websites still avoid images when possible. Sub-domains instead of .mobi or separate domains When the . However. Additionally.

mobi TLDs. Prioritized content Because of the simplicity of these pages and the general lack of many options. there are often elements that aren’t necessarily important to visitors. You’ll commonly see mobile versions of websites at such addresses as mobile. m. as you look at the mobile versions of major eBook #4: Mobile Design for iPhone and iPad domain or a separate folder on their primary domain. The content available on a mobile website is typically of the highest priority to the average mobile visitor. because most websites are run commercially for business purposes. Of course.example. There are multiple issues a company must consider when making this decision. you will see more sub-domains than . example. One thing you may find surprising when viewing mobile websites is how much of the content is prioritized for the visitor. but.example. Common Challenges in Designing for Mobiles Of course. rather than spreading things out and potentially confusing visitors. If you’ve attempted to design for mobiles. most mobile websites are ad-free. but. Of not the company. example. these were probably some of your most significant challenges. Web design for mobile devices brings its own unique set of challenges that designers must overcome to create a successful mobile website. 8 .com/ m and other ones along these lines. although in the end the company benefits by having a more usable website. the content displayed is highly all websites should be user-focused. but one of the major benefits of using a sub-domain is that it keeps everything on one domain. there are exceptions to this trend. such as banner ads. 5. While advertisements have largely become an accepted part of the Internet.

While we’re on the topic of mobile screen sizes. which is close to a year old at this point.Smashing eBook #4: Mobile Design for iPhone and iPad 1. screen sizes are changing too.k. mobile design presents this challenge in a bit of a different way than dealing with different-sized desktop monitors. Because mobile technology is always changing. With the rise in popularity of the iPhone and its competitors. Variety of screen sizes Although Web designers are used to dealing with varying screen sizes and the resulting issues. but smaller ones are largely a thing of the past. but. The graph below shows the findings of the report. but of course those older phones are still in use. Fortunately for designers. 9 . it can be something yet more complicated that you need to overcome. The results of the study behind these articles show that 240 x 320 (a. Many newer mobiles and smart phones have larger screens. there are two excellent articles from April of 2008 at Sender 11: Mobile Screen Size Trends and More on Mobile Screen Size Trends. Most designers are comfortable with the challenges that arise from various screen resolutions on desktop monitors. QVGA) should be the standard for mobile development. the most recent numbers most likely favor larger screens even more. if you haven’t worked with mobile design before.a. modern mobile devices typically have bigger screens and higher resolutions than those of a few years ago.

please see both articles at Sender 11. you can easily get started with a general understanding of the mobile Web. if you don’t already have experience. 10 . Lack of understanding One of the biggest challenges that many designers face is just the intimidation of dealing with a new aspect of design. If you haven’t considered mobile browsers and visitors in your previous design work. the designer needs to gain some understanding and familiarity. because the environment of its users is not the same. Because mobile browsers behave somewhat differently than desktop browsers and.Smashing eBook #4: Mobile Design for iPhone and iPad For more interesting details on the study and other helpful charts and graphs. Through the information and resources presented in this article. it’s most likely not something you feel comfortable doing without some research. 2.

the simplicity of mobile websites in a way makes the testing process easier because there is less that can go wrong. many of your visitors will likely be accessing your website in an environment that you were not specifically able to test. the Web Developer Toolbar has some very useful features for testing a website for mobile users. there are more dependable ways of testing these items at the moment. Testing challenges One of the most significant challenges in designing for mobiles is the wide variety of phones in use. 4. it’s possible to be fairly certain that a website will be displayed properly and. As technology and trends continue to change. To start with. the mobile Web just presents another area in which designers need to stay up to date. Of course.Smashing eBook #4: Mobile Design for iPhone and iPad 3. While this does not exactly replicate the experience of visiting the website in a mobile browser. however. With a careful design and some well-planned testing. Web designers need to stay on top of the industry in general. usable on the vast majority of mobile devices. The challenge of change isn’t really anything new to designers. There are a number of helpful resources for testing. of course. we’d like to point out here. While designing for desktops brings its own testing challenges with its various browsers and screen resolutions. First. and the mobile Web is no different. some things you can do so that a mobile website is tested as well as possible. 11 . rapid change is a constant. Because CSS and images may not be enabled when a mobile visitor is on your website. On the mobile Web. Rapid change Like any other technology. you can use the toolbar to disable both and see how the website will appear. more importantly. There are. the mobile Web will evolve accordingly.

similar to what would be used on a mobile device.Smashing eBook #4: Mobile Design for iPhone and iPad it can help identify potential problems in the way content and navigation is displayed. Additionally. you can get an idea of how mobile visitors may experience the website. you can use the Opera WebDev Toolbar to view an unstyled page by clicking on “Display. go to “View” and select “Small Screen. Another helpful testing resource is the Opera browser. 12 .” This will display the website in a very narrow window.” By viewing the page in the small screen with CSS turned off. In the Opera toolbar. The screenshot below shows the Smashing Magazine front page unstyled in the small window.

Another aspect to this issue that must be considered is the status of the average mobile visitor. Clean markup will help ensure that the browser is capable of properly displaying the website. This may seem pretty simple. Clean.Smashing eBook #4: Mobile Design for iPhone and iPad 5. and it will help give visitors a pleasant experience. and weeding it down to just the essentials can be quite a challenge. What are they doing? Why are they accessing the website at that time? What are they likely and unlikely to have any interest in? Keep in mind that the goals of mobile visitors are often vastly different than those of visitors sitting at a desk. let’s examine some specific issues that should be considered by designers during the process. What you may be able to get away with on a traditional website may cause significant problems on a mobile website. 1. semantic markup The best thing you can do to lay a solid foundation for a usable mobile website is to incorporate clean and semantic markup. Considerations for Mobile Design Now that we’ve looked at some of the current trends and challenges in designing for mobiles. Deciding on what is essential If websites are to contain only what is most essential. images and maybe even video. the website owner or designer will have to determine accurately what content is most important. with no unnecessary difficulties. but taking a website that’s loaded with content. 13 .

but h1. 3. Of course. 5. but it’s even more critical for mobile visitors. Mobile browsers are less likely to style text exactly how you would like it to be. A website that uses clean. headings become more significant. Separation of content and presentation with CSS Alongside clean. 14 . The most important thing for these visitors is to be able to access the content and links – presentation is secondary. semantic markup is the need for the separation of content and presentation. valid markup. Mobile visitors are much more likely than desktop visitors to see a website with images and CSS disabled. with CSS to separate the presentation from the content. alt tags are extremely important for usability purposes.Smashing eBook #4: Mobile Design for iPhone and iPad 2. Labeling form fields Like alt tags. Use of headings With inconsistent and often limited styling of text on mobile browsers. h3 and other such tags generally help make certain text stand out and build the structure of the page from a visitor’s perspective. h2. is off to a great start as a mobile website. Alt tags Because it’s likely that some visitors will not be able to see images on the website (or will choose to disable them). alt tags should be used anyway. 4. Imagine trying to use a form without knowing what is supposed to go where. form field labels help make a website much more usable for mobile visitors. Simple details like alt tags and form field labels can make a big difference this way.

Provide only the most relevant links. Sitepoint’s Designing for the Mobile Web Sitepoint published an article. that provides an excellent point of reference on the subject. but very large amounts can make the layout awkward. This is helpful on mobile websites as well. Usually the website will be more usable and look less awkward without floats altogether and with content simply stacked up. 9. Reduce margins and padding Most likely. if possible. and. give visitors an easy way to access the other navigation items. 8. mobile navigation options are scaled down. it’s unlikely the website will look good on a small screen. make sure the background and text colors provide adequate contrast so that the content can be read easily. your mobile website should have smaller margins and padding than your main website has for traditional visitors. Brian breaks down the process of designing for mobiles in seven understandable and digestible steps. Of course. Designing for the Mobile Web by Brian Suda. 7. Avoid floats if possible Even if a mobile browser correctly displays a website that uses floats for layout. In the article.Smashing eBook #4: Mobile Design for iPhone and iPad 6. Consider Color Contrast Because mobile screens may not have the same appearance as desktop or laptop monitors. The article is useful enough to restate the main points here. but generally. Pay attention to navigation Most websites have a primary navigation menu very high on the page. this depends partly on how much of a margin and padding your website currently has. 15 .

and simply styling it differently depending on the medium the visitor is using. Know your phones We must cater not only to different screen sizes and resolutions. 2. They may be waiting in line. 4. Visitors who are browsing your mobile website are unlikely to be in the same circumstances. we can ignore WML and make use of the markup language with which we’re probably much more familiar: XHTML. Don’t mix up your markup For most websites. but to different shapes. riding on the train or bus. From short and long rectangles to tall and skinny ones to perfect squares. Publish the bare minimum While the concept of having only one website. is popular with many standardistas. 16 . a separate mobile website is required to deliver an optimized experience for mobile users. the mobile world contains a rich tapestry of variation that almost makes you want to pull your hair out! 3. Target the right customers Traditional website customers are most likely sitting at a desk facing a large monitor that has a decent resolution. running to the departure gate or lost in an unfamiliar town late at night and trying to get somewhere.Smashing eBook #4: Mobile Design for iPhone and iPad 1.

Test. A browser running on a mobile device generally doesn’t have the luxury of a 2 GHz processor and 200 GB of disk space. you must check. Therefore. Choose a great domain name When deciding on a domain name for a mobile website. validate and recheck your time and time again. it’s the cheapest option (there’s no need to register the . Creating a sub-domain is the easiest of the options to set up (you already own the domain). and it means you avoid having to spend hours tweaking the server (and potentially messing up normal traffic). Brian’s article is an excellent starting point for those who are new to designing for mobile devices. TEST! Testing your website with a Web browser on a desktop computer can get you only so far in terms of simulating the mobile experience. 7.Smashing eBook #4: Mobile Design for iPhone and iPad 5. Validate your markup Mobile browsers are much less forgiving than desktop browsers. 17 . There are many elements of mobile device usage that can’t be replicated accurately in this way. Test. the colleagues and companies I’ve worked with have always used a sub-domain. 6. and it’s also a great resource to have handy down the road when you want to check your work to make sure you’re doing things the right way.

some creative problemsolving skills are required. resolution. To be able to decide which platform(s) you want to optimize your site for. based on the 18 . It’s forecasted that by 2013 there will be more than 1. it’s imperative that web designers and developers learn optimal development and design practices for mobile devices. Mobile Linux. and Android (which is poised to get a lot bigger thanks to a recent deal between Verizon and Google). the iPhone platform.Smashing eBook #4: Mobile Design for iPhone and iPad Mobile Web Design: Tips and Best Practices By Cameron Chapman In Year 2009. To work around the issues that mobile site design presents. such as those found on some Verizon handsets and specific brands of phones. Familiarize Yourself with the Hardware and Software Available Cell phone and mobile device platforms vary greatly when it comes to operating system. and user interface. and to get a result that is as user-friendly and useful as your standard site. With those kinds of numbers. one that is decidedly more restrictive than design for standard browsers.7 billion mobile Internet users worldwide. more than 63 million people in the United States accessed the Internet from a mobile device. it would be helpful to familiarize yourself with the different available options. You can estimate. you won’t need to learn any new technologies for mobile site design. screen size. Symbian OS. Palm OS. There are other proprietary systems specific to particular phones. For the most part. The most common operating systems in use are Windows Mobile. but you will need to look at site design in a new way. the BlackBerry platform.

you’ll want your site optimized for iPhones and Android 19 .Smashing eBook #4: Mobile Design for iPhone and iPad type of audience your site targets. which OSs your users are most likely to be using. trendier. If your visitors are mostly business users. If your users are younger.statcounter. StatCounter Global Stats – Top 8 Mobile OSs http://gs. or more tech-savvy. In any case. ensure your site is at least usable on the majority of mobile platforms. you’ll need to optimize your site for Windows Mobile and BlackBerry devices.

while others are built on WebKit (Android. Safari).com/#mobile_browser-ww-monthly-200901-200910 20 . StatCounter Global Stats – Top 9 Mobile Browsers http://gs. Some of the more common browsers include Safari for the iPhone. a Mozilla browser) or other common platforms. BlackBerry browser and Internet Explorer Mobile (on Windows Mobile devices). Opera Mobile. There are additional browsers in use on Nokia and on other phone brands. WebOS browser (on Palm devices). Some of these browsers are based on proprietary code.statcounter.Smashing eBook #4: Mobile Design for iPhone and iPad Mobile browsers are another factor to consider. Gecko (Fennec. Android browser.

you need to consider your site visitors’ most common screen size and resolution. Your site should work on the widest range of mobile devices that your visitors might be using. in most cases. 21 . breaking up text over multiple pages. The only exception to this is if your standard site is already very minimalist.Smashing eBook #4: Mobile Design for iPhone and iPad Finally. This might mean redoing your menus. or otherwise reworking your site’s layout and functionality. Look for ways to simplify both the design and functionality of your site. Eliminating graphic elements from your site is usually an effective way to optimize its display on a mobile device. should be simpler than your standard site. Simplify! Your mobile site. eliminating images.

22 .Smashing eBook #4: Mobile Design for iPhone and iPad Examples Use Valid Markup Considering the variety of potential operating systems and browsers from which people might be accessing your site. for the most part. web standards become even more vital. very forgiving of bad code. but with a mobile browser you often won’t get that kind of leeway. Standard browsers are. Make sure your code validates and is as clean and minimalist as possible.

Examples 23 . they may want to just use your standard website. the latter of which does an excellent job of rendering standard websites without issue. even if it’s just through a link in the footer (where most of us are already predisposed to looking).Smashing eBook #4: Mobile Design for iPhone and iPad Give Users the Option of Visiting the Standard Site Depending on what kind of device your visitors are using. Give your mobile visitors the option of visiting the standard site. You could additionally give them the option to come back to the mobile site without having to use their back button. This is particularly true with a lot of the better smartphones and the iPhone.

it’s often easier to use a separate mobile theme.Smashing eBook #4: Mobile Design for iPhone and iPad Use a Separate Mobile Theme While optimizing your main site for mobile use sometimes makes sense. Examples 24 . Some sites have one design optimized for regular mobile devices and another for iPhone users. A dedicated mobile theme means you can really take into account how your visitors will see your site and optimize it specifically for them. which can be done on most CMSs by changing the CSS for mobile devices.

It’s very easy to accidentally scroll the wrong way (horizontally instead of vertically or vice versa) when using a touchscreen phone. you eliminate the potential for such a hassle. If your site only scrolls one way. it’s worse.Smashing eBook #4: Mobile Design for iPhone and iPad Limit Scrolling to One Direction It’s really annoying to have to scroll in multiple directions on a web page when using a standard browser. That doesn’t change when you’re visiting from a mobile device. in fact. Examples 25 .

Smashing eBook #4: Mobile Design for iPhone and iPad Don’t Use Pop-Ups or Open New Windows Depending on the particular platform. so don’t use them. If you absolutely need something to open in a new window. make sure you alert your mobile visitors that it will do so. popups and new windows can interfere with the browsing experience. 26 .

They generally won’t look pretty on a mobile device anyway. But eliminate images that serve no purpose other than to look pretty. as are most icons. or cause strange scrolling or layout issues if the resolution is other than what you were expecting. Images that are integral to the content on your site are also fine. A logo is fine. so why bother? And sometimes they just make your site look worse.Smashing eBook #4: Mobile Design for iPhone and iPad Minimize the Use of Images Use only the images you need to get your message across. Examples 27 .

barely-visible links is a real pain. Trying to click on tiny. That means making the clickable area around your links a little greater. and putting more space between links. optimized for touchscreens or non-mouse input devices. Examples 28 .Smashing eBook #4: Mobile Design for iPhone and iPad Optimize Your Navigation Many mobile devices have touchscreen interfaces. so try to design with that in mind. To improve these navigation issues. many sites use a completely separate mobile navigation design. and having to zoom in every time you want to click on something doesn’t make it much better. making buttons larger.

Make sure all the important information and functionality on your mobile site is in plain (X)HTML/CSS. And forget about Flash if your visitors are using an iPhone.Smashing eBook #4: Mobile Design for iPhone and iPad Don’t Rely on Flash or JavaScript Not all phones and mobile devices support Flash or JavaScript. Otherwise. you risk a large portion of your visitors being unable to access important content. there’s no guarantee it will be the most recent version. Even if they do. 29 .

Include as much of the original site content as possible on your mobile site. Examples 30 . In addition to making it available.Smashing eBook #4: Mobile Design for iPhone and iPad Include as Much Content from Your Standard Site as is Practical How many times have you gone to a favorite website from your phone and then realized you can’t get to the part you wanted to visit? It happens all the time. make sure the navigation route to get to it also remains relatively unchanged.

There’s nothing more annoying than clicking a link. either in search engine results or from another website. 31 . make sure it’s set up to send that visitor to the link they were trying to visit.Smashing eBook #4: Mobile Design for iPhone and iPad Make Sure Redirects Work Properly Don’t just send mobile users to your home page. otherwise they’re likely to leave and never come back. and having it redirect to the homepage if you’re on a mobile device. If your site automatically detects whether a visitor is coming from a mobile browser.

Smashing eBook #4: Mobile Design for iPhone and iPad

How to Build a Mobile Website
By Jon Raasch

Over the past few years, mobile web usage has increased to a point that web developers and designers can no longer afford to ignore. In wealthy countries, the shift is being fueled by faster mobile broadband connections and cheaper data service. However a large increase has also been seen in developing nations where people have skipped over the PC and gone straight to mobile. Unfortunately, the mobile arena introduces a layer of complexity that can be difficult for developers to accommodate. Mobile development is more than cross-browser, it should be cross-platform. The vast number of mobile devices makes thorough testing a practical impossibility, leaving developers nostalgic for the days when they only had to support IE6. In addition to supporting different platforms, each device may use any number of mobile web browsers. For instance, an Android user could access your site using the native Android browser, or could have also installed Opera Mini or Firefox Mobile. It’s fine as long as the smartphone uses a progressive web browser (and it’s safe to say that most browsers are progressive nowadays), but it doesn’t have to. Furthermore, the mobile web reintroduces several issues that have been largely ignored in recent years. First, even with 4G networks, bandwidth becomes a serious issue for mobile consumers. Additionally, mobile devices have a significantly reduced screen size, which presents screen real estate issues that have not existed since the days of projection monitors.


Smashing eBook #4: Mobile Design for iPhone and iPad

Combine these issues with cross-platform compatibility problems, and it isn’t hard to see how mobile development is a lot like “stepping backwards in time”. So let’s tackle these issues one at a time and create a road map for mobile web development. • How To Implement Mobile Stylesheets • What To Change With Mobile Stylesheets • Beyond Stylesheets • Special Concerns For iPhone / iPad

How To Implement Mobile Stylesheets
The first step to adding mobile support to a website is including a special stylesheet to adjust the CSS for mobile devices.

Server-side Methods & The UA String
One approach to including mobile stylesheets involves detecting the user agent string with a server-side language such as PHP. With this technique, the site detects mobile devices and either serves an appropriate stylesheet or redirects the user to a mobile subdomain, for instance This server-side approach has several advantages: it guarantees the highest level of compatibility and also allows the website to serve special mark-up / content to mobile users. While this technique is perfect for enterprise level websites, there are practical concerns that make it difficult to implement on most sites. New user agent strings come out almost daily, so keeping the UA list current is next to impossible. Additionally, this approach depends on the device to relay its true user agent, however historically browsers have

Smashing eBook #4: Mobile Design for iPhone and iPad

spoofed their UA string to get around this type of detection. For instance, most UA strings still start with “Mozilla” to get through the Netscape checks used in the 90′s, and, for several years, Opera pretended to be IE. As Peter-Paul Koch writes: It’s an arms race. If device detection really catches on, browsers will start to spoof their user agent strings to end up on the right side of the detects.

Clientside Methods & Media Queries
Alternately, the easiest approach involves detecting the mobile device on the clientside. One of the earliest techniques for including mobile stylesheets involves taking advantage of the stylesheet’s media type, for instance:
<link rel="stylesheet" href="site.css" media="screen" /> <link rel="stylesheet" href="mobile.css" media="handheld" />

Here we’ve included two stylesheets, the first site.css targets desktops and laptops using the screen media type, while the second mobile.css targets mobile devices using handheld. While this would otherwise be an excellent approach, device support is another issue. Older mobile devices tend to support the handheld media type, however they vary in their implementation: some disable the screen stylesheets and only load handheld, whereas others load both. Additionally, most newer devices have done away with the handheld distinction altogether, in order to serve their users fully-featured web pages as opposed to duller mobile layouts.


Smashing eBook #4: Mobile Design for iPhone and iPad

To support newer devices, we’ll need to use media queries, which allow us to target styles to the device width. Since mobile devices typically have smaller screens, we can target handheld devices by detecting screens that are 480px and smaller:
<link rel="stylesheet" href="mobile.css" media="only screen and (max-device width:480px)"/>

While this targets most newer devices, many older devices don’t support media queries, so we’ll need a hybrid approach to get the largest market penetration. First, define two stylesheets: screen.css with everything for normal browsers and antiscreen.css to overwrite any styles that you don’t want on mobile devices. Tie these two stylesheets together in another stylesheet, core.css:
@import url("screen.css"); @import url("antiscreen.css") handheld; @import url("antiscreen.css") only screen and (max-device-width:480px);

Finally, define another stylesheet handheld.css with additional styling for mobile browsers, and link them on the page:
<link rel="stylesheet" href="core.css" media="screen"/> <link rel="stylesheet" href="handheld.css" media="handheld, only screen and (max-device-width:480px)"/>

While this technique reaches a large market share of mobile devices, it is by no means perfect. Some mobile devices such as iPad are more than 480 pixels wide and will not work with this method. However these larger devices arguably don’t need a condensed mobile layout.


Smashing eBook #4: Mobile Design for iPhone and iPad

Moving forward there will likely be more devices that don’t fit into this mold. Unfortunately, it is very difficult to future-proof mobile detection, since standards are still emerging. Besides device detection, the media query approach also presents other issues. Mainly, media queries can only style content differently and provide no control over content delivery. For instance, a media query can be used to hide a side column’s content, but it cannot prevent that mark-up from being downloaded by your users. Given mobile bandwidth issues, this additional HTML should not simply be ignored.

User Initiated Method
Considering the difficulties with mobile UA detection and the pitfalls of media queries, some companies such as Ikea have opted to simply allow the user to decide whether to view the mobile version of their website. While this has the clear disadvantage of requiring more user interaction, it is arguably the most fool-proof method and also the easiest to accomplish. The site contains a link that reads “Visit our mobile site” which transports the user to a mobile subdomain. This approach has some drawbacks. Of course, some mobile users may miss the link, and other non-mobile visitors may click it, since it is visible regardless of what device is being used. Even though, this technique has the advantage of allowing the user to make the mobile decision. Some users prefer a condensed layout that is optimized for their device, whereas other users may prefer to access the entire website, without the restrictions of a limited mobile layout.


Smashing eBook #4: Mobile Design for iPhone and iPad

What To Change With Mobile Stylesheets
Now that we’ve implemented mobile stylesheets, it’s time to get down to the nuts and bolts of which styles we actually want to change.

Increase & Alter Screen Real Estate

The primary goal of mobile stylesheets is to alter the layout for a smaller display. First and foremost, this means reducing multi-column layouts to single columns. Most mobile screens are vertical, so horizontal space becomes even more “expensive” and mobile layouts can rarely afford more than one column of content. Next, reduce clutter throughout the page by setting display: none; on any less important elements.


First make sure to remove or replace any large background images. If your site uses images for buttons or navigation. consider replacing these with plain-text / CSS counterparts. so make sure to increase the clickable areas of any important buttons or links. Conversely. } Other Changes Besides addressing screen size and bandwidth concerns.Smashing eBook #4: Mobile Design for iPhone and iPad Finally. h2 { font-weight: normal. First improve readability by increasing the font size of any small or medium-sized text. Additionally set display: none on any unnecessary content images. there are a few additional changes that should be made in any mobile stylesheet. save additional pixels by reducing margins and padding to create a tighter layout. heading text often appears too heavy on mobile devices. clicking is generally less precise on mobile { content: attr(alt). especially if you use a background image for the whole site. } Next. Reduce Bandwidth Another goal of mobile stylesheets is to reduce bandwidth for slower mobile networks. 38 . use this snippet (and use JavaScript to add the as-text class for img and make sure that altattributes are properly defined in your markup): img. so consider removing the extra font weight: h1. Finally if you’d like to force the browser to use the alternate text for any of your images.

Clickable Phone Numbers First. In these cases it is best to show the links at all times in mobile devices. floated elements can cause problems for mobile layouts. so make sure to have proper definitions of :active-states. such as drop-down navigation. Also. mouseover states do not work with most mobile devices. Beyond Stylesheets In addition to mobile stylesheets. we can add a number of special mobile features through mark-up. and therefore will work on mobile devices. This pseudo-class is displayed when the user clicks an item. so consider removing any floats that aren’t absolutely necessary. the number in the actual link starts with a 1 which is important since the web is international (1 is the US country code). most handheld devices include a phone.Smashing eBook #4: Mobile Design for iPhone and iPad Additionally. 39 . Remember that horizontal real estate is especially expensive on mobiles. However this only enhances the user experience and should not be relied on for more important elements. sometimes it may be useful to apply definitions from the already defined :hover states to the :active states. so you should always opt for adding vertical scrolling as opposed to horizontal. First. however there are a few things to note. Finally. so let’s make our phone numbers clickable: <a href="tel:15032084566" class="phone-link">(503) 208-4566 </a> Now mobile users can click this number to call it.

But we can make it easier on our users by taking advantage of some special HTML5 input types: <input type="tel" /> <input type="email" /> 40 .Smashing eBook #4: Mobile Design for iPhone and iPad Second. another concern is the difficulty of typing compared to a standard full-sized keyboard. our best option is to simply hide the fact that the number is clickable via CSS. So use the phone-link class to disable the link styling in your screen stylesheet. and then include it again for mobile. this link is clickable whether or not the user has a mobile device. Special Input Types When it comes to mobile browsing. Since we’re not using the server-side method described above.

This can be accomplished using a <meta> tag that was introduced by Apple and has since been picked up by other device manufacturers. it is sometimes useful to alter the viewport. since non-supportive browsers naturally degrade to view these special input types as <input type="text" />. and type="email" triggers a keypad with @ and . Furthermore. You can find some information about browser support of HTML5 input attributes in the post HTML5 Input Attributes & Browser Support by Estelle Weyl. The viewport meta tag can also be used to disable the ability to resize the page: <meta name="viewport" content="width=320. In the document’s <head> include this snippet: <meta name="viewport" content="width=320" /> In this example we’ve set the viewport to 320. they scale the page content to fit inside their viewport. See a complete list of HTML5 input types. or visible area. In the example above type="tel" triggers a numeric keypad ideal for entering phone numbers.Smashing eBook #4: Mobile Design for iPhone and iPad These input types allow devices such as iPhone to display a contextual keyboard that relates to the input type. which means that 320 pixels of the page will be visible across the width of the device. HTML5 input types also provide in-browser validation and special input menus that are useful in both mobile and non-mobile browsing. Although the default viewport dimensions work well for most layouts. buttons. Viewport Dimensions & Orientation When modern mobile devices render a webpage. userscalable=false" /> 41 . there’s no loss in using HTML5 input types throughout your websites today.

it makes sense that developers make special accommodations for the mobile giant.css") all and (orientation:landscape). This means that different styles can be applied depending on whether the user is holding their phone vertically or horizontally. Special Concerns For iPhone/iPad With a market share of 28% and estimates of as much as 50% of mobile browsing going through iPhone. This is a much more robust approach.css") all and (orientation:portrait).css will be added for horizontal. include: @import url("portrait. so this is best accomplished with the max-width media query. @import url("landscape. similar to disabling the scrollbars.Smashing eBook #4: Mobile Design for iPhone and iPad However. 42 . this technique takes control away from the user and should only be used for a good reason. since presumably the reason to target different orientations is to style for different widths. we can use a media query similar to the clientside device detection we discussed earlier.css styles will be added for vertical devices and the landscape. Simply apply different max-width queries for the different orientation widths you want to target. Within your stylesheet. Additionally. However orientation media queries have not been adopted by all devices. Here portrait. To detect the device orientation. it is possible to add certain styles based on the device orientation.

or it will cause extra HTTP requests in all other browsers. Regardless of your desire to support iPhone. as it often means breaking out large image sprites and concatenated Javascripts into smaller chunks. iPhone only caches assets that are 25 kb or less. iPhone users will have to be left out. While most mobile devices connect to a computer as an external hard-drive. Apple has taken steps to ensure that the iPhone file structure remains obfuscated. it is usually best to use Javascript to accommodate any simple functionality. For these. so try to keep any reused files under this restriction. Other Shortcomings Besides Flash. Javascript libraries such as jQuery make it easy to build rich interactive applications without Flash. since it does not have an accessible internal file structure. make sure to include appropriate alternate content. First. 43 . Fortunately. Beyond video. Next. Finally certain applications are simply too hard to recreate with HTML5 and Javascript. however. these Javascript apps typically have a number of additional advantages over Flash alternatives. there are a few additional caveats to supporting iPhones and iPads. This can be a bit counter-intuitive.Smashing eBook #4: Mobile Design for iPhone and iPad No Flash Regardless of Apple’s reasons. However be careful to only serve these assets to iPhone. the reality is that iPhones do not play Flash unless they are jailbroken. there are now usable alternatives to Flash. so iPhone’s issues with this technology are easy to get around for most websites. iPhone does not support <input type="file" />.

First. src: url('Comfortaa. which has just been released in alpha. } Special iPhone / iPad Enhancements Despite iPhone’s various shortcomings.eot'). url('Comfortaa. Additionally. we’ll need an . After obtaining the necessary files. However SVG fonts are only supported by Chrome. when it comes to @font-face font embedding. Take a look at Sencha Touch. url('Comfortaa. so we’ll need a hybrid approach to target all browsers.otf or . there are a variety of Javascript libraries that can be used to access some of the more advanced functionality available in iPhone.Smashing eBook #4: Mobile Design for iPhone and iPad Finally. tie them all together with the appropriate CSS: @font-face { font-family: 'Comfortaa Regular'. the device offers a wonderfully rich user experience that developers can leverage in ways not possible with older mobile devices.ttf for Firefox and Safari. keep an eye on the much anticipated jQuery Mobile.svg#font') format('svg'). IE has actually supported @font-face since IE4). and also work on similar devices such as Android. iPhone’s Mobile Safari doesn’t fully support it and supports the SVG file format instead. local('Comfortaa'). as well as an Embedded Open Type (EOT) for IE (believe it or not. jQTouch and iui. In addition to the SVG.ttf') format('truetype'). src: local('Comfortaa Regular'). 44 . These three libraries allow you to better interface with the iPhone. Opera and iPhone.

png"/> Don’t worry about rounded corners or a glossy effect. Start by saving a 57 x 57 pixel PNG somewhere on your website. Although mobile occupies a significant chunk of global web browsing. the technology is still very much in its infancy. iPhone will add those by default. Conclusion As the worldwide shift to mobile continues.Smashing eBook #4: Mobile Design for iPhone and iPad Next. Unfortunately. In fact. the default bookmark icon is a condensed screen shot of the page. This means that the techniques described in this article are only temporary. the only thing in web development that remains constant is the perpetual need to continue learning. new standards are emerging to unify mobile browsers. the App Store isn’t the only way to get an icon on your users’ iPhones – you can simply have them bookmark your page. Hopefully this article has left you with both the desire and toolset necessary to make mobile support a reality in your websites. 45 . Just as standards emerged for desktop browsing. which doesn’t usually look very good. and it is your responsibility to stay on top of this ever-changing technology. so let’s create a special iPhone icon. then add this snippet within your <head> tag: <link rel="apple-touch-icon" href="/customIcon. handheld device support will become increasingly important.

Like it or not. with the next-highest OS being Android at 26%. it’s time to dive in and familiarize yourself with the tools required to optimize websites and Web applications for this OS. which sometimes vary between the iPhone and iPad. native-looking applications using HTML. If you haven’t already. the iPhone OS. Sales projections for the Apple iPad run anywhere from one to four million units in the first year.Smashing eBook #4: Mobile Design for iPhone and iPad Web Development for the iPhone and iPad: Getting Started By Nick Francis According to AdMob. it has great CSS3 and HTML5 support. Safari on iPhone OS is a really great browser. coding and testing. Before we get into the three phases. It also has some slick interface elements right out of the box. JavaScript and CSS. let’s look at some of the advantages and disadvantages of building a Web app rather than a native app. because the iPhone OS has been around for quite some time now. have become a force to be reckoned with for Web developers. and Safari in particular. a lot of resources are available. the iPhone operating system makes up 40% of the worldwide smartphone market. Advantages of building a Web app instead of a native app: 46 . Lastly. Just like Safari for the desktop. But you can still create powerful. I know that most discussion about the iPhone OS platform centers on native applications. This article focuses on three phases of building and optimizing your website: design. Thankfully.

If you’re charging users. 5. 3. Disadvantages of building a Web app instead of a native app: 1. Optimizing your Web app for other popular platforms. You don’t have to learn Objective-C. Installing the app on a device is a little trickier. with the same code is much easier. Inspiration Not many people know that Apple has a “Web apps” section on its website. which is especially important given the terms of service dispute going on right now. 2. 3. depending on how you look at it. you’re covered. so you’ll have access to some really great tools.Smashing eBook #4: Mobile Design for iPhone and iPad 1. such as push notification and GUI controls. you don’t have to share revenue with Apple. promotion and distribution to users… which could also be a negative. 2. No Apple approval process or red tape. No access to some of the features that are native to the iPhone OS. You get 100% control over the means of payment. No presence in the App Store. 4. 47 . like Android and Blackberry. which is dedicated to showcasing optimized websites. Design Designing a Web app for this platform is much like designing a native app. Whether your wireframing tool of choice is pencil and paper or desktop software.

you have to cut things out. 48 . To successfully optimize a Web app for the iPhone OS.Smashing eBook #4: Mobile Design for iPhone and iPad Featured Web app on the Apple website Paper Paper prototyping has long been my tool of choice for wireframing new ideas or websites. What I really like about the tools below is that they provide perspective on the size and dimensional constraints that you’re dealing with. I suggest keeping the design minimal by wireframing with a sharpie and one of the tools listed below.

there are subtle differences between the iPhone and iPad’s browsers. Either way. such as how form-select boxes work. I really like wireframing with OmniGraffle. Safari has great CSS3 and HTML5 support. so you can use modern code without having to worry about cross-browser compatibility. understanding how the browser works is important. Coding When you start coding for Safari on the iPhone OS. Most importantly. 49 . these tools are a huge help in making it happen. we can move to the desktop and get specific. Also. but sometimes diving straight into Photoshop makes sense.Smashing eBook #4: Mobile Design for iPhone and iPad Digital Once you know exactly how things will lay out in your design. iPad GUI preview from Teehan + Lax.

Browser Detection David Walsh provides good examples of proper browser detection for the iPad and for the iPhone on his blog. Options for PHP and Javascript are included. unique meta tags and event handling. because it has some good advice. Detecting iPhone Window Orientation This iPhone development tutorial from Nettuts provides a good example of how to vary style sheets according to the iPhone’s orientation. This is also worth scanning through. because it has some great advice on designing for the iPad. iPhone Human Interface Guidelines for Web Applications This is a good overall summary of how Safari for the iPhone OS works. I recommend reading it cover to cover before getting started.Smashing eBook #4: Mobile Design for iPhone and iPad Education Apple actually does a really good job of documenting Safari for the iPhone OS. 50 . Safari Web Content Guide This document gets specific about the viewport. among many other topics. It’s certainly worth scanning through. although no specific coding examples. Read each of the articles below for everything you need to know about coding for this browser. iPad Human Interface Guidelines This document does a good job of distinguishing iPhone elements and iPad elements. webclip icons. Code examples are provided. The only shortcomings in my opinion are a lack of help with browser detection and window orientation.

Here’s what the code looks like (no JavaScript required): <link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css"> <link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css"> jQTouch Mobile Framework 51 .Smashing eBook #4: Mobile Design for iPhone and iPad Detecting iPad Window Orientation Detecting iPad’s window orientation is much easier.

I had to figure it out by playing with the demo website’s code. Liveview Liveview is a really clever testing tool for when your app is in the design or initial coding phase. jQTouch gives you all of the tools to make your mobile Web app look and feel like a native one. 52 . no good iPhone or iPad emulators are available.Smashing eBook #4: Mobile Design for iPhone and iPad While the iPhone has a few mobile development frameworks. It allows you to broadcast an image from your desktop onto your phone so that you can see what it looks like. My only complaint when building my first website with jQTouch was a lack of documentation and tutorials. This is useful for getting text size and the visual specifics just right. because sometimes visualizing from Photoshop is hard. The ones that are available are a waste of time. Using the iPhone Simulator In my opinion. It’s a little more complicated than testing in a web browser. Testing A crucial and somewhat tricky part of building a website or Web app for the iPhone OS is testing. jQTouch is far and away the best. Much better is to download the latest version of the SDK and use Apple’s official iPhone OS simulator. but familiarizing yourself with a couple of tools should make the process simple. which of course supports the iPad as well.

one of the following may be a good fit: 53 . CSS and JavaScript but want it to run natively and have it be available in the App Store. I’ve written a step-by-step tutorial about setting up a local testing environment that’s worth a read.Smashing eBook #4: Mobile Design for iPhone and iPad Setting up the SDK and a local testing environment takes a few minutes but is well worth the effort. I highly recommend going this route until you are ready to launch. One great thing about local testing is that it’s faster and does not require an Internet connection. rather than depending on unofficial and often inaccurate emulators. Feeling Overwhelmed? If you are. PhoneGap: Best of Both Worlds? PhoneGap is a game-changer for Web developers. Depending on your Web app and client. but all the services use a WYSIWYG-like editor to help you create mobile websites on the fly. then some good hosted services will make it easier to optimize your website for multiple platforms without having to start from scratch. then PhoneGap is the solution. Palm. There are various levels of flexibility available. Symbian. It’s an open-source development tool that not only compiles your code for native use on the iPhone OS but also works for Android. If you would rather create your app in HTML. Windows Mobile and Blackberry devices.

It’s up to you to make the most of them! 54 . Conclusion It’s a great day to be a Web developer. while allowing us to adhere to modern Web standards. because non-desktop platforms like the iPhone OS open up greater possibilities for us to express our creativity and entrepreneurial savvy. All of the tools you need to create a great Web experience on the platform that’s currently dominating the mobile space are out there.Smashing eBook #4: Mobile Design for iPhone and iPad Mobify is a great alternative if you don’t care to build from scratch.

Smashing eBook #4: Mobile Design for iPhone and iPad How to Create Your First iPhone Application By Jen Gordon What if you had a nickel for every time you heard: "I have the perfect idea for a great application!"? It’s the buzz on the street. techniques. somebody had to shout out. “Man. Have an Idea – a Good Idea How do you know if your idea is a good one? The first step is to even care if your idea is solid. the process is a bit of a mystery. tips. and resources that may come in handy if you are planning on creating your first iPhone application. This how-to guide is supposed to walk you through the steps to make your idea for an iPhone app a reality. and the second step is to answer the question: Does it have at least one of the indicators of success? Does your app solve a unique problem? Before the light bulb was invented. The iPhone has created unprecedented excitement and innovation from people both inside and outside the software development community. for example) and create an app that caters to a specific audience. reading by candlelight sucks!” Figure out what sucks and how your app can make the life of its user more comfortable. This article presents various ideas. 55 . Find a niche with ardent fans (pet lovers. Does the app serve a specific niche? Though there aren’t any stats on the App Store search. the usage of applications is certainly growing with the explosion of App Store inventory. Still for those outside the development world.

5. most of us have the attention span of a flea. Successful games and utilities engage the user by requiring action! Action: Does your app fall in to one of these categories? If yes. If you can come up with something funny. it’s just about time to prepare the necessary tools. I hit a red “do not press” button for 5 minutes yesterday. • prepare a Non-Disclosure Agreement* • download and install the latest version of the iPhone SDK • a spiral bound notebook* 56 . Tools Checklist Below is a list of items you’ll need (* Starred items are required. Heck. give sommeliers a way to talk to their fans! Will the app be highly interactive? Let’s face it.5. you are definitely on the right track and your idea may be the golden one.Smashing eBook #4: Mobile Design for iPhone and iPad Does it make people laugh? This is a no-brainer. the rest are nice-to-have’s): • join the Apple iPhone Developer Program ($99) * • get iPhone or iPod Touch * • get an Intel-based Mac computer with Mac OS X 10. Are you building a better wheel? Are there existing successful apps that lack significant feature enhancements? Don’t be satisfied with just a wine list.

Designer. Cocoa) (we assume here that we are creating a native application) • App Promotion and Marketing 57 . But you can also waste a lot of time. reference the checklist below and ask yourself: What roles are the best fit for you to lead? Then find other talented people to fill in the gaps.Smashing eBook #4: Mobile Design for iPhone and iPad What Are You Really Good At? What skills do you bring to the table? Are you a designer whose brain objects to Objective C? A developer who can’t design their way out of a paper sack? Or maybe you are neither. Project Manager. Marketer and Advertiser – all rolled into one. you certainly can do it all. Information Architect. Developer. energy and sanity in the process. Remember what all good entrepreneurs know – it takes a team to make a product successful. but an individual with an idea you’d like to take to the market? Designing a successful iPhone application is a lot like starting a small business. Accountant. The infusion of additional ideas can only enrich the product! Skills checklist • Ability to discern what works/doesn’t work in existing iPhone Apps • Market research • Outlining App Functionality (Sitemap Creation) • Sketching • GUI Design • Programming (Objective C. Don’t go crazy. Don’t get me wrong. You play the role of Researcher.

bad and ugly in the App Store. Action: Answer these questions: • What problem does your app solve? • What products have you seen that perform a similar task? • How do successful apps present information to users? • How can you build on what works and make it unique? • What value does your app bring to your audience? 5. Having a contract in place tells your contractor "I’m a professional that takes my business and this project seriously." Action: Select skills that are a good fit for you to lead. Now don’t go runnin’ off with this idea.45 caliber bullet out of your iPhone? No. hire professionals. Can you shoot a . Even if you encounter a lot of poorly designed apps. Do Your Homework: Market Research Market research is a fancy way of saying "Look at what other people are doing and don’t make the same mistakes." Learn from the good. you need to understand the capabilities of the iPhone and its interface. Know the iPhone/iPod Touch UI If you want to create an iPhone app. Coming up with creative solutions in the app concept development and design starts with analyzing other (maybe similar) applications. Can you shoot videos? Yes! 58 . your mind will reference these examples of what not to do. For those roles where you cannot lead. 4.Smashing eBook #4: Mobile Design for iPhone and iPad Remember to have contractors sign your non-disclosure agreement.

Or perhaps they are a first time player – how will their experience differ from someone who is getting a nice case of brain-rot playing your game all day? 59 . Determine "Who will use your app?" We assume here that you’ve already determined that your app will bring value and that you will have a raging audience for your app. Review the Apple Guidelines for UI design and list at least 5 features you’d like to incorporate into your app. maybe they want to beat their high score. expand and rotate functions? Action: Download the Top 10 apps in every category and play with all of them. swiping features. Download and play with as many apps as you can. Take note of: • How do well-designed apps navigate from screen to screen? • How do they organize information? • How MUCH information do they present to the user? • How do they take advantage of the iPhone’s unique characteristics: the accelerometer. fine. 6. they are raging fans. Well. pinch.Smashing eBook #4: Mobile Design for iPhone and iPad The good news is that you don’t have to memorize the encyclopedic Apple User Interface Guidelines to get a feel for what works and what doesn’t in iPhone Apps. but who are they really? What actions will they take to achieve their goals within the app? If it’s a game. and think about what functionality you want to include in your product.

Action: Create at least one thumbnail page of your application per screen. iPlotz is a good tool to check out. the text you put on buttons. and how screens connect. 60 . If you want to transfer your sketches into digital format. and your audience wants to find a coffee shop quickly. You can even name them if you want to make the scenarios you draw out as real as possible. Action: Line item out the different types of people who will use your app. Experiment with various navigational schemes. is this thing even tap-able?) Thumbnailing your ideas on paper can push your creativity far beyond where your imagination might stagnate working in an sketching application! You can also buy the iPhone Stencil Kit to quickly sketch out iPhone UI prototypes on paper.5 x 11 sheet of paper and get to sketching! Ask yourself: • What information does each screen need to present? • How can we take the user from point A to point B to point C? • How should elements on the screen be proportioned or sized in relation to each other (i. what actions will they take within the app to find that coffee shop? Where are they when they’re looking for coffee? Usually in the car! Do present an interface that requires multiple taps. reading and referencing a lot? Probably not! This is how thinking about how real-life intersects design.Smashing eBook #4: Mobile Design for iPhone and iPad If it’s a utility app. Line out a 9-rectangle grid on an 8. Sketch Out Your Idea And by "sketch" I mean literally sketch. 7.e.

eLance. A few places to look for designers: Coroflot. you’ll have everything you need for a designer to get started. it’s a good idea to get a developer on board at the same time when you line up design resources. If you’ve solidified your layout during sketching. and also be ready to review a lot of portfolios. They may have some good feedback and suggested improvements for your sketches. start interviewing designers for your job. but who wants to risk getting zapped? If you’ve followed steps 1–3. 9. try to find someone who has experience designing for mobile devices. If you are not a designer. 61 . Both are collections of iPhone GUI elements that will save you a lot of time in getting started. You can go to Home Depot and buy tools to try it yourself. be very specific about your requirements. hire one! It’s like hiring an electrician to do electrical work. Crowdspring. Programming Even though this how-to is sequential. When posting your job offer. get started in Photoshop. Time for Design If you are a designer. Action: If you are a designer. Talking with a developer sooner than later will help you scope out a project that is technically feasible and within your budget. download the iPhone GUI Photoshop template or our iPhone PSD Vector Kit. drawing up the screens will be less of a layout exercise and more about the actual design of the app. When looking for a designer.Smashing eBook #4: Mobile Design for iPhone and iPad 8. If you are not a designer.

Be ready to experiment. ask them to help you: • Create your Certificates • Define your App ID’s • Create your Distribution Provisioning Profile • Compile the application • Upload to iTunes Connect Action: If you are a developer. Each type usually requires a different coding skill set. you know what to do – find one! Specify the type of app you want to produce – whether it is a game. some ideas will work. iPhoneFreelancer. If you are working with a developer. Promote Your App If a tree falls in the middle of the woods and nobody was around to hear it. A few places to look for developers: Odesk. If you are not a developer. eLance and any of the forums listed above. 62 . map out a development timeline and get started. be ready with many plans to market your app. 11. does it make a sound? Apps can sit in the store unnoticed very easily. others won’t. open Xcode and get started! If you are not a developer. 10.Smashing eBook #4: Mobile Design for iPhone and iPad If you are a Objective C/Cocoa developer crack. Don’t let this happen to you. Submit your application to Apple Store OK. so how do you submit your application to Apple Store now? The process of compiling your application and publishing the binary for iTunes Connect can be difficult for anyone unfamiliar with XCode. utility or anything else. start interviewing devs for your job. In fact. Be ready with a plan to market your app.

Start building buzz about your app before it has launched. Make your dream list for the app and make sure that the app is designed to incorporate all of the features at some time in the future. If your users make the high score on his or her favorite game. Dream. set up a fan page for your app on Facebook and Twitter and use them as platforms to communicate with your users and get feedback on your app. • Plan for multiple releases. Take action on them yourself or hire someone who can! 11. it is a good idea to make it easy for the user to post it to Facebook or Twitter. • Pre-launch promotion. At a minimum. Action: Make a list of 20 promotional strategies that target the audience for your app.Smashing eBook #4: Mobile Design for iPhone and iPad Strategies for maintaining/boosting app sales: • Incorporating social media. Action: Get out there and go kick some app! 63 . Don’t pack your app with every single feature you want to offer in the very first release. Your first app needs to make a big splash and getting involved in too many projects at once can dilute your passion for making your first application a success. but don’t get sidetracked by new ideas. dreaming up a zillion new app-ideas. Stay Focused and Don’t Give Up! It’s easy when you are working on your first app to get all AppHappy. Then periodically drop new versions of the app to boost app store sales. E-mail people who write about things that relate to your app and see if they will talk up the upcoming release of your app. Think about how your app can incorporate social media and build that functionality into your app.

there are usable and creative UIs). tell them. the elegant iPhone has housed some of the most poorly designed applications you could imagine. The aim of this article is to display common trends and design approaches in iPhone app design – please notice that they are not necessarily optimal ones from the design or usability point of view. and then tell them what you told them. However. So it seems quite convenient to use this approach when designing iPhone-applications. but when you’re dealing with the mobile medium. The hype surrounding iPhone has prompted many designers across the globe to try their skills with the new mobile medium. Getting stuff done means that the designer has to get into the flow of the OS and create an app that requires zero explanation for the end user to operate. This article explores the ways in which designers use graphical elements and screen interactions to create iPhone-applications that are easy on the eyes and mind. 64 .” Creating a whole new OS within your app can be fun. some designers invest a lot of time and efforts into creating usable and original user interfaces (yes. The result are literally thousands of various iPhone-applications that are often hardly usable and counter-intuitive. Mirroring the layout and UI elements that the user is already familiar with saves time and energy. Mirroring Native iPhone UI Elements “Tell them what you’re gonna tell them.Smashing eBook #4: Mobile Design for iPhone and iPad iPhone Apps Design Trends By Jen Gordon For the past two years. people just want to get stuff done.

using large buttons that are easily distinguishable and tap-able . 65 . A similar approach exists in Web design: users expect to see a logo in the top left. etc. Facebook has taken this concept mobile. users do not have to “learn” how to use it all over again.Smashing eBook #4: Mobile Design for iPhone and iPad Facebook In the new Facebook 3. you’ll find a grid layout that users can swipe left and right to access more categories. Because it mirrors Apple’s native UI.0. navigation along the top.

Smashing eBook #4: Mobile Design for iPhone and iPad Where Where has a similar concept. 66 . allowing users to swipe left and right to access more data.

Instead. The application could display the updates in a new window. But it doesn’t. 67 . Notice how the design highlights recent updates. a more familiar dialogue menu is displayed — it serves as a springboard to jump to a specific category or to clear the messages altogether. with a categorized or tabbed list.Smashing eBook #4: Mobile Design for iPhone and iPad Tweetdeck Tweetdeck is a good example of user interface design on many levels.

And what do users want? What makes them all warm and fuzzy? How do you deliver what they want so that they don’t even notice how they are consuming information? 68 .Smashing eBook #4: Mobile Design for iPhone and iPad Simplifying The Interface Simplifying user interfaces may sound like a mechanical task. but what lies beneath the surface of user interface design? The answer is simple: users.

Flickr has managed to fit all of its core functionality without heading down the highway to navigational hell. 69 . they are looking for pictures. most elements in the navigation are handled by interacting with the photos themselves. Its users probably do not want to look at big clunky navigational elements. In fact. instead. visual design and the small display area on mobile devices. Simple and smart.Smashing eBook #4: Mobile Design for iPhone and iPad Flickr Flickr is another example of how to achieve a good balance between functionality. Think about it: what is at the core of Flickr? Photos.

70 . Many of these have hardware-ish interfaces that users are familiar with but come with perpetually shiny exteriors and clicks and pops that maintain their newness from the first to one-thousandth click.Smashing eBook #4: Mobile Design for iPhone and iPad Hardware-ish Look Many utilities are breaking out of the conventional iPhone UI to take advantage of the device’s unique ability to respond to finger gestures.

Smashing eBook #4: Mobile Design for iPhone and iPad Little Snapper Little Snapper mimics the wheel that you turn on a typical digital SLR. 71 .

We can just imagine how each button press feels solid. mattefinish tactile buttons: quality craftsmanship.Smashing eBook #4: Mobile Design for iPhone and iPad Where To? This application looks like it belongs in a Mercedes. requiring the perfect amount of pressure. 72 . Plush leather.

big buttons give the user a lot of information through their color. And what do people do when they encounter a list view? Of course. icons and typography. and then decide if they want more information. Padded And Pretty List Views You know that you are a geek designer when you get excited about the latest trends in list view design. Large and in charge. they skim. elegantly-designed. One way to do this is with big pretty buttons.Smashing eBook #4: Mobile Design for iPhone and iPad Rich. 73 . users are asking for a snapshot of what’s next. And how do we make it easier for people to decide what interests them? That’s right: more visual cues! Essentially.

74 . And it uses typography well to establish a hierarchy of information.Smashing eBook #4: Mobile Design for iPhone and iPad Delivery Status Touch Check out how Delivery Status uses appropriate colors on its big buttons to identify each brand.

75 . calm and clear typeface.Smashing eBook #4: Mobile Design for iPhone and iPad Be Happy Now Be Happy Now’s big buttons convey the “be happy” mantra through a mellow color scheme and light.

review rating and number of people who have recommended it.Smashing eBook #4: Mobile Design for iPhone and iPad Next Read The Next Read application allows friends to share books. including the title. Notice the padding and a lot of white space for each navigation option. this makes the areas easily clickable and easier to navigate. Here all books about a particular topic are presented. 76 . cover image.

77 . fewer buttons help to avoid a cluttered interface).e. It gives users a faster route to the information they want. This approach has several benefits: 1. 2. 3. It reduces the number of traditional navigation elements that are necessary (i. More screen space is available for information.Smashing eBook #4: Mobile Design for iPhone and iPad Layered Interface Several applications take advantage of the iPhone’s capabilities by layering the interface and making some elements stationary and others vertically or horizontally scrollable.

Smashing eBook #4: Mobile Design for iPhone and iPad Barnes & Noble Barnes & Noble has a layered interface that allows you to quickly slide through new releases at the top or dive into more categories below. 78 .

Smashing eBook #4: Mobile Design for iPhone and iPad USA Today USA Today takes a slightly different approach to layering the interface in its “Pictures” section: it uses sliding panels to display blocks of information. 79 . While the interface may look cluttered at the first glance. The interesting part is that within each panel you can slide thumbnails left and right to view more images. one can easily get around it.

Smashing eBook #4: Mobile Design for iPhone and iPad

myPantone Would we expect any less from Pantone? The color picker shown above is a layered interface that lets you pick from a range of colors, sort and scroll as well as open and close detail screens, all without driving you crazy.


Smashing eBook #4: Mobile Design for iPhone and iPad

Icons For The List View
Icons aren’t just for springboard-loving folks. On small screens, icons can give a huge boost to an application’s usability and navigation. Let’s now take a look at some examples of applications that use icons to their advantage.


Smashing eBook #4: Mobile Design for iPhone and iPad

iStudiez This application uses various educational metaphors as icons to clearly communicate the purpose of the application. Excellent visual cues tell the student what’s happening today at a glance.


Smashing eBook #4: Mobile Design for iPhone and iPad

Top Floor Top Floor uses simple and easily recognizable icons to quickly guide users to their category of choice.


Smashing eBook #4: Mobile Design for iPhone and iPad

New York Times Isn’t it great when applications just let you do whatever you want to do? For an app with as much information as the New York Times’, users are bound to have their favorite sections. Well, guess what? The New York Times cares: it lets you customize the tab bar’s navigation to include only your favorite sections of the paper. Drag an icon down the tab bar and you are set. The downside of the design is, of course, its lack of visual appeal.


Smashing eBook #4: Mobile Design for iPhone and iPad

Illustrations in use
Applications that rely on graphics not found in the standard user interfaces are increasing in popularity, as developers try to set their apps apart from the crowd. Sometimes it works, but often it doesn’t. The more unconventional a design is, the more likely it is to have usability problems. Please always conduct usability testing before releasing a product with a “creative” user interface.


Smashing eBook #4: Mobile Design for iPhone and iPad Magnetic Personalities An excellent example of how buttons don’t have to look like standard buttons. 86 .

Instead. the designers played with the concept of “connectivity” to create a visual treatment that communicates the purpose of the app. It is unusual and requires some time to get used to. 87 .Smashing eBook #4: Mobile Design for iPhone and iPad SugarSync This interface could have easily followed the traditional list-view route.

Smashing eBook #4: Mobile Design for iPhone and iPad Mom Maps Another example of how illustrations do a great job of pulling together the whole concept of an application. 88 .

89 . Not really spectacular. which leads you to a list of something. The possibilities for creative interaction in utility apps are huge and largely untapped (no pun intended).Smashing eBook #4: Mobile Design for iPhone and iPad Using Gestures Classic linear navigation may look boring: a button that links to other buttons. which leads you to suchand-such an interaction.

and flick the shared files from one handset to the other. photos and bookmarks. 90 .Smashing eBook #4: Mobile Design for iPhone and iPad Mover Mover exemplifies how to use gestures for sharing contacts. Open two devices.

Being able to trace a letter with your finger is another example of how the iPhone responds to touch and movement.Smashing eBook #4: Mobile Design for iPhone and iPad ABC Animals This application teaches while it entertains. 91 .

Smashing eBook #4: Mobile Design for iPhone and iPad

All Recipes This applications allows you to mix in various elements to create your next meal using gestures.


Smashing eBook #4: Mobile Design for iPhone and iPad

iPhone Apps Designs Reviewed
By Alex Komarov

Some time ago I started a mobile app design review section on our company’s website. The idea behind this “Crit Board” was simple: if mobile developers want to create apps that people want to buy, they’ll need help with design and usability. But most of the time they can’t afford it. On our Crit Board, developers can send us their mobile apps (iPhone apps, Android apps, Blackberry apps) along with questions and problems, and we (free of charge) will pick apart key usability issues, illustrate our design recommendations and post our findings. The only condition to get free criticism from us is that you agree for it to be made public, which is why I am able to share several case studies with Smashing’s readers right now. It’s hard to imagine something more relevant: these are real problems facing real developers. I hope these problems and the proposed solutions will benefit others who have similar issues and will be generally relevant to those working in the field.

1. Foobi
“Alex, I am the lead designer and developer of Foobi. Foobi was designed to track your diet in a different way; instead of tracking calories and tapping on many drilled-down lists, it works by simply tracking servings per food group and providing an overview of your food intake balance. Although I have tried really hard not to over-design it by tracing Apple’s footsteps while building custom UI control elements, I would love to hear from you about this subject. — Remy”

Smashing eBook #4: Mobile Design for iPhone and iPad


Smashing eBook #4: Mobile Design for iPhone and iPad

Your app is beautiful indeed. And it is also usable and easy, exactly as you describe it. If the user knows how to flick, he is already an expert. An expert in what, though? As stated in the iTunes description, the purpose of this app is to “track and balance your diet.” I understand the two main user goals as follows: 1. To record what food they consume, 2. To make sure they stay on the right path with their nutrition, and to have a clear guide to balancing their diet if they veer off that path. Your app does a good job of fulfilling the first goal: users can easily record what they eat just by selecting the right food group and adding the amount of “servings” consumed.


Smashing eBook #4: Mobile Design for iPhone and iPad

But what about the second more important goal of tracking progress and adjusting one’s diet? Does the app help customers achieve this goal? Not very well. There is room for big improvement. There are two main problems with this part of the app.


Smashing eBook #4: Mobile Design for iPhone and iPad

Summary information is hidden
To access the summary chart, you have to flip the iPhone to the side and view it in landscape mode. But this feature is not communicated through the app’s design, so a user will discover it only by accident. When we talk about fulfilling a major user goal, it is important never to rely on accidents to communicate functionality.


• The scale is not flexible. and there is no legend to help.Smashing eBook #4: Mobile Design for iPhone and iPad Summary information is not well designed Additionally. the summary is not informative enough. 98 .) • Tracking consumption of a particular food group is not possible with this chart but would be valuable to users. Here are the main problems: • It’s not clear what the different colors mean. The summary chart doesn’t offer too much to the viewer. (Tip: consider incorporating the pinch gesture to allow users to scale in and out. which does not allow users to easily see their big-picture eating habits. You can view the information only by week.

Smashing eBook #4: Mobile Design for iPhone and iPad Information design is a vast topic. particularly The Visual Display of Qualitative Information. There are a million ways to address the problems that I’ve highlighted and to increase the visibility of useful information for your audience. 99 . I recommend reading Edward Tufte’s books.

Smashing eBook #4: Mobile Design for iPhone and iPad And here’s an inspiring display of a lot of information. 100 . Of course. it’s not tailored to mobile use. but it has a few great ideas: From Google Finance.

budget. I was fooled by the app icon. Like a balance forecaster. People don’t understand what the software does. I didn’t quite understand why it was taking so long to download… until I realized that it had already downloaded. I have tried everything. calendar and transactions by displaying your balance in a calendar view. which makes it look like it is still downloading: 2. Budget Planner “Alex.” 101 . letting you know how much money you will actually have on any particular day. But people who do learn it love it. — Alex Sabonge” The basic idea of this app is very good. and it keeps going up and down. and the App Store description shows off its functionality well:”Budget Planner tracks your bills. The major issues that people complain about are intuitiveness and slowness. please take a look at my app Budget Planner.Smashing eBook #4: Mobile Design for iPhone and iPad One more thing When I purchased and downloaded your app.

car payment. etc). phone. 102 .Smashing eBook #4: Mobile Design for iPhone and iPad Here’s an overview of how Budget Planner works: 1. Users input their monthly salary info and plug in their fixed monthly expenses (utilities.

103 .Smashing eBook #4: Mobile Design for iPhone and iPad 2. Using this data. the app allows users to track their cash flow and predict the amount they’ll have in the bank on any given day.

But several key factors are getting in the way of a great user experience. A list only shows how much you’ve spent. They make the effort because they hope it will help them make better purchasing decisions (read: buy more stuff that they like). For now.Smashing eBook #4: Mobile Design for iPhone and iPad Most folks would find this extremely useful. So. such as not following the iPhone UI guidelines and using the standard controls improperly. Let’s take a closer look at the app’s “landing screen. It’s much better than the categorized lists that many other apps have. Knowing that your money is gone doesn’t really help achieve a financial goal (purchasing a shiny new laptop. a new car or a solid retirement plan. Here are some downsides to the calendar view: 104 . First of all. we’ll set aside lesser (though important) usability factors. for example). I think the calendar is a great idea. right? Your core audience’s main goal is to know what they can afford and when they can afford it. without their rent check bouncing. the main element that differentiates this app from other budget apps. The calendar is all about how much money you have or will have in future.” the calendar. Let’s start at the beginning. why are people complaining about the app? Why does it have an average rating of 2. People don’t prepare a budget just for fun. Humans invented money to buy things.5 out of 5 stars. and why are sales lower than you had hoped? Let’s look at the main sources of the problem. Your app is getting there. whether it’s a new pair of shoes.

Smashing eBook #4: Mobile Design for iPhone and iPad 105 .

Smashing eBook #4: Mobile Design for iPhone and iPad I believe there’s a way to visualize information in the current design so that users are able to uncover “invisible” patterns. Here are some ideas we came up with. Using a graph for the landing screen could dramatically increase the density of meaningful data while reducing visual noise. Users will better understand their bad habits and be able to take steps to correct them. It’s much more flexible and scalable than a calendar. make informed decisions and achieve their financial goals (and praise your app in the process). this is merely a draft we put together to illustrate our points and to get your ideas flowing—it is not a proposal for a final design: 106 . A graph could provide richer possibilities for visualizing financial information. Uncovering the details and patterns behind their spending habits enables users to get new ideas.

Smashing eBook #4: Mobile Design for iPhone and iPad 107 .

Smashing eBook #4: Mobile Design for iPhone and iPad 108 .

If your app can help them get the answers. 3. Units United. What if your app allowed users to input and compare different financial scenarios. shown through several overlaid graphs? This capability could help users think through their options: • If I put my child through this private school.) Can you please review it? — Meils Dühnforth” 109 .Smashing eBook #4: Mobile Design for iPhone and iPad Next steps People love apps that help them achieve their goals. yet another one… . would I still be able to afford the Beemer I’ve always dreamed of? • How many hours of overtime would I need to work to be able to afford both? These are few examples of questions that people ask themselves. I think it’ll really catch on. Yep. Units United “Unit conversion app. and you’ll soon be driving a shiny new Beemer yourself.

Smashing eBook #4: Mobile Design for iPhone and iPad 110 .

You had to select options from a list to be understood. Go to “Categories. Most unit converters force people to make double the effort to get what they want. Amazing! You punch the value into your unit converter app. Select meters for the “To” unit. the Phillies hit a 456-foot home run. 4. During their last at bat. Good software speaks your language. 5. 3. Among the innumerable unit converters.Smashing eBook #4: Mobile Design for iPhone and iPad The biggest problem with almost every unit converter I have seen is that they require users to submit their query in a format that the computer (or iPhone in this case) can understand. Type in 456 on the number pad. Double-check that you are converting 456 feet into meters and not vice versa. only Google does it right. but to get an answer you must translate the query into a format that the application understands: 1. and you are recounting yesterday’s baseball game to your Icelandic friend. allowing you to ask your question in plain English: 111 . Are all these steps necessary? You just wanted to know “What is 456 feet in meters?” But you had to ask the question in robo-speak.” 2. Consider the following scenario: you’re from the US. Select feet for the “From” unit.

Say your Icelandic friend is driving on a US highway and needs to convert the 55 miles-perhour speed limit into kilometers. Implementing everything described above. Sometimes your hands aren’t free when you need to convert a unit.Smashing eBook #4: Mobile Design for iPhone and iPad Using speech recognition technology is another good idea. your app might look something like this (this quick draft is meant to illustrate the point and is not a design proposal): 112 .

Smashing eBook #4: Mobile Design for iPhone and iPad This application is much easier to use because there’s no more robo-talk: it doesn’t force users to browse categories and sub-categories. and it accepts questions in everyday language. 113 .

Smashing eBook #4: Mobile Design for iPhone and iPad iPhone Apps Design Mistakes: Over-Blown Visuals By Alexander Komarov The development of iPhone applications has recently become a hot topic in the design community. The situation is similar to that of PC software a couple of decades ago. everybody tries to come up with some creative idea. only 3% of people who have downloaded an app use it after 30 days. port it into a stylish iPhone-alike application and sell it to thousands of users through the iPhone app store. best practices as well as useful ideas and recommendations for your next iPhone app design. many of these applications are poorly designed and therefore miss the chance of providing users with a truly useful product that users would find worth recommending to friends and colleagues. Why? Because the majority of iPhone apps don’t make any sense to users. We want to take a closer look at the design of iPhone applications and showcase some good and bad examples. Are iPhone apps really not good enough? “It’s only 99 cents. Who cares if it sucks? I’m still trying it. However.” How many times have you said something like that to yourself before downloading the next promising iPhone app? How many screenfuls of those apps do you have on your iPhone? 4? 6? 10? And how many of them do you actually use? On average. Have we not learned from our mistakes? 114 .

These applications often don’t make sense to customers because of a poor interaction design. The result is thousands of useless applications in the App Store that people download and use once and then never again. 115 .Smashing eBook #4: Mobile Design for iPhone and iPad iPhone applications nowadays are designed by developers who seem to care only about their app’s implementation. On second day. only 3%. 20% returning users. Free applications usage over time: Percentage of users returning versus number of days since first used. When an app goes live. its beautiful code or visual design often fail to address real customers’ needs. By Pinch Media. on the 30th day.

116 . Paid applications generally retain their users longer than free applications.Smashing eBook #4: Mobile Design for iPhone and iPad Paid applications usage over time: Percentage of users returning versus number of days since first used. By Pinch Media. It’s not really different from the graph above. although the drop-off is still pretty steep.

By Pinch Media. Long-term audiences are generally 1% of total downloads.Smashing eBook #4: Mobile Design for iPhone and iPad Users stop using the average applications pretty quickly. 117 .

Five Most Frequent iPhone Design Mistakes Many applications share the same design problems that prevent customers from fully enjoying them.Smashing eBook #4: Mobile Design for iPhone and iPad Hilarious 500 million downloads breakdown. (Copyright: Gizmodo) It shouldn’t be this way. by Gizmodo.99 or even $99. There’s no programming technique that teaches you how to do this. Recently. But there is something else.99 for each of them. which are: 118 . Developers should be writing applications that people love so much that they would pay $9. and it’s called interactive design. I conducted a review of 100 apps from the App Store and identified the five most frequent iPhone design and usability mistakes.

when. Confusing navigation (flow. Mistake #1. Over-blown visuals. So how does an overdesign in iPhone applications look like? To better understand it. and why do designers like to re-invent the wheel? The answer is simple: they want the application to be different. Neglecting technological limitations. feel and work complicated.Smashing eBook #4: Mobile Design for iPhone and iPad 1. layout and taxonomy). A lack of understanding of how. Unfortunately. multi-touch gestures. turn. where and why the mobile device is being used. Designers of iPhone applications often tend to disregard common design and usability conventions by offering users slick and shiny user interface designs that go way beyond their standard look and also way beyond their claimed functionality. tilt and rotate) and technological features such as phone functions. 4. built-in GPS and accelerometer. Why make things look. yet extremely popular design problem is overdesign. 2. Let’s start with the first one in this article and proceed with the next ones in the follow-ups to this article. look different and stand out from the crowd. Disregard of context. Neglecting to use new iPhone interactions (fingers instead of the mouse. 5. 3. such as slow Internet connection. Over-Blown Visuals Probably the oldest. let’s look at an example: 119 . Confusing the iPhone with a computer. slow processors and single-threaded OS architectures. a different look isn’t necessarily helpful for application’s usability and functionality.

It’s beautiful. it is also inconsistent with other apps. Let’s compare this screen to the settings screens of other iPhone applications: 120 . there’s a catch: while beautiful. it’s pretty slick. nothing is really wrong with it. It’s different. But. What do you think is wrong with the design in this first screenshot? Some of you may say.Smashing eBook #4: Mobile Design for iPhone and iPad Motion X GPS settings. “Well.” I agree.

Smashing eBook #4: Mobile Design for iPhone and iPad 121 .

compared to the settings screens of other apps.Smashing eBook #4: Mobile Design for iPhone and iPad Motion X GPS settings screen. 122 .

Overstyled controls look different and require users to re-learn how they work. Here’s an example from the real world. The resources you have spent to make your app look different. we will be able to learn how to use the whole faster. Breaking convention makes your app less intuitive The more familiar the parts of your app are. It’s like reading: knowing the alphabet and meanings of words allows us to “decode” books we haven’t seen before. could have been used much more effectively. the more intuitive the app will be for whoever uses it. 2. Going against convention makes your application less intuitive. It’s a waste of time and money. If we recognize the parts. but not necessarily better. Try to make the stop sign more “beautiful” and people will inevitably start dying: 123 .Smashing eBook #4: Mobile Design for iPhone and iPad Noticed the difference? Being inconsistent with other products makes yours worse for two reasons: 1.

Smashing eBook #4: Mobile Design for iPhone and iPad 124 .

” Article 10 of 2006 road signs convention. 125 . at the intersection where the sign is placed. ‘STOP.’ shall be used to notify drivers that.Smashing eBook #4: Mobile Design for iPhone and iPad “Sign B. they shall stop before entering the intersection and give way to vehicles on the road they are approaching. 2.

Smashing eBook #4: Mobile Design for iPhone and iPad In his paper Intuitive Equals Familiar (Communications of the ACM.’” Drastically redesigning every user interface element will make your application less intuitive. which will lead to more user mistakes and a longer learning curve. Eventually. What about branding? Is there place for branding in applications that are strictly following general design guidelines and usability conventions? Definitely! It is possible to strike a balance between having a unique look but not over-designing. “intuitive” in this context is an almost exact synonym of ‘familiar. that normal human ‘intuition’ suffices to use it. that neither training nor rational thought is necessary. 37:9. Jeff Raskin. you will lose customers because of it. September 1994. “… it is clear that a user interface feature is ‘intuitive’ insofar as it resembles or is identical to something the user has already learned. page 17). and that it will feel ‘natural. In short. Here’s one example: 126 . writes: “The impression that the phrase ‘this interface feature is intuitive’ leaves is that the interface works the way the user does.’” However. an American human-computer interface expert best known for starting the Macintosh project for Apple Computer in the late 1970s.

we have an overdesigned text input field at the top. A standard input field makes the screen’s purpose much clearer. while remaining consistent with the application’s style and branding. 127 .Smashing eBook #4: Mobile Design for iPhone and iPad Let’s take a look at an example of overdesigning by Bloomberg. You can barely recognize this as a field when you first look at it. The version on the right hand side is much better. Here.

which you miss at first anyway and only find the hard way – after you have lost data. And then you have to press the very modest “Record” button. Users are supposed to enter their weight day-by-day on this screen. But you have to flip through the months and days with a horizontal swipe to find the right one. and then you have to enter your weight digit by digit using five separate scroll fields. Much better: 128 .Smashing eBook #4: Mobile Design for iPhone and iPad Here is another example by iFitness.

9% of users will want to enter today’s weight. which is not terribly important. and the selection of the metric or imperial system of measurement. such as weight statistics. has been demoted to a settings screen. The Yellow Pages app uses tabs. Date and time can be recorded automatically. 129 .Smashing eBook #4: Mobile Design for iPhone and iPad 99. which work well on the Web. but standard toggle controls are more familiar to iPhone users. The screen space that has been saved can now be used to present useful information. This redesigned interface has one-quarter of the controls.

Smashing eBook #4: Mobile Design for iPhone and iPad 130 .

Smashing eBook #4: Mobile Design for iPhone and iPad Waste of time and money Apple has already done an excellent job of creating standardized controls. Back to our earlier example: 131 . Losing some of that functionality is almost guaranteed if you try to reinvent the wheel.

Smashing eBook #4: Mobile Design for iPhone and iPad If we take a closer look. we’ll see that one-third of the screen space we would have had is now lost because of over-designing. 132 .

shape and text survived color inversion. and the result is over-designed. this redesign has given us twice as many UI elements. You will be rewarded with more loyal customers and higher download rates surprisingly quickly. they wander in the design process. color. 2/3 of original meaning is lost. To avoid that. Sometimes. you must have a clear picture of the problem you need to solve. However in re-designed one. The catch is. Now there is only text. taking up twice as much real estate. you still haven’t added much value and you have lost time and money in the process. when people don’t know exactly what problem they are solving. One of the modes is White on Black.Smashing eBook #4: Mobile Design for iPhone and iPad iPhone OS 3. One of the best ways to get that picture is to talk to your users (both current and potential). That time and money could have been spent on… Design is all about solving problems. Only when you know your customers’ needs will you be able to build an application they’ll love. In sum. Don’t overdesign. Be sure your house has a solid foundation before you decorate it. 133 . even if you haven’t made the controls worse.0 introduced accessibility features. Here’s what happens to our controls after inverting colors: In the original control.

This is why you need to zoom out. In order to create really appealing applications. How well you address human and environmental factors will greatly determine the success of your product. as well as the complex environmental factors surrounding that person. To Create An App That Customers Love. All too often. As a developer. However. Zoom out. Level 1: You Are Here.Smashing eBook #4: Mobile Design for iPhone and iPad iPhone Apps Design Mistakes: Disregard of Context by Alexander Komarov The iPhone will always be part of a much bigger picture. This is how many developers view their apps. you have a vision of what your product should look like and why customers will turn their attention to it. iPhone developers create products in isolation from their customers. we’ll highlight several levels of human and environmental factors. developers must stop focusing only on the mechanisms of the apps. Understand the person using the application. if you observe your product so closely. 134 . you may put it in the wrong context and design it for the wrong purposes and for the wrong users. Zoom Out Level 1: The app itself. To better understand the context of these design challenges.

Here it is important to understand that the environment is a part of global networking. That person has specific goals and challenges. Ignoring them is too expensive. visual limitations and common design mistakes. It plays but a relatively small role in communication between people and helping people accomplish bigger goals.Smashing eBook #4: Mobile Design for iPhone and iPad Level 2: A person is using this app. Your ability to address the unique needs of different cultures will affect the success of your product. social-driven websites and applications and many other things create the environment – or the context – in which the application will be used. We’ll discuss basic physical ergonomics. You need to be aware of cultural differences. In the section below we’ll start by exploring some of the most prominent – and most ignored – human factors pertaining to the iPhone. This is where the social components comes into play: networking. traditions and metaphors in order to create an application that will not only gain popularity in certain local circles. especially if your app sells worldwide. Level 4: The environment is part of a greater culture. community. Step back and you’ll see that the app is a part of a complex social environment. but will also have a global success. Level 3: That person is using this app in a specific environment. 135 .

Basic physical ergonomics Here are a couple of the most important physical-. making the interface frustrating to use. the iPhone app developer. cognitive. different muscle groups are indicated with red pins. Our fingers are not mouse pointers. A whole Human Factors profession is dedicated to just that. Tapping a pin brings up the name of that muscle. Remember this property of our fingertips: their surface area is not equal to one pixel. this means that you have to step back and answer these questions before you start coding: • Who will be using your application? • What are the capabilities of that person? • What are the limitations of that person? Answering these questions will broaden your perspective and prepare you to address your customer’s needs. And if you tap the name. For you.and ergonomic-related truths about the iPhone. Here’s one example: in iFitness. 136 . In many applications. you get a list of exercises that develop that muscle.Smashing eBook #4: Mobile Design for iPhone and iPad Level 2: Understand The Person’s Needs And Limitations “Measure twice and cut once”: an effective strategy indeed. tappable objects are way too small. 1.

Smashing eBook #4: Mobile Design for iPhone and iPad 137 .

Tapping the pin you want is very hard. After more than a few tries. wishing you could sharpen your finger. Which of these pins will be activated when you tap on it? 138 .Smashing eBook #4: Mobile Design for iPhone and iPad The pins are twice as small as those used in the Google Maps app. enabling random pins. You end up tapping repeatedly on the area. because the surface of your fingertip covers an area of three or more pins. you get lucky and hit the right one.

Smashing eBook #4: Mobile Design for iPhone and iPad Here are some ways to solve these ergonomic challenges: 1. people will be reluctant to use the app if they find it hard to see what’s going on. We’re not superheroes. then enlarge the clickable area to be bigger then the button itself. Implement multi-touch gestures within the interface. unfortunately. 2. Mobile phones tend to be used in places with worse lighting conditions than computers. 4. App designers need to take vision limitations into account. Arm Muscles → Biceps). and make the selection process sequential (e. 139 . Think about those people who will be using your app on a bumpy bus or train or walking down a sunny street. 3. Here are a few examples of potentially useful apps that do not account for vision limitations. Reduce the number of options on each screen. selecting a muscle group in iFitness would be made easier by introducing a two-finger zoom feature. If making a button bigger is impossible. 2. Make buttons and other tappable objects bigger.g. Even if the technology is useful and perfectly executed. For example.

Smashing eBook #4: Mobile Design for iPhone and iPad TweetDeck 140 .

Smashing eBook #4: Mobile Design for iPhone and iPad Fish-tycoon 141 .

Your iPhone screen layout may look fine on a computer emulator. distracting environments. Mobile phones are often used in loud. Which voice memo app would do a better job? 142 . create additional screens with fewer options.Smashing eBook #4: Mobile Design for iPhone and iPad Here are some ways to avoid these mistakes: 1. Level 3: Understand The Challenges Specific To The User’s Environment Goals and environment Your app will usually play a relatively small role in helping the user achieve a bigger goal. etc. The author holds an iPhone (163 ppi) in front of Apple Cinema’s 30-inch display (~100 ppi). even though the resolution is the same. the better you can design your app to satisfy those needs.). So. 2. and get rid of everything else. Choose only the elements that are absolutely necessary. A simple stroll through town brings plenty of noisy distractions (cars. screenshots viewed on your computer’s iPhone emulator look larger than they would on the iPhone itself. mail carriers. Consider the following examples. dogs. Remember that pixel dimensions on the iPhone are smaller than those on your computer screen. Make them bigger. If needed. but don’t be fooled: it will appear much smaller on the iPhone because of its smaller pixel dimensions. The better you understand what goals people have and what they need to achieve them.

Smashing eBook #4: Mobile Design for iPhone and iPad Apple Voice Memos 143 .

Smashing eBook #4: Mobile Design for iPhone and iPad iTalk 144 .

Confirming for the user that the recorder is activated is important. more importantly. edit or enhance audio files as easily as you can text.Smashing eBook #4: Mobile Design for iPhone and iPad Although Apple Voice Memos looks nice. why and. iTalk addresses the average user’s goals and environment much better. when would people use voice memos? When they are not able to type. Which application would be easier to use in this case? The one with the big shiny mic and the record button that is small and hard to reach (especially for right-handed people)? Or the one with the red record button half the size of the screen? Certainly the latter. Which interface communicates the device’s status more clearly? Where do you tap when you’re done? 145 . According to the New York Times‘ summary of the Virginia Tech Transportation Institute‘s findings. drivers who text have a 23-times greater risk of a collision than drivers who don’t text. You can’t scan. The most common time is probably while driving. Think about it: why would someone prefer to record a voice memo over writing a note? The audio format has fewer advantages than simple text. So. text is a much more convenient format in which to exchange information. In most scenarios. too.

Smashing eBook #4: Mobile Design for iPhone and iPad Apple Voice Memos 146 .

iTalk wins. 147 . Apple Voice Memo looks great when you’re checking it out on a friend’s phone but performs poorly in a real-world context.Smashing eBook #4: Mobile Design for iPhone and iPad iTalk Based on which design works better overall.

many people feel overwhelmed with information. YouTube. a social tool. networking and community The mobile phone is. With the seemingly endless ways to capture and share information. The greater the number of people involved. the more engaging the experience is. To help them cope. Facebook and Twitter are driven by the understanding that we are social beings – we want to share! Imagine how dramatically designs that foster greater social interaction could change the mobile world.Smashing eBook #4: Mobile Design for iPhone and iPad Mobile phones. designers must exploit the iPhone’s platform to make their applications as efficient as possible. without a doubt. Think about it: if you were the only one with a phone. Here are some inspiring examples: 148 . it wouldn’t be very useful.

” (iTunes Store description) 149 . no mistakes.Smashing eBook #4: Mobile Design for iPhone and iPad Bump “Bump makes swapping contact information and photos as simple as bumping two phones together. No typing. no searching a list for the right person.

Smashing eBook #4: Mobile Design for iPhone and iPad Mover “Ever wished you could send something to the iPhone right next to you? Do it with style with Mover.” 150 .

the Automatic Teller Machines have very large buttons. which have usually been in warmer months.” —Steven Heller and Karen Pomeroy in “Design Literacy. New York. This goes beyond simply avoiding offensive icons. Design should adapt to regional challenges. 1997. a leading usability expert. Jacob Nielsen. especially if your app sells worldwide. it must accommodate the way business is conducted and the way people communicate in various countries. More wisdom from Jacob Nielsen: “A system must match the user’s cultural characteristics.Smashing eBook #4: Mobile Design for iPhone and iPad Level 4: The Environment Is Part Of A Greater Culture.” Apple studied American users and addressed their goals. Ignoring them is too expensive. That’s why the iPhone is so popular in US. Here is the graphic designer’s point of view: “… Understanding the object in context moves graphic design from a purely formal arena to a social and political one.” Such insights are gained only by understanding the product in its realworld context. But it hasn’t succeeded in Japan. 151 . I hadn’t noticed this particular design element on previous visits. The handset is selling so poorly there that they are giving them away for free. gives us an illustration of this: “In Sweden. In 1996 I was in Stockholm in February and immediately realized why the ATM buttons are so big: you can press them wearing thick gloves.” Allworth Press. Your ability to address the unique needs of different cultures will affect the success of your product.

talk to customers and read between the lines. Jacob Nielsen recently asserted that “the mobile user experience is still miserable. But developers don’t have to tackle user research alone. Interaction designers are trained to find relevant user groups. It takes a lot of leg work.” Extracting user insights from testing is a challenge. They understand how real-world context affects an application’s design. 152 . People have difficulty telling you what they want. but your efforts to understand user needs will be rewarded. The forefront of mobile technology is an exciting place to be.Smashing eBook #4: Mobile Design for iPhone and iPad Conclusion: Excellence Comes From Hard Work Designing a great app isn’t a simple task. they usually only know it when they see it.

153 . or. Design For People Apps will define the iPad – it’s true. in developing your app idea. step back and consider the context in which the device will be used by real live people. Surprises await when you consider the variety of people who might use your product. How does the iPad fit into our lives? In what situations would we prefer this device to a laptop or iPod Touch? Who are your people? Ideally. we’ll consider some design tips that will get you on the road to iPad success. the idea or the device? Good news: neither. In this article.Smashing eBook #4: Mobile Design for iPhone and iPad Useful Design Tips for Your iPad App By Jen Gordon With tools like Appcelerator’s Titanium and some JavaScript programming skill. you may find that your product is missing important features. but using this as a reason to decide that “I know what people like me want” could lead you to miss out on opportunities to enrich the product beyond your imagination. The danger is in not being always on the look-out for the kind of design pitfalls that plague many products in the App Store. creating native iPhone and iPad apps is simple. It’s people! When brainstorming and researching ideas for your app. But. your target audience includes you. in defining your target audience. which comes first. Your target audience may be different than what you think.

But after some analysis. and I guarantee it will lead you down some expected and unexpected paths.Smashing eBook #4: Mobile Design for iPhone and iPad For example. a car. with our application (a drawing tool). Who are they? Where do they live. Many people will say. You don’t need fancy software to do this. “I can’t draw. we planned for our app to ship with patterns. but it didn’t occur to us that people would play with the app more if we provided pre-fab patterns and templates for them to color. a job.” but they still have a desire to create beautiful things. After writing out a few use cases. Try this. we saw that the interface needed to be greatly simplified so that the children of the techies would also enjoy the app. Pretty important feedback! 154 . Originally. Now you have to put your audience into action! What do they do in their daily life? How will their daily life intersect with your product? Get into their minds. Below is an example of our use case sketches for our application. then see how your perspective changes. our initial target audience included early-adopter techies. we learned that people lose interest in drawing games when they’re forced to create original artwork. a family. similar to the classic Lite-Brite toy. What is your people’s story? Defining a target audience is only half of the equation. work and play? What challenges do they face? Give one of them a name. Tip: Define your target audience.

Tip: Think about the device in terms of lifestyle rather than features and technology. Will the iPad’s unique characteristics and environmental and sociological factors make your idea resonate with people? 155 .Smashing eBook #4: Mobile Design for iPhone and iPad In developing the idea for an app. our use cases revealed that the replay value of such an app is low unless you provide patterns for the user to get started.

Resist the temptation to fill the space! Keep it simple.” Designing for people is critical to weeding out weak (i. unprofitable. My kids will be entertained on a road trip. 156 . Display only the content and controls that are relevant to the user at that moment. location-aware devices like the iPad.Smashing eBook #4: Mobile Design for iPhone and iPad • It’s lightweight = “I’ll carry it more places than I would a laptop. train or car. We used a contextual menu (“Share this thang!”) to present actionable items at the appropriate time.” • It’s smaller than a laptop = “It’s discreet. Would I crack open my laptop to do some work in a waiting room? No. movies and games.” • Its screen is larger than the iPhone’s = “I can consume more media with less eye strain. you’re probably excited about the additional screen real estate. Minimalism Works Best on iPad With robust.” • It has robust utilities and multimedia capabilities = “I can work and enjoy books.” • It has Wi-Fi and 3G Internet connectivity = “I can be online on a plane. portable. This requires you to use the following two things in your interface design. Contextual menus Contextual menus are a great way to keep your UI out of the way. If you’re an iPhone developer.e. We wanted to keep sharing and community features out of the primary navigation. Would I switch on my iPad? Yes. the temptation is to throw in everything and the kitchen sink. untargetable or unmarketable) ideas quickly and to developing a product that not only meets but anticipates the target audience’s needs.

activated when you tap and hold on an image. 157 .Smashing eBook #4: Mobile Design for iPhone and iPad Example of a contextual sharing dialog.

158 . Manage groups of photos. In each scenario. they give the user clear “modes” of operation. You have two “modes” of operation: 1. Modal views give you another way to organize your application. 2. editing and managing functions into one view wouldn’t make sense.Smashing eBook #4: Mobile Design for iPhone and iPad Modal views (but wisely) With the increased real estate on the iPad. View or edit an individual photo. Think of how you could segment features in your app. “photos” on the iPad could operate similar to iPhoto on the desktop Mac. iPhoto has two modes of operation: viewing and editing a photo or managing photos. For example. while maintaining a smooth connection between the two modes. one can build in robust functionality that is impossible on an iPhone or iPod Touch screen. packing the viewing. and they can be an elegant solution to UI clutter if executed wisely.

This is where paper prototyping will save you from wasting loads of time in Photoshop. Having to consider every element of your app in these two sometimes radically different layouts is like designing for two devices… except that you’re not designing for two devices. but it’s a bigger deal on it. The trick is to keep the experience consistent in each view.Smashing eBook #4: Mobile Design for iPhone and iPad Tip: What is the bare minimum your app could provide and still be useful to users? iPad’s Two Orientation Are a Big Deal Being able to switch views—landscape to portrait and back again—is not unique to the iPad. The palette looks great in landscape mode but absolutely hogs the screen in portrait mode. Below is a color palette we tested for our app. Oops. 159 . allowing for a seamless user experience when switching views.

Smashing eBook #4: Mobile Design for iPhone and iPad 160 .

Smashing eBook #4: Mobile Design for iPhone and iPad This palette looks okay in landscape mode but gobbles up the interface in portrait. 161 .

Smashing eBook #4: Mobile Design for iPhone and iPad We reconfigured the color palette to have a smaller footprint in both landscape and portrait modes: 162 .

Tip: Paper prototype all of your screens in portrait and landscape modes… a lot.Smashing eBook #4: Mobile Design for iPhone and iPad A streamlined color palette allows accessibility while staying out of the way in both landscape and portrait views. 163 .

touch and gestures are turbo-charged. as you might in the real world. • Edit elements in place rather than from a global menu bar. 164 . edit and perceive on-screen elements. Mail).Smashing eBook #4: Mobile Design for iPhone and iPad Use Touch and Real-World Metaphors Touch changes how we interact with. Tip: Think of how you interact with things in the real world. Think of the onscreen elements as tangible things. Spread your fingers over a stack of photos to spread them out for viewing. With the iPad’s larger screen. A quick run-down of unique UI elements on the iPad: • Select and take action on multiple items at once by dragging them to another area of the screen. • See both a list view and details of items in that list view (e.g.

native apps that draw from Web pages or that load real-time Web content) are becoming more common as users demand connectivity to Web-based tools. Think of what visuals you would present to users when they’re stuck in East Bum with no connection to be found! Tip: Plan for problematic situations in your design.e. Designing for dynamic content means working through the challenges and opportunities of dealing with an Internet connection (e. Get started! The first step to getting started is downloading the iPad SDK. For Web developers looking to get into iPad development with their current skills.Smashing eBook #4: Mobile Design for iPhone and iPad Design for Dynamic Content The iPad’s portability and bigger screen size gives users unlimited possibilities for quickly creating and sharing robust dynamic content on the go. iPhone and Android apps in JavaScript. 165 . slow downloads or lost connection). products such as Appcelerator’s Titanium offer a good way to build native iPad.g. Hybrid apps (i.

mobile web apps are not sexy – in fact many people don’t even realize they are even an option. releases new hardware and OS updates.Smashing eBook #4: Mobile Design for iPhone and iPad Make it a Mobile Web App By Kim Pimmel Ask any interactive agency what their clients are asking for when they need a mobile experience – the answer will inevitably be ‘an iPhone and/or iPad app. There are a slew of startups targeting the iPad. With the increasing penetration of Android phones. developers are scrambling to port their software. and. However. development and deployment challenges. countless entrepreneurs hacking together the next killer iPhone app. and. though they face some design. there are many other situations where it may a short-term win but a long-term loss. they are a powerful cross-platform. Fragmentation is a costly long-term investment. 166 . and go through yet another app submission process? Who will continue to keep the code up to date for all these platforms as each one splinters into new incarnations. scalable and affordable solution. and people are beginning to realize that native apps are not a sustainable long-term solution for all their needs. In certain cases. But what about deploying to Windows Phone 7. Increasing Fragmentation Mobile apps are all the rage. and it seems as though every big company has released an app of some sort. Blackberry and Symbian?  Who wants to study yet another SDK. an iPhone/iPad app will be the right solution for their needs. in today’s mobile application ecosystem. Mobile web apps offer a number of advantages over native apps.’ Native Apple apps are a hot commodity. learn another language.

require hooks into specific hardware. such as a camera or an accelerometer. or have hefty media requirements.Smashing eBook #4: Mobile Design for iPhone and iPad The Mobile Web is Everywhere As the native mobile app market becomes increasingly fragmented. Although these constraints will change 167 . It wouldn’t be recommended for experiences that need complex graphics rendering. it is becoming clear that there needs to be a solution which can reuse code and designs across platforms and which eases deployment headaches. Webkit is gaining ground as the de facto standard for rendering web content. But why invent a new solution when it already exists on every device out there – the web. but even Webkit isn’t appropriate for every application.

It’s this same model that would be necessary to make a mobile web app ecosystem successful. And the primary reason for this is due to the overwhelming success of Apple’s (native) App Store. the focus is still squarely on native apps. Design and develop once. frameworks for mobile web app development already exist. a single web app could render appropriately on differing resolutions and screen sizes.Smashing eBook #4: Mobile Design for iPhone and iPad over time. and respond accordingly to touch. such as the Sencha Touch. creating a broad suite of online tools. With smart design and code. But for all other apps that don’t need these features. Google has been pushing in this direction for years. but they proved it was a viable model and launched the concept into popular culture. so long as it will render on mobile browsers. primarily for the desktop. 168 . deploy everywhere. However. And. The App Store Model Apple’s App Store was not the first to distribute native applications to mobile phones. 5 way or a cursor. using the mobile web frees developers to use their web technology of choice. Indeed. with an increasing focus on mobile. Google announced their development of a Chrome Web Store. at the Google IO conference. their announcement touched on many of the key points of why app stores are important and how to build for success. web apps have been slow to gain traction in the mobile space. This Is Nothing New … Desktop web apps are far from a new idea – rich internet apps have been around for a while. while their focus was primarily on desktop web apps. Even with Apple promoting mobile web apps as the next best thing on their 1st generation iPhone in 2007. Indeed.

and your desktop. I want to be sure my purchase will be a safe one – something a robust app store from a recognized company should offer. Second. it’s more appealing to go to one trusted online outlet. your iPad. it’s easy to find apps when they are indexed. First. use anywhere. you could play it on your Android phone. It’s magic! 169 . all with a single purchase. since a web app is cross-platform. Mobile web apps need a consolidated storefront for much the same reasons.Smashing eBook #4: Mobile Design for iPhone and iPad As a consumer. And. categorized and searchable in one place. Third. contributing ratings and writing reviews makes it easier to evaluate your choices. rather than to waste time searching the web for the same thing and putting yourself at risk of being hacked. Buy once. a robust community of users exposing app popularity. when I’ve decided to buy a game such as Plants and Zombies.

It’s also a marketing channel. This is key to driving adoption of a web app ecosystem. animation. licensing and other technical hurdles of digital distribution. businesses and developers will stick with money-making native apps.Smashing eBook #4: Mobile Design for iPhone and iPad As a business or developer creating web apps. Another potential benefit of using a web app storefront would be the APIs to help developers deal with authentication. it provides a source of monetization. a centralized web app store provides benefits over doing it solo. streaming video. allowing for easy discovery and promotion. Probably the most high profile web app to date is the Youtube mobile site. offline storage… the list goes on. It’s Possible Now A great majority of native apps could be deployed today as full featured mobile web apps. Most importantly. as without revenue. which delivers a comparable experience to the native apps they have built. The HTML5 family of technologies allow for refined typography. 170 .

but currently RIM and Microsoft’s mobile offerings use their own standards. deploy anywhere story – but is by no means a deal breaker.Smashing eBook #4: Mobile Design for iPhone and iPad Real World Challenges As with any innovation. This weakens the des/dev once. Web developers have long dealt with coding to accommodate troublesome browsers. there are big questions that need to be answered. The most obvious is the issue of cross-platform compatibility. 171 . and this would be a similar case. Building a robust and rich cross-platform mobile web app experience would benefit from HTML5 technology support.

form factors and input methods. similar to what is recommended by the Android SDK. quality user experiences in this new application space. This can be solved using a combination of intelligent design and careful development.Smashing eBook #4: Mobile Design for iPhone and iPad Another challenge in the deploy anywhere scenario arises when you look at how a given design translates across devices with varying resolutions. The Inevitable Victory of the Web Browser Web applications as ‘the next big idea’ might never happen. that provide solid web development and experience frameworks. We’ve seen how the Android’s app offerings often leave much to be desired in terms of visual design and usability while Apple has been more successful in defining quality experiences. in the coming years. Application designers will need to approach this problem by targeting several key resolution/form factor combinations. layout and functionality may differ significantly. the design. and flicking pests off your Farmville plot – all in your mobile browser. Depending on what device an app is being run on. Lastly is the problem of providing consistent. And people won’t even realize that in the end – the next generation mobile web won. design patterns. and components for designers would go a long way towards the creation of quality mobile web app experiences that would win over consumers. pinching photos. such as Sencha Touch and Sproutcore. we will see more offerings. 172 . but. You’ll be swiping through articles. more and more websites will have mobile incarnations that look a lot like applications. Providing a set of best practices. As mobile web apps gain credibility.

you will rarely see them in use. and the problems it will solve. you can create an iPhone version of your site using CSS3.Smashing eBook #4: Mobile Design for iPhone and iPad How to Use CSS3 Media Queries to Create a Mobile Website By Rachel Andrew CSS3 continues to both excite and frustrate web designers and developers. Media Types let you specify a type of media to target. We’ll have a look at a very simple example and I’ll also discuss the process of adding a small screen device stylesheet to my own site to show how easily we can add stylesheets for mobile devices to existing websites. In this article I’ll explain how. 173 . so you could target print. these media types never gained a lot of support by devices and. This article will demonstrate a technique that uses part of CSS3 that is also unsupported by Internet Explorer 8. Media Queries If you have ever created a print stylesheet for a website then you will be familiar with the idea of creating a specific stylesheet to come into play under certain conditions – in the case of a print stylesheet when the page is printed. Unfortunately. This functionality was enabled in CSS2 by media types. that will work now. other than the print media type. However. but also frustrated by the lack of support in Internet Explorer 8. handheld and so on. with a few CSS rules. We are excited about the possibilities that CSS3 brings. it doesn’t matter as one of the most useful places for this module is somewhere that does have a lot of support — small devices such as the iPhone and Android devices.

To see an example of this in practice. the UK web conference dConstruct has just launched their website for the 2010 conference and this uses media queries to great effect. detecting that the user has a small device like a smart phone of some description and giving them a specific layout. and you can use them to check for all kinds of things.Smashing eBook #4: Mobile Design for iPhone and iPad The Media Queries in CSS3 take this idea and extend it. 174 . Rather than looking for a type of device they look at the capability of the device. For example: • width and height (of the browser window) • device width and height • orientation – for example is a phone in landscape or portrait mode? • resolution If the user has a browser that supports media queries then we can write CSS specifically for certain situations. For example.

Smashing eBook #4: Mobile Design for iPhone and iPad The dConstruct 2010 website in Safari on a desktop computer 175 .

Smashing eBook #4: Mobile Design for iPhone and iPad The dConstruct 2010 website on an iPhone You can see from the above example that the site hasn’t just been made smaller to fit. It displays in the same way on Opera Mini on my Android based phone – so by using media queries and targeting the device capabilities the dConstruct 176 . but that the content has actually been re-architected to be made more easy to access on the small screen of the device. In addition many people might think of this as being an iPhone layout – but it isn’t.

A very simple two column layout 177 .Smashing eBook #4: Mobile Design for iPhone and iPad site caters for all sorts of devices – even ones they might not have thought of! Using Media Queries to create a stylesheet for phones To get started we can take a look at a very simple example. The below layout is a very simple two column layout.

position: relative. height: 93px. } #content { float: none.jpg). I am using an alternate background image and reducing the height of the header. width: 100%. } } In the code above. By using the cascade we can simply overwrite any styles rules we set for desktop browsers earlier in our CSS. and also to make the header area much smaller so readers don’t need to scroll past the header before getting to any content. } #navigation { float:none. The first way to use media queries is to have the alternate section of CSS right inside your single stylesheet. } div#header { background-image: url(media-queries-phone. then setting the content and navigation to float none and overwriting the width set earlier in the stylesheet. I have decided to linearize the entire design making it all one column. So. These rules only come into play on a small screen device.Smashing eBook #4: Mobile Design for iPhone and iPad To make it easier to read on a phone. As long as this section comes last in your CSS it will overwrite the previous rules. width: auto. to linearize our layout and use a smaller header graphic. I can add the following: @media only screen and (max-device-width: 480px) { div#wrapper { width: 400px. 178 . } div#header h1 { font-size: 140%. So to target small devices we can use the following syntax: @media only screen and (max-device-width: 480px) { } We can then add our alternate CSS for small screen and width devices inside the curly braces.

Smashing eBook #4: Mobile Design for iPhone and iPad My simple example as displayed on an iPhone 179 .

The screenshot below is the dConstruct site we looked at earlier as seen through the iPhone view on ProtoFluid. 180 . if your stylesheet contains a lot of overwriting or you want to completely separate the styles shown to desktop browsers and those used for small screen devices. However you will need to upload the code somewhere in order to view it. What about testing devices you don’t own and testing locally? An excellent site that can help you during the development process is ProtoFluid This application gives you a form to enter your URL – which can be a local URL – and view the design as if in the browser on an iPhone. Android device or other device that has a browser which supports media queries you can test your CSS yourself. iPad or a range of other devices. <link rel="stylesheet" type="text/css" media="only screen and (max-device-width: 480px)" href="small-device. To add a separate stylesheet after your main stylesheet and use the cascade to overwrite the rules. then linking in a different stylesheet will enable you to keep the CSS separate.Smashing eBook #4: Mobile Design for iPhone and iPad Linking a separate stylesheet using media queries Adding the specific code for devices inline might be a good way to use media queries if you only need to make a few changes.css" /> Testing media queries If you are the owner of an iPhone. use the following. However.

@media only screen and (max-width: 480px). To use ProtoFluid.Smashing eBook #4: Mobile Design for iPhone and iPad The dConstruct 2010 website in ProtoFluid You can also enter in your own window size if you have a specific device you want to test for and know the dimensions of it’s screen. only screen and (max-device-width: 480px) { } 181 . you need to slightly modify the media query shown earlier to include max-width as well as max-device-width. This means that the media query also comes into play if the user has a normal desktop browser but is using a very tiny window.

something you won’t have once on the iPhone. so the effect only happens for people with a small device and not just a small browser window. but ProtoFluid makes development and testing much simpler. As an experiment.Smashing eBook #4: Mobile Design for iPhone and iPad After updating your code to the above. you should still try and get a look at your layout in as many devices as possible. just refresh your page in the browser and then drag the window in and you should see the layout change as it hits 480 pixels. However. 182 . Retrofitting an existing site I have kept the example above very simple in order to demonstrate the technique. this technique could very easily be used to retrofit an existing site with a version for small screen devices. You are now all ready to test using ProtoFluid. I decided to take my own business website and apply these techniques to the layout. The real beauty of ProtoFluid is that you can still use tools such as FireBug to tweak your design. Note that if you don’t want your site to switch layout when someone drags their window narrow you can always remove the max-width part of the query before going live. The media queries are now reacting when the viewport width hits the value you entered. Obviously. One of the big selling points of using CSS for layout was this ability to provide alternate versions of our design.

This design is a couple of years old so we didn’t consider media queries when building it.Smashing eBook #4: Mobile Design for iPhone and iPad The desktop layout The website for my business currently has a multi-column layout. My site in a desktop browser 183 . The homepage is a little different but in general we have a fixed width 3 column layout.

png). I take the default stylesheet for the site and save it as small-device. What I am going to do is go through and overwrite certain rules and then delete anything I don’t need. Shrinking the header The first thing I want to do is make the logo fit nicely on screen for small devices. } #wrapper { width: auto. min-height: 400px.css. background-image: url(/img/small-logo. I also have a different background image with a shorter top area over which the logo sits.css" /> To create my new stylesheet. As the logo is a background image this is easy to do as I can load a different logo in this stylesheet. <link rel="stylesheet" type="text/css" media="only screen and (max-width: 480px). body { background-image: url(/img/small-bg. } 184 . background-position: left 5px. so I’m going to add a separate stylesheet using media queries to load this stylesheet after the current stylesheet and only if the max-width is less than 480 pixels. So this starts life as a copy of my main stylesheet.Smashing eBook #4: Mobile Design for iPhone and iPad Adding the new stylesheet There will be a number of changes that I need to make to linearize this layout. only screen and (max-device-width: 480px)" href="/assets/css/small-device. background-repeat: no-repeat. margin: auto.png). text-align: left.

Being able to use Firebug in ProtoFluid makes this job much easier as my workflow mainly involves playing around using Firebug until I am happy with the effect and then copying that CSS into the stylesheet. } Tidying up Everything after this point is really just a case of looking at the layout in ProtoFluid and tweaking it to give sensible amounts of margin and padding to areas that now are stacked rather than in columns.Smashing eBook #4: Mobile Design for iPhone and iPad Linearizing the layout The next main job is to linearize the layout and make it all one column.article #aside { float: none. The desktop layout is created using floats so all I need to do is find the rules that float the columns. width: auto. . 185 . This drops all the columns one under another. set them to float: none and width:auto.

Smashing eBook #4: Mobile Design for iPhone and iPad Testing in an iPhone Having created my stylesheet and uploading it I wanted to check how it worked in a real target device. A quick search on the Safari developer website gave me my answer – to add a meta tag to the head of the website setting the width of the viewport to the device width. <meta name="viewport" content="width=device-width" /> After adding the meta tag the site now displays zoomed in one the single column. In the iPhone. I discovered that the site still loaded zoomed out rather than zooming in on my nice readable single column. 186 .

If I was building a site from scratch that I would be using media queries on. as these can be switched using CSS. For example. there are definitely certain choices I would make to make the process simpler.Smashing eBook #4: Mobile Design for iPhone and iPad The site as it now displays on an iPhone This was a very simple retrofit to show that it is possible to add a mobile version of your site simply. 187 . using background images where possible. or perhaps using fluid images. considering the linearized column orders.

Internet Explorer 9 will have support for CSS3 Media Queries. this wasn’t easy to interact with on a touch screen device and so I checked using JavaScript if the browser window was very narrow and didn’t launch the carousel.Smashing eBook #4: Mobile Design for iPhone and iPad Our desktop layout features a case studies carousel on the homepage.5. Providing support for Media Queries in older browsers This article covers the use of media queries in devices that have native support. With a bit more time I could rewrite that carousel with an alternate version for users of mobile devices. If you are only interested in supporting iPhone and commonly used mobile browsers such as Opera Mini you have the luxury of not needing to worry about non-supporting browsers. perhaps with interactions more suitable to a touch screen. 188 . It is worth remembering that the browsers that support media queries also support lots of other CSS3 properties so your stylesheets that target these devices can also use other CSS3 to create a slick effect when viewed on an iPhone or other mobile device. Try it for yourself Using Media Queries is one place you can really start to use CSS3 in your daily work. If you want to start using media queries in desktop browsers then you might be interested to discover that there are a couple of techniques available which use JavaScript to add support to browsers such as Internet Explorer 8 (and lower versions) and Firefox prior to 3. which seems a reasonable solution for people on a small device. The way this was already written meant that the effect of stopping the carousel loading was that one case study would appear on the screen.

The limitations of mobile devices have forced developers and designers to find new ways to allow users to input data faster and more easily. the list goes on. checkboxes. radio buttons. limiting the number of forms in your mobile applications and websites is generally a good idea. Given that many form errors are caused by people not seeing their inputs well enough to correct misspellings. Field Zoom In many mobile Web browsers. connections are slower. the usability of this feature is clear.Smashing eBook #4: Mobile Design for iPhone and iPad Forms on Mobile Devices By Luke Wroblewski Mobile forms tend to have significantly more constraints than their desktop cousins: screens are smaller. No need to 189 .” “Next. giving people an easy way to move through and complete a form. When you do want input from users on mobile devices. This makes an otherwise tiny field large enough for people to actually see the data they are entering. the “field zoom” feature expands it to fill the screen’s viewable area. and mobile forms are no different. it may become the place to encourage them. when a user selects a form’s input field. So. The Safari browser on Apple’s iPhone makes use of field zoom together with a “form assistant. But constraints breed innovation.” “AutoFill” and “Done” buttons below the magnified input field. the mobile space may not be a place to avoid forms much longer. Instead. text entry is trickier.” The form assistant displays “Previous. Thanks to the modern solutions covered in this article. select menus and lists tend to work much better than open text fields.

Long input fields also suffer a bit with field zoom. So.Smashing eBook #4: Mobile Design for iPhone and iPad worry if an input field is off screen: the user just hits “Next” and won’t miss it! However. leftaligned labels disappear when input fields are expanded to fill the screen. As you can see on Google’s registration form (screenshot below). the user can easily forget what question they have to answer. Excessive spacing around the “Submit” button can tuck it behind the keyboard. 190 . Field zoom is another great reason to top-align input field labels in forms. make sure the controls on the Web page still allow them to complete the form. With no visible label. not everyone will know about the form assistant or know how to hide the keyboard.

Smashing eBook #4: Mobile Design for iPhone and iPad Mobile browsers that don’t have field zoom also run into issues with leftand right-aligned input field labels. Anyone using such a form on Google’s Android OS (below) faces the problem of disappearing labels. Top-aligned labels avoid this issue. 191 . The screen simply does not have enough room for both the input field and its corresponding label.

and “. Specifying an input of the type number brings up a virtual numeric keyboard.” and “@” keys. 192 .com” keys.Smashing eBook #4: Mobile Design for iPhone and iPad Input Formats Some mobile Web browsers recognize specific input types (part of the developing HTML5 standard) and adjust their input modes accordingly.”. because users would not have to switch to number mode to enter numeric data. For example. These input-specific keyboards make entering the particular type of data required by each input field much easier. specifying an input of the type url brings up a virtual alphanumeric keyboard with “. “/”. Specifying an input of the type email brings up a virtual alphanumeric keyboard with “. Even browsers without virtual keyboards benefit from the use of number.

Smashing eBook #4: Mobile Design for iPhone and iPad 193 .

First. nudge and flick gestures. Couple this interactive challenge with the small screens of mobile devices and the need for a different solution for select menus becomes quite obvious. To top it off.Smashing eBook #4: Mobile Design for iPhone and iPad Password-Masking Most password input fields in forms instantly obscure all characters that a user enters to keep sensitive information hidden from prying eyes. 194 . as illustrated in this password-masking solution from ZURB. Once you find the value you want. Then. Automatic masking of passwords may provide the appearance of security. you have to maneuver through a potentially long list of small targets. you need position your cursor on the right target and select it. or else the menu closes! Even dexterous users often miss them and need to start over. and then obscuring that character as a bullet only after a brief delay. Apple’s iPhone presents users with a pop-up menu control. Many mobile devices address this issue by displaying the most recent character the user has entered. but it can also create usability issues when people are left staring at a row of bullets that they hope (but can’t verify) is their password. This technique has made its way onto the desktop. For drop-down select menus on Web forms. many implementations of drop-down menus on the Web require you to keep your cursor on the menu while navigating the list. you have to click on the menu to open it. The large touch targets also make it easy to select the right value once you’ve found it. This control displays the options in the menu in a contained list that can be scrolled at various speeds though drag. Pop-Up Menu Controls Drop-down select menus are one of the hardest input types to use.

Smashing eBook #4: Mobile Design for iPhone and iPad Similarly. When the user taps a drop-down select menu on an Android device. Google’s Android provides a larger touch target for select menu options. 195 . a scrollable list of menu options appears in a dialog window over the Web page.

So. day and year of a requested date. such as height in feet and inches. 196 . instead of requiring three separate input fields for the month. This approach can be applied to other kinds of compound inputs as well.Smashing eBook #4: Mobile Design for iPhone and iPad Compound Menu Controls Pop-up menu controls can be applied to compound inputs as well. one date field can bring up a set of pop-up menus that allow people to scroll through three lists at once to find the right date.

though it makes use of visible interface elements to move through a list instead of relying on gesture-based scrolling alone.Smashing eBook #4: Mobile Design for iPhone and iPad Google’s Android has a compound input field solution. 197 .

rating widgets and scrubbers are just a few of the components worth considering in place of standard form controls to make inputting easier for users. most mobile operating systems have several other custom input controls available to application developers.Smashing eBook #4: Mobile Design for iPhone and iPad Native Input Controls In addition to having compound menu controls. 198 . split buttons. Sliders.

Smashing eBook #4: Mobile Design for iPhone and iPad Orientation Because people like to hold mobile devices both horizontally and vertically in their hands. The compose email form on Google’s Android does just that. 199 . mobile forms should adjust accordingly to take advantage of the changing screen space.

This layout maximizes the screen space available for the message content. or they can use the microphone button.Smashing eBook #4: Mobile Design for iPhone and iPad When held vertically. 200 . Users can swipe the virtual keyboard to switch the phone to audio input mode. the email body input takes over the screen. With effective voice input. The video below demonstrates both of these options in action. In the horizontal position. Voice Input Google’s Nexus One phone allows people to use voice input for any text field in an application. typing any characters into the mobile device becomes a thing of the past. and one action button is shown on the right. the screen shows three input fields with several action buttons.

Smashing eBook #4: Mobile Design for iPhone and iPad What’s Next? Mobile is growing exceptionally fast. anything that makes inputting (both on mobile and desktop devices) faster and easier will do a lot of good for both companies and their customers. and. we’ll hopefully see even further innovation in mobile forms. as more designers and developers focus on the space. 201 . After all.

6 and the iPhone. calibrating the main editing display and using a broadcast monitor are common. at one point or another. from scanner or digital camera to computer display to hard proofs to the final press output. have had issues trying to match colors in images to colors generated by HTML. When building Web and application interfaces. In such a scenario. When designing or editing for TV. color management typically involves calibrating your entire workflow. CSS or code. This article aims to solve those problems once and for all. Mac OS X prior to 10. Color Management to Match Colors Across Multiple Devices In the print world. This can be quite a tall order. these show real-time proof of how the image will look on a typical TV in a viewer’s home. which we’ll cover later.) 202 . especially when the devices use different color spaces – matching RGB and CMYK devices is notoriously hard.Smashing eBook #4: Mobile Design for iPhone and iPad Setting up Photoshop for Web and iPhone Development By Marc Edwards Most people who have designed websites or apps in Photoshop will. The final output is the same device that you’re using to create the artwork: a computer display (putting aside for now differences in gamma between Windows. the situation is a little different. color management offers many benefits and is highly recommended.

Safari and the iPhone Simulator. This is a bad thing if you’re working exclusively with RGB images for Web or on-screen user interfaces. Getting them all to match can be tricky. though. GIF and JPEG). under any circumstance. the colors will have various sources: images (typically PNG. Objective-C. but we want the actual values saved in the files to perfectly match the colors we have defined in Photoshop. With the 203 . etc). style markup (CSS) and code (JavaScript. Why is this so difficult? Photoshop applies its color management to images displayed within its windows and to the files it saves. we want to perfectly match the colors that are displayed on screen in Photoshop and that are saved in files with what’s displayed in other applications. Even though you’re creating the Web or app interface on the same device that the final product will be shown on.Smashing eBook #4: Mobile Design for iPhone and iPad There is a catch. Colors should not shift or appear to shift in any way. including Firefox. Not only do we want the colors to look the same. HTML. The goal When designing websites or app interfaces.

and #BB95FF will display as #BA98FD. after the main buffer in video ram. I believe the color management in Windows Vista and Windows 7 (Windows Color System) works in a similar fashion. How Does Photoshop Differ from OS X and Windows? OS X’s color management is applied to the entire display at the very end of the processing chain. the software utilities that measure color on screen (like /Utilities/DigitalColor Meter) will report the same values that you have saved in the file or entered as your code. so software utilities that measure color on screen often report different colors from the ones you have specified. If you need to calibrate your monitor for Web and app design work. The best solution I’ve found is to disable Photoshop’s color management for RGB documents as much as possible. This color correction happens as Photoshop draws the image on screen. 204 . This means that although color management is applied. but it now requires a little more skill. #FF0000 will actually display as #FB0018. Photoshop’s color management is applied only to the image portion of its windows and to the files it saves.Smashing eBook #4: Mobile Design for iPhone and iPad default Photoshop settings. The differences are subtle but definitely there. Doing so forces the RGB colors that are on screen and saved to the file to match the actual color value. Disabling color management used to be quite easy in Photoshop CS2 and all versions prior. It’s worth noting that OS X’s color management is applied on top of Photoshop’s. then you would best be served by changing it at the OS level.

205 . Step 1: Go to Edit → Color Settings and set the working space for RGB to Monitor RGB. Step 4: When saving files with Save for Web & Devices. but the data contained in the file will remain unaltered. Step 2: Open a document and go to Edit → Assign Profile. so that you know which to use when. then set it to Working RGB. Assign Profile simply changes the profile in the document. This must be done for every single document you work on. ensure that Convert to sRGB is turned off. It’s a nondestructive action: you can assign a new color profile to your documents as often as you like without doing any damage. without affecting any of the color data. Setting up CS4 is very similar. Difference Between “Assign Profile” and “Convert To Profile” Now would be a good time to mention the difference between Assign Profile and Convert to Profile. If you’re saving a JPEG file. Assigning a new profile may change the way your document appears on screen. Each Photoshop document contains a color profile that’s separate from the actual color data stored for each pixel. but chances are you’ll want it off for interface elements and icons). Step 3: Ensure View → Proof Colors is turned off. then also turn off Embed Color Profile (you may want this turned on for certain photos.Smashing eBook #4: Mobile Design for iPhone and iPad Disabling Photoshop’s RGB Color Management These instructions are for Photoshop CS5 on Mac and Windows.

It does this by processing the color data contained in the file for each pixel. then also turn off Embed Color Profile (again. but it tries to keep your image looking the same on screen. Step 2: Open the document and go to Edit → Assign Profile. If you’re copying layers from one Photoshop document to another. Use with caution. but chances are you’ll want it off for interface elements and icons). ensure that Convert to sRGB is turned off. Converting to a new profile will more likely preserve a document’s color on screen. you may want this turned on for certain photos. 206 . This must be done for every single document you work on.Smashing eBook #4: Mobile Design for iPhone and iPad Convert to Profile is quite different. Step 4: When saving files with Save for Web & Devices. These instructions are for Illustrator CS5 on Mac and Windows. then follow the steps below. Illustrator is the Same as Photoshop If you would like images saved in Illustrator or imported from Illustrator to Photoshop to match as well. Step 1: Go to Edit → Color Settings. Setting up Illustrator CS4 is very similar. and set the working space for RGB to Monitor RGB. If you’re saving a JPEG file. you will want to ensure that the documents have been assigned the same color profile. Then set it to Working RGB. but the data contained in the file will be permanently altered. Step 3: Ensure that View → Proof Colors is turned off. Not only does it assign a color profile to the document.

both operating systems are now in sync. Thankfully. What does this mean? Prior to Snow Leopard. which uses 2. Mac OS X has used a gamma of 1.8 for all versions except Snow Leopard (the latest release). so a Web page should look very similar on a Mac and PC that use the same monitor.2.2 since its introduction. Web pages looked darker on Windows. 207 .Smashing eBook #4: Mobile Design for iPhone and iPad Gamma Differences Windows has used a gamma of 2.

you’re able to move bitmap and vector images between Photoshop and Illustrator without any color shifts at all. you can sync photos using iTunes). the Photos app on the iPhone doesn’t display landscape images at 1:1. This article explains how to handle the problem that while testing some landscape iPhone app interface mocks. making the images blurrier than they should be. To avoid any issues. 208 . and using any method. and it will match your images perfectly. it scales them slightly or shifts them to a sub-pixel position. always save images in portrait mode (320 pixels wide by 480 pixels high) to test your user interface mockups. JavaScript. Instead. You’re also able to grab a color using the color picker in Photoshop. Please note: For some bizarre reason. and then use the same HEX color value in your CSS. Flash or ObjectiveC code. This gives you another chance to make adjustments before slicing up images or committing anything to code. Conclusion Now.Smashing eBook #4: Mobile Design for iPhone and iPad Final Check for iPhone UI Your iPhone or iPod’s screen and calibration will likely be different from your Mac or PC’s screen and calibration. I often import full-screen images of the UI into iPhoto and sync them with an iPhone to see exactly how the final interface will look on the device (on Windows. they seem blurrier than they appear in Photoshop. HTML.

ideally. If you want to stick it to the man. but they are so often neglected in the heat of the moment. all screaming for attention. how do you get them to buy it and show it to their friends? Following the simple rules laid out below. Be Unique One of the easiest ways to stand out in the App Store is to create an app that is unique. 209 . or 2. The first developer in your category of product. These tips might seem rudimentary or inyour-face obvious. Against more than 140. how do you make sure your app gets its time in the spotlight? What does it take to get good media coverage? How do you get people to talk about your app – and. Yet still thousands and thousands of apps are uninspired. shoveled out by tired developers looking for a quick buck. you will increase your chances in the battle for fame and glory. make sure that you are either: 1. Reinventing the existing category with something unique. If you’re just improving something that’s already available. your battle to market it will be uphill.Smashing eBook #4: Mobile Design for iPhone and iPad How to Market Your Mobile Application By Michael Flarup App Store is a competitive environment. Sure. that makes sense.000 apps.

So unless you’re sitting on a revolutionary new idea. very few apps create new categories. 210 . • Ask yourself if you are merely improving on someone else’s idea. storytelling. plan and build with the intention of creating something unique. • Think. the battle to market it will be uphill. So many things can be re-imagined with little effort. such as mixing categories. If it already exists in the App store. And that’s exactly the effect you want if you intend to sell apps in the App Store. do the exact opposite of the leader. • If you’re competing in a saturated market. accelerometer. etc. Look at your competitors and flick on your child-like consumer filter. From the conceptual drafts to the final marketing. keep iterating the unique aspects of your product. What cool feature for this category is missing? How can you take advantage of the iPhone’s interface.Smashing eBook #4: Mobile Design for iPhone and iPad Spin an existing category At this point in the history of the App Store. GPS. focus your attention on a unique spin of an existing category. GPS or multi-touch functionality to create a package that delivers a unique experience in this category? A unique feature will make your app stand a head taller in the crowd and raise eyebrows. • Try some shortcuts to create something unique. proximity sensor and multi-touch gestures. thinking of new ways to use the accelerometer.

you can still compose a tweet that is highly tweetable. The Twitter network. which will hopefully translate into sales. you will need to teach that pitch to the rest of the world. Despite the diversity of people using the service. Some of the most successful apps are easily shared through social media. has a particular personality and disposition. The more people talk. with its millions of users. But how do you encourage people to start up conversations about your product? Learn to pitch I’m sure you’ve pitched your app to at least a dozen co-workers and puzzled family members. I’m trademarking that word—refers to how well a product or message would move on Twitter. talking about it like a homogenous mass still makes sense in many ways. If your app is unique. the more exposure your app will get. Just think of what you would retweet yourself. you’re halfway there—people will talk about it just because of its uniqueness.Smashing eBook #4: Mobile Design for iPhone and iPad Be Tweetable Getting people to talk about your app is imperative for success. Check this out!” Instantly gratifying app + high tweetability = free exposure. Imagine the twittersphere chattering in chipmunk voices. guys. Be interesting Make the conversation about your app easy and engaging. the highs and lows. How would you sell your app in 140 characters? 211 . the big sells of your product and the hard-tounderstand parts. You know the ins and outs of your elevator speech. Make it so that people want to tweet about it. If you want your app to succeed. Tweetability—if no one has yet. Even if your app isn’t instantly gratifying or playfully humorous. “Hey.

Throw the keys at your favorite blog. 212 . Give them a high-res version of the icon. screenshots and press-related texts. but your app should also be easy to write about. How good a story is your app? Obviously. It’s a great way to reach a new audience and strengthen your relationships and reputation. First. you need to think like the media. Like ripples in a pond. Write good copy. And have a solid. the more likely you’ll hit a big blog. useful and attractive landing page. the more people tweet about your app. you’ve got a direct line to your target customers. If you can find a categoryspecific blog. Sum up your app’s purpose in one line. Don’t be stingy with the promo keys either—in fact. the traffic and buzz they generate are worth pursuing. Supply people with the material they need to talk about your app. Promo keys are cheap marketing collateral and a way for you to put your app in the hands of peer leaders. and invite them to give some away for free in a raffle. Review blogs and tech websites are part of the App Store’s eco-system.Smashing eBook #4: Mobile Design for iPhone and iPad • Play to your strengths. • Find the human angle. and while the exact effect they have on sales is debatable. Think like media To get good media coverage. the law of uniqueness makes a difference here. Are there any amusing and beneficial reasons why people would use your app? • Have a memorable tagline. provide a free press package that anyone can download. dispense them liberally. Cater To Blogs Social media and the blogosphere are not isolated from each other.

let people in on the secret before the launch. • Give out promo codes to blogs without hesitation. 213 . If you can get the cool kids to talk about you. Reviews stay there and bring in traffic for months. chances are that other blogs will pick up the story and throw you on their front page. contact wine blogs. by building a mailing list and getting Google juice for your domain. If you’re making a wine app. hype can backfire and harm your efforts to generate hype in future. but the rules mentioned above will help you put things in motion. because they are less transient than tweets. Control The Hype App sales thrive on hype. While there is truth to the saying that there is no such thing as bad publicity.Smashing eBook #4: Mobile Design for iPhone and iPad Blogs are like kids in a schoolyard While they may not want to hear this. But hype will amount to nothing if it’s for a poor product. Hype will always be partly out of your hands. blogs are a bit like kids in a schoolyard. If you know you have a unique product. • Have an extensive and easily accessible press package. • Try to crack category-specific blogs. Hype early Start hyping early. • Don’t be afraid to ask individuals to endorse your app. and you will have mastered the product launch. Getting on review and media websites is vital to your marketing success. Learn to control the hype. Having an interesting “Coming soon” website can do this.

make it big. Give away promo keys on Twitter. mystery.Smashing eBook #4: Mobile Design for iPhone and iPad Make your website great Needless to say. and hit all social media. The first wave you set in motion will give you instant feedback on how to adjust your hype machine. and think outside the box. your app should have its own website. Get a steady stream of review websites to cover your app. Make the website an extension of your app. and pull every lever and handle in your network. you will need a point of reference. you’ve made it far. Launch big When you launch. Send out the triumphant newsletter. and serve new content on your website. show the app in action. In the end. What would excite you about this app if it were made by another developer? 214 . To make any of the rules above work. if you can get into the “What’s hot” or “New and noteworthy” sections of the App Store. Hype is all about critical mass. The best way to balance the two is to keep asking yourself whether you can do anything else to add value. and you will have yet another great tool in your marketing toolbox. Obviously. polish or spin to your product. hype is part luck and part skill. somewhere to send the masses. Rely on your own judgement. Have you or your team write up blog posts. Make the website interesting. Maintaining hype is all about introducing new venues in which to exhibit your app.

This is a classic scenario: a rethinking of an established category. by swiping through a virtual forecast. Example: Being Awesome In A Saturated Market To illustrate the application of these rules. by building a game or puzzle or just throwing a contest or giveaway. Unique spin The Awesome app reverse-engineers the trend of offering up increasingly detailed and advanced weather data. Give away prizes that make sense for your category. • Boost popularity by timing the launch of your app to coincide with a live event or trending topic. It builds uniqueness right into the very concept and goes in the opposite direction of the market leaders. Instead. For the sake of convenience. it trims down functionality and focuses on the very playful and human idea of exploring the weather visually. Attract visitors in creative ways. let’s take a play-by-play look at one successful app.” Awesome app is a weather-forecasting app. making this an excellent example of being able to re-invent and compete if we have the right frame of mind. 215 . let’s just call it “Awesome app. I can’t think of a more tired and saturated market than weather apps. • Run contests related to your app. Hold an online or live event. • Release your app with a big bang.Smashing eBook #4: Mobile Design for iPhone and iPad • Give out promo codes on Twitter and in the blogosphere. Climate-related apps spiked around the COP15 Climate Summit in Copenhagen.

Review websites As soon as sales get a lift from the early launch hype. A “Making the app” video is posted that gives existing customers something to enjoy (and that humanizes the team). highlighting user recommendations. a more elaborate version of the website. and chatter about the app is monitored on Twitter.Smashing eBook #4: Mobile Design for iPhone and iPad Early hype. The release newsletter goes out. with video and screenshots. goes up. where developers offer help and follow up on questions. Reviews started flowing in. the website for Awesome app presents a “Coming soon” page that collects close to a thousand confirmed emails. A teaser video of the interface generates some buzz and earns the app a nomination in the App Star awards. emails are sent out to various review websites offering promo keys. The app launches at the end of December 2009. 216 . and the developers make as much noise as they possibly can in their networks. big launch Prior to launch.

contributing hype that doesn’t have anything to do with the app itself. More than a month in and we’re still seeing continued interest in the app. which ripples out to LifeHacker and other major websites. And coverage peaks with a TechCrunch article. it has gathered hundreds of five-star reviews in the App Store and has been featured in both “New and noteworthy” and “What’s hot.” 217 .Smashing eBook #4: Mobile Design for iPhone and iPad The website for Awesome app gets some wind of its own by being featured in various design blogs for its modern use of CSS animations. larger websites such as TUAW started showing interest. Picked up by larger websites A week and a half after launch.

and it eventually attracted visitors not only because of the app but because of the design of the website. Marketing then becomes all about making it easier and more interesting for people to talk about and share your creation. you too can secure free exposure for your beloved app. 218 . • A press package with everything you could want was freely available on the website. It was appealing enough for people to tweet about it.Smashing eBook #4: Mobile Design for iPhone and iPad What worked? What worked for Awesome app was a combination of the marketing rules discussed above: • It was sufficiently unique in a crowded market to spark interest and be seen as a “good story. • The team started hyping early with a “Coming soon” page. If you have a unique product and apply some of the ideas above. making it easy for blogs to write about the app. yet the Awesome app reached tens of thousands of people. • It was completely the opposite of what leading competitors were doing. It’s a rather democratic and honest process because you are required to reinvent apps by adding unique features.” • The idea of a “visual weather forecast” was easy to convey and was presented in a way that gave it high tweetability. Parting Thought Not a single dime was spent on marketing it.

will put you in a position to build awareness of your application much more easily. 219 . But keeping in mind some of the things we’ve talked about here—both at the conception and the execution stage . there’s no surefire way to create a successful app.Smashing eBook #4: Mobile Design for iPhone and iPad As with most other things in life.

There are plenty of big names which were analyzed. such as Facebook and Amazon. we need to observe how this now critical element of our industry is evolving. The surge in Web-enabled mobile devices has forged a subculture of visitors who require the adaptation of our websites to meet their needs. With statistics and some really interesting revelations on the diversity of modern design.Smashing eBook #4: Mobile Design for iPhone and iPad A Study of Trends in Mobile Design By Alexander Dawson The industry has evolved in many ways. and the patterns which exist from current development efforts. but one particular area has affected how we build websites to a greater extent than any other. While mobile design is still in its infancy (and little primary research on mobile trends exist). it’s important to state that this study isn’t going to answer every one of your questions – but it hopefully may help you to learn a few things! 220 . you can be excited about the future of mobile Web design! What is This Anyway? To determine some best practices and common trends within the ever growing field of mobile Web design. The aim of this article is to showcase the variety of methods in which some of today’s most popular websites provide an interactive and (hopefully) useful mobile experience for their end users. and you’ll see plenty of useful graphs to draw some inspiration from. Because this research could have covered any number of variables. a study was conducted to analyze how popular websites deal with important factors relating to the information architecture and design implementations within mobile design.

Using this information you can hopefully recognize the limitations of this particular study. perhaps you could expand on the subject and conduct some research of your own to see how the results apply under different situations. coding levels. Examining the Variables Before presenting the results of this study. the results had to be interesting (and could affect how the mobile design situation is seen). The approval for which variables were included had to meet certain criteria. the number of variables being considered may result in anomalies. the protocol begin by selecting an independent group of sites (outsourced) and variables to test against – many of which had never been examined on such a scale (or in such depth) previously. Factors such as websites without mobile experience have been accounted for (as has bias – to the greatest extent possible. if you really feel adventurous. and some useful features specific to mobile websites have been measured (to their existence. design choices. but also if they had non-Web features. 221 .Smashing eBook #4: Mobile Design for iPhone and iPad Of the websites that are measured and accounted for within the study. In addition. such as mobile apps. we not only examined how these websites deal with mobile devices and how visitors are served a mobile experience. and. It could make for interesting reading! Regarding the methodology for this study. some of the layout conventions. that can play a useful role in the process. their conformance level. Note: While a great deal of effort has been put into making this study as accurate as possible. it’s important to account for a few of the variables and methodology that came into play to explain how the research and results were formed. Firstly. and the method they undertake). during the study). and also had to be statistically significant (we don’t want to state the obvious).

the focus became twofold: how the mobile experience is activated and how that experience functions. To eliminate the potential for bias or for focusing on a niche. An example of this is the support for orientation (portrait and landscape modes). touch screens. as a result of how browsers deal with the layout.Smashing eBook #4: Mobile Design for iPhone and iPad Note: Some variables were dropped from the final analysis due to a lack of conclusive. it was decided that the top 100 websites depicted through Google’s AdPlanner list would be a suitable candidate. Site Selection Protocol Picking a group of websites to analyze is.000 websites and the study could easily be expanded. we used the initial 100 websites to receive a good sample and to provide enough variety for the baseline results. How visitors are directed to a mobile experience became worthy of attention due to the increasing number of implementations that exist. and other best practices. Variables (Per Category) The results of this study wouldn’t be anything without its variables. useful results. 222 . When deciding what to test against. While the list held 1. seeing 100% native support. This level is used as the qualifier for statistically significant results. of course. display size. it was vital to test those pages to ensure they accounted for speed. a critical part of the process. this became a non-issue. bandwidth. Secondly.

223 .Smashing eBook #4: Mobile Design for iPhone and iPad Plenty of variables were considered to give you some informative results to learn from. To avoid as many of these issues as possible not only were the websites independently sourced. and the testing was verified on two separate dates to ensure that the experience resulted from consistent practices. Following this practice reinforced the results (avoiding erroneous numbers). but all testing was undertaken on a desktop machine. several handheld devices. and a number of emulators (this occurred on every website). Margins for Error As with any study. there is always a potential for error or bias to occur.

and some of the results may be really surprising. We’ve broken down each type of result into its own subsection and have provided various ways the results can be interpreted. let’s get down to business! 224 .Smashing eBook #4: Mobile Design for iPhone and iPad And Our Survey Says…the Results Now that all of the basics (as to how the study was undertaken) have been explained. so hopefully the findings of this study will be quite apparent. Without any further delay. it’s time we get down to the really interesting stuff – the results! You should be prepared for plenty of charts and graphs.

225 . When a user proactively visits a website they want to be made aware that their device is either supported. but also if the mobile experience was provided on the standard website (rather than a subdomain) and if a regular PC could switch to the mobile version too. we not only examined whether a redirection or device detection occurred.Smashing eBook #4: Mobile Design for iPhone and iPad Study Results 1 Method of Access Within this test it was important to establish whether a mobile experience was made apparent to a user immediately. or that the regular website will load. In this test.

226 .Smashing eBook #4: Mobile Design for iPhone and iPad The proportion of automatic redirects against desktop websites with optional mobile support.

227 .Smashing eBook #4: Mobile Design for iPhone and iPad The distribution of websites which implemented a mobile design on the WWW subdomain.

228 .Smashing eBook #4: Mobile Design for iPhone and iPad How mobile-friendly websites dealt with desktop PC users trying to access the mobile website.

an interesting trend occurred where all but one website (answers. 229 .Smashing eBook #4: Mobile Design for iPhone and iPad While the number of websites that employed a script to detect and redirect visitors to a mobile experience wasn’t as high as one might have expected (as many believe that the mobile website should come first to boost loading times).com) employing a mobile version of the experience (on the WWW subdomain) forced the redirection of PC users back to the desktop view without allowing entry to access the mobile edition (if they wished to).

As such.) and the . and trends which may exist in the use of subdomains on mobile websites.Smashing eBook #4: Mobile Design for iPhone and iPad Mobile TLD Usage This second test aimed to determine the use of TLD conventions in mobile TLD were considered (along with dedicated mobile websites).mobi TLD. directory paths on the WWW domain such as “/mobile/” were not considered. The possible implications of this result could showcase the popularity for the . 230 . In order to keep the scope of the results as strict as possible. only subdomains (such as m.

Smashing eBook #4: Mobile Design for iPhone and iPad The distribution of mobile TLD subdomains. 231 . including the level of extension popularity.

232 .Smashing eBook #4: Mobile Design for iPhone and iPad The number of websites which offered no mobile-optimized experience in any form.

Smashing eBook #4: Mobile Design for iPhone and iPad A graph showcasing the number of subdomains supported per website (on average). 233 .

Smashing eBook #4: Mobile Design for iPhone and iPad The levels of which WAP. 234 .or WML-enabled devices are supported or offered access.

Smashing eBook #4: Mobile Design for iPhone and iPad The percentage of websites which redirect the user to a separate mobile TLD. 235 .

mobi extensions was much lower than expected. In addition. 236 .Smashing eBook #4: Mobile Design for iPhone and iPad Interestingly. Asian ones trended toward using “3G” in preference to “m” or “mobile” (as used elsewhere). Unlike other nations’ mobile websites. an unusual trend made itself apparent. while many sites offered some form of mobile experience and some redirected the visitor. the use of . It’s worth mentioning in addition that only Apple devices were lucky enough to receive a dedicated website using the “touch” or “i” subdomain.

Android. With so many apps having Web connectivity. the results of this test really push the barriers to access in finding how mobile-friendly a website is. or Blackberry.Smashing eBook #4: Mobile Design for iPhone and iPad Mobile Phone Apps While this test was not so much about the type of code rendered in browsers. The results of this test simply looked for the presence of a mobile app. it seemed prudent to determine how many websites in the surveyed list provided a mobile application for devices such as iDevices. 237 . the platform itself is not taken into account.

238 .Smashing eBook #4: Mobile Design for iPhone and iPad The number of websites that had mobile phone-specific apps (for any platform).

but without a mobile-friendly website.Smashing eBook #4: Mobile Design for iPhone and iPad The percentage of websites with a mobile app. 239 .

what did become apparent and rather interesting is that some of the listed websites which did not have a mobile-friendly website (in any form) still had an app. due to the popularity and the widespread use of their services. have no fallback to function on).Smashing eBook #4: Mobile Design for iPhone and iPad While it’s not surprising that many of the top 100 websites had a mobile app. 240 . This particular trend seems to indicate that the transition toward a mobile-friendly set of services is down to the heightened demand for apps (which unlike mobile websites.

For the purposes of this study. to ensure balanced results) and were done using an uncached format. each of the times were registered over a Wi-Fi connection (not a 3G or Edge stream due to some emulator usage.Smashing eBook #4: Mobile Design for iPhone and iPad Average Loading Time In the next test. therefore. 241 . we felt it was important to measure the loading times of each website to see how mobile experiences account for the bandwidth restraints and temperamental speeds of the average Web user. the loading time would be accurate to include any external resources.

Smashing eBook #4: Mobile Design for iPhone and iPad The highest. mean." 242 . and lowest loading times as calculated from an uncached "cold boot.

243 .Smashing eBook #4: Mobile Design for iPhone and iPad The percentage of websites requiring more than 10 seconds loading time on a WiFi connection.

244 .Smashing eBook #4: Mobile Design for iPhone and iPad The percentage of websites requiring less than 3 seconds loading time on a Wi-Fi connection.

a speedy and effective loading time has become critical to the design process. with only a small number of websites having load times of over 5 seconds (often in such cases it was a result of slow server response. 245 . rather than of the physical content being transferred). the results were fairly conclusive that the loading time of each website was pretty evenly spread.Smashing eBook #4: Mobile Design for iPhone and iPad While caching will produce substantially quicker loading times. As visitors obviously don’t want to wait for long periods of time to get their data.

Smashing eBook #4: Mobile Design for iPhone and iPad Home Page Asset Size Along with the time it took to load a page. in equal measure it immediately became obvious that the size of the files and any loaded external resources should be measured. With many mobile Internet plans having capped services and international browsing potentially becoming prohibitively expensive (by the megabyte). 246 . it seemed only fair to determine how each website was optimized and whether the amount of uncached data loaded was as small (or big) as a regular desktop-oriented website.

and lowest file (and asset) size as calculated with caching turned off. mean.Smashing eBook #4: Mobile Design for iPhone and iPad The highest. 247 .

248 .Smashing eBook #4: Mobile Design for iPhone and iPad The percentage of websites with a total uncached asset size of more than 100KB.

249 .Smashing eBook #4: Mobile Design for iPhone and iPad The percentage of websites with a total uncached asset size of less than 25KB.

some even as high as 0.5MB! More interesting is the coincidence that the percentage of websites that have asset sizes of fewer than 25KB. While many websites (especially WAP-oriented ones for less capable devices) required less than 25KB to function. which seems like an acceptable level–a large number of websites supposedly providing a mobile experience required over 100KB.Smashing eBook #4: Mobile Design for iPhone and iPad The results of this test are rather interesting. 250 . matched (exactly) the percentage requiring over 100KB.

The debates about HTML vs. XHTML have been endless. one of the initial questions we ask ourselves is what language or version of that language will best meet our contents needs.Smashing eBook #4: Mobile Design for iPhone and iPad Study Results 2 Doctype Declarations When producing a website. and as many mobile variants exist (the mobile profiles for XHTML and WML). 251 . This test therefore examined the Doctype of the front page to see if any patterns of usage exist. it became apparent that statistics related to the types of DTD most often used could be of benefit to readers.

based on language versions and profiles. 252 .Smashing eBook #4: Mobile Design for iPhone and iPad The distribution of mobile website Doctypes.

253 .Smashing eBook #4: Mobile Design for iPhone and iPad The percentage of websites using a mobile-specific profile in preference to desktop profiles.

Smashing eBook #4: Mobile Design for iPhone and iPad The percentage of websites that support both a WML and full XHTML experience. 254 .

Smashing eBook #4: Mobile Design for iPhone and iPad The results show conclusively that XHTML is currently more popular than HTML (or HTML5). In addition. the spread of mobile vs. In addition. Facebook’s iPhone-friendly website was the only one which failed to provide any Doctype at all! 255 . desktop profile usage was fairly similar. This questions the need for mobile profiles. This could be down to HTML’s lack of a mobile profile (used in most cases). though it can be noted that many smartphones supported HTML and XHTML. if the full specs are supported.

Smashing eBook #4: Mobile Design for iPhone and iPad Code Validation With the semantic Web and the need for our industry to maintain standards. While standards aren’t the be-all and end-all of design. this test was included to provide additional comparisons as to the stage conformity to semantics were. this piece used a different set of data. While Zeldman’s research focused on the Alexa top 100. 256 . this test followed an earlier study by Jeffrey Zeldman in which a large number of websites were put through a simple “pass or fail” test against validation.

257 . proprietary properties were ignored).Smashing eBook #4: Mobile Design for iPhone and iPad Distribution of website validation (in the case of CSS.

Smashing eBook #4: Mobile Design for iPhone and iPad The percentage of top 100 websites with a front page that validates against the DTD chosen. 258 .

They do instead provide a good indication as to the care being given to mobile experiences. Unfortunately. This seems to reinforce the fact that design is more important to those designers. the results seem to correlate with Zeldman’s research in that the overwhelming majority failed to meet the standards for the DTD they chose to conform too. 259 . than optimizations or quality. the results are not as complete as they could be.Smashing eBook #4: Mobile Design for iPhone and iPad Because this checkpoint focused only on the front page of mobile-friendly websites.

260 . style and behavior has been shown to have benefits in reducing file sizes (due to avoiding repeat coding and to cache advantages). It therefore seemed right to see not only if websites did separate their style or behavior. but also if they took advantage of CSS3 or jQuery in the mobile design to provide a more dynamic behavior within the website layout.Smashing eBook #4: Mobile Design for iPhone and iPad Code Separation The next test that was carried out links quite heavily into a few of those that were previously carried out. The separation of structure.

Smashing eBook #4: Mobile Design for iPhone and iPad The percentage of websites using embedded inline style rather than external files. 261 .

1 or CSS3 within their designs.Smashing eBook #4: Mobile Design for iPhone and iPad The percentage of websites using external CSS2. 262 .

263 .Smashing eBook #4: Mobile Design for iPhone and iPad The percentage of websites using external JavaScript or jQuery within their designs.

Smashing eBook #4: Mobile Design for iPhone and iPad While you would have thought that most websites would immediately break the style and behavior from their mobile pages in order to improve performance. a moderate number of the websites did have all of their code directly tied into the page. In addition. predictably. similar to HTML5 usage. and an equally small number made use of CSS3 media queries to dynamically scale the layout. The numbers for CSS3 usage were. 264 . only a rare number of those mobile websites took advantage of the jQuery framework.

The elements for which this test was created were not only based on headings. 265 . any websites which rely on the default typefaces by not providing a font stack (or which have a stack with multiple typefaces) would be noted. In addition. This particular test was created to not only see which Websafe typefaces are being implemented on the Web but to see what font families are being used.Smashing eBook #4: Mobile Design for iPhone and iPad Font Family Types Typography is an essential element of the Web and of how information is visualized. but on all manner of content in the page.

Smashing eBook #4: Mobile Design for iPhone and iPad A distribution showcasing the typefaces used within the primary font stack. 266 .

Smashing eBook #4: Mobile Design for iPhone and iPad The percentage of mobile designs with no font stack declared (using defaults). 267 .

Smashing eBook #4: Mobile Design for iPhone and iPad

A graph showcasing the number of fonts declared within a family, per website.


Smashing eBook #4: Mobile Design for iPhone and iPad

The results are quite surprising. In every case where a font family was declared, the category of typefaces used was always sans serif (for both headings and body text). In no instances did serif or another classification get used, and, in some cases, no font family was declared at all (which could be due to inconsistencies in available fonts for such devices). In addition, the number of occasions where no font stacks were built–resulting in the use of system defaults alone–was fairly significant.


Smashing eBook #4: Mobile Design for iPhone and iPad

Study Results 3
Heading Contrasts
Since the evolution of the cellphone, the ability to have color screens with as much depth and clarity as a desktop PC (using high definition graphics) has increased the ability for us to give our headings and content the colors of the rainbow, both in the foreground and in the background. This test was added to the study in order to see if any trends existed, the range to which color is used within headings, and to determine whether mobile websites made use of background effects such as gradient colors.


Smashing eBook #4: Mobile Design for iPhone and iPad

Showcasing the number of colors used within the foreground or background of headings.


Smashing eBook #4: Mobile Design for iPhone and iPad

A distribution of websites using a black foreground or white background in headings.


Smashing eBook #4: Mobile Design for iPhone and iPad

The percentage of mobile websites using a gradient background within a header.


Another trend uncovered was the preferred use of gradients within the background of headings to give them an added layer of texture. This stands to reason as a method to keep the contrast ratio high on small screen devices. 274 . shades of grey were used). instead of using solid colors or an increased text size.Smashing eBook #4: Mobile Design for iPhone and iPad As you may have expected. in order to boost the readability of the content. the majority of websites showcased in the list made use of either black or white as the primary colors (in certain cases.

the results were limited to the front page). this one involved examining the colors used within non-heading level elements and determining which colors they used. Carrying on from the previous test targeted at headings.Smashing eBook #4: Mobile Design for iPhone and iPad Body Content Contrasts The ability to showcase color in our designs is central to how we subtly influence our visitors. As this has a big impact within accessibility and the general scope of design. a mixture of visible foreground and background variants were recorded (though as with the previous test. 275 .

276 .Smashing eBook #4: Mobile Design for iPhone and iPad Showcasing the number of colors used within the foreground or background of body content.

277 .Smashing eBook #4: Mobile Design for iPhone and iPad The percentage of websites using a black foreground on a white background in body content.

This set of results. black and white were shown to be dominant within the text in order to maintain a visible level of contrast.Smashing eBook #4: Mobile Design for iPhone and iPad Within the previous set of results for headings. the results clearly show that a sensible approach to text visibility has been maintained. as you might expect. follows the same trend and uses less additional colors in the palette. While the color contrasts were only built up from a sample of each website’s front page (and then contrasted against each other for the comparison). 278 .

Smashing eBook #4: Mobile Design for iPhone and iPad Authentication Required Many places require visitors to login before full access to a service is granted. The aim of this test was to see if this was the case. a bunch of information is provided without a user needing to be registered (explaining features or contact details). 279 . On most desktop websites. as if the mobile website were simply a bonus feature of the service (thereby only offering a login form). However. an interesting trend seemed to exist in which mobile users were expected to have an account and know what the service did.

280 .Smashing eBook #4: Mobile Design for iPhone and iPad The number of websites requiring the visitor to login before accessing pages.

Smashing eBook #4: Mobile Design for iPhone and iPad While it’s understandable that some websites do not require users to authenticate themselves–and this means that the number of recorded “forced logins” will be drastically reduced–the results of this test are quite shocking. a number of popular websites which were contained within the top 100 list proved positive for doing this. While it should be considered bad practice to require logins on a website without any description of the service being present (for mobileonly traffic). as they had no useful site information! 281 .

The test also aimed to uncover any naming conventions used to represent this link (if one exists).Smashing eBook #4: Mobile Design for iPhone and iPad Returning to a Full Website The next test depended entirely on the mobile website’s ability to follow common requirements and return the visitor back to a non-optimized website upon request. 282 . While a website’s mobile experience will be enough for some. it’s important to realize that some people may not adjust well to new a UI or may request functionality that only exists on the main website. and offering a fallback mechanism is worthwhile.

283 .Smashing eBook #4: Mobile Design for iPhone and iPad A graph of the various naming conventions used in links toward a full website link.

Smashing eBook #4: Mobile Design for iPhone and iPad The percentage of websites which do not have a link returning you to the full website. 284 .

What is quite surprising however is that many who force-redirected visitors to the mobile website. such as “full site” or even “desktop version. refused to link or to allow access the full website. This in turn limited the ability of mobile visitors to access some services. no common preference could be found even though usage was spread fairly evenly.Smashing eBook #4: Mobile Design for iPhone and iPad In the results. some websites offering mobile versions of their services used common words in their links to indicate returning to the main website. 285 .” In these cases.

four types of navigation conventions were checked as to whether they were being used on the home page (most sites used more than one): text links. image links.Smashing eBook #4: Mobile Design for iPhone and iPad Navigation Conventions This test was focused upon what could be considered one of the most important elements of a website. 286 . and a complex and potentially unusable website. and special menus (such as dropdowns or panels). icon-based navigation. A successful navigation scheme can be the difference between an easy-to-use interface. When carrying out this test.

287 . or image-based navigation styles. icon.Smashing eBook #4: Mobile Design for iPhone and iPad A distribution of websites making use of text.

and image-based navigation against conventional text.Smashing eBook #4: Mobile Design for iPhone and iPad The percentage of icon. 288 .

Smashing eBook #4: Mobile Design for iPhone and iPad The percentage of websites which employ the use of menus (or content on demand). 289 .

was quite a surprise. which. though some menus were formed of plain text.Smashing eBook #4: Mobile Design for iPhone and iPad The results of this test were fairly conclusive in that every single website (as you might imagine) had standard text anchor links. for devices that depend on icons representing apps or services. In addition. especially when used with content-on-demand scrolling mechanisms. 290 . Special menus also saw some popularity. image-based menu options were quite popular and were actually used more often than icon-based navigation.

291 . As such it seemed worthwhile to see how many options were provided in the form of links on a single page. If a website has too many links (or too few). therefore.Smashing eBook #4: Mobile Design for iPhone and iPad Home Page Link Ratio Having a relatively small amount of space can be a real problem in mobile devices. and. the potential for confusion as to navigation options and how many links are provided can potentially increase the difficulty for users to know the extent of where their choices will lead. the choice can quickly overwhelm a user’s sense of perspective.

Smashing eBook #4: Mobile Design for iPhone and iPad The number of websites using a small. or large number of links on the front page. 292 . medium.

Smashing eBook #4: Mobile Design for iPhone and iPad The percentage of websites using a large number of links as a result of a menu convention. 293 .

This seems to follow conventions in that a reduced viewing space should hold less information to avoid unnecessary scrolling and to reduce complexity.Smashing eBook #4: Mobile Design for iPhone and iPad When testing the websites. the results indicated that fewer links were visible on a mobile website than on the desktop variant (even when complex layouts were used). the results were categorized based on the number of links that existed in the front page of a website (these were labeled as small. For the websites being measured. medium. or large as per the link ratio). 294 .

Within this test. and large as a representation of the number of images on the page were used. as these devices often require more bandwidth than anything else and therefore can reduce the loading times. on average). Primarily focused upon the home page. similar to the link testing. the amount required to fall into each category was reduced as most websites will naturally hold more text links than images (per page. 295 .Smashing eBook #4: Mobile Design for iPhone and iPad Study Results 4 Golden Image Ratio Images on a mobile website can be a tricky affair. the trend of using small. medium.

296 .Smashing eBook #4: Mobile Design for iPhone and iPad The number of websites using a small. medium. or large number of images on the front page.

Smashing eBook #4: Mobile Design for iPhone and iPad The percentage of websites using a large number of images resulting from icon navigation. 297 .

Smashing eBook #4: Mobile Design for iPhone and iPad The percentage of websites using a large number of images resulting from image navigation. 298 .

on mobile websites the results backed up many assumptions that mobile websites will have not only fewer images on the page. This in turn helped reduce the file sizes in earlier tests (and the speed benchmark). but will have smaller images presented on the screen (to match the kind of experience available on small screens).Smashing eBook #4: Mobile Design for iPhone and iPad As you might imagine. 299 . What makes this result particularly interesting is that websites (such as Flickr) which oriented around images also followed this reductionist trend.

there is a need to keep link click regions as large as possible to ensure the usability and accessibility of such devices (to help with big. or large. With mobile devices and small screens supporting touch sensitivity. 300 . and focused upon the link click’s size compared to other elements on the page. The scale used followed small.Smashing eBook #4: Mobile Design for iPhone and iPad Link Click Region The purpose of this test was to go beyond the mere presence of links (and images with links) and to examine how large the click region actually was on the page. imprecise fingers). medium.

301 .Smashing eBook #4: Mobile Design for iPhone and iPad A graph with the average size of a website's link click region (small. or large). medium.

and large click regions. images. 302 .Smashing eBook #4: Mobile Design for iPhone and iPad The percentage of websites with a large number of links.

to medium-sized links that ensured navigating could be accomplished without an accident occurring. there was also an interesting trend in which Asian or Russian websites were more likely to have smaller click regions (fewer characters in words also reduced the click region further).Smashing eBook #4: Mobile Design for iPhone and iPad The results of this particular test were evenly spread. 303 . While this trend was especially present in more image-oriented websites (as linking often occurred in image thumbnails). showcasing a good number of websites using large.

As mobile websites require a lot more scrolling than desktop websites. which was worth examining further. It’s worth stating that all of the websites measured used a single column layout. 304 . the separation of blocks becomes more critical to visual identity.Smashing eBook #4: Mobile Design for iPhone and iPad Block Placement Ratios The next test looked at the visual layout of the page and examined how the design was broken down into either physical or visual blocks of information. but that the way in which links and segments of content are split may give the visual indication of separation.

Smashing eBook #4: Mobile Design for iPhone and iPad Distribution of horizontal elements (columns or table cells) within the viewport. 305 .

306 .Smashing eBook #4: Mobile Design for iPhone and iPad Distribution of vertical panel segments (headings or separated rules) per page.

both in column and panel distribution. 307 . mean. and lowest range of blocks.Smashing eBook #4: Mobile Design for iPhone and iPad The highest.

Most mobile websites’ readability was increased due to such content organization. 308 . while the majority of websites held no horizontal panes (including table cells. a number of websites defied convention and had anywhere between two and eight points of reference within a single line on the viewport. This visual separation was also backed up by how a number of websites had vertical breaks. navigation links.Smashing eBook #4: Mobile Design for iPhone and iPad Interestingly. which split the content into separate sections. and other side-by-side elements).

309 . The variables analyzed included the number of fingers required to initiate a scroll (as when content scrolls using an overflow. JavaScript. and whether the window supported the fancy flourishes of jQuery. or CSS3 in providing paneled scrolling – where panes of content would rotate at specific intervals or sections could be scrolled by request. two fingers rather than one are required).Smashing eBook #4: Mobile Design for iPhone and iPad Scrolling Experience The final test was included as a representation of how scrolling is experienced within the mobile website.

310 .Smashing eBook #4: Mobile Design for iPhone and iPad The percentage of mobile websites using paneled navigation over conventional scrolling.

311 .Smashing eBook #4: Mobile Design for iPhone and iPad Percentage of overflow-based scrolling in preference to a full page scrolling effect.

This may have been partly due to the nature of the websites being studied (portfolio or showcase websites are more likely to have paneled mechanisms). they also maintained a liquid layout to reduce the complexity of required scrolling. What is interesting. is that to increase the simplicity of the designs (as none of the sites used overflow text). 312 . however.Smashing eBook #4: Mobile Design for iPhone and iPad The results of this test show a general lack of paneling in general (which is representative of the lack of “flourish” scripting in most mobile websites).

That said. For example. 313 . but they still have comparative similarities. a study of the same variables upon websites which primarily act as a designer’s portfolio (as denoted in the results) will obviously account for different usage needs. it’s worth noting that different niches may produce varying levels of results. and the experience may therefore vary. Different websites will follow different trends. the trends which the websites employ do bear a resemblance to many others (and therefore can be deemed as reliable).Smashing eBook #4: Mobile Design for iPhone and iPad Going Beyond the Basics While the sample used did constitute a wide array of Web presences.

is the unfortunate issue that few of the websites’ code validated! 314 . which showcases the common factors. the trend of subdomains also followed a well-trodden pattern in order to be recognized easily by end users. In addition. While this could prove an issue for repeat conventions. Therefore. or made changes which would logically make sense under the usage scenario. in preference to giving visitors a choice (which is interesting. Within these was a mixture of varying website types. but the overwhelming majority of websites followed similar practices. the trends do seem to apply consistently. Common Factors at Play The common factors which were widely implemented included the trend of using scripts to redirect mobile-friendly users.Smashing eBook #4: Mobile Design for iPhone and iPad To ensure that the results were not simply a result of the top 100 websites’ own popularity bias. A final example. or international versions of a website which has already been mentioned. it’s worth stating that a couple of the websites within the top 100 listings were either subdomains. an extra 10 websites were selected (their results weren’t logged as it was an exercise of conformance) in order to see the accuracy of the top 100 findings. the results varied enough to qualify their inclusion. Note: In addition to the above. as it constitutes a double-edged sword in terms of usability).

315 . and increases in the amount of required authentication if the study were applied primarily to social networks.Smashing eBook #4: Mobile Design for iPhone and iPad Some websites actually generated their mobile layouts using automated tools like Mobify. an increase in file sizes will be an obvious side effect. a reduced number of mobile apps on small business websites. Models for Other Genres Expanding this study across a different cohort of website types may have varying differences as to how trends are implemented. In addition. Examples include the increased use of CSS3 and “flourishes” in portfolio websites. if a website is more content-focused (like Smashing Magazine).

Additional studies could be undertaken on particular niches. a greater level of compatibility could be established if an increased number of devices were used (excluding emulators). like newspaper websites. including an Apple iPhone 4. a larger range of websites may boost the general accuracy of the results (such as if all 1. In addition.Smashing eBook #4: Mobile Design for iPhone and iPad Potential Improvements Taking this study forward. a phone using WinMo. improvements could be made.000 websites were tested). While the websites were tested using a range of real mobile devices. 316 . a Blackberry device. a Nokia device. and a couple of phones using Android.

as more usability studies and additional research are carried out to determine how user needs are being catered for. it will be an interesting next few years as more designers account for the booming mobile audience. mobile design is literally only a few years old. While the Web may still be in its infancy. but to seek them out. This means that trends will likely evolve ever more rapidly. the advancement of standards such as HTML5 and CSS3. the way we design is being affected by frameworks like jQuery. While this study showcases that rudimentary trends exist for mobile designs (such as single column layouts). 317 .Smashing eBook #4: Mobile Design for iPhone and iPad The Future of Mobile Design As interesting as these results are. and the way applications are gradually being pulled toward the cloud. and we need to pay it plenty of attention. hopefully they will inspire you not just to follow design trends. The future of mobile Web design is an up and coming industry. As an increasing number of handheld devices appear (with different renderers and viewport sizes).

who has been working in the field of Web and Mobile Interaction design and user experience for over 7 years. Cameron Chapman Cameron Chapman is a professional Web and graphic designer with over 6 years of experience. She specializes in usable interfaces. She’s also the author of Internet Famous: A Practical Guide to Becoming an Online Celebrity Jen Gordon Jen Gordon is the owner of Atlanta-based iPhone app design studio Clever Twist. Her studio created the iPad application iBrite. He runs a nimble interaction design studio that specializes in mobile interaction design and strategy. Alexander Komarov Alexander Komarov is a Russian designer (currently residing in Philadelphia). including her own. 318 . beautiful design and straight talk. accessibility and UX design. he spends time in Twitter.Smashing eBook #4: Mobile Design for iPhone and iPad The Authors Alexander Dawson Alexander is a freelance web designer. As well as running a business (HiTechy) and writing. SitePoint's forums and other places. She writes for a number of blogs. author and recreational software developer specializing in web standards. He helps his clients break through the wall that separates them from their customers and stand out in the competitive world of modern technology. helping those in need.

designing for print. 319 . author of two popular Web design books. tinkerer. DJ. Marc has been using Photoshop and Illustrator for over 12 years. Web. He is currently Senior Director of Product Ideation & Design at Yahoo! Inc. Marc Edwards Marc Edwards is the Director and Lead Designer at Bjango. desktop applications and the iPhone. Michael Flarup Michael Flarup is a Copenhagen based interface designer & iconist.Smashing eBook #4: Mobile Design for iPhone and iPad Jon Raasch Jon Raasch is a front-end web developer/UI designer with endless love for jQuery. CSS3 and performance tuning. Kim Pimmel UX Designer at Adobe. and a top-rated speaker at conferences and companies around the world. When he’s not freelancing and blogging out of he’s creating iPhone apps with his young startup company Robocat. Luke Wroblewski Luke Wroblewski is an internationally recognized Web thought leader who has designed or contributed to software used by more than 600 million people. an iPhone app developer. photographer.

which regularly provides articles and resources for web designers. Perch.Smashing eBook #4: Mobile Design for iPhone and iPad Nick Francis Nick Francis builds websites with an outstanding team at Project83 in Nashville. Tennessee. Tricks and Hacks (3rd edition).com. She is the author of a number of web design and development books including CSS Anthology: 101 Essential Tips. 320 . He actively maintains a few blogs of his own. He also co-founded Brightwurks that created web apps Feed My Inbox and Linkpatch. Rachel Andrew Rachel Andrew is a front and back-end web developer and Director of edgeofmyseat. Steven Snell Steven Snell has been designing websites for several years. along with mobile website gallery Mobile Awesomeness. a UK web development consultancy and the creators of the small content management system. Rachel tries to encourage a common sense application of best practice and standards adoption in her own work and when writing about the including DesignM. published by SitePoint and also writes on her own blog.

including communicating with clients. Buy this eBook now for just $9. being self-employed entails a number of tasks that you most likely haven’t had to deal with so far.90 Smashing eBook #2: Successful Freelancing for Web Designers Being a great web designer or developer is one thing – running a successful freelance business another. rules for professional networking and tips on designing user interfaces for business web applications. Whether you already have work experience in companies or have just graduated from design school.90 321 . Buy this eBook now for just $9. creating a road map to a successful portfolio.Smashing eBook #4: Mobile Design for iPhone and iPad Smashing eBook Series Smashing eBook #1: Professional Web Design This book presents guidelines for professional web development.

Smashing eBook #4: Mobile Design for iPhone and iPad Smashing eBook #3: Mastering Photoshop for Web Design Mastering Photoshop is written for advanced and intermediate designers who want to brush up on their workflow and improve their Photoshop skills. Buy this eBook now for just $ 19.90 322 . explaining fundamental techniques that web designers need to know to produce high-quality work in Photoshop. The eBook contains 178 pages.

Sign up to vote on this title
UsefulNot useful