Publishers of technology books, eBooks, and videos for creative people

Home > Articles

Eight Tips to Make Your First Mobile Design a Success

  • Print
  • + Share This
Even if you're very new to mobile design, says Kristofer Layon, author of Mobilizing Web Sites: Strategies for Mobile Web Implementation, you can take the lessons you've already learned from traditional web site design and apply them to this newer medium. If you have at least one successful web site under your belt, you can "mobile-optimize" (mobilize) that site to use as your first mobile project.
Like this article? We recommend

Mobile continues to be a hot topic for web designers, and I'm hardly the first person to write a book about mobile web design. I'm also not here to tell you why you should design for mobile devices, or share data to convince you how urgent the need is to do so. There are plenty of other books, articles, and blog entries about this already, and you've probably read several of them! (If not, be sure to look up Ethan Marcotte, Luke Wroblewski, Jason Grigsby, Lyza Gardner, Peter-Paul Koch, or Stephanie Rieger; they and several others write and speak extensively about mobile design.)

Nonetheless, Mobilizing Web Sites: Strategies for Mobile Web Implementation was written from two specific perspectives that I hope make it unique. First, it's from my perspective of being an app designer, web designer, and product manager, and how this blend of experience influences my mobile product management view of design. Second, it's written specifically to address how to approach mobile-optimizing ("mobilizing") existing web sites.

With these perspectives in mind, I'd like to suggest these eight tips for you to consider as you contemplate mobilizing an existing web site as your first mobile project:

  • Start learning mobile with an existing web site.
  • Take a long-term, product-managed approach.
  • Don't jump into "mobile first" too quickly.
  • Your first mobile design doesn't have to be perfect.
  • All content is not equal.
  • A mobile web site doesn't need to look just like a mobile app.
  • When everything you do is a "best guess," you must usability-test.
  • Done with your first mobile site? Keep improving it.

The following sections provide details about each tip and examples to consider.

Start Learning Mobile with an Existing Web Site

I have two reasons for suggesting that you start with an existing site. First, a huge swath of the existing Web isn't yet optimized for mobile presentation. And as a web designer, you're probably personally involved with at least one of these mobile-unfriendly web sites. But stop waiting around for the "right" new project to start learning how to design for mobile. In doing so, you're just delaying your learning. You're probably also frustrating people who are trying to visit your site on a mobile device.

Designing for mobile isn't rocket science, but it's still a bit different from designing for desktop. A new site often has plenty of challenges to juggle already. Why add mobile to the heap if you're new to mobile? Instead, become familiar with using media queries, responsive web design technique, and mobile design patterns with content and information architecture that is already familiar to you.

Take a Long-Term, Product-Managed Approach

What does "long-term, product-managed" mean? In short, it means that you should treat your web site as you should already be treating it—as a product that's never completed, and subject to continuous improvement. It's particularly important to adopt this view in mobile web design.

In my office, we have two categories of work: projects and products. And they're pretty easy to differentiate from each other: projects have a specific beginning and end, whereas products are not intended to end. My suggestion is to put your own web sites (and any others that you work on for other people) into the second category, as products. The Web changes constantly, and your web knowledge should as well. So plan for both, and realize that your site should continually change over time in both design and content.

Don't Jump into 'Mobile First' Too Quickly

Luke Wroblewski and others have been talking about a "mobile first" approach to web design for the past few years, and I wholeheartedly agree that it's a great idea and approach. The premise is that mobile web use has grown so much, so quickly, that we should take mobile into account first when designing for the web, and then adjust as necessary for larger screens.

But if you're just getting into mobile design and would like to optimize an existing web site rather than starting from scratch, or you want to ease into mobile design a bit more slowly and gradually, I suggest that you embrace an approach that mobilizes an established design iteratively as you advance the site's mobile-friendliness to higher and higher levels. Again, it's all about working with what you already have, rather than waiting for a perfect "mobile first" opportunity to roll along. The world just isn't perfect, so start getting familiar with mobile even if you're not in a position to design a brand-new site or propose a site redesign.

