Smartphones, tablets and other devices have become tremendously popular in recent years, and experts believe that the mobile segment is still far from saturation. Experts believe that mobile devices will soon surpass desktops and laptops when it comes to accessing the Internet. However, marketing to mobile devices requires a different strategy, and those who seek to capitalize on this new breed of device will need to ensure that they design appropriate websites. This white paper provides current best practices in developing a website to reach the ever-growing cohort of mobile device users.

1. Association of Strategic Marketing
www.associationofmarketing.org
P.O. Box 509
Eau Claire, WI 54702-0509
866.226.0828
March 2013
© 2013 Association of Strategic Marketing, a division of Lorman Business Center. All Rights Reserved.
A Guide to Mobile Website
Design

2. A Guide to Mobile Website Design
www.associationofmarketing.org page 1
Everyone who works in marketing has undoubtedly come across mobile devices.
Smartphones, tablets and other devices have become tremendously popular in recent years,
and experts believe that the mobile segment is still far from saturation. In addition, a new
class of low-cost designs has come to the market, and experts believe that mobile devices will
soon surpass desktops and laptops when it comes to accessing the Internet. However,
marketing to mobile devices requires a different strategy, and those who seek to capitalize on
this new breed of device will need to ensure that they design appropriate websites. Here is an
overview of developing a website to reach the ever-growing cohort of mobile device users.
1. General Mobile Web Design
A. How Are Mobile Devices Different?
When most people think about mobile devices, they think about smartphones and tablets.
While these devices are small, what separates them from traditional platforms goes beyond
size differences. Netbooks, for example, are much smaller than laptops but still fall into the
category of desktops and laptops. Mobile devices differ largely because of how they are used.
Instead of using a mouse, touchpad or trackball, mobile device users tap and swipe the
screen. While this difference might seem minor, it profoundly changes how people access the
Internet. Touchscreens lack the resolution of cursors, and this one difference has profound
implications for mobile website development.
That said, mobile device screens must also be considered when performing mobile web
development. As we will discuss later, websites must be tailored to look great on these
devices, and traditional marketing influences play a role as well.
B. How do Mobile Websites Differ?
Mobile websites must look great on small screens. As a result, great mobile websites do not
contain unnecessary flourishes and gaudy graphical elements. While a few flourishes can
look fine on desktops and laptops, they simply get in the way on mobile devices. In addition,
links must be easy to click. Links that are clustered together will cause misclicks, which can
frustrate those who access these websites.
In addition, mobile websites should be designed to load quickly. While mobile devices have
become faster over the years, a new class of low-cost devices has entered the market in a big
way, and much of the growth expected in the industry will come on these devices. Simplicity
is preferable when designing mobile websites, and sites that load quickly will encourage
users to stick around longer than sites that take a long time to load.

3. A Guide to Mobile Website Design
www.associationofmarketing.org page 2
C. Mobile Website Aesthetics
The introduction of the iPhone and Android devices has changed web design in general.
While these design trends are not truly minimalist, they do focus on simplicity and easy
access. When choosing between two potential design paradigms, the one that offers a simpler
design aesthetic is generally preferable; however, there are exceptions to this rule.
Somewhat counter intuitively, however, whitespace is seen as advantageous on these
websites. While space is at a premium, scrolling is easy on mobile devices, and those
designing websites should not be afraid to employ generous amounts of whitespace if it will
ease the flow of the website. In fact, whitespace is one of the best tools when it comes to
giving a form to a website. While graphical elements should generally be eschewed,
whitespace-delineated sections can be powerful tools.
D. Mobile Website Navigation
Asking users to click links on a desktop or laptop website is fine, and it is okay to use
multiple clicks to reach certain sections of a website. On mobile devices, however, it is best
to avoid unnecessary links and clicking. Misclicks are inevitable, and the more clicks that are
necessary to reach a particular section, the more likely it is that the user will click on the
wrong link. Even if it requires redesigning a website, it is best to minimize the number of
clicks needed to access certain information.
In addition, it is best to allow users to input as much information on one page as possible. If
clicking on the wrong area will bring a user to a new section of the page, he or she may have
difficulty navigating back to the previous screen. If the user can select all relevant
information and then click a “Next” or “Okay” button, he or she can correct these errors
before the new page is loaded.
E. Mobile Website Function
We have primarily discussed the limitations of mobile devices above; however, there are
some novel features of mobile devices that are not practical on desktops and laptops, and
these features can be used to aid in the design of mobile websites. One of the most popular
features in use is swiping. Swiping can be used as a navigational tool, and it is increasingly
being used on mobile websites to ease navigation. For websites that deliver multiple pages of
information, swiping can make the experience feel faster and more intuitive.

4. A Guide to Mobile Website Design
www.associationofmarketing.org page 3
Another benefit to using swiping is that it feels natural on mobile devices. In addition, users
will feel as if the website is tailored for easy access. As web designers and marketers know, it
is often the little touches that make a particular website stand out; if it is at all practical,
swiping can be an incredibly useful addition to a website.
2. Overview of Implementation Options
A. Adapting a Website
One of the first options web developers employed was adapting existing websites. In some
cases, small tweaks could make a website accessible on new devices. On other websites, a
few moderate changes could lead to adequate results. For most websites, however, large
sections of code had to be eliminated and revamped.
For most websites, however, adaptations will fail to fully capitalize on these new devices.
The drive to adapting websites was largely fueled by a belief that mobile devices may be
little more than a fad; companies did not want to invest large sums of money into a platform
that may fail to capture larger audiences. In addition, it was unclear where the mobile market
would go in the future, and some believed that mobile devices would eventually come with
cursors and other devices that would make them similar to desktops. Today, however, most
experts believe that this will not happen and that the forms of mobile devices will remain
similar. Except for a small minority of websites where adaptations are quick and easy, it is
best to employ other tactics.
B. Second Websites
Another popular strategy used in early mobile development was to create second websites
that would be used by mobile devices. The strategy is still popular, and many websites have
multiple versions for different devices. Since both the desktop and the mobile version of the
website will be able to access the same databases, this strategy does not entail as much work
as many imagine. In addition, it allows web developers to keep their desktop versions the
same while tailoring their mobile sites to the ever-changing attributes of mobile devices.
There are, however, some drawbacks to the strategy. Users sometimes feel as if they are
getting a subpar version of the website, and in some cases, they are. Those who choose to
employ this strategy must ensure that mobile device users do not feel as if they are missing
out on any features. Another drawback is the fact that mobile-only websites are sometimes
ignored; users often change their browser IDs to indicate that there using desktops or laptops,
which allows them to access the main version of the website.

5. A Guide to Mobile Website Design
www.associationofmarketing.org page 3
Want to read the rest?
Download the full white paper for free!