Design Services

See Our
Results
Download One Of Our
FREE
Marketing Guides
What is Your
WEBSITE'S SEARCH
Ranking?
Create Your
CUSTOM MARKETING
Strategy

How to Design and Build a Mobile Website

Did you know that in the world today there are more than 5.9 billion mobile phone users? And did you know that roughly one thousand more are added every minute?

Approximately 40% of time spent online is now done through a mobile device. This is the reason why mobile Web browsing is becoming so important.

Mobile and Desktop Website Design

 

Many consumer-driven companies have already seen how promising the mobile platform is, and have already equipped themselves with a mobile website. A mobile website today is not simply a passing fad. It is predicted that in the future, mobile sites will prove to be a necessity, even the new Internet standard. Right now, there are millions of WAP mobile users browsing the Internet. But there is a disparity when it comes to the number of consumer-focused mobile sites that actually load properly on their devices.

There are special procedures involved in designing a mobile Web site. The following article is meant to help you learn how to design and build a mobile website.

Understanding Mobile Website Users

The first step to making a successful mobile website is understanding who will be viewing your site. Mobile website users are usually busy doing something else, like waiting in line, walking through town, or spending time out with their friends. Their main focus is not necessarily your website, so information needs to be quick and easy to access. If it's not, they're going to leave to find what they want somewhere else.

The key difference between mobile and desktop users is that mobile users browse the internet in "on-the-go" situations, whereas desktop users are in stationary and predictable environments.

Mobile Website Development Pricing Packages

At WebpageFX, our team of knowledgeable web developers and creative web designers is fully capable of building and designing a mobile version of your most important online asset, your website.

Features
Basic
Enhanced
Enhanced w/ SEO
Design and build of mobile pages
Design / branding consistent with existing website
Automatic resizing and adjustment
Install / code provided to redirect mobile visitors
Click to email function
Click to call function
Ability to turn mobile site on/off
Location map
Addition of YouTube video (if applicable)
Addition of Google Analytics visitor tracking
Development of mobile sitemap
Setup of web form  
SEO for mobile    
Call tracking number for monthly ROI tracking Additional $200/mo. Additional $200/mo. Additional $200/mo.
Custom programming Call for quote Call for quote Call for quote
Database integration Call for quote Call for quote Call for quote
Initial Investment: $1,400 $2,200 $2,800

How Can I Build a Mobile Website?

Want to create a site optimized for mobile devices or learn the best practices for mobile and responsive web design? Read on to learn about mobile site design and how you can accomplish this for your business.

Some of Our Successes:

Details Increased Website Traffic by
+ 95%
Details Increased Conversion Rate by
+ 37%
Details Decreased Bounce Rate by
- 29%
See how we can help you
Grow Your Business
Want to speak with an expert? Call us at 888-601-5359

The Basic Principles of Mobile Website Design

First, you have to know that the web design methods generally used for computer browsers is not compatible with that of mobile devices. For your site to work well on a mobile handset, it must follow the accessibility design guidelines for building mobile websites, which are set by the W3C.

Mobile phones are sometimes not able to download large amounts of data quickly, and mobile users tend to be impatient or in a hurry, so designing your mobile site for quick load and download times is crucial.

The easiest way to build a mobile website is to modify your existing site to make it compatible for mobile handsets and screens of all sizes, which is called responsive design. If you decide to do this, expect that there will be big changes in terms of layout, design, and construction.

Here are some principles about mobile web design that you should take note of before proceeding.

  • Your site must use CSS for the layout to ensure maximum compatibility. Avoid using tables.
  • It is easiest if your site is coded using either XML or XHTML, with your character encoding set at UTF-8.
  • You have to consider that different mobile devices have different screen sizes. Design and build with a "fluid" layout in mind.
  • Remember to put all the most important information that you want mobile users to see on the top of the page like site search and navigation. It can be time consuming to browse through a mobile site, not to mention tedious to read through. Make your mobile site design convenient for your consumers.
  • Design for fingers. Click targets should be a minimum of 30-40px in size and use whitespace in between elements to ease clickability.
  • Keep download time in mind. Avoid background images… they can reduce readability in certain lighting conditions. Combine smaller images, like icons, into one file and use css to position them on the page. This reduces the number of http requests your device has to make. Lastly, reduce size of images and minify javascript.
  • Forms can be difficult to use on a mobile device. Since text is time consuming to enter, you may want to offer your user the convenience of radio buttons and lists, which they can choose from depending on what they need. Also, reduce the number of screens a user passes through to complete a form. Form labels should be top aligned rather than left aligned to save space.
  • Forms should require the minimum amount of data input and should remember the data for the next time a user visits the site.
  • Most browsers don't support plugins or extensions, so they should not be necessary for your site to display properly.
  • Lastly, the phrase "less is more" holds true to mobile design. Avoid using unnecessary graphics.

To find out more about designing for mobile websites, view the Slideshare presentation below:



View more presentations from WebpageFX.

What Do Mobile Web Users Look Like?

Mobile Internet users are constantly on the go. They need information quickly so they can get back to their busy lives. Basically, they are just busy doing something else, and your site is not their priority. Their main focus isn’t always the website they are currently viewing, so the information they're searching for needs to be quick and easy to access. Their short attention spans can really affect the design process for mobile websites.

When it comes to comparing mobile web users and desktop web users, there are key elements that differentiate them. Mobile web users are constantly in “on the go” situations. They are standing up, maybe even checking their device while walking. They are in shorter timed scenarios where they have just a minute or two to check how things are going online. They aren’t there for the long haul, and they put their devices down just as quickly as they pulled them out of their pocket.