Your First Mobile Design Doesn't Have to Be Perfect

When I read what other people write about mobile design, it bothers me that they often criticize attempts to design for mobile devices that don't take everything into account. Some mobile experts deride designing only for iPhones or Android devices, while others suggest that designing only for visual presentation and not for performance optimization is inadequate.

I'm not going to tell you that these mobile advocates are wrong. Designing for the most devices and their viewers, and making sites perform as well as they present, are important indeed. Yet I also believe that the more expectations, requirements, and goals that you heap onto your first effort, the more likely it is that you won't bother trying to design for mobile at all. It just makes mobile seem too scary, and that's really unfortunate—and ultimately it doesn't help anyone.

Don't let ideals get in the way of being practical. Optimizing even a few aspects of a web site for improved mobile presentation is better than doing nothing at all, and there's absolutely nothing wrong with aiming for iPhones and Android devices first if that's what you would like to do. You should accept incremental, progressive enhancement as part of a product-managed approach. Keep your initial goals limited and within reach, meet them, and then keep moving. You can eventually support more devices and improved performance, and strive toward a more perfect mobile design.

All Content Is Not Equal

There's a reason for the existence of both abridged and unabridged dictionaries, carry-on luggage and large suitcases, and snacks versus meals. In each case, people recognize that a full-sized version of everything isn't always necessary. Sometimes, for the sake of less time, less space, or a variety of other diminished needs or circumstances, we settle for smaller or less-complete versions of larger things.

So it can be with mobile web sites. Sure, there are instances where a mobile web site's content probably shouldn't be abridged in any way. How or when you reduce content can determine whether it's a particularly smart route to take (which is why most literature teachers discourage the use of CliffsNotes). But if a mobile version of a site requires you to rewrite or abridge the content just to make it feel more reasonable on a smaller screen, don't be the patron saint of all content and think that everything has to be preserved in your first transition to mobile.

It's okay to have a longer version for desktop and a shorter version for mobile; it's also okay to use display: none for some situations. Though I wouldn't rely on that feature for any case of having to reduce what's displayed—and browsers still download undisplayed content, so it doesn't actually reduce data use. Sometimes making things fit comfortably into a tighter space merely means arranging those things differently.

A Mobile Web Site Doesn't Need to Look Just Like a Mobile App

At our company, where we design both native apps and mobile web sites, we wrestle a lot with the issue of how to implement mobile design patterns, and which elements and conventions are important (or not) for any given platform. I encourage you to wrestle with this issue, too. And I'm not going to say that there are always right or wrong answers — that's the reason to wrestle with it.

For example, it can be easy to fall into the trap of trying to design a mobile web site that looks just like a native app. Code frameworks and design libraries are available to help you do that. But, from a user perspective, should a mobile site look exactly like a mobile app, especially if you're also designing a native version? What distinguishes iOS conventions from Android conventions, and how does this influence your work on the Web?

Again, there are no absolute answers, but you should keep certain things in mind. Most importantly, think about usability. If you want buttons to be easy to use, make them larger, and let them veer in a direction that might end up looking a bit app-like. But don't set out to make interface design decisions with the sole goal of making a mobile site look like an app; nobody gives a prize for that kind of work, and your customers probably don't want a site that's easily confused with an app. In fact, where it's appropriate, I encourage you to let your site's mobile design be shaped more by your overall brand aesthetic than by how mobile apps look.

When Everything You Do Is a 'Best Guess,' You Must Usability-Test

If you design with usability in mind, user evaluation is essential to confirming whether your proposed design is going to be successful. And note that I say "proposed design." That's right—I would argue that until your design has been vetted by your customers or visitors, even a finished design is still a proposed design. Simply put, a completely new idea or design needs to be refined and vetted with users; otherwise, it's just a concept. Designs mature and improve with user feedback and refinement.

Don't gamble with an untested design. Take it directly to the people who will use it. Ask what they think, and challenge them to tell you how it can be improved. Don't fall into the trap of designing to impress colleagues or your boss; in the end, what those people think doesn't matter nearly as much as what customers think. Plus, getting your customers to love your design and return to it often is usually the best way to get your boss to love your work!

