by Kole McRae, marketer with web design house - 9th sphere
When designing a mobile website, it is important to understand just who the end user will be. This will essentially help you design around your customer, creating an experience that is easier for them. You want your mobile website to be quick and easy to access and navigate as well. If this is a first attempt at mobile website design it is easiest to modify your existing internet site by making it compatible for mobile devices. Of course, this will mean changing the layout, design, and construction. However with some practice and continued improvement, you will master the art of mobile website design. Below are seven things to in include in your mobile website design.
1. Your mobile site must use CSS for the layout to maximize compatibility for mobile devices.
It is best to avoid tables or other objects that make navigation on the different sized screens of mobile devices.
It is important to design your mobile website with a fluid layout for the user.
2. Make sure to put the information that the user needs, and that you want them to see at the top of the page.
Since navigation can be tedious and a bit slow on mobile websites, items such as site search and navigation should be on the top.
In this way, you are making the website design easier to navigate for visitors.
3. Use XML or XHTML with a character encoding set at UTF-8. This will allow for proper set up, and easier site navigation.
Also, keep in mind that most mobile browsers do not support plug-ins or extensions.
4. Keep in mind that mobile websites are made for finger browsing, meaning that targets should be a minimum of 30 to 40 px in size.
You should also use whitespace in-between targets to allow for fingers to hit them and ease click-ability.
5. Since mobile devices are often running at 3G or 4G speeds, time is important.
Do not include background images, as they interfere with visibility of website material, and make downloading take longer. Also, less is usually more, so it is best to avoid unnecessary graphics.
6. If you must use icons or graphics, it is best to compile them into one file and use CSS to position them on the website page.
Doing this will reduce the number of HTTP requests that the device has to make, thus making it faster to download and navigate.
Reducing the size and quality of images slightly also helps with download time.
7. Forms can be difficult and frustrating to operate on a mobile website. Text is difficult and time consuming to enter.
For ease of use, streamline the form process by making the number of screens to get to forms as little as possible.
Also, to save space, the forms should be top aligned as opposed to being aligned to the left.
It is important to note here, that giving the user the option to remember the data from forms on their next visit will reduce the wait time on their next visit.
If you are ready to build your website, think how you can incorporate these ideas successfully!
Kole McRae is an intermediate internet marketer with Toronto, Canada based web design firm, 9th sphere. He’s an online marketing specialist with experience in SEO, PPC, and social media.