Professional Documents
Culture Documents
Mobile Design For Iphone and Ipad (Smashing Ebook Series)
Mobile Design For Iphone and Ipad (Smashing Ebook Series)
Mobile Design For Iphone and Ipad (Smashing Ebook Series)
ISBN: 978-3-943075-01-4
This eBook 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 eBook
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.
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.
1. Simple options
One of the most intriguing things about mobile websites is the scaled-down
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.
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.
3. Lack of images
When the .mobi top-level domain (TLD) first became available, a lot of buzz
surrounded the news. While some websites use .mobi for mobile versions of
their websites, it is currently more common to see companies use a sub-
domain or a separate folder on their primary domain. There are multiple
issues a company must consider when making this decision, but one of the
5. Prioritized content
Because of the simplicity of these pages and the general lack of many
options, the content displayed is highly prioritized. One thing you may find
surprising when viewing mobile websites is how much of the content is
prioritized for the visitor. Of course, all websites should be user-focused,
but, because most websites are run commercially for business purposes,
there are often elements that aren’t necessarily important to visitors, such as
banner ads. While advertisements have largely become an accepted part of
the Internet, most mobile websites are ad-free. The content available on a
mobile website is typically of the highest priority to the average mobile
visitor, not the company, although in the end the company benefits by
having a more usable website.
Although Web designers are used to dealing with varying screen sizes and
the resulting issues, mobile design presents this challenge in a bit of a
different way than dealing with different-sized desktop monitors. Most
designers are comfortable with the challenges that arise from various
screen resolutions on desktop monitors, but, if you haven’t worked with
mobile design before, it can be something yet more complicated that you
need to overcome.
While we’re on the topic of mobile screen sizes, there are two excellent
articles from April of 2008 at Sender 11: Mobile Screen Size Trends and
More on Mobile Screen Size Trends. The results of the study behind these
articles show that 240 x 320 (a.k.a. QVGA) should be the standard for
mobile development. Many newer mobiles and smart phones have larger
screens, but smaller ones are largely a thing of the past.
The graph below shows the findings of the report, which is close to a year
old at this point. With the rise in popularity of the iPhone and its competitors,
the most recent numbers most likely favor larger screens even more.
2. 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, it’s
most likely not something you feel comfortable doing without some
research. Because mobile browsers behave somewhat differently than
desktop browsers and, because the environment of its users is not the
same, the designer needs to gain some understanding and familiarity.
Through the information and resources presented in this article, you can
easily get started with a general understanding of the mobile Web, if you
don’t already have experience.
4. Testing challenges
One of the most significant challenges in designing for mobiles is the wide
variety of phones in use. While designing for desktops brings its own testing
challenges with its various browsers and screen resolutions, there are more
dependable ways of testing these items at the moment. On the mobile Web,
however, many of your visitors will likely be accessing your website in an
environment that you were not specifically able to test.
There are, of course, some things you can do so that a mobile website is
tested as well as possible. To start with, the simplicity of mobile websites in
a way makes the testing process easier because there is less that can go
wrong. With a careful design and some well-planned testing, it’s possible to
be fairly certain that a website will be displayed properly and, more
importantly, usable on the vast majority of mobile devices.
There are a number of helpful resources for testing, we’d like to point out
here. First, the Web Developer Toolbar has some very useful features for
testing a website for mobile users. Because CSS and images may not be
enabled when a mobile visitor is on your website, you can use the toolbar to
disable both and see how the website will appear. While this does not
exactly replicate the experience of visiting the website in a mobile browser,
it can help identify potential problems in the way content and navigation is
displayed.
Additionally, you can use the Opera WebDev Toolbar to view an unstyled
page by clicking on “Display.” By viewing the page in the small screen with
CSS turned off, you can get an idea of how mobile visitors may experience
the website. The screenshot below shows the Smashing Magazine front
page unstyled in the small window.
If websites are to contain only what is most essential, the website owner or
designer will have to determine accurately what content is most important.
This may seem pretty simple, but taking a website that’s loaded with
content, images and maybe even video, and weeding it down to just the
essentials can be quite a challenge. Another aspect to this issue that must
be considered is the status of the average mobile visitor. 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.
3. 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 are extremely important for
usability purposes. Of course, alt tags should be used anyway, but it’s even
more critical for mobile visitors.
5. Use of headings
With inconsistent and often limited styling of text on mobile browsers,
headings become more significant. Mobile browsers are less likely to style
text exactly how you would like it to be, but h1, h2, h3 and other such tags
generally help make certain text stand out and build the structure of the
page from a visitor’s perspective.
For most websites, we can ignore WML and make use of the markup
language with which we’re probably much more familiar: XHTML.
We must cater not only to different screen sizes and resolutions, but to
different shapes. From short and long rectangles to tall and skinny ones to
perfect squares, the mobile world contains a rich tapestry of variation that
almost makes you want to pull your hair out!
Traditional website customers are most likely sitting at a desk facing a large
monitor that has a decent resolution. Visitors who are browsing your mobile
website are unlikely to be in the same circumstances. They may be waiting
in line, riding on the train or bus, running to the departure gate or lost in an
unfamiliar town late at night and trying to get somewhere.
While the concept of having only one website, and simply styling it
differently depending on the medium the visitor is using, is popular with
many standardistas, a separate mobile website is required to deliver an
optimized experience for mobile users.
When deciding on a domain name for a mobile website, the colleagues and
companies I’ve worked with have always used a sub-domain. Creating a
sub-domain is the easiest of the options to set up (you already own the
domain), it’s the cheapest option (there’s no need to register the .mobi), and
it means you avoid having to spend hours tweaking the server (and
potentially messing up normal traffic).
Mobile browsers are much less forgiving than desktop browsers. A browser
running on a mobile device generally doesn’t have the luxury of a 2 GHz
processor and 200 GB of disk space. Therefore, you must check, validate
and recheck your markup, time and time again.
Testing your website with a Web browser on a desktop computer can get
you only so far in terms of simulating the mobile experience. There are
many elements of mobile device usage that can’t be replicated accurately in
this way.
Brian’s article is an excellent starting point for those who are new to
designing for mobile devices, 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.
In Year 2009, more than 63 million people in the United States accessed
the Internet from a mobile device. It’s forecasted that by 2013 there will be
more than 1.7 billion mobile Internet users worldwide. With those kinds of
numbers, it’s imperative that web designers and developers learn optimal
development and design practices for mobile devices.
For the most part, you won’t need to learn any new technologies for mobile
site design, but you will need to look at site design in a new way, one that is
decidedly more restrictive than design for standard browsers. To work
around the issues that mobile site design presents, and to get a result that is
as user-friendly and useful as your standard site, some creative problem-
solving skills are required.
The most common operating systems in use are Windows Mobile, the
iPhone platform, Palm OS, Mobile Linux, Symbian OS, the BlackBerry
platform, and Android (which is poised to get a lot bigger thanks to a recent
http://gs.statcounter.com/#mobile_os-ww-monthly-200812-201010
http://gs.statcounter.com/#mobile_browser-ww-monthly-200901-200910
Finally, 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.
Examples
Examples
Examples
Examples
Over the past few years, mobile web usage has increased to a point that
web developers and designers can no longer afford to ignore.
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.
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
spoofed their UA string to get around this type of detection. For instance,
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.
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.
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.
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:
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);
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.
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.
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.
If your site uses images for buttons or navigation, consider replacing these
with plain-text / CSS counterparts. Finally if you’d like to force the browser to
use the alternate text for any of your images, use this snippet (and use
JavaScript to add the as-text class for img and make sure that alt-attributes
are properly defined in your markup):
Other Changes
Besides addressing screen size and bandwidth concerns, there are a few
additional changes that should be made in any mobile stylesheet.
First improve readability by increasing the font size of any small or medium-
sized text. Conversely, heading text often appears too heavy on mobile
devices, so consider removing the extra font weight:
h1, h2 {
font-weight: normal;
}
Beyond Stylesheets
In addition to mobile stylesheets, we can add a number of special mobile
features through mark-up.
First, most handheld devices include a phone, so let’s make our phone
numbers clickable:
Now mobile users can click this number to call it, however there are a few
things to note. First, the number in the actual link starts with a 1 which is
important since the web is international (1 is the US country code).
Second, this link is clickable whether or not the user has a mobile device.
Since we’re not using the server-side method described above, 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.
See a complete list of HTML5 input types. You can find some information
about browser support of HTML5 input attributes in the post HTML5 Input
Attributes & Browser Support by Estelle Weyl.
When modern mobile devices render a webpage, they scale the page
content to fit inside their viewport, or visible area. Although the default
viewport dimensions work well for most layouts, it is sometimes useful to
alter the viewport. This can be accomplished using a <meta> tag that was
introduced by Apple and has since been picked up by other device
manufacturers. In the document’s <head> include this snippet:
In this example we’ve set the viewport to 320, which means that 320 pixels
of the page will be visible across the width of the device.
The viewport meta tag can also be used to disable the ability to resize the
page:
Here portrait.css styles will be added for vertical devices and the
landscape.css will be added for horizontal.
However orientation media queries have not been adopted by all devices,
so this is best accomplished with the max-width media query. Simply apply
different max-width queries for the different orientation widths you want to
target. This is a much more robust approach, since presumably the reason
to target different orientations is to style for different widths.
No Flash
Regardless of Apple’s reasons, the reality is that iPhones do not play Flash
unless they are jailbroken. Fortunately, there are now usable alternatives to
Flash, so iPhone’s issues with this technology are easy to get around for
most websites.
Finally certain applications are simply too hard to recreate with HTML5 and
Javascript. For these, iPhone users will have to be left out; however, make
sure to include appropriate alternate content.
Other Shortcomings
Besides Flash, there are a few additional caveats to supporting iPhones and
iPads.
First, iPhone does not support <input type="file" />, since it does not have an
accessible internal file structure. 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.
Next, iPhone only caches assets that are 25 kb or less, so try to keep any
reused files under this restriction. This can be a bit counter-intuitive, as it
often means breaking out large image sprites and concatenated Javascripts
into smaller chunks. However be careful to only serve these assets to
iPhone, or it will cause extra HTTP requests in all other browsers.
After obtaining the necessary files, tie them all together with the appropriate
CSS:
@font-face {
font-family: 'Comfortaa Regular';
First, there are a variety of Javascript libraries that can be used to access
some of the more advanced functionality available in iPhone. Take a look at
Sencha Touch, jQTouch and iui. These three libraries allow you to better
interface with the iPhone, and also work on similar devices such as Android.
Additionally, keep an eye on the much anticipated jQuery Mobile, which has
just been released in alpha.
Next, the App Store isn’t the only way to get an icon on your users’ iPhones
– you can simply have them bookmark your page. Unfortunately, the default
bookmark icon is a condensed screen shot of the page, which doesn’t
usually look very good, so let’s create a special iPhone icon.
Don’t worry about rounded corners or a glossy effect, iPhone will add those
by default.
In fact, the only thing in web development that remains constant is the
perpetual need to continue learning.
Thankfully, Safari on iPhone OS is a really great browser. Just like Safari for
the desktop, it has great CSS3 and HTML5 support. It also has some slick
interface elements right out of the box, which sometimes vary between the
iPhone and iPad. Lastly, because the iPhone OS has been around for quite
some time now, a lot of resources are available.
I know that most discussion about the iPhone OS platform centers on native
applications. But you can still create powerful, native-looking applications
using HTML, JavaScript and CSS. This article focuses on three phases of
building and optimizing your website: design, coding and testing.
Before we get into the three phases, let’s look at some of the advantages
and disadvantages of building a Web app rather than a native app.
2. Optimizing your Web app for other popular platforms, like Android and
Blackberry, with the same code is much easier.
4. If you’re charging users, you don’t have to share revenue with Apple.
5. You get 100% control over the means of payment, promotion and
distribution to users… which could also be a negative, depending on
how you look at it.
3. No access to some of the features that are native to the iPhone OS,
such as push notification and GUI controls.
Design
Designing a Web app for this platform is much like designing a native app,
so you’ll have access to some really great tools. Whether your wireframing
tool of choice is pencil and paper or desktop software, you’re covered.
Inspiration
Not many people know that Apple has a “Web apps” section on its website,
which is dedicated to showcasing optimized websites.
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. To successfully optimize a Web app for the iPhone OS, you
have to cut things out. I suggest keeping the design minimal by wireframing
with a sharpie and one of the tools listed below.
Once you know exactly how things will lay out in your design, we can move
to the desktop and get specific. I really like wireframing with OmniGraffle,
but sometimes diving straight into Photoshop makes sense. Either way,
these tools are a huge help in making it happen.
Education
Apple actually does a really good job of documenting Safari for the iPhone
OS. The only shortcomings in my opinion are a lack of help with browser
detection and window orientation. Read each of the articles below for
everything you need to know about coding for this browser.
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.
My only complaint when building my first website with jQTouch was a lack of
documentation and tutorials. I had to figure it out by playing with the demo
website’s code.
Testing
A crucial and somewhat tricky part of building a website or Web app for the
iPhone OS is testing. It’s a little more complicated than testing in a web
browser, but familiarizing yourself with a couple of tools should make the
process simple.
Liveview
Liveview is a really clever testing tool for when your app is in the design or
initial coding phase. It allows you to broadcast an image from your desktop
onto your phone so that you can see what it looks like. This is useful for
getting text size and the visual specifics just right, because sometimes
visualizing from Photoshop is hard.
Feeling Overwhelmed?
If you are, then some good hosted services will make it easier to optimize
your website for multiple platforms without having to start from scratch.
There are various levels of flexibility available, but all the services use a
WYSIWYG-like editor to help you create mobile websites on the fly.
Depending on your Web app and client, one of the following may be a good
fit:
Conclusion
It’s a great day to be a Web developer, because non-desktop platforms like
the iPhone OS open up greater possibilities for us to express our creativity
and entrepreneurial savvy, while allowing us to adhere to modern Web
standards. 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. It’s
up to you to make the most of them!
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. The iPhone has created
unprecedented excitement and innovation from people both inside and
outside the software development community. Still for those outside the
development world, the process is a bit of a mystery.
This how-to guide is supposed to walk you through the steps to make your
idea for an iPhone app a reality. This article presents various ideas,
techniques, tips, and resources that may come in handy if you are planning
on creating your first iPhone application.
Does your app solve a unique problem? Before the light bulb was invented,
somebody had to shout out, “Man, reading by candlelight sucks!” Figure out
what sucks and how your app can make the life of its user more
comfortable.
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
Does it make people laugh? This is a no-brainer. If you can come up with
something funny, you are definitely on the right track and your idea may be
the golden one. Heck, I hit a red “do not press” button for 5 minutes
yesterday.
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,
give sommeliers a way to talk to their fans!
Will the app be highly interactive? Let’s face it, 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, it’s just about
time to prepare the necessary tools.
Tools Checklist
Below is a list of items you’ll need (* Starred items are required; the rest are
nice-to-have’s):
Skills checklist
Action: Select skills that are a good fit for you to lead. For those roles where
you cannot lead, hire professionals.
Action: Download the Top 10 apps in every category and play with all of
them. Review the Apple Guidelines for UI design and list at least 5 features
you’d like to incorporate into your app.
If it’s a game, maybe they want to beat their high score. 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?
Action: Line item out the different types of people who will use your app.
You can even name them if you want to make the scenarios you draw out as
real as possible.
Ask yourself:
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.
Action: Create at least one thumbnail page of your application per screen.
Experiment with various navigational schemes, the text you put on buttons,
and how screens connect. If you want to transfer your sketches into digital
format, iPlotz is a good tool to check out.
If you are not a designer, hire one! It’s like hiring an electrician to do
electrical work. You can go to Home Depot and buy tools to try it yourself,
but who wants to risk getting zapped? If you’ve followed steps 1–3, you’ll
have everything you need for a designer to get started.
When looking for a designer, try to find someone who has experience
designing for mobile devices. They may have some good feedback and
suggested improvements for your sketches. A few places to look for
designers: Coroflot, Crowdspring, eLance. When posting your job offer, be
very specific about your requirements, and also be ready to review a lot of
portfolios.
Action: If you are a designer, get started in Photoshop. If you are not a
designer, start interviewing designers for your job.
9. Programming
Even though this how-to is sequential, it’s a good idea to get a developer on
board at the same time when you line up design resources. Talking with a
developer sooner than later will help you scope out a project that is
technically feasible and within your budget.
Action: If you are a developer, map out a development timeline and get
started. If you are not a developer, start interviewing devs for your job.
• Incorporating social media. If your users make the high score on his or
her favorite game, it is a good idea to make it easy for the user to post it
to Facebook or Twitter. Think about how your app can incorporate
social media and build that functionality into your app. At a minimum,
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.
• Pre-launch promotion. Start building buzz about your app before it has
launched. 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.
• Plan for multiple releases. Don’t pack your app with every single
feature you want to offer in the very first release. 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. Then periodically drop new
versions of the app to boost app store sales.
Action: Make a list of 20 promotional strategies that target the audience for
your app. Take action on them yourself or hire someone who can!
For the past two years, the elegant iPhone has housed some of the most
poorly designed applications you could imagine. The hype surrounding
iPhone has prompted many designers across the globe to try their skills with
the new mobile medium. The result are literally thousands of various iPhone-
applications that are often hardly usable and counter-intuitive. However,
some designers invest a lot of time and efforts into creating usable and
original user interfaces (yes, there are usable and creative UIs).
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. 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.
In the new Facebook 3.0, you’ll find a grid layout that users can swipe left
and right to access more categories. Because it mirrors Apple’s native UI,
users do not have to “learn” how to use it all over again. A similar approach
exists in Web design: users expect to see a logo in the top left, navigation
along the top, etc. Facebook has taken this concept mobile, using large
buttons that are easily distinguishable and tap-able
Where has a similar concept, allowing users to swipe left and right to access
more data.
Little Snapper mimics the wheel that you turn on a typical digital SLR.
Essentially, users are asking for a snapshot of what’s next, and then decide
if they want more information. One way to do this is with big pretty buttons.
Large and in charge, elegantly-designed, big buttons give the user a lot of
information through their color, icons and typography.
Check out how Delivery Status uses appropriate colors on its big buttons to
identify each brand. And it uses typography well to establish a hierarchy of
information.
Be Happy Now’s big buttons convey the “be happy” mantra through a
mellow color scheme and light, calm and clear typeface.
The Next Read application allows friends to share books. Here all books
about a particular topic are presented, including the title, cover image,
review rating and number of people who have recommended it. Notice the
padding and a lot of white space for each navigation option; this makes the
areas easily clickable and easier to navigate.
Barnes & Noble has a layered interface that allows you to quickly slide
through new releases at the top or dive into more categories below.
USA Today takes a slightly different approach to layering the interface in its
“Pictures” section: it uses sliding panels to display blocks of information.
While the interface may look cluttered at the first glance, one can easily get
around it. The interesting part is that within each panel you can slide
thumbnails left and right to view more images.
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.
Top Floor uses simple and easily recognizable icons to quickly guide users
to their category of choice.
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.
This interface could have easily followed the traditional list-view route.
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.
Mover exemplifies how to use gestures for sharing contacts, photos and
bookmarks. Open two devices, and flick the shared files from one handset
to the other.
This application teaches while it entertains. Being able to trace a letter with
your finger is another example of how the iPhone responds to touch and
movement.
This applications allows you to mix in various elements to create your next
meal using gestures.
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.
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:
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.
There are two main problems with this part of the app.
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 summary chart doesn’t offer too much to the viewer. Here are the main
problems:
• It’s not clear what the different colors mean, and there is no legend to
help.
• The scale is not flexible. You can view the information only by week,
which does not allow users to easily see their big-picture eating habits.
(Tip: consider incorporating the pinch gesture to allow users to scale in
and out.)
When I purchased and downloaded your app, I didn’t quite understand why
it was taking so long to download… until I realized that it had already
downloaded. I was fooled by the app icon, which makes it look like it is still
downloading:
2. Budget Planner
“Alex, please take a look at my app Budget Planner. I have tried
everything, and it keeps going up and down. The major issues that
people complain about are intuitiveness and slowness. People don’t
understand what the software does. But people who do learn it love it.
— Alex Sabonge”
The basic idea of this app is very good, and the App Store description
shows off its functionality well:”Budget Planner tracks your bills, budget,
calendar and transactions by displaying your balance in a calendar view,
letting you know how much money you will actually have on any particular
day. Like a balance forecaster.”
1. Users input their monthly salary info and plug in their fixed monthly
expenses (utilities, phone, car payment, etc).
Let’s look at the main sources of the problem. For now, we’ll set aside lesser
(though important) usability factors, such as not following the iPhone UI
guidelines and using the standard controls improperly. Let’s start at the
beginning. Humans invented money to buy things, right? Your core
audience’s main goal is to know what they can afford and when they can
afford it, whether it’s a new pair of shoes, a new car or a solid retirement
plan.
People don’t prepare a budget just for fun. They make the effort because
they hope it will help them make better purchasing decisions (read: buy
more stuff that they like), without their rent check bouncing. Your app is
getting there. But several key factors are getting in the way of a great user
experience. Let’s take a closer look at the app’s “landing screen,” the
calendar, the main element that differentiates this app from other budget
apps.
First of all, I think the calendar is a great idea. It’s much better than the
categorized lists that many other apps have. The calendar is all about how
much money you have or will have in future. A list only shows how much
you’ve spent. Knowing that your money is gone doesn’t really help achieve
a financial goal (purchasing a shiny new laptop, for example).
People love apps that help them achieve their goals. What if your app
allowed users to input and compare different financial scenarios, shown
through several overlaid graphs?
• If I put my child through this private school, 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. If your
app can help them get the answers, I think it’ll really catch on, and you’ll
soon be driving a shiny new Beemer yourself.
3. Units United
“Unit conversion app, Units United. Yep, yet another one… ;) Can you
please review it?
— Meils Dühnforth”
Consider the following scenario: you’re from the US, and you are recounting
yesterday’s baseball game to your Icelandic friend. During their last at bat,
the Phillies hit a 456-foot home run. Amazing! You punch the value into your
unit converter app, but to get an answer you must translate the query into a
format that the application understands:
1. Go to “Categories,”
5. Double-check that you are converting 456 feet into meters and not
vice versa.
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. You had to select
options from a list to be understood. Good software speaks your language.
Among the innumerable unit converters, only Google does it right, allowing
you to ask your question in plain English:
Free applications usage over time: Percentage of users returning versus number
of days since first used. On second day, 20% returning users; on the 30th day,
only 3%. By Pinch Media.
Let’s start with the first one in this article and proceed with the next ones in
the follow-ups to this article.
Why make things look, feel and work complicated, and why do designers
like to re-invent the wheel? The answer is simple: they want the application
to be different, look different and stand out from the crowd. Unfortunately, a
different look isn’t necessarily helpful for application’s usability and
functionality.
What do you think is wrong with the design in this first screenshot? Some of
you may say, “Well, nothing is really wrong with it. It’s beautiful.” I agree, it’s
pretty slick. But, there’s a catch: while beautiful, it is also inconsistent with
other apps. It’s different. Let’s compare this screen to the settings screens of
other iPhone applications:
2. It’s a waste of time and money. The resources you have spent to make
your app look different, but not necessarily better, could have been
used much more effectively.
The more familiar the parts of your app are, the more intuitive the app will
be for whoever uses it. If we recognize the parts, we will be able to learn
how to use the whole faster. It’s like reading: knowing the alphabet and
meanings of words allows us to “decode” books we haven’t seen before.
Here’s an example from the real world. Try to make the stop sign more
“beautiful” and people will inevitably start dying:
“The impression that the phrase ‘this interface feature is intuitive’ leaves
is that the interface works the way the user does, that normal human
‘intuition’ suffices to use it, that neither training nor rational thought is
necessary, and that it will feel ‘natural.’”
However,
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.
Here’s one example:
The Yellow Pages app uses tabs, which work well on the Web, but standard
toggle controls are more familiar to iPhone users.
In the original control, color, shape and text survived color inversion.
However in re-designed one, 2/3 of original meaning is lost. Now there is
only text.
Design is all about solving problems. Sometimes, when people don’t know
exactly what problem they are solving, they wander in the design process,
and the result is over-designed. To avoid that, you must have a clear picture
of the problem you need to solve.
One of the best ways to get that picture is to talk to your users (both current
and potential). Only when you know your customers’ needs will you be able
to build an application they’ll love.
Don’t overdesign. Be sure your house has a solid foundation before you
decorate it. You will be rewarded with more loyal customers and higher
download rates surprisingly quickly.
The iPhone will always be part of a much bigger picture. How well you
address human and environmental factors will greatly determine the
success of your product. All too often, iPhone developers create products in
isolation from their customers. In order to create really appealing
applications, developers must stop focusing only on the mechanisms of the
apps. Zoom out. Understand the person using the application, as well as the
complex environmental factors surrounding that person.
This is how many developers view their apps. As a developer, you have a
vision of what your product should look like and why customers will turn
their attention to it. However, if you observe your product so closely, you
may put it in the wrong context and design it for the wrong purposes and for
the wrong users. This is why you need to zoom out.
That person has specific goals and challenges. In the section below we’ll
start by exploring some of the most prominent – and most ignored – human
factors pertaining to the iPhone. We’ll discuss basic physical ergonomics,
visual limitations and common design mistakes.
Step back and you’ll see that the app is a part of a complex social
environment. It plays but a relatively small role in communication between
people and helping people accomplish bigger goals. This is where the
social components comes into play: networking, community, social-driven
websites and applications and many other things create the environment –
or the context – in which the application will be used.
Your ability to address the unique needs of different cultures will affect the
success of your product. Ignoring them is too expensive, especially if your
app sells worldwide. Here it is important to understand that the environment
is a part of global networking. You need to be aware of cultural differences,
traditions and metaphors in order to create an application that will not only
gain popularity in certain local circles, but will also have a global success.
Answering these questions will broaden your perspective and prepare you
to address your customer’s needs. A whole Human Factors profession is
dedicated to just that.
3. Reduce the number of options on each screen, and make the selection
process sequential (e.g. Arm Muscles → Biceps).
1. Choose only the elements that are absolutely necessary. Make them
bigger, and get rid of everything else. If needed, create additional
screens with fewer options.
2. Remember that pixel dimensions on the iPhone are smaller than those
on your computer screen. So, screenshots viewed on your computer’s
iPhone emulator look larger than they would on the iPhone itself, even
though the resolution is the same.
The author holds an iPhone (163 ppi) in front of Apple Cinema’s 30-inch
display (~100 ppi). Your iPhone screen layout may look fine on a computer
emulator, but don’t be fooled: it will appear much smaller on the iPhone
because of its smaller pixel dimensions.
Your app will usually play a relatively small role in helping the user achieve a
bigger goal. The better you understand what goals people have and what
they need to achieve them, the better you can design your app to satisfy
those needs. Mobile phones are often used in loud, distracting
environments. A simple stroll through town brings plenty of noisy
distractions (cars, dogs, mail carriers, etc.). Consider the following examples.
Which voice memo app would do a better job?
So, why and, more importantly, when would people use voice memos?
When they are not able to type. The most common time is probably while
driving.
Confirming for the user that the recorder is activated is important, too. Which
interface communicates the device’s status more clearly? Where do you tap
when you’re done?
Based on which design works better overall, iTalk wins. Apple Voice Memo
looks great when you’re checking it out on a friend’s phone but performs
poorly in a real-world context.
The mobile phone is, without a doubt, a social tool. The greater the number
of people involved, the more engaging the experience is. Think about it: if
you were the only one with a phone, it wouldn’t be very useful. YouTube,
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.
With the seemingly endless ways to capture and share information, many
people feel overwhelmed with information. To help them cope, designers
must exploit the iPhone’s platform to make their applications as efficient as
possible. Here are some inspiring examples:
“Ever wished you could send something to the iPhone right next to you? Do
it with style with Mover.”
“In Sweden, the Automatic Teller Machines have very large buttons. I
hadn’t noticed this particular design element on previous visits, which
have usually been in warmer months. 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.”
Such insights are gained only by understanding the product in its real-world
context. Here is the graphic designer’s point of view:
Apple studied American users and addressed their goals. That’s why the
iPhone is so popular in US. But it hasn’t succeeded in Japan. The handset is
selling so poorly there that they are giving them away for free.
It takes a lot of leg work, but your efforts to understand user needs will be
rewarded. The forefront of mobile technology is an exciting place to be.
Ideally, your target audience includes you, 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. Surprises
await when you consider the variety of people who might use your product.
Your target audience may be different than what you think; or, in defining
your target audience, you may find that your product is missing important
features.
Tip: Define your target audience. Who are they? Where do they live, work
and play? What challenges do they face? Give one of them a name, a job, a
family, a car; then see how your perspective changes.
Defining a target audience is only half of the equation. 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. Try this, and I
guarantee it will lead you down some expected and unexpected paths.
You don’t need fancy software to do this. Below is an example of our use
case sketches for our application. After writing out a few use cases, we
learned that people lose interest in drawing games when they’re forced to
create original artwork. Many people will say, “I can’t draw,” but they still
have a desire to create beautiful things. Originally, we planned for our app
to ship with patterns, similar to the classic Lite-Brite toy, 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. Pretty important feedback!
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?
• It has robust utilities and multimedia capabilities = “I can work and enjoy
books, movies and games.”
• Its screen is larger than the iPhone’s = “I can consume more media with
less eye strain. My kids will be entertained on a road trip.”
Contextual menus
Contextual menus are a great way to keep your UI out of the way. We
wanted to keep sharing and community features out of the primary
navigation. We used a contextual menu (“Share this thang!”) to present
actionable items at the appropriate time.
With the increased real estate on the iPad, one can build in robust
functionality that is impossible on an iPhone or iPod Touch screen. Modal
views give you another way to organize your application; they give the user
clear “modes” of operation; and they can be an elegant solution to UI clutter
if executed wisely.
For example, “photos” on the iPad could operate similar to iPhoto on the
desktop Mac. You have two “modes” of operation:
In each scenario, packing the viewing, editing and managing functions into
one view wouldn’t make sense. Think of how you could segment features in
your app, while maintaining a smooth connection between the two modes.
iPhoto has two modes of operation: viewing and editing a photo or managing
photos.
Below is a color palette we tested for our app. The palette looks great in
landscape mode but absolutely hogs the screen in portrait mode. Oops.
• See both a list view and details of items in that list view (e.g. Mail).
• Edit elements in place rather than from a global menu bar.
Spread your fingers over a stack of photos to spread them out for viewing, as
you might in the real world.
Tip: Think of how you interact with things in the real world. Think of the on-
screen elements as tangible things.
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,
products such as Appcelerator’s Titanium offer a good way to build native
iPad, iPhone and Android apps in JavaScript.
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.’ Native Apple apps are a hot commodity, and, in today’s mobile
application ecosystem, mobile web apps are not sexy – in fact many people
don’t even realize they are even an option. In certain cases, an iPhone/iPad
app will be the right solution for their needs. However, there are many other
situations where it may a short-term win but a long-term loss. Mobile web
apps offer a number of advantages over native apps, and, though they face
some design, development and deployment challenges, they are a powerful
cross-platform, scalable and affordable solution.
Increasing Fragmentation
Mobile apps are all the rage. There are a slew of startups targeting the iPad,
countless entrepreneurs hacking together the next killer iPhone app, and it
seems as though every big company has released an app of some sort. With
the increasing penetration of Android phones, developers are scrambling to
port their software. But what about deploying to Windows Phone 7,
Blackberry and Symbian? Who wants to study yet another SDK, learn
another language, 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, releases new hardware and OS
updates. Fragmentation is a costly long-term investment, and people are
beginning to realize that native apps are not a sustainable long-term
solution for all their needs.
Desktop web apps are far from a new idea – rich internet apps have been
around for a while. Google has been pushing in this direction for years,
creating a broad suite of online tools, primarily for the desktop, with an
increasing focus on mobile. However, web apps have been slow to gain
traction in the mobile space. Even with Apple promoting mobile web apps
as the next best thing on their 1st generation iPhone in 2007, the focus is
still squarely on native apps. And the primary reason for this is due to the
overwhelming success of Apple’s (native) App Store.
Apple’s App Store was not the first to distribute native applications to mobile
phones, but they proved it was a viable model and launched the concept
into popular culture. It’s this same model that would be necessary to make a
mobile web app ecosystem successful. Indeed, at the Google IO
conference, Google announced their development of a Chrome Web Store.
And, while their focus was primarily on desktop web apps, their
announcement touched on many of the key points of why app stores are
important and how to build for success.
As with any innovation, there are big questions that need to be answered.
Web applications as ‘the next big idea’ might never happen, but, in the
coming years, more and more websites will have mobile incarnations that
look a lot like applications. You’ll be swiping through articles, pinching
photos, and flicking pests off your Farmville plot – all in your mobile
browser. And people won’t even realize that in the end – the next
generation mobile web won.
CSS3 continues to both excite and frustrate web designers and developers.
We are excited about the possibilities that CSS3 brings, and the problems it
will solve, but also frustrated by the lack of support in Internet Explorer 8.
This article will demonstrate a technique that uses part of CSS3 that is also
unsupported by Internet Explorer 8. However, 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.
In this article I’ll explain how, with a few CSS rules, you can create an iPhone
version of your site using CSS3, that will work now. 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.
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. This functionality was enabled in CSS2 by media types. Media
Types let you specify a type of media to target, so you could target print,
handheld and so on. Unfortunately, these media types never gained a lot of
support by devices and, other than the print media type, you will rarely see
them in use.
If the user has a browser that supports media queries then we can write CSS
specifically for certain situations. For example, detecting that the user has a
small device like a smart phone of some description and giving them a
specific layout. 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.
You can see from the above example that the site hasn’t just been made
smaller to fit, 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. It
displays in the same way on Opera Mini on my Android based phone – so
The first way to use media queries is to have the alternate section of CSS
right inside your single stylesheet. So to target small devices we can use the
following syntax:
We can then add our alternate CSS for small screen and width devices
inside the curly braces. By using the cascade we can simply overwrite any
styles rules we set for desktop browsers earlier in our CSS. As long as this
section comes last in your CSS it will overwrite the previous rules. So, to
linearize our layout and use a smaller header graphic, I can add the
following:
To add a separate stylesheet after your main stylesheet and use the
cascade to overwrite the rules, use the following.
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, iPad
or a range of other devices. The screenshot below is the dConstruct site we
looked at earlier as seen through the iPhone view on 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.
To use ProtoFluid, 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.
After updating your code to the above, just refresh your page in the browser
and then drag the window in and you should see the layout change as it hits
You are now all ready to test using ProtoFluid. The real beauty of ProtoFluid
is that you can still use tools such as FireBug to tweak your design,
something you won’t have once on the iPhone. Obviously, you should still
try and get a look at your layout in as many devices as possible, but
ProtoFluid makes development and testing much simpler.
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, so the effect only happens for people with a small device
and not just a small browser window.
To create my new stylesheet, I take the default stylesheet for the site and
save it as small-device.css. So this starts life as a copy of my main
stylesheet. What I am going to do is go through and overwrite certain rules
and then delete anything I don’t need.
The first thing I want to do is make the logo fit nicely on screen for small
devices. As the logo is a background image this is easy to do as I can load a
different logo in this stylesheet. I also have a different background image
with a shorter top area over which the logo sits.
body {
! background-image: url(/img/small-bg.png);
}
#wrapper {
! width: auto;
! margin: auto;
! text-align: left;
! background-image: url(/img/small-logo.png);
! background-position: left 5px;
! background-repeat: no-repeat;
! min-height: 400px;
}
The next main job is to linearize the layout and make it all one column. The
desktop layout is created using floats so all I need to do is find the rules that
float the columns, set them to float: none and width:auto. This drops all the
columns one under another.
.article #aside {
! float: none;
! width: auto;
}
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. 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.
After adding the meta tag the site now displays zoomed in one the single
column.
This was a very simple retrofit to show that it is possible to add a mobile
version of your site simply. If I was building a site from scratch that I would
be using media queries on, there are definitely certain choices I would make
to make the process simpler. For example, considering the linearized
column orders, using background images where possible, as these can be
Mobile forms tend to have significantly more constraints than their desktop
cousins: screens are smaller; connections are slower; text entry is trickier;
the list goes on. So, limiting the number of forms in your mobile applications
and websites is generally a good idea. When you do want input from users
on mobile devices, radio buttons, checkboxes, select menus and lists tend
to work much better than open text fields.
But constraints breed innovation, and mobile forms are no different. The
limitations of mobile devices have forced developers and designers to find
new ways to allow users to input data faster and more easily. Thanks to the
modern solutions covered in this article, the mobile space may not be a
place to avoid forms much longer. Instead, it may become the place to
encourage them.
Field Zoom
In many mobile Web browsers, when a user selects a form’s input field, the
“field zoom” feature expands it to fill the screen’s viewable area. This makes
an otherwise tiny field large enough for people to actually see the data they
are entering. Given that many form errors are caused by people not seeing
their inputs well enough to correct misspellings, the usability of this feature
is clear.
The Safari browser on Apple’s iPhone makes use of field zoom together
with a “form assistant.” The form assistant displays “Previous,” “Next,”
“AutoFill” and “Done” buttons below the magnified input field, giving people
However, not everyone will know about the form assistant or know how to
hide the keyboard. So, make sure the controls on the Web page still allow
them to complete the form. Excessive spacing around the “Submit” button
can tuck it behind the keyboard.
Field zoom is another great reason to top-align input field labels in forms. As
you can see on Google’s registration form (screenshot below), left-aligned
labels disappear when input fields are expanded to fill the screen. With no
visible label, the user can easily forget what question they have to answer.
Long input fields also suffer a bit with field zoom.
Many mobile devices address this issue by displaying the most recent
character the user has entered, and then obscuring that character as a
bullet only after a brief delay.
Even dexterous users often miss them and need to start over. Couple this
interactive challenge with the small screens of mobile devices and the need
for a different solution for select menus becomes quite obvious.
For drop-down select menus on Web forms, Apple’s iPhone presents users
with a pop-up menu control. This control displays the options in the menu in
a contained list that can be scrolled at various speeds though drag, nudge
and flick gestures. The large touch targets also make it easy to select the
right value once you’ve found it.
Voice Input
Google’s Nexus One phone allows people to use voice input for any text
field in an application. Users can swipe the virtual keyboard to switch the
phone to audio input mode, or they can use the microphone button. The
video below demonstrates both of these options in action. With effective
voice input, typing any characters into the mobile device becomes a thing of
the past.
Most people who have designed websites or apps in Photoshop will, at one
point or another, have had issues trying to match colors in images to colors
generated by HTML, CSS or code. This article aims to solve those problems
once and for all.
When designing or editing for TV, calibrating the main editing display and
using a broadcast monitor are common; these show real-time proof of how
the image will look on a typical TV in a viewer’s home. In such a scenario,
color management offers many benefits and is highly recommended.
The goal
The best solution I’ve found is to disable Photoshop’s color management for
RGB documents as much as possible. Doing so forces the RGB colors that
are on screen and saved to the file to match the actual color value. If you
need to calibrate your monitor for Web and app design work, then you
would best be served by changing it at the OS level.
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, ensure that Convert
to sRGB is turned off. If you’re saving a JPEG file, then also turn off Embed
Color Profile (you may want this turned on for certain photos, but chances
are you’ll want it off for interface elements and icons).
Each Photoshop document contains a color profile that’s separate from the
actual color data stored for each pixel. Assign Profile simply changes the
profile in the document, without affecting any of the color data. It’s a non-
destructive action: you can assign a new color profile to your documents as
often as you like without doing any damage. Assigning a new profile may
change the way your document appears on screen, but the data contained
in the file will remain unaltered.
Convert to Profile is quite different. Not only does it assign a color profile to
the document, but it tries to keep your image looking the same on screen. It
If you’re copying layers from one Photoshop document to another, you will
want to ensure that the documents have been assigned the same color
profile.
Step 1: Go to Edit → Color Settings, and set the working space for RGB to
Monitor RGB.
Step 2: Open the document and go to Edit → Assign Profile. Then set it to
Working RGB. This must be done for every single document you work on.
Step 4: When saving files with Save for Web & Devices, ensure that Convert
to sRGB is turned off. If you’re saving a JPEG file, then also turn off Embed
Color Profile (again, you may want this turned on for certain photos, but
chances are you’ll want it off for interface elements and icons).
This article explains how to handle the problem that while testing some
landscape iPhone app interface mocks, they seem blurrier than they appear
in Photoshop.
Please note: For some bizarre reason, the Photos app on the iPhone doesn’t
display landscape images at 1:1. Instead, it scales them slightly or shifts them
to a sub-pixel position, making the images blurrier than they should be. To
avoid any issues, always save images in portrait mode (320 pixels wide by
480 pixels high) to test your user interface mockups.
Conclusion
Now, you’re able to move bitmap and vector images between Photoshop
and Illustrator without any color shifts at all, and using any method. You’re
also able to grab a color using the color picker in Photoshop, and then use
the same HEX color value in your CSS, HTML, JavaScript, Flash or
Objective-C code, and it will match your images perfectly.
Following the simple rules laid out below, you will increase your chances in
the battle for fame and glory. These tips might seem rudimentary or in-your-
face obvious, but they are so often neglected in the heat of the moment.
Be Unique
One of the easiest ways to stand out in the App Store is to create an app
that is unique. Sure, that makes sense. Yet still thousands and thousands of
apps are uninspired, shoveled out by tired developers looking for a quick
buck.
If you want to stick it to the man, make sure that you are either:
At this point in the history of the App Store, very few apps create new
categories. So unless you’re sitting on a revolutionary new idea, focus your
attention on a unique spin of an existing category. So many things can be
re-imagined with little effort. Look at your competitors and flick on your
child-like consumer filter. What cool feature for this category is missing?
How can you take advantage of the iPhone’s interface, accelerometer, 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. And that’s exactly the effect you want if you intend to sell
apps in the App Store.
• Think, plan and build with the intention of creating something unique.
From the conceptual drafts to the final marketing, keep iterating the
unique aspects of your product.
Learn to pitch
I’m sure you’ve pitched your app to at least a dozen co-workers and puzzled
family members. You know the ins and outs of your elevator speech, the
highs and lows, the big sells of your product and the hard-to-understand
parts. If you want your app to succeed, you will need to teach that pitch to
the rest of the world.
Be interesting
Make the conversation about your app easy and engaging. Make it so that
people want to tweet about it. Tweetability—if no one has yet, I’m
trademarking that word—refers to how well a product or message would
move on Twitter. The Twitter network, with its millions of users, has a
particular personality and disposition. Despite the diversity of people using
the service, talking about it like a homogenous mass still makes sense in
many ways. Some of the most successful apps are easily shared through
social media. Imagine the twittersphere chattering in chipmunk voices, “Hey,
guys. Check this out!” Instantly gratifying app + high tweetability = free
exposure.
Even if your app isn’t instantly gratifying or playfully humorous, you can still
compose a tweet that is highly tweetable. Just think of what you would
retweet yourself. How would you sell your app in 140 characters?
• Find the human angle. Are there any amusing and beneficial reasons
why people would use your app?
Cater To Blogs
Social media and the blogosphere are not isolated from each other. Like
ripples in a pond, the more people tweet about your app, the more likely
you’ll hit a big blog.
Review blogs and tech websites are part of the App Store’s eco-system, and
while the exact effect they have on sales is debatable, the traffic and buzz
they generate are worth pursuing.
To get good media coverage, you need to think like the media. How good a
story is your app? Obviously, the law of uniqueness makes a difference
here, but your app should also be easy to write about. First, provide a free
press package that anyone can download. Supply people with the material
they need to talk about your app. Give them a high-res version of the icon,
screenshots and press-related texts.
Don’t be stingy with the promo keys either—in fact, dispense them liberally.
Promo keys are cheap marketing collateral and a way for you to put your
app in the hands of peer leaders. Throw the keys at your favorite blog, and
invite them to give some away for free in a raffle. If you can find a category-
specific blog, you’ve got a direct line to your target customers. It’s a great
way to reach a new audience and strengthen your relationships and
reputation.
While they may not want to hear this, blogs are a bit like kids in a
schoolyard. If you can get the cool kids to talk about you, chances are that
other blogs will pick up the story and throw you on their front page. Getting
on review and media websites is vital to your marketing success, because
they are less transient than tweets. Reviews stay there and bring in traffic for
months.
Hype early
Start hyping early. If you know you have a unique product, let people in on
the secret before the launch. Having an interesting “Coming soon” website
can do this, by building a mailing list and getting Google juice for your
domain.
Needless to say, your app should have its own website. To make any of the
rules above work, you will need a point of reference, somewhere to send
the masses. Make the website interesting, show the app in action, and think
outside the box. Make the website an extension of your app, and you will
have yet another great tool in your marketing toolbox.
Launch big
When you launch, make it big. Send out the triumphant newsletter, and hit
all social media. Have you or your team write up blog posts, and pull every
lever and handle in your network. Hype is all about critical mass. The first
wave you set in motion will give you instant feedback on how to adjust your
hype machine.
In the end, hype is part luck and part skill. The best way to balance the two
is to keep asking yourself whether you can do anything else to add value,
mystery, polish or spin to your product. Rely on your own judgement. What
would excite you about this app if it were made by another developer?
• Boost popularity by timing the launch of your app to coincide with a live
event or trending topic. Climate-related apps spiked around the COP15
Climate Summit in Copenhagen.
Unique spin
Prior to launch, 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. The app launches at the end of December 2009. The
release newsletter goes out; a more elaborate version of the website, with
video and screenshots, goes up; and the developers make as much noise
as they possibly can in their networks.
As soon as sales get a lift from the early launch hype, emails are sent out to
various review websites offering promo keys. Reviews started flowing in,
and chatter about the app is monitored on Twitter, where developers offer
help and follow up on questions. A “Making the app” video is posted that
gives existing customers something to enjoy (and that humanizes the team),
highlighting user recommendations.
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, contributing
hype that doesn’t have anything to do with the app itself.
A week and a half after launch, larger websites such as TUAW started
showing interest. And coverage peaks with a TechCrunch article, which
ripples out to LifeHacker and other major websites. More than a month in
and we’re still seeing continued interest in the app; 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.”
What worked?
What worked for Awesome app was a combination of the marketing rules
discussed above:
• The idea of a “visual weather forecast” was easy to convey and was
presented in a way that gave it high tweetability.
• A press package with everything you could want was freely available on
the website, making it easy for blogs to write about the app.
The industry has evolved in many ways, but one particular area has affected
how we build websites to a greater extent than any other. The surge in
Web-enabled mobile devices has forged a subculture of visitors who require
the adaptation of our websites to meet their needs. While mobile design is
still in its infancy (and little primary research on mobile trends exist), we
need to observe how this now critical element of our industry is evolving,
and the patterns which exist from current development efforts.
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. There are plenty of big names
which were analyzed, such as Facebook and Amazon, and you’ll see plenty
of useful graphs to draw some inspiration from. With statistics and some
really interesting revelations on the diversity of modern design, you can be
excited about the future of mobile Web design!
Note: While a great deal of effort has been put into making this study as
accurate as possible, the number of variables being considered may result
in anomalies. Factors such as websites without mobile experience have
been accounted for (as has bias – to the greatest extent possible, during the
study).
Regarding the methodology for this study, 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. The approval for which variables were included had to meet
certain criteria. Firstly, the results had to be interesting (and could affect how
the mobile design situation is seen), and also had to be statistically
significant (we don’t want to state the obvious).
The results of this study wouldn’t be anything without its variables. When
deciding what to test against, the focus became twofold: how the mobile
experience is activated and how that experience functions. How visitors are
directed to a mobile experience became worthy of attention due to the
increasing number of implementations that exist. Secondly, it was vital to
test those pages to ensure they accounted for speed, bandwidth, display
size, touch screens, and other best practices.
As with any study, there is always a potential for error or bias to occur. To
avoid as many of these issues as possible not only were the websites
independently sourced, but all testing was undertaken on a desktop
machine, several handheld devices, and a number of emulators (this
occurred on every website). Following this practice reinforced the results
(avoiding erroneous numbers), and the testing was verified on two separate
dates to ensure that the experience resulted from consistent practices.
This second test aimed to determine the use of TLD conventions in mobile
design. In order to keep the scope of the results as strict as possible, only
subdomains (such as m.) and the .mobi TLD were considered (along with
dedicated mobile websites). As such, directory paths on the WWW domain
such as “/mobile/” were not considered. The possible implications of this
result could showcase the popularity for the .mobi TLD, and trends which
may exist in the use of subdomains on mobile websites.
While this test was not so much about the type of code rendered in
browsers, it seemed prudent to determine how many websites in the
surveyed list provided a mobile application for devices such as iDevices,
Android, or Blackberry. The results of this test simply looked for the
presence of a mobile app; the platform itself is not taken into account. 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.
In the next test, 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. For the
purposes of this study, each of the times were registered over a Wi-Fi
connection (not a 3G or Edge stream due to some emulator usage, to
ensure balanced results) and were done using an uncached format;
therefore, the loading time would be accurate to include any external
resources.
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), 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.
Code Validation
With the semantic Web and the need for our industry to maintain standards,
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. While Zeldman’s research focused on the Alexa top 100, this
piece used a different set of data. 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.
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, 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.
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.
Authentication Required
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. 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. The test also aimed to
uncover any naming conventions used to represent this link (if one exists).
Navigation Conventions
This test was focused upon what could be considered one of the most
important elements of a website. A successful navigation scheme can be
the difference between an easy-to-use interface, and a complex and
potentially unusable website. When carrying out this test, 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, icon-based
navigation, image links, and special menus (such as dropdowns or panels).
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. With mobile devices and small screens supporting touch
sensitivity, 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,
imprecise fingers). The scale used followed small, medium, or large, and
focused upon the link click’s size compared to other elements on the page.
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.
It’s worth stating that all of the websites measured used a single column
layout, but that the way in which links and segments of content are split may
give the visual indication of separation, which was worth examining further.
As mobile websites require a lot more scrolling than desktop websites, the
separation of blocks becomes more critical to visual identity.
Scrolling Experience
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).
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). What is interesting, however, is that to increase the simplicity
of the designs (as none of the sites used overflow text), they also maintained
a liquid layout to reduce the complexity of required scrolling.
Different websites will follow different trends, but they still have comparative
similarities.
Note: In addition to the above, it’s worth stating that a couple of the
websites within the top 100 listings were either subdomains, or international
versions of a website which has already been mentioned. While this could
prove an issue for repeat conventions, the results varied enough to qualify
their inclusion.
The common factors which were widely implemented included the trend of
using scripts to redirect mobile-friendly users, in preference to giving visitors
a choice (which is interesting, as it constitutes a double-edged sword in
terms of usability). In addition, the trend of subdomains also followed a well-
trodden pattern in order to be recognized easily by end users. A final
example, which showcases the common factors, is the unfortunate issue
that few of the websites’ code validated!
Expanding this study across a different cohort of website types may have
varying differences as to how trends are implemented. Examples include the
increased use of CSS3 and “flourishes” in portfolio websites, a reduced
number of mobile apps on small business websites, and increases in the
amount of required authentication if the study were applied primarily to
social networks. In addition, if a website is more content-focused (like
Smashing Magazine), an increase in file sizes will be an obvious side effect.
Taking this study forward, improvements could be made. While the websites
were tested using a range of real mobile devices, including an Apple iPhone
4, a Blackberry device, a Nokia device, a phone using WinMo, and a couple
of phones using Android, a greater level of compatibility could be
established if an increased number of devices were used (excluding
emulators). In addition, a larger range of websites may boost the general
accuracy of the results (such as if all 1,000 websites were tested).
Alexander Dawson
Alexander is a freelance web designer, author and recreational software
developer specializing in web standards, accessibility and UX design. As
well as running a business (HiTechy) and writing, he spends time in Twitter,
SitePoint's forums and other places, helping those in need.
Alexander Komarov
Alexander Komarov is a Russian designer (currently residing in Philadelphia),
who has been working in the field of Web and Mobile Interaction design and
user experience for over 7 years. He runs a nimble interaction design studio
that specializes in mobile interaction design and strategy. He helps his
clients break through the wall that separates them from their customers and
stand out in the competitive world of modern technology.
Cameron Chapman
Cameron Chapman is a professional Web and graphic designer with over 6
years of experience. She writes for a number of blogs, including her own.
She’s also the author of Internet Famous: A Practical Guide to Becoming an
Online Celebrity
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, photographer, DJ, tinkerer.
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. He is currently Senior Director of Product Ideation & Design at
Yahoo! Inc., author of two popular Web design books, and a top-rated
speaker at conferences and companies around the world.
Marc Edwards
Marc Edwards is the Director and Lead Designer at Bjango, an iPhone app
developer. Marc has been using Photoshop and Illustrator for over 12 years,
designing for print, Web, desktop applications and the iPhone.
Nick Francis
Nick Francis builds websites with an outstanding team at Project83 in
Nashville, Tennessee. He also co-founded Brightwurks that created web
apps Feed My Inbox and Linkpatch, along with mobile website gallery
Mobile Awesomeness.
Rachel Andrew
Rachel Andrew is a front and back-end web developer and Director of
edgeofmyseat.com, a UK web development consultancy and the creators of
the small content management system, Perch. She is the author of a number
of web design and development books including CSS Anthology: 101
Essential Tips, Tricks and Hacks (3rd edition), published by SitePoint and
also writes on her own blog. Rachel tries to encourage a common sense
application of best practice and standards adoption in her own work and
when writing about the web.
Steven Snell
Steven Snell has been designing websites for several years. He actively
maintains a few blogs of his own, including DesignM.ag, which regularly
provides articles and resources for web designers.
Smashing eBook #4│Mobile Design for iPhone and iPad │ 300 V413HAV