Five Tips for Designing your Next Mobile Theme


Five Tips for Designing your Next Mobile Theme

Today, mobile responsiveness is one of the most pressing matters for digital marketing and SEO needs. Therefore, it's absolutely pertinent that you integrate stellar usability and design into your mobile platforms. We recently designed a new mobile theme for one of our client’s websites. Here’s a quick list of some important things to consider when taking a site from the big screen to the small screen:

1) Prioritize, prioritize, prioritize

Before you even start sketching out the mobile theme, narrow site content & functionality to a few critical tasks that users needed to accomplish. Put these critical tasks front and center, then design the rest of the mobile interface around them. Every extra unit of information in the interface theme competes with the relevant units of information and diminishes their relative visibility.

2) Design for Small Spaces

On a small screen, every pixel counts. If your think of your website as a sprawling ranch house, then your mobile theme is like your studio apartment in the city. Reduce clutter by eliminating unnecessary images or copy – there’s no room for them. Use white space to open up the interface and group related elements, making the screen easier to scan at an arm’s distance. 

3) Rule of Thumb

A thumb is bigger than a cursor. When designing for a touchscreen device, links should be large enough to support the thumb of an average human being. Eliminate error-prone conditions by making buttons a little larger and increase the space around links to make the targets easier to hit.

4) Get the labels off the field

In an effort to get more information in a smaller space, many designers opt to put the field label in the field. This is a bad idea for two reasons:

  1. It relies on JavaScript, which not all mobile devices support.
  2. The label disappears once the cursor is in the field, which taxes the user’s memory load. The user then has to recall what they are supposed to enter. “Do I log in with my user name or my email address?” 

Login Example





5) Provide a clearly marked "emergency exit"

No matter how well you design the mobile theme, some people just want the site that they are used to. To support user control and freedom, make sure you include a link to the full site in your mobile theme. This way, you've catered to all user preferences. 

Your first consideration should always be the user. Although you're limited by the smaller space, it's worth putting in the extra effort to make things easier on your audience. Remember, customers with a positive experience will be more inclined to give you those conversions that you need.

Photo credit

Related Posts

Designing for Mobile First, Not Last

Tabatha Patterson
Read more

Free Drupal Theme: Jackson (NineSixty Sub-theme)

Brent Bice
Read more

If You Didn't Design for Mobile, Redesign for Mobile

Julie Miller
Read more

Drupal Support for Mobile Devices

Read more

Choosing a Drupal Theme That's Right for Your Business

Brent Bice
Read more

Design For Mobile Or Be Left Behind

Brent Bice
Read more