Social Share
back Blog
16 2011

How to Build a Mobile Website

Posted in Mobile Websites | 0 comments
Mobile Website

How to Build a Mobile Website

If you want to join in on the mobile marketing revolution, at a very minimum you need to have a mobile website.  The mistake most people make is to assume that a mobile website is just like a ‘regular’ one but in miniature.

This is just not true.

Here is an article which explains what you need to look out for in a mobile website:

“A quality mobile experience means the following needs to happen:

  1. The mobile page loads quickly.
  2. The page offers 2-3 clear choices specific to why the user is there.
  3. The design and layout is mobile-friendly.

There is a big difference between a mobile user and a desktop user. A desktop user has a chair, a mouse, and large screens. A mobile user is on the go, has thumbs and small screens.

A mobile user will often be taken to a standard website. And while the mobile browsers will render a standard site OK, remember that this isn’t the optimal user experience for mobile. But before you rush out and build a mobile-friendly website, consider the following…

  • Do your stats support it? Check your web stats and see how many users are accessing your site on a mobile device. The new version of Google Analytics has some great ways to measure this.
  • What information would a mobile user need? Not everything on your website may be necessary. Consider this and develop your mobile site accordingly. Keep it simple, offering only what they need at that moment.

But, back to quality. So, let’s assume you have done your research and your users do need a mobile version of your site. What does a quality mobile site look like? Let’s break our definition of quality down a bit…

Load Time

A mobile friendly site should be developed using the latest standards for HTML and CSS, minimizing what the browser actually needs to do to load the page. In other words, keep it simple.

The design needs to be clean and minimal. Photos should be optimized. Graphics should be clean and necessary. You want to utilize what’s called “responsive design.”  Smashing Magazine has a great article and definition for Responsive Design

Responsive Web design is the approach that suggests that design and development should respond to the user’s behavior and environment based on screen size, platform and orientation. The practice consists of a mix of flexible grids and layouts, images and an intelligent use of CSS media queries.

Your designer/developer should know what they’re doing.  Mobile is the new Wild West. Make sure your designer/developer knows how to build your site to work with all major mobile devices and browsers. It’s no longer as simple as knowing what version of IE your clients use.


Navigation, which is the linking structure of a website, is dealt with much differently on a mobile site than on a standard website. The buttons need to be easy for the user to click (touch), and the choices need to be minimal and relevant.

When a user gets to your mobile landing page, they need to see the main choices you want them to make right away. These choices need to relate to the reason they are at your site in the first place.

If the user scanned a QR code, or used an SMS shortcode to get to your mobile page, their decision to do this needs to be validated immediately. They should get to this page and know right away what to do.

For example, if you have a booth at a trade show, you might consider using SMS to improve your marketing efforts while at the show. So, you have a message on your booth that says “text info to 12345 to get more information about XYX product”.

The users sends this text and receives one back with a link and maybe a short message like…

“thanks for your interest. Here is a link to the spec sheets and some video clips for this product –”

When they click this and end up on your mobile landing page, what do you think they are expecting to see? Yup, a link to the spec sheet and a link to videos. Do you need a bunch of links to other things there? No.

Design and Layout

Designing for mobile is much different than designing for the web. You’re dealing with thumbs. And if you’ve ever navigated a site on your smart phone, you know how frustrating bad navigation can be.

The minimum area required for an optimal mobile link is 44 pixels by 44 pixels. This is what that looks like…

That is about the average area that a thumb needs to effectively select a link. If your links are very small and crowded together, the user will have a hard time hitting the right link and become very frustrated. This is bad user experience.

Give your links room to breathe. Make sure that the user can easily select the link they want. This will require smart design and layout, using color and spatial arrangements to offer the user the easiest navigational structure possible.

The text should be easy to read. Remember, this is a small device; you need to keep in mind that reading here is even more difficult than on a standard website. You want your content to be minimal and your fonts to be large and easy to read.”

For the original article on how to design a mobile website

Designing a mobile website is not hard.  Make absolutely sure that you work with someone who has had experience building a mobile website though or you will end up making expensive mistakes.  In the end, you always need to keep the user experience in mind.  Your mobile website needs to make sense for the user, it needs to be simple and it needs to speak to a user ‘on the go’.

Interested in knowing more about mobile marketing? Why don’t you check out this great resource.

If you liked this article, please share this to your friends or colleagues who might be interested in creating a mobile website.