Desktop users are far different. They are most likely in a predictable environment that consists of the user sitting down or in a stationary spot. The two users are very different from each other and both desire totally different experiences when online. So it can be a struggle to design a website that meets both of these demands.

When Planning for Mobile

There are many different things you need to do before you actually start designing and building a mobile website. The first thing you need to do is just ask a few basic questions that will help put you in the right direction:

  • Who is using your site?
  • What are your users doing when they get to your site?
  • Where is your site being accessed from?
  • When is your site accessed?
  • Why are users coming to your site?

The key here is to zero in on the main focus of the website and make that prominent and accessible. Make it easy for the mobile web user to find what they came to see – the main focus.

User Friendly Guidelines for the Mobile Web

Design for Fingers

Mobile web users generally don’t use a mouse and keyboard. Instead, they have to use their fingers for mobile web navigation. They use big fingers, little fingers, fat fingers and skinny fingers. Everyone’s fingers are different! It may not be easy, but you need to keep these different types of fingers in mind when designing your mobile website. Here are a few fingertip tips to think about while you design the mobile website:

  • Fingertips are generally between 40 and 80 pixels wide meaning that click targets should be a minimum of 30 to 40 pixels in size. Those small buttons and links are really annoying to poke and mobile users on the go don’t have time for that!
  • Avoid using hover events – active events are more useful for the user experience and function the way a fingertip might expect.
  • Whitespace is good! Using more whitespace increases the space between clickable elements and decreases the amount of frustration a mobile user experiences if they click on the wrong thing by accident.

Optimize for Vertical Scrolling

Vertical scrolling has become second nature to users based on past experiences with websites. It is almost second nature and is expected from mobile web users as well. Users are generally already familiar with vertical scrolling instead of horizontal scrolling, and it reduces the chance that users will miss content on your mobile website.

Keep Download Times in Mind

Download times are crucial for the mobile web user. Remember, they have short attention spans and they want information quickly and easily. They don’t have time to wait for large images! With this in mind, avoid those large background images. Background images only increase download times and can actually reduce readability in certain lighting conditions. For regular images, you might consider combining smaller ones into one file. You can then use CSS to correctly position them on the mobile website. Properly using external stylesheets and javascript can also help cut down on load times.

Mobile Forms

Make sure your mobile website users are converting on mobile forms by designing with mobile in mind. Here is a list of mobile form design tips:

  • Using native web form controls is very important as that is what the user is accustomed to.
  • Minimize the number of screens they visit to complete a form. The longer a mobile user has to be there, the more likely it is that they are going to leave before completing the form.
  • Mobile users hate it when they accidently type in a wrong password. Allow them to display the password characters with an option box and that will cut down on the number of mobile viewers that just give up because they couldn’t type in their password correctly.
  • Using HTML5 form input types (email, url, number, range, date pickers, search, color) also assists the mobile web visitor in their form completions.
  • Don’t use side aligned form labels. This takes up a lot of screen space and it doesn’t align with the vertical scrolling optimization. Instead, try using top aligned labels for all your form inputs.
  • Minimize the amount of data a user needs to input when possible. Entering data requires the user to focus on the input since websites need exact data. This means it is important to require less data from the user which is possible in a number of different ways. One way is to simply remember data that the mobile web user has previously entered. You might also use drop downs instead of input fields which are easier to select than entering information on the keyboard. Also, collecting data automatically when possible can save the user a lot of time as well.

Miscellaneous Guidelines

Remember, most mobile browsers don’t support plugins or extensions. Removing these will increase user engagement and the site will work properly. Search boxes and navigation need to be prominent and easy to find as users are usually all over the place on mobile websites. Less is more, so try avoiding unnecessary graphics where possible and focus on the main point. A good little tip to use when building a mobile site is to just ask yourself, “Is your site useable with little to no CSS?”

A Closer Look at Real-World Mobile Site Examples

Youtube

Youtube Desktop Version
Youtube Mobile Version

CNN

CNN Desktop Version
CNN Mobile Version

Clarity Way

Clarity Way Desktop Version
Clarity Way Mobile Version

Yuma Dental

Yuma Dental Desktop Version
Yuma Dental Mobile Version

 

How to Build a Mobile Website

Are you the advantageous type who wants to build a mobile site themselves? Here's what you need to get started!

Building a mobile website is very similar to building a full scale website. They both use HTML, CSS and Javascript, and can be built with your favorite web development tool. Most mobile browsers also support HTML5 and CSS3. However, here are a few things that need to be added to a mobile page to make it display on a mobile device.

A few tags are needed in the <head> section of the webpage to let the browser know that the page is ready to be viewed in a mobile browser:

<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<meta name="viewport" content="width=device-width">

More information on these meta tags can be found here.

Also, if you want your website to detect what type of device is trying to view the site, you will need to create a php script that detects the incoming device and changes the website layout accordingly. There are many available solutions out there and can best be found through a browser search. The most important thing is to not base the script off of a list of devices (iphone, android, windows phone, etc.), but rather detect what type of device is viewing the page. Mobile devices come and go updating lists can get tedious.

It is difficult to make your mobile website display the same on all mobile devices. The best solution to keep your mobile website as clean and simple as possible and to make sure it has design and functionality fallback options for older mobile devices.

Mobile and Responsive Design Resources

Smashing Magazine has a great list of resources that you can use to learn about building mobile websites, and the guidelines that should be followed when developing for mobile devices like cell phones and tablets.

It's Time to Go Mobile

As you can see, there's a lot to consider when designing and building a mobile website. The principles of mobile design are different than those of conventional web site design. If you do not have the time or patience to learn new coding practices, consider hiring a firm like WebpageFX that specializes in mobile web site design.

Ready to go mobile with your website? Call 888.449.3239 or contact us online today to get started.

Contact us for a free quote