Dec
23

29 Tips for Mobile Website Design

How to Make Your Website Mobile Friendly

website design Hawaii

MOBILE BALLET: Responsive design creates websites suitable for all devices.

It is actually more difficult to create a designing for mobile than it is to create a desktop version.  That’s because there is simply so much less real estate to work with.  Following these guidelines will help provide your mobile customers with a satisfying user experience.

Homepage

  • Call to Action — This is the single most important element of your website.  It is the action that you want the consumer to take.  Therefore, make sure that it’s easy for your users to find them.  Put the call to action graphics and buttons in an obvious place where they cannot be missed.
  • Menus — Mobile users have a lot less patience than desktop users do.  They do not want to scroll through a long list of options to find what they want.  Present the fewest number of menu options possible and make the categories obvious and distinct to make it easier for mobile visitors to navigate.
  • Navigation — Users should be able to access the most important content in one click from the home page.  This usually involves using the three line “hamburger” button in the upper right.  A back button should be at both the top and the bottom of each page.
  • Homepage Access — Be sure that it is always easy to get back to the homepage without having to hit the back button multiple times.  Be sure that the top banner logo allows users to retreat back to the home page.
  • Video — A lot of text on the home page of a mobile site is not a great first impression.  Better to include a video to engage users right away.
  • Sale Promotions — it is tempting to hit users with prominent display of sale items on the home page and this is fine so long as the short term promotions do not interfere with the navigation or most important call to action.

Site Search

  • Site Search Boxes — If your site is a large ecommerce or information site, visitors will want to be able to search within your site search box.  Make sure it is prominent, visible, and at the top of the page.
  • Misspellings — it is certainly more difficult to type in a search item in a search box on a mobile phone.  Make it easier on your customers by adding misspellings and auto-complete.
  • Guide Users — To get better search results, ask as many questions upfront as possible.  For instance, a shoe site might ask for sizes since showing shoes that are not available in a particular size probably is not going to do the customer much good.

Registration

  • Let them Visit First — it is often kind of annoying when you walk into a retail store and the clerks are immediately asking you what you are looking for.  In most cases, you just want to look around first.  Same with your website.  Don’t ask them to register before looking for the product they are interested in.  Registration is a turnoff.  Engage them with an interesting product first.
  • Guest — Permit guests on the site.  As much as you might want the user’s information, some simply do not want to give it to you and if you demand it, you’ll likely get false information anyway.  Let them purchase without registering.  After using the guest registration and making the purchase, ask them again to register, but this time give the user a good reason why they should register such as receiving email discounts.
  • Convenience — If it’s a return visitor, remember their information to make it more convenient when checking out.
  • Use Tap to Call — Some aspects of the checkout process might be confusing to some users.  Others may be nervous about providing their personal data online.  Therefore, you should always allow for a tap to call help button during the checkout process.  If your business is too small to allow for 24/7 live operators, at least provide a recorded IVR program to get leads to call back the next business day.
  • Use Tap to Text — Same as tap to call, although simply touching a button will enable the customer to send a text message to the business.
  • Use Tap to Chat — Initiate an interactive chat service with the business.
  • Convert on Another Device — It can be difficult to fill out long forms on the small screen of the mobile phone.  Allow the customer to be sent information via email to convert the process when they are on a desktop.

Forms

  • Short Forms — Just ask for the information that is absolutely needed and nothing more.  You can collect more details later.
  • Information Entry — If the field requires numbers, such as a phone number or zip code, automatically shift the user’s mobile phone to the numeric section.
  • Use Toggles — A toggle is easier to navigate than a dropdown.  Users will prefer using them.
  • Calendar — People often do not know what date it is, but they usually know what day of the week it is.  Offering a visual calendar for events and travel sites make it a lot easier on the mobile user and will help them make less mistakes on date selections.  It also solves the problem where much of the rest of the world puts the date first and the month second as opposed to North America where the month always comes before the date.
  • Label within Text Boxes — Your site will be dealing with many different sizes of mobile devices and screen sizes.  A mobile user can easily get confused, often not knowing whether they should use the input copy at the top or bottom of the box, for instance.  That’s why you cannot fail if you have the labels inside of the boxes.
  • Efficient Forms — When entered, the zip code, for instance, should auto-fill the city and state to reduce the amount of fields required.  Put the zip code form before the city and state to save time.  Do the same in Canada, but remember that Canadians use alphanumeric postal codes instead.
  • Skip Ahead — When the form is filled, automatically have the cursor jump to the next field box.  Of course, you cannot do this for a name or address, but you can do it for phone numbers and zip codes where there are always a standard number of digits.

Usability

  • Test — it is critical to test, test, and test more.  Don’t just use the people in your office; they are probably too close to the product to find errors that outsiders may find.  There are online services that will enable you to test on a range of devices without having to purchase all of the devices.
  • Pinch and Zoom — A good mobile site should never require the user to pinch and zoom to see items.
  • Expandable — While a good site will avoid pinch and zoom, it’s great to offer expandable images, especially on ecommerce sites.
  • Portrait & Landscape — Whatever is used on your homepage should be used throughout the site.  Don’t make users turn their phones between portrait and landscape!
  • Windows — Users should never have to open new windows on mobile.  it is a pain for them and will help you lose the sale.
  • Desktop Site — Some users may prefer using the desktop site to the mobile site for whatever reason.  Do not deny them the ability to use the desktop site.  But, do not label it “full site” either.  If you do label it “full site,” users tend to choose it, fearing that they miss out on something, and then they get frustrated, because it does not look great on mobile.  Use the term “desktop site” in the footer to denote the site instead of “full site.”  And, do not always link back to the home page of the desktop site; it’s better to link back to the most relevant page on the desktop.

Technical Checklist

  • Configuration — Make sure that your configurations are correct and you are taking mobile users to the mobile site and desktop users to the desktop version.  This sounds basic, but it happens.
  • Landing Pages — Landing pages often work best on mobile where the theme can be exactly based on the mobile advertisement or source of the click through.
  • Analytic — Ensure that your analytic tools are tracking both mobile and desktop separately.

Comments

comments

Follow us on Twitter! Follow us on Twitter!
Follow ATS Mobile on Twitter

Recent Posts

Recent Comments

Archives

Categories

Meta

Social Widgets powered by AB-WebLog.com.