The Ultimate Guide to Mobile Design

An overwhelming majority of internet users (About 93%!) browse on mobile apps and devices—so it’s no wonder that your SEO is strongly affected by how your website performs on mobile.

Not only does an unprofessional site make a poor first impression on your site visitors, but it will also increase your bounce rate and lower conversion rate.

Whether you’re redesigning your website or just starting out, it’s imperative that your site is fitted with all of the best mobile design practices. Taking these tactics into account will benefit your search engine ranking (Google’s algorithm prefers mobile-friendly sites) and your site’s overall UX/UI.

In this post, we’ll discuss user-friendliness, responsiveness and, of course, eye-catching tools to help your site leave a lasting impression. We’ll also go over certain elements of optimization. Let’s get started: 

Mobile First

Okay, so this isn’t breaking news—but it still deserves to be said!

More and more designers have opted to start their design process with the smallest screen and then work their way up to a larger screen. Due to the mobile end of your site having more restrictions (especially when compared to desktop capabilities), starting small and expanding is easier than whittling down your site’s abilities.

When it comes to the mobile-first design, keep in mind:

  • Content is a priority: Avoid filling your viewer’s screen with extraneous clutter.
  • Simplicity is key: People browse sites on their phones with one thing in mind—convenience.
  • Think about your user: If your mobile site is difficult to read or navigate, you’re going to lose your audience.

Tesla’s mobile site is a great example of all three of these points: it’s sleek, seamless, and offers the visitor all the important information right away.

Now that we’ve covered the basics, let’s jump into more specific design tactics.

Adaptive vs Responsive Design

There are basically two schools of thought when it comes to designing for mobile: adaptive design and responsive design.

  • Adaptive Design: Distinct layouts are used for multiple screen sizes (desktop, tablet, mobile), therefor the layout depends on the screen size being used.
  • Responsive Design: Responsive design uses CSS media to have a more fluid layout, which allows the design to adapt to the screen regardless of the target device’s screen size.

One is not necessarily better than the other, so if your site is already using adaptive design, that doesn’t mean you need to start from scratch. However, if you’re building a new site, we would opt for responsive design.

Design for Thumbs

When designing for your site’s user experience (UX), pay attention to how your visitors will be interacting with their mobile screens: 

  • Keep touch target size in mind for small devices. Nothing is more frustrating than not being able to click on elements accurately. According to a study conducted by Pekka Parhi, Amy Karlson and Benjamin B. Bederson, a “target size of 9.2 mm for discrete tasks and targets of 9.6 mm for serial tasks should be sufficiently large for one-handed thumb use on touchscreen-based handhelds without degrading performance and preference.”
  • Place important elements within reach. Design your app for one-handedness: user interface (UI) is an important part of the mobile user experience, so keeping important elements (i.e. menu, call to action, etc.) reachable is key. We’re a big fan of how Abduzeedo placed their menu in thumbs-reach at the bottom of the screen.

Now, let’s get into the specific elements for you to consider.

Elements

Strong mobile UX design relies on how wisely you incorporate UI elements into your mobile design. Here are a few examples of how you can improve your interaction design, one element at a time.

Menus and Navigation Bars

For desktop, a navigation bar is a great way to organize your page, but on a mobile device, it is going to eat up a lot of valuable real estate.

Unless you’re going to utilize a small navigation bar at the bottom of the screen like Abduzeedo does, lose it altogether and replace it with a concise, simplified menu.

Mailchimp’s mobile menu is a great example of a simple, easy-to-navigate menu. Plus, they went the extra mile and added button image artwork. It’s a nice touch that makes viewing more friendly while still reducing clutter. 

Forms

Filling out forms can be a mobile user’s worst nightmare, but luckily, there are ways to make it a much easier experience.

When it comes to desktop and mobile forms, one size does not fit all. For the best mobile form design, here are a few pointers:

  • Stick to single-column design.
  • Reduce the number of form fields.
  • Beak long forms into multiple steps.
  • Put field names above the field.
  • Utilize masks and limiters to prevent errors.
  • Highlight errors if present.

Omada does a great job with their form: it’s easy to get to, the instructions are clear and its submission button is friendly, which allows it to stay true to the brand’s overall appearance.

There are other ways to make forms easier, including auto-fill and scanner capabilities—simply use what you think is best for your business and your user.

| Contact Us Omada Health

Make a Great First Impression

This brings us to general do’s and don’ts to ensure you represent your site in the best way possible:

  • Don’t: Slow your load time—it’ll negatively impact your authority.
  • Don’t: Use pop-ups—they’re too difficult for a small screen.
  • Do: Make it easy to call or get directions to your business.
  • Do: Make your CTA’s attention-grabbing.
  • Do: Let your design interact with your user with animations and micro-interactions.
  • Do: Provide e-commerce search results quickly (and make them easy to filter).

Taking all of these points into consideration will help you create a dynamic, user-friendly mobile site that your site visitors will love interacting with. Happy designing!

Sign up for our Newsletter