5 Design Tips That Create Killer Mobile Websites

Before creating a mobile website, it’s important to keep one thing in mind—the person viewing the site is mobile.  That may seem like a no-brainer, but it’s surprising how many people forget that simple truth. 

So to a renter on the go what’s most important?  Usability. 

Below are 5 great tips that will help you create a killer mobile website that focuses on a renters usability of the website. 

 

#1 - Simplify The Content Of The Website

As a general rule when converting a regular website into a mobile friendly version, it’s important to trim down the amount of content to simplify the entire site.   Mobile renters do not have the time, or the desire to read anything and everything about a company on their smartphone; they just want to get the important information quickly.  Therefore, deciding on what content renters will be most interested in is the key to creating a customer-centric website.

So how do you decide on what content to keep?

Consider the main reasons that renters are visiting a mobile website.  They are either searching for an apartment listing or they’re looking for contact information. Therefore, displaying content that provides this sought-after information is important when trying to increase the usability of your mobile website.  All other content could prove distracting to a renter, and should be added with caution.  Rather, you may consider adding a link to access the regular website that will enable renters to have the option of searching for additional information if they so desire. 

The image below shows Osgoode Properties' mobile website, www.osgoodeproperties.com/mobile.  You will notice that the navigation of the mobile site is extremely simplified compared to that of the company’s regular website.  This results in a very easy to use mobile website.

 

#2 - Simplify The Navigation Of The Website

Renters are accessing a mobile website to locate information rapidly while they’re on the move, so providing them with easy to use, simplified navigation is the key to allowing them to find the information that they seek quickly. 

Navigation options should be placed towards the top of the webpage so that renters see it immediately when loading the website.  Navigation that is present below the fold of the screen requires renters to scroll, which takes more time and hinders the usability of the website. 

Text within the navigation menu should be easily legible, so that renters can read the options with their phone a few feet away from their face.  This means that horizontal menu bars typically can only house 4-5 links.  For additional options, it’s best to go with a vertical drop down menu.  Just remember though that content of the website should be simplified, so adding too many menu options just adds to the complexity of the website.

Placing a button on the homepage that directly accesses the apartments for rent page is a great idea, as most renters will be accessing the website to look for apartments and/or apartment contact information. 

The example below illustrates how Drewlo Holdings (www.drewloholdings.com/mobile) uses their navigation to direct users to the apartments for rent page, while conveniently using a tucked away drop down navigation menu in the top right hand corner of the screen. 

 

#3 -Make The Website Easy To Read

Renters who are viewing a website on their smartphones are already battling with a small screen, so mobile website designers should always make sure to incorporate elements into the design that help to make the text easy to read. 

Important elements to add include:

• Bulleted lists
• Tables
• White space around important text
• Large buttons for hyperlinks and important navigation

Using all of these key elements throughout the website will allow renters to focus on key information and will increase the usability of the website. 

Always remember that adding big blocks of text can create a confusing and unsatisfying experience for the renter.  Therefore, be concise with your choice of words.

Below is an example of how Panoramic Properties (www.panoramicproperties.ca/mobile) uses bullet point within the mobile website to list features of the building.  Notice how the white space around the bullets makes the text easy to read and skim through.

 

Screen sizes seem to be increasingly diverging as more and more mobile phone models hit the marketplace.  Since there are a multitude of different sizes of screen resolution, and the multimedia compatibility of each phone varies, it’s important for a developer to design the website in a way that is compatible with all mobile phones.  

There are three ways that a designer can attack the problem, which include:

1. Keep the website as simple as possible to ensure it performs on all possible devices.
2. Offer two optimized websites—one designed for large screens; the other for small screens—then detect the type of device on the server and route the user to the proper version of the website.
3. Detect the type of device and then using the device’s characteristics, offer an optimized website for each and every device.

For landlords it would make the most sense to build a mobile website using solutions number 1 or 2, as the time and money required to invest in solution three far outweighs the potential usability benefits, as most renters today predominantly access a rental website by iPhone or other Apple device.

 

#5 - Simplify The Usability Of The Website

The mobile browsing experience is vastly different from that of a PC.  First of all, mobile phone users are most likely using one hand to hold the phone, which means they only have one hand free to scroll through the website and to interact with it.  This means that features requiring complex navigation will decrease the overall usability of the website.

Secondly, users will find it harder and more time consuming to type information into contact fields, as the keys on the physical or digital keyboards are small and provoke error.  This means that the less information the renter has to enter, the better the user experience becomes. 

Here are a few tips that will help improve the overall usability of the mobile website:

• Use geolocation technology to locate nearby buildings or to auto-populate a contact form.
• Use selection menus as much as possible. 
• Fill in as much content as possible into any form.  For instance, structure the email address with the @ symbol already in place, and offer a drop down selection menu for the email extensions, such as (.ca or .com)
• Limit contact information to the minimum fields that are required.

Keeping these tips in mind will help make your mobile website user friendly.

 

Summary

1. Simplify The Content Of The Website
2. Simplify The Navigation Of The Website
3. Make The Website Easy To Read
4. Build For The Masses
5. Simplify The Usability Of The Website