7 Things to Include In Your Mobile Website Design

by Kole McRae · 2 comments

Mobile WebsiteWhen designing a mobile website, it is important to understand 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. The following are seven things to in include in your mobile website design.

1. Your mobile side 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 40px 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, 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, how do you think you can incorporate these ideas successfully?

Post Written by Kole McRae from http://www.9thsphere.com Web Design & Online Marketing Firm

QR Code - Take this post Mobile!
Scan this unique QR (Quick Response) code with your smart device. The QR code will open this url on the device for mobile sharing and storage.  What is your QR Code Marketing Strategy?
Mobile Marketing Video Training Course Chicago Mobile Marketing - 100% FREE Text Marketing Training, Mobile Website Training, Mobile App Training and much more...
Mobile Marketing Training
  • FREE Mobile Marketing Training Videos, Text Marketing E-Books, SMS Marketing Implementation Guides, Mobile Tutorials, and much more...
  • Instant Access - Sign Up Now!

Your privacy will never be compromised

Categories: Mobile Marketing Mobile Website Design

Paul Callington December 23, 2012 at 11:47 am

Absolutely agreed! I changed the background images and related table in my mobile website based on the suggestions.Navigation has become easier and also i could see an increase in my sales through mobile website.Thank you very much!

Ben Ladkin December 28, 2012 at 1:17 am

Great pointers for designing a mobile website. With the data rates so expensive, users are going to hate you if they have to make huge downloads. Another thing to keep in mind is that despite newer mobile devices have huge 4.5 and 5 inch screens majority of mobile device still have 3 inch screen and this should be the primary target screen size while designing the mobile website.