7 Things You Need To Know About Mobile App Design & Web Design
Nearly half of marketers say their businesses lack a mobile-optimized website, according to a survey by Adobe, even though smartphones and tablets are everywhere — and web statistics prove that visits via devices are on the rise.
Competition online is fierce, and if you don’t have a mobile-friendly site to keep your customers happy, you can quickly lose your edge. But how do you get the ball rolling? Here’s a look at some of the nuts and bolts of the design process.
A good starting point is to research what type of mobile design — if any — is used by companies similar to yours. Browse their sites thoroughly using a smartphone. When you’re finished, compare those sites against your own to get a sense of how your design stacks up, and what you can improve. For more inspiration, check out this list of 70 responsive design sites from Mobify.
Designing for mobile versus desktop
Which should you tackle first: the design for large desktop screens, or the one for mobile devices? As designer Joshua Johnson pointed out in an argument for mobile first design, starting with smaller screens forces you to create a lean, focused design. All the necessary content is built into the mobile version from the outset.
Starting with mobile doesn’t mean you’ll scale back your desktop site. Instead, Johnson points out that you can make “progressive enhancements” to supplement the large-screen experience. This type of site development goes hand-in-hand with responsive design, too.
However, there are disadvantages to this approach.
First, do you really want to rethink your entire website? While upgrading to a mobile-first design could be advantageous, it could also be an unneeded drain on your bottom line. Second, as far as aesthetics go, designing for mobile first is limiting: it might be hard to envision and execute the overall look you want your brand to have when you’re confined to a small palette.
To choose the process that makes sense for your site, talk to a professional web designer; they have the know-how to guide you through what’s best for your business.
The 7 key principles of mobile web design
Whatever philosophy you ultimately embrace, there are fundamental principles that apply to all mobile website design.
Design for mobile based on most popular and/or important content
What are the majority of visitors looking for on your site? That’s the content you should put front and center in your design. It must be easy to find or use, or your site visitors will move on to someone else.
Everything should be available…
…even if not everything is visible. In other words, make sure mobile users have access to the majority of your site’s content. It’s frustrating to look for needed information that’s simply not available on the mobile optimized site. On the other hand, just because the content is there doesn’t mean it has to be linked to via the main navigation bar.
Limit navigation options
As noted above, you need to be choosy about the information that you put front and center. Too many menu layers, too many clicks, too many choices; you have to simplify if you want your site to be mobile friendly. David Moth of Econsultancy recommends no more than three layers of menus and a max of five or six menu items.
Buttons matter
Thumbs aren’t the most accurate pointing device; putting buttons too close together will only lead to frustration. Who wants to keep hitting “reload” when the button you’re trying to click is “submit”? Also, avoid tiny fonts and minuscule buttons. Instead, use elements that are sized for easy clicking.
Watch your media
While the aesthetic design of your website is extremely important, media elements can cause mobile browsers to trip up. Keep an eye out for overly large image files, bloated fonts that load too many unnecessary characters, and videos in formats — like Flash — that won’t play on certain mobile operating systems.
Pop-ups are problematic
If you’re throwing too many pop-up surveys or sign-up boxes at your mobile visitors, they’re going to get annoyed. It’s frustrating to get rid of pop-ups on a small screen. Unless it’s absolutely necessary, avoid them.
Don’t require too much text
Forms are a pain to fill out when you’re typing with your thumbs. Keep the text input needed to a minimum. No essays, please!
No comments:
Post a Comment