Learn basic principles of website design.  Home Web Design Basics Design Principles How To Create a Mobile Website

How To Create a Mobile Website


how to create a mobile website

The mobile space is awash in applications, or "apps", as they are commonly called. On the heels of Apple's success with the App Store, unveiled in July 2008, other device manufacturers and operating system providers, including BlackBerry and the Android platform championed by Google, opened their own virtual storefronts. Still others are readying for launch later this year, all hoping to take a bite out of Apple.

As a result, consumers feel emboldened to do more with their mobile devices. Accordingly, eMarketer projects that mobile Internet access, through either traditional browsers or installed applications, will see significant gains over the next five years, reaching 134.3 million mobile Internet users in 2013.

While most of us working in technology companies are aware of the mobile Internet tsunami, many businesses have yet to embrace the technology by publishing a mobile version of their own website. Keeping your customers' user experience in mind, I believe we've reached a critical point where businesses must have at least a brochure style mobile site to explain to mobile visitors who you are and what you can offer.

After two years of accessing Facebook, Twitter and now FourSquare almost exclusively on my iPhone, our company Voices.com decided to create a website for our mobile visitors. Here's how we did it and how you can too, in just ten simple steps.

1. Planning

Get out the scrapbook or a new Google Doc and jot down why you are building a mobile app, who is it for and what you want the app to do.

2. Content Creation

Then jot which pages are needed and flesh out the content by copying the text from your main website into the Google Doc. To start, consider the following pages:

• Mobile Home

• Products

• Services

• Blog Feed

• Podcast Feed

• About Us

• Contact Us

3. Setting Up the Subdomain

The standard convention for mobile sites is having a subdomain called "m", which is short for mobile. Ask your server administrator to do this for you. I accomplished this in less than three clicks in Plesk.

4. Wireframing

There are plenty of web kits out there such as iWebKit mobile site builder that will provide the basic framework, requiring you to merely edit the HTML by replacing the dummy text with your own company information.

5. Adding Functionality

Now that you've got a barebones mobile website up, you can explore other functionality like having a click-to-dial feature by using the tel: hyperlink (works on mobile browsers, but not standard web browsers). Additionally you can integrate with Google Maps making it easy for prospective clients to find your office.

6. Alpha Testing

After creating the basic structure and adding the content, publish your pages to the web using any FTP program. I found loading http://m.voices.com in Apple's Safari a good way to test the mobile app rather than waiting for the pages to reload on my iPhone. Once you're happy with how it looks in the desktop browser, boot up the iPhone, iPod Touch or BlackBerry and see how it looks on these devices.

7. Beta Testing

When you're confident all the pages load and there are no broken links, ask a few of your friends or colleagues to view the site on their smartphones. If your friends are willing, have them answer a few questions such as:

• What device and network did you access the mobile website on?

• Did the mobile website load? Was it slow or fast?

• What was your first impression?

• Did we articulate the purpose of the mobile site clearly?

• Did you find any broken links or elements that were confusing?

• What features would you like in a future version of the mobile website?

8. Answer Your Beta Testers

If you've had the privilege of having other people take time out of their day to provide you with feedback, be sure reply to each of their comments, suggestions and recommendations with class. This is valuable feedback and should be acknowledged as such.

9. Mobile Sitemap

For the mobile version of Voices.com, I've created both a simply HTML sitemap located in the footer of the site, but also a mobile XML sitemap which was then submitted directly to Google using Google Webmaster Tools. Doing this will help Google, as well as other search engines, discover your mobile website a lot faster, and be aware of changes in site structure, updates to content or the addition of new pages.

10. Going Live

When you're ready, announce your mobile website on your blog, podcast, Facebook Fan page and as a Twitter status update. Take your publicity efforts one step further by writing and distributing a press release.

Final Remarks

The marketing of your mobile website is definitely an ongoing effort, but now you can move forward in this fast-changing technological landscape with the confidence of having a mobile website and remaining relevant to your most advance customers - and you accomplished all of this in just ten steps.



Author's URL: David Ciccarelli
Learn basic principles of website design. More Design Principles Tutorials: Featured Materials | Fresh Materials | Website Templates

Reader's comments
comments ferragamo Shoes July 26, 2011 says:
<a href=" ferragamo</a> has expanded the market in asian that is vibrant.<a href=" ferragamo shoes</a> are popular in HK and mainland of china.They suggest <a href=" ferragamo vara</a> shoes should be tried.
Reply
comments supra shoes July 25, 2011 says:
supra shoes use top quality leather to make some shoes good look and durable.and supra vaider is one of them. you can enjoy benefits that cheap supras bring to you.
Reply
comments Youth NFL jerseys July 06, 2011 says:
Youthnfljerseys.org Wholesale Kids jerseys, klyaen like jerseys. NFL Jerseys wholesale,cheap Wholesale NFL Jerseys are your best choice, Wholesale NFL Jerseys as you know there is noting can instead of low price and high-quality. Wholesale NFL Jerseys, and we sure the quality is very well.
Reply
comments Jaywonjuwon June 09, 2011 says:
Your comment...life is al about creativity and cosistency
Reply
comments Chantry April 14, 2011 says:
Thanks for the overview on building a mobile website. Learning about the standard convention for naming the subdomain was helpful. Thanks,

Chantry
www.brightencreative.com

Reply
comments guile March 10, 2011 says:
Try making mobile website by dragging and dropping elements on a page, with service like ma.rs
Reply
comments red bull hats December 16, 2010 says:
These are wonderfulwww.caps2011.comThank you for sharing
Reply
comments red bull hats December 15, 2010 says:
These are wonderful!hank you for sharing
Reply
comments shreyas November 17, 2010 says:
i am working job hunting
Reply
comments Talk King October 20, 2010 says:
Hi,everyone. Have you been looking for a desirable theme that you love to face it everyday? There're some charming themes for you to choose.Go to this address,browse as much as you want: www.themesfarm.com
Reply
comments Stu Collett October 06, 2010 says:
Nice article. You can save time by using these Apple GUI elements too: www.teehanlax.com/blog/2010/06/14/iphone-gui-psd-v4/

www.superuserstudio.com

Reply
comments Las Vegas Web Design August 14, 2010 says:
Thank you for this well explained and useful article. i appreciate this very much mr. David <a ref="www.premierpixels.com">Las Vegas Web Design</a>
Reply
Add comments to "How To Create a Mobile Website"

Captcha