Mobile Website Home Page Design and Layout Best Practices

mobile home page designCreate a user-friendly mobile web page with design techniques that incorporates ease of navigation, featured content and desired call to actions for your target audience

A mobile home page design should be a lighter, more useable version of your website home page for smartphones and mobile device visitors. With the use of mobile web browsers growing every day, it makes sense to at least develop a mobile home page (if not an entire mobile website).

But many small businesses are not sure where to even begin. When designing a mobile web page, the goal should be creating a great web experience for mobile visitors. You want to make it easy for them to navigate and find your most important information. And you want to make it easier for them to search, locate, shop, contact or connect with your business.

Mobile phone users are typically after quick information. They don’t have a lot of time to scroll back and forth, up and down around your website trying to find out how to contact you or place an order. Other factors like bandwidth or mobile network access issues make it even more critical for your mobile home page site design to be easy to navigate… with your most relevant content featured on the home page.

Creating Content for Mobile Home Pages

When creating content for your mobile home page you’ll want to first determine who your primary customers or targets are that are likely to visit your site from a mobile phone device. Of course targeting your website home page content is not a new idea, but streamlining content for what your target audience is likely to do on your home page is critical for mobile home pages.

Your mobile website home page will not typically have the same content as your full website home page. Mobile website visitors are not interested in flashy home pages with rotating feature images and large graphics. They are most likely not interested in sorting through your latest press releases and product features either. Consider the main actions that your website visitors will need to take (or you will want them to take) and focus your content on those actions.

Mobile website home pages could include actionable content features or CTA (call to actions) like:

  • Contact (with click-to-call or click-to-text)
  • Product search
  • Location search / directions
  • Reservations
  • Place an order
  • Customer login
  • Customer service request
  • Mobile app download
  • Social media connection

To get more ideas on what should be included on your home page, check out your website stats. Google Analytics provides great information about popular content areas of your website that you may want to include on the mobile home page. You should also spend some time visiting some of your favorite mobile websites to get ideas. Look at the big brands (like Amazon, Google, FTD, Lowes or Macy’s) and borrow some design ideas from their mobile layouts.

mobile home page layout menusMenu Navigation Design for Mobile Web Pages

Because screen sizes can vary greatly on mobile phone devices (particularly in width), its best to design your mobile home page with a linear design for easy scrolling up and down the page. Although you will never be able to design for every type of mobile device or phone, you can focus on the most popular ones (like iPhones).

Creating linear menu navigation is a common best practice in mobile home page design. You can place menu items in order of most important and/or alphabetically for easy access.

Interlinking Mobile Home Pages with Websites

Your mobile home page and your regular website home page should be interlinked to give visitors the option of visiting each version. Mobile browsers should automatically detect whether visitors are using a mobile device and serve the mobile version, but having the option of viewing the full website is good for visitors that want to access your full content and functionality.

Typically at the top of the main website home page you will use a link “view mobile website”, and at the bottom of the mobile website version you will use a link “view full website”.

Testing a Mobile Website Home Page

After you have determined your mobile home page layout, content and navigation you will most likely want to tweak the layout after seeing it on a mobile phone device. At a minimum you should test the mobile web page on a few different types of smartphones and mobile devices so that you can make adjustments for any troublesome issues in the layout or navigation.

When testing, you want to be sure that the mobile web design is indeed user-friendly and renders appropriately on some of the most popular smartphone devices. Check with several friends or colleagues to help you out in the testing process.

Designing a New, Full Mobile Website

Simply having a mobile home page may be enough for your business. But if your customers or website visitors will need to shop or interact with your site with a mobile phone more deeply, then having a full mobile website may be a better option.

You will also want to consider a new domain name for your mobile site. Best practices are to use a subdomain that indicates it is a mobile version of your main website (such as www.m.DOMAIN.com or www.mobile.DOMAIN.com).

Be sure to work with a website builder tool that specializes in creating mobile websites. Depending on the complexity of your website (and your comfort zone) you may want to consider a mobile website design firm that specializes in creating mobile sites for your product or industry type. In each case, look for mobile website widgets and apps that can easily plug into your design to enable desired customer interactions (like click-to-call, reservations or online ordering).

The same design best practices used for your mobile website homepage should be used for your mobile website. Make it simple to navigate, linear in design and focus on your most relevant and actionable content.

The following two tabs change content below.

Editorial Staff

This article was written by SBMarketingTools.com editorial staff.