Share this!

The importance of having a mobile website has skyrocketed in recent years due to the prevalence of users browsing the web with smartphones and tablets. According to a study by KPCB, a Silicon Valley venture capital firm, 15% of global Internet traffic is made up by mobile users, with a likelihood of increasing by 1.5x per year

[i]. Mobile devices, with their smaller screen widths and higher resolutions, cannot properly display the footprint of most standard full websites. For optimal content viewing, companies need to design a separate mobile site or transform their mobile presence into a responsive site which can easily be displayed on any device.

Below are five considerations companies need to take into account when designing mobile websites in order to efficiently display content for users.

1. Simplify the Design

Mobilize Your Website - Simplify the Design

The simplified design of the Anthropologie mobile site allows users to quickly and easily access information.

While your full website can be feature-rich and loaded with all the bells and whistles, keep in mind that the design of your mobile website should be simple and to the point. Users who access websites from their mobile devices while on-the-go often want to find information immediately and can be quickly irritated or driven away when what they are seeking is not easily found or apparent on the page.

When designing your mobile website, do:

  • Include easily identifiable branding for your company, such as a header image with a logo
  • Logically section your content into different pages so users can quickly understand what information and value your mobile website provides
  • Include a menu so users immediately understand which section provides which content
  • Include the most important information users want to access on-the-go and ensure that it can be located and read through quickly
  • Size your text and images to display comfortably on mobile devices
  • Include a link to your full website

Avoid:

  • Requiring users to “pinch and zoom” to read text or view images
  • Putting too much information on one page that is difficult to read through
  • Adding a large image to the top of your pages that requires users to scroll down for content
  • Including fancy functionality like Flash plug-ins which may not work on all devices
  • Full page app callouts; limit ads of all kinds to small banners

2. Display Responsive Content

Mobilize Your Website - Display Responsive Content

Think Geek buttons and images are responsive to best fit whatever screen the site is viewed from.

While having a large variety of mobile devices to choose from is excellent for consumers, designers must take care to ensure their mobile websites look excellent on all screen sizes. Whether accessed by a first generation iPhone, a larger screened Galaxy S4, or a tablet, the content on mobile websites should always be sized appropriately.

Images and form fields should stretch to the width of the screen and never be statically sized. Hard coding the size may appear non-problematic when viewed on a mobile phone, but appearance suffers when the page is accessed by a tablet. While the text automatically resizes and stretches to view comfortably on the larger screen, a statically sized image or form field will not resize and appear much smaller than the rest of the content.

3. Size Your Interactive Content Accordingly for Fingertips

Mobilize Your Website - Size Your Interactive Content Accordingly for Fingertips

Navigation on the Sephora mobile site is sized with users in mind.

Make navigation convenient! Always assume that users do not have a stylus to help them tap on buttons or links embedded in pages. With that consideration in mind, make sure all buttons are large enough to be easily pressed with fingers. If a client’s requested design dictates that buttons should be on the narrower side, consider padding the top and bottom of the graphic to expand the vertical space it takes up on the page. For example, if you’re designing a vertical homepage menu, you may wish to add white space between the buttons so there is less chance for users with large fingers to tap on the wrong one accidentally.

4. Make Sure Your Content Actually Works on Mobile Devices

Mobilize Your Website - Make Sure Your Content Actually Works on Mobile Devices

YouTube has optimized their videos to play on any mobile device.

It seems so obvious, but it’s sometimes overlooked: All the content on a mobile website should actually work on a mobile device. There are few worse things than seeing a “Sorry, this format is not supported” when searching for information. For example, if your mobile website links to a video or has one embedded on a page, ensure the video actually can play on a phone and tablet. Keep in mind that not all mobile devices support the same types of technology that standard web browsers do; Flash is a great example.

Be sure the content is optimized for mobile viewing too. Going back to the former example, all videos should be properly encoded to play and resize for the device being used to access it. When a user plays a YouTube video on a laptop, the width of the viewer is extended to fit a larger display. If that same video is accessed from a mobile phone, the viewer is automatically resized to accommodate a smaller screen in either portrait or landscape orientation. All content on your mobile website should be accessible in this way.

5. Make Interaction Easy

Mobilize Your Website - Make Interaction Easy

The Verizon mobile support site allows users to chat, call, or email representatives at the click of a button.

If users can access company contact information on a mobile website such as a phone number, email address, and/or company address, make it easy for them to use this information. Add click-to-call (tel:) and click-to-email (mailto:) code around phone numbers and email addresses; when users click on these links, their mobile devices will prompt them to dial that specific number or write a message to that email address. If a company address is listed, include a “Map This” link which will take the user to a service like Google Maps for directions to that address. It reduces the amount of steps users need to take for these interactions, adding convenience and a better likelihood of this functionality being used.

As of this past May, 56% of American adults own a smartphone[ii] with which to access the web and that number is only poised to continue its upward mobility. Companies that choose not to take note of growing mobile trends and use them to energize their mobile presence are likely to see consumers drift to their more mobilized competition. By keeping these five considerations in mind, designers can ensure content on their mobile website projects will be easy for users to access, peruse, and interact with.


[i] http://www.kpcb.com/insights/2013-internet-trends
[ii] http://pewinternet.org/Commentary/2012/February/Pew-Internet-Mobile.aspx

Share this!