Done with Your First Mobile Site? Keep Improving It

Wait a minute. I'm saying, "As soon as you're done, keep working"? That's right! Don't sit back for very long and think, "Whew, it's great to finally have this mobile site done." Because whether you're new to mobile design or experienced, I submit that you still have plenty to learn and apply to your site. The web is still a young child—it simply doesn't know how to sit still. With the mobile landscape changing all the time—presenting new operating systems, devices, screen sizes, and methods for managing all aspects of content, design, and performance—you can't afford to sit back and think you're "done." You've only just begun.

  • + Share This
  • 🔖 Save To Your Account

Peachpit Promotional Mailings & Special Offers

I would like to receive exclusive offers and hear about products from Peachpit and its family of brands. I can unsubscribe at any time.

Overview


Pearson Education, Inc., 221 River Street, Hoboken, New Jersey 07030, (Pearson) presents this site to provide information about Peachpit products and services that can be purchased through this site.

This privacy notice provides an overview of our commitment to privacy and describes how we collect, protect, use and share personal information collected through this site. Please note that other Pearson websites and online products and services have their own separate privacy policies.

Collection and Use of Information


To conduct business and deliver products and services, Pearson collects and uses personal information in several ways in connection with this site, including:

Questions and Inquiries

For inquiries and questions, we collect the inquiry or question, together with name, contact details (email address, phone number and mailing address) and any other additional information voluntarily submitted to us through a Contact Us form or an email. We use this information to address the inquiry and respond to the question.

Online Store

For orders and purchases placed through our online store on this site, we collect order details, name, institution name and address (if applicable), email address, phone number, shipping and billing addresses, credit/debit card information, shipping options and any instructions. We use this information to complete transactions, fulfill orders, communicate with individuals placing orders or visiting the online store, and for related purposes.

Surveys

Pearson may offer opportunities to provide feedback or participate in surveys, including surveys evaluating Pearson products, services or sites. Participation is voluntary. Pearson collects information requested in the survey questions and uses the information to evaluate, support, maintain and improve products, services or sites; develop new products and services; conduct educational research; and for other purposes specified in the survey.

Contests and Drawings

Occasionally, we may sponsor a contest or drawing. Participation is optional. Pearson collects name, contact information and other information specified on the entry form for the contest or drawing to conduct the contest or drawing. Pearson may collect additional personal information from the winners of a contest or drawing in order to award the prize and for tax reporting purposes, as required by law.

Newsletters

If you have elected to receive email newsletters or promotional mailings and special offers but want to unsubscribe, simply email ask@peachpit.com.

Service Announcements

On rare occasions it is necessary to send out a strictly service related announcement. For instance, if our service is temporarily suspended for maintenance we might send users an email. Generally, users may not opt-out of these communications, though they can deactivate their account information. However, these communications are not promotional in nature.

Customer Service

We communicate with users on a regular basis to provide requested services and in regard to issues relating to their account we reply via email or phone in accordance with the users' wishes when a user submits their information through our Contact Us form.

Other Collection and Use of Information


Application and System Logs

Pearson automatically collects log data to help ensure the delivery, availability and security of this site. Log data may include technical information about how a user or visitor connected to this site, such as browser type, type of computer/device, operating system, internet service provider and IP address. We use this information for support purposes and to monitor the health of the site, identify problems, improve service, detect unauthorized access and fraudulent activity, prevent and respond to security incidents and appropriately scale computing resources.

Web Analytics

Pearson may use third party web trend analytical services, including Google Analytics, to collect visitor information, such as IP addresses, browser types, referring pages, pages visited and time spent on a particular site. While these analytical services collect and report information on an anonymous basis, they may use cookies to gather web trend information. The information gathered may enable Pearson (but not the third party web trend services) to link information with application and system log data. Pearson uses this information for system administration and to identify problems, improve service, detect unauthorized access and fraudulent activity, prevent and respond to security incidents, appropriately scale computing resources and otherwise support and deliver this site and its services.

