Eight Tips to Make Your First Mobile Design a Success
Like this article? We recommend
Like this article? We recommend
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.