How to build a mobile website

What is a Mobile Website?

Formerly called a WAP site, a mobile website is just like a regular website, but for your mobile phone.  Because far less bandwidth is available to a mobile phone, and because your mobile phone screen size is only a fraction of what is on a computer, mobile sites are generally tiny compared to their larger brothers.

How do I Build a Mobile Website?

If you work for a billion-dollar organization perhaps your website design team can cook up something.  That will be addressed at the bottom of this post – having a project team.  For the rest of us who would rather outsource the work to a company that specializes in mobile website design you’re in luck.  The company I work for, 2ergo, does just this.  There are other companies but few will work as hard to help you plan and execute the site that meets your needs.  But this post isn’t about 2ergo – it’s about your mobile website.  Before doing anything, you need a plan – and this is it:

The Mobile Website Plan

Determine if there is a business case for having a mobile website.

• What value will it bring to your company?
• Does it matter or do you just want one for the sake of wanting one?  That’s fine, if you have the resources.
• Are you planning to market yourself to a younger demographic?  Mobile is ideal.
• Perhaps you work for a news organization with a new challenge: fewer staff, a diminished budget, and an audience who expects their news wherever they are.  Mobile is a perfect solution.  Fewer reporters can simultaneously publish across many media, reaching the widest possible audience.

Determine who your audience is.  They’ll be the same folks who visit your regular website.  Having said that, mobile sites are much smaller in terms of page numbers so those of you who work for large organizations may want to target subsets of a larger audience.

Decide what content your audience would like to see.  This will be self-evident having done the above.  For example, if you work for a news organization or are a blogger putting RSS feeds to dynamically create tons of pages of fresh content is a great hand-off way to get started.

Given the content your target audience would like to see, determine your budget.  The simplest sites will simply pull RSS feeds from your main site, have a logo and maybe a few links in the footer.  Larger sites will have more moving parts, such as downloading ringtones and wallpapers, streaming video, display ads, encourage end-user participation like having trivia or polls, etc. Sometimes each of these adds to the budget, while other times they may not.  Best to decide beforehand!

• Do you have enough financial resources to sustain a mobile site for since months, a year or two?
• How much content creation will you be doing in-house and/or outsourcing?
• Are you creating lots of sites for your own clients as a ‘reseller’?
• Do you plan to add value to the site by tying in SMS capability? (2ergo does that too!)
• Are you thinking of heavily promoting/marketing the site?
• Will you be adding advertising?

2ergo’s Mobile Site Builder

If you’d rather not code from scratch, find a web-based tool to allow you to easily create all of the pages on your site.  I’m recommending 2ergo’s Mobile Site Builder, not only because I work there, but because I know how hard everyone works to ensure it’s far and away the best tool to help you build your site.  It’s like WordPress for the mobile world.

For the Designer

• You DO NOT need to know HTML or any other web programming or markup languages if you want to use a web-based mobile site builder.  But if you’re a designer, then you already do.
• Ensure that the most relevant information is at the top of the page so it’s easily accessible to users. It’s painful to scroll down forever on your mobile phone.
• Ensure you keep your mobile site to a minimum number of pages. Most people won’t click more than a few times on your mobile site so you don’t want to bury important information three or four pages down.
• Go light on the graphics.  Mobile sites are less about presentation and more about information.  Using fewer graphics that are lower resolutions will ensure quicker load times.  As a result people will remain on your mobile site longer and be happier for it.  Until fast 4G networks are commonplace (2015) keep your site lean.
• To that end, lots of people don’t have a flat-rate plan on their data.  Keeping your graphics both small in resolution and light in terms of kb will keep their bill down and keep them coming back.
• For presentation, think in terms of a single-column layout – two columns at the most.  Your mobile website doesn’t have the same screen as your laptop.
• Best to avoid JavaScript for now as lots of phones don’t support it.  Therefore, if you decide to use analytics that require JavaScript – like Google Analytics – know that there will be little accuracy in their reports.
• Avoid linking to files that require downloads, printing.
• Remember, there is no mouse.  Design as such.
• Don’t use graphics with gradients as these generally don’t show up well on non-smart phones (or BlackBerrys)
• Avoid using frames because most devices don’t support them.
• DeviceAnywhere is a service that allows you to test your site on hundreds of different phones.  It’s not a free service – and I know of none that are.  Best to test your site in the morning EST as their service begins to slow later in the day when more designers/developers come online.  If you know of emulation software that is comparable, hit me up in the comments.

For the Developer

• Validate RSS feeds to ensure they show up properly before you put them on your mobile website.  RSS 2.0 specs are here.
• Again, avoid JavaScript.
• Add ‘redirect’ code to your main website.  2ergo has code that you can put on your website that’ll automatically detect whether someone is using a phone’s browser and direct them to your mobile website.  Any reputable company will.
• User-Agents help you code to specific device types.  Mobile Site Builder does this automatically.
• Tell Google to index your site.
• Use Admob’s Analytics, which is currently the best out there.
• The industry has a long list of best practices for the serious developer.

If you’re NOT using a web-based online tool, like Mobile Site Builder, there are two more things to consider, edited from Google Groups:

• Use valid mobile markup.  XHTML Basic and XHTML Mobile Profile are two commonly used mobile-specific markup languages for mobile web sites.  They require particular syntax and allow a certain vocabulary of tags which is different from what HTML allows.  For example, (1) markup tags must be closed, (2) <font> tags are allowed unlike in HTML, and (3) frames can’t be used.  Following these standards will ensure that a wide array of mobile devices can parse and render your page as you intended.
• Use an XML header and DOCTYPE, and specify character encoding.  These items make it clear that the page is a mobile page and also indicate which character encoding it uses.

<?xml version=”1.0″ encoding=”UTF-8″?>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML Basic 1.0//EN” “http://www.w3.org/TR/xhtml-basic/xhtml-basic10.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en”>

• Validate your markup so that your page conforms to the markup standard you have chosen.  You may also try using mobile-specific validators, which go beyond simple validation identifies areas where your page design departs from generally accepted practices.

Acquire Project Team

If you work for a larger company, odds are there will be a small team involved in putting together your mobile website.  The team will likely involve you, a designer, a developer if you’re not using an online tool like Mobile Site Builder, a project manager and maybe someone to QA.

• Who is on the project team: who will design, QA, keep the site up-to-date, manage resources, etc?
• What are the roles and responsibilities of each person – who will create the scope, mockups, find content, etc?
• Who is in charge of changes to the site?
• Does each team member have enough time to devote to this project?
• What institutional knowledge does your organization have in terms of each of these aspects?  Has your company done something like this before or are you inventing the wheel?
• Who are the stakeholders – that is, whose interests may be affected by this project?  The team must identify them, determine their requirements and expectations and manage their influence in relation to the requirements.

Get a PM and Get Out of the Way

By doing this initial research, you’ve started the process – but who will take over when the project kicks into high gear?  It is you or someone else?  This person can, and probably should be, the project manager (PM).  He or she will be responsible for initiating, planning, launching, maintaining and controlling the project, and bringing it to a close.  You may be acting as the PM from the very beginning, doing everything yourself.  At larger organizations someone on the Business Development team may hand-off the project to the PM.

Feel free to print out these instructions and post any questions to the comments section below.