A Guide to Mobile Website Design


Published on

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.

Published in: Technology, Business
1 Like
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

A Guide to Mobile Website Design

  1. 1. Association of Strategic Marketingwww.associationofmarketing.orgP.O. Box 509Eau Claire, WI 54702-0509866.226.0828March 2013© 2013 Association of Strategic Marketing, a division of Lorman Business Center. All Rights Reserved.A Guide to Mobile WebsiteDesign
  2. 2. A Guide to Mobile Website Designwww.associationofmarketing.org page 1Everyone 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 newclass of low-cost designs has come to the market, and experts believe that mobile devices willsoon 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 onthis new breed of device will need to ensure that they design appropriate websites. Here is anoverview of developing a website to reach the ever-growing cohort of mobile device users.1. General Mobile Web DesignA. 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 beyondsize differences. Netbooks, for example, are much smaller than laptops but still fall into thecategory 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 thescreen. While this difference might seem minor, it profoundly changes how people access theInternet. Touchscreens lack the resolution of cursors, and this one difference has profoundimplications for mobile website development.That said, mobile device screens must also be considered when performing mobile webdevelopment. As we will discuss later, websites must be tailored to look great on thesedevices, 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 notcontain unnecessary flourishes and gaudy graphical elements. While a few flourishes canlook 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 canfrustrate those who access these websites.In addition, mobile websites should be designed to load quickly. While mobile devices havebecome faster over the years, a new class of low-cost devices has entered the market in a bigway, and much of the growth expected in the industry will come on these devices. Simplicityis preferable when designing mobile websites, and sites that load quickly will encourageusers to stick around longer than sites that take a long time to load.
  3. 3. A Guide to Mobile Website Designwww.associationofmarketing.org page 2C. Mobile Website AestheticsThe 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 easyaccess. When choosing between two potential design paradigms, the one that offers a simplerdesign aesthetic is generally preferable; however, there are exceptions to this rule.Somewhat counter intuitively, however, whitespace is seen as advantageous on thesewebsites. While space is at a premium, scrolling is easy on mobile devices, and thosedesigning websites should not be afraid to employ generous amounts of whitespace if it willease the flow of the website. In fact, whitespace is one of the best tools when it comes togiving a form to a website. While graphical elements should generally be eschewed,whitespace-delineated sections can be powerful tools.D. Mobile Website NavigationAsking users to click links on a desktop or laptop website is fine, and it is okay to usemultiple clicks to reach certain sections of a website. On mobile devices, however, it is bestto avoid unnecessary links and clicking. Misclicks are inevitable, and the more clicks that arenecessary to reach a particular section, the more likely it is that the user will click on thewrong link. Even if it requires redesigning a website, it is best to minimize the number ofclicks needed to access certain information.In addition, it is best to allow users to input as much information on one page as possible. Ifclicking on the wrong area will bring a user to a new section of the page, he or she may havedifficulty navigating back to the previous screen. If the user can select all relevantinformation and then click a “Next” or “Okay” button, he or she can correct these errorsbefore the new page is loaded.E. Mobile Website FunctionWe have primarily discussed the limitations of mobile devices above; however, there aresome novel features of mobile devices that are not practical on desktops and laptops, andthese features can be used to aid in the design of mobile websites. One of the most popularfeatures in use is swiping. Swiping can be used as a navigational tool, and it is increasinglybeing used on mobile websites to ease navigation. For websites that deliver multiple pages ofinformation, swiping can make the experience feel faster and more intuitive.
  4. 4. A Guide to Mobile Website Designwww.associationofmarketing.org page 3Another benefit to using swiping is that it feels natural on mobile devices. In addition, userswill feel as if the website is tailored for easy access. As web designers and marketers know, itis 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 OptionsA. Adapting a WebsiteOne of the first options web developers employed was adapting existing websites. In somecases, small tweaks could make a website accessible on new devices. On other websites, afew moderate changes could lead to adequate results. For most websites, however, largesections 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 belittle more than a fad; companies did not want to invest large sums of money into a platformthat may fail to capture larger audiences. In addition, it was unclear where the mobile marketwould go in the future, and some believed that mobile devices would eventually come withcursors and other devices that would make them similar to desktops. Today, however, mostexperts believe that this will not happen and that the forms of mobile devices will remainsimilar. Except for a small minority of websites where adaptations are quick and easy, it isbest to employ other tactics.B. Second WebsitesAnother popular strategy used in early mobile development was to create second websitesthat would be used by mobile devices. The strategy is still popular, and many websites havemultiple versions for different devices. Since both the desktop and the mobile version of thewebsite will be able to access the same databases, this strategy does not entail as much workas many imagine. In addition, it allows web developers to keep their desktop versions thesame 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 aregetting a subpar version of the website, and in some cases, they are. Those who choose toemploy this strategy must ensure that mobile device users do not feel as if they are missingout on any features. Another drawback is the fact that mobile-only websites are sometimesignored; 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. 5. A Guide to Mobile Website Designwww.associationofmarketing.org page 3Want to read the rest?Download the full white paper for free!