Cookies and Related Technologies

This site uses cookies and similar technologies to personalize content, measure traffic patterns, control security, track use and access of information on this site, and provide interest-based messages and advertising. Users can manage and block the use of cookies through their browser. Disabling or blocking certain cookies may limit the functionality of this site.

Do Not Track

This site currently does not respond to Do Not Track signals.

Security


Pearson uses appropriate physical, administrative and technical security measures to protect personal information from unauthorized access, use and disclosure.

Children


This site is not directed to children under the age of 13.

Marketing


Pearson may send or direct marketing communications to users, provided that

  • Pearson will not use personal information collected or processed as a K-12 school service provider for the purpose of directed or targeted advertising.
  • Such marketing is consistent with applicable law and Pearson's legal obligations.
  • Pearson will not knowingly direct or send marketing communications to an individual who has expressed a preference not to receive marketing.
  • Where required by applicable law, express or implied consent to marketing exists and has not been withdrawn.

Pearson may provide personal information to a third party service provider on a restricted basis to provide marketing solely on behalf of Pearson or an affiliate or customer for whom Pearson is a service provider. Marketing preferences may be changed at any time.

Correcting/Updating Personal Information


If a user's personally identifiable information changes (such as your postal address or email address), we provide a way to correct or update that user's personal data provided to us. This can be done on the Account page. If a user no longer desires our service and desires to delete his or her account, please contact us at customer-service@informit.com and we will process the deletion of a user's account.

Choice/Opt-out


Users can always make an informed choice as to whether they should proceed with certain services offered by Adobe Press. If you choose to remove yourself from our mailing list(s) simply visit the following page and uncheck any communication you no longer want to receive: www.peachpit.com/u.aspx.

Sale of Personal Information


Pearson does not rent or sell personal information in exchange for any payment of money.

While Pearson does not sell personal information, as defined in Nevada law, Nevada residents may email a request for no sale of their personal information to NevadaDesignatedRequest@pearson.com.

Supplemental Privacy Statement for California Residents


California residents should read our Supplemental privacy statement for California residents in conjunction with this Privacy Notice. The Supplemental privacy statement for California residents explains Pearson's commitment to comply with California law and applies to personal information of California residents collected in connection with this site and the Services.

Sharing and Disclosure


Pearson may disclose personal information, as follows:

  • As required by law.
  • With the consent of the individual (or their parent, if the individual is a minor)
  • In response to a subpoena, court order or legal process, to the extent permitted or required by law
  • To protect the security and safety of individuals, data, assets and systems, consistent with applicable law
  • In connection the sale, joint venture or other transfer of some or all of its company or assets, subject to the provisions of this Privacy Notice
  • To investigate or address actual or suspected fraud or other illegal activities
  • To exercise its legal rights, including enforcement of the Terms of Use for this site or another contract
  • To affiliated Pearson companies and other companies and organizations who perform work for Pearson and are obligated to protect the privacy of personal information consistent with this Privacy Notice
  • To a school, organization, company or government agency, where Pearson collects or processes the personal information in a school setting or on behalf of such organization, company or government agency.

Links


This web site contains links to other sites. Please be aware that we are not responsible for the privacy practices of such other sites. We encourage our users to be aware when they leave our site and to read the privacy statements of each and every web site that collects Personal Information. This privacy statement applies solely to information collected by this web site.

Requests and Contact


Please contact us about this Privacy Notice or if you have any requests or questions relating to the privacy of your personal information.

Changes to this Privacy Notice


We may revise this Privacy Notice through an updated posting. We will identify the effective date of the revision in the posting. Often, updates are made to provide greater clarity or to comply with changes in regulatory requirements. If the updates involve material changes to the collection, protection, use or disclosure of Personal Information, Pearson will provide notice of the change through a conspicuous notice on this site or other appropriate way. Continued use of the site after the effective date of a posted revision evidences acceptance. Please contact us if you have questions or concerns about the Privacy Notice or any objection to any revisions.

Last Update: November 17, 2020