Skip to main content
Global Reach
Main Content

The Do's and Don'ts for Mobile Design

Posted on 03/27/2018 at 12:00 AM

Ten years ago, the release of smartphones revolutionized the way we interact with the web. Smartphones have been transforming the way websites are used and built, leading the way for mobile and responsive design. Today, nearly everything we do online can be accomplished via smartphone.

Having a responsive website isn’t optional anymore; it is necessary for Google’s search ranking algorithm and for a widespread reach to potential customers. In 2016, StatCounter Global Stats announced that the scales had tipped and there was officially more web traffic from mobile devices (51%) than desktop computers (49%).

10 Do’s and Don’ts for Mobile Design:

  1. Do design with a “mobile-first” mindset. Design for the small screen first and implement a hierarchy system. After that, scale up for larger screen sizes. On mobile, optimize for speed by compressing photos and being mindful of media sizes. When scaling up to desktop, you can feature higher resolution images.

  2. Don’t fear the scroll. Today, users have no hesitation when it comes to scrolling through content. Not only is it helpful to the user, but content that is informative is also a crucial to a successful Search Engine Optimization (SEO) strategy. Don’t compromise your content for the sake of reducing a page’s length.

  3. Do keep things simple and don’t over-complicate it. The mobile user is often task-oriented and looking for a specific thing. They won’t be spending time reading through your content word-for-word. The key for responsive design is to have your content organized and concise, while being easy to find. Mobile design is not the place for extraneous design elements. Consider content hierarchy to arrange elements accordingly, and avoid overcrowding the screen at all costs.

  4. Don’t assume your mobile website has to look the same as the desktop version. Many things will stay the same in regards to the logo, header, typography, colors, and imagery, but the way content is arranged will often be tweaked to fit the narrow screen size.

  5. As always, do utilize white space. Users don’t mind the scroll, so you might as well implement room for the eye to breathe. Consider content hierarchy to balance elements within the screen.

  6. Don’t forget about designing for touch interaction. The user’s finger will cover a larger area than the precise mouse on desktop, so touch points should be larger and more spread out to accommodate the pad of a user’s finger. Apple’s Human Interface Guidelines recommends a minimum target size of 44 by 44 pixels.

  7. Do implement an intuitive mobile menu. Good mobile navigation makes it easy for people to find what they need without cluttering precious screen space. It is best practice to keep navigation item titles short and to put most important pages first. Above all, keep it concise and accessible.

  8. Don’t hide your content on mobile. No matter what device the user is viewing on, they should be able to see the same content everywhere. The content might need to be formatted or sorted differently, but it should still be present.

  9. Do be mindful about increasing font size. It is recommended that body text be set to 16 pixels for mobile screen sizes. You want to ensure the text is large enough to read without the user needing to zoom in.

  10. Don’t trap the user with a dead end. Clear navigation is key to mobile design so the user can continue to flow through your website with ease. Navigation menus, breadcrumbs, buttons, and links all function as elements to pull the user into the website.

If you are interested in utilizing these features to create a responsive website or transition your current website to a responsive design, contact us today at Global Reach.

Comments
There are no comments yet.
Add Comment

* Indicates a required field

Copyright © 1995-2018 Global Reach Internet Productions, LLC. All rights reserved.