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
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,