Mobile Website Designers Need to Do Less

Posted by Amy Samuel on 08/02/2011

If you are a mobile website designer you need to do less. Less design, less code, less navigation, and less information. The less you ‘do’ the better the experience for your mobile website users.

The human eye recognizes color, shape, then text. Let’s apply that principle to mobile website design.

Mobile Website Color

Recently, Back40 Design completed a Norman website design project, The Lloyd Noble Center. The full and mobile websites shown below are great examples of using color to convey brand identity. If you are designing a mobile website, you can quickly communicate the brand by using color. Coca Cola uses red. Best Buy uses blue. OU uses crimson. Color communicates to the user that they are on the right website - and reinforces the brand.

Brand Color on mobile websites:

  • Doesn’t add a bunch of code
  • Is not affected by screen size
  • Doesn’t affect load times

Stillwater Convention & Visitor Bureau Desktop & Mobile website

Mobile Website Shape

The next element of design the human eye recognizes is shape. When I say shape, I mean logo, the shape that helps identify your brand. The example below, a new Stillwater website design project, is the Stillwater Convention and Visitor Bureau.

When designing the space for a logo on a mobile website, the goal is to keep the logo elements small to facilitate page data transfer (page loading) yet large enough to be easily recognized. Also, a smaller logo will allow increased vertical screen space for other pertinent items.

For Visit Stillwater we placed the logo with no modification other than resizing it. True, the top of the guitar could have been clipped off and the word “visit” removed to save a little vertical space. For this mobile design project which helped launch Visit Stillwater’s logo, newly designed by Back40, sacrificing a little vertical space to reinforce the brand was the best option.

Also notable about this mobile website and logo design is the retention of the mounds of red earth beneath the logo type which creates a memorable point. This design element is common to both the full version and mobile version of the website, once again supporting the brand through form and shape.

Lloyd Noble Center Desktop & Mobile website

Mobile Website Text

As mentioned above the vertical space (before scrolling is necessary) is an important consideration when designing a mobile website. This vertical space limits the amount of text that should be used in the masthead and navigation.

The full website tag line reads “original home of red dirt music” and on the mobile version we replaced the tag line with the word “mobile.” We chose to modify the tag line under the logo for two reasons. First, the amount of the text when reduced in size made the tag line difficult to read. Second, the word “mobile” helps to identify what version of the website is being viewed for tablet users who may want to switch to the full website.

Easy to use mobile website navigation is presented with two tiers of information. The first tier of navigation are links for ‘urgent users.’ The second tier of navigation are links for ‘casual’ or ‘return’ users and target specific areas of interest. The links in the second tier are graphic files (the horizontal row of icons and text) and are not based in HTML. Although the graphic files slow data transfer, the decision was made to share design elements between the site versions and further reinforce the brand image.

And finally, the ‘menu button’ option is conventionally placed in the top right corner of the mobile design and allows the mobile user to view a more comprehensive listing of the mobile website pages.

Less Is More

As you can see less is truly more even on a mobile website design. Our web team works very closely to make all of these mobile web decisions based on things as simple as color, shape, and text to accomplish branding goals for our clients. It can be a challenge to adapt a full website design down to a simplified, effective mobile website while still clearly communicating our client's brand, but our mobile designers are thinking ‘less’ and doing more.