7 essential mobile web development tips

Thinking of making your website mobile? Here are 7 essential mobile web development tips you need to know to make your mobile site a success!

  • Mobile XHTML header

When developing a mobile website the content you are serving to your visitors is mobile content and both browsers and search engines need to be told this. Here’s what you should be showing in your doc-type declaration:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
  • Meta Data

Meta data is  important in mobile web development as mobile sites, in general, contain a lot less content due to the nature of the devices handling the data. The meta data tells the search engines what the content on the site is about. There is a big debate over the use of meta data and how much attention search engines actually pay to it, however we have recently developed a mobile site for a mortgage company in Birmingham UK, which after cleaning up the URLs and Meta Data now ranks 1st on Google for “mortgage advice Birmingham.” – Is the proof in the pudding?

So if you want some results try this:

<title>Page Title | Company Name</title>

<meta name="description" content="Be descriptive and relevant. Mention your main keyword and have a call to action"/>
<meta name="keywords" content="Your targeted keywords,but be precise, don't keyword-stuff!"/>
<meta name="robots" content="all"/>
<meta name="author" content="Gary Taylor"/>
  • On Page CSS

I stood corrected the other day when talking to one of the top mobile web developers in the UK, Tom Thurston. Don’t you just hate it when that happens! We were discussing CSS and how it can affect SEO. Now many people will tell you that CSS can harm SEO and it should be held on an external link…

I now say NO! CSS for mobile sites should be on page and NOT external. Why? Because many devices don’t accept external style sheets AND because Google doesn’t care either way!

The actual quote from Tom Thurston’s email:

“Some devices don’t accept external stylesheets, so you need to be a bit careful doing that without device data… but Google won’t care ;) …”

So if you want your visitors to be able to view the content on your site, on-page CSS is the way to go for the moment.

  • Google Verification

Tell Google about your mobile site and get it verified… In the words of the greatest trainer company in the world (Nike)…Just do it.

Visit Adding a site to Google where you will get a piece of code like this to add into your mobile site:

<meta name="google-site-verification" content="lNGHUDWif7Us75krktYnAh1lLga2QRC6p5n951Wn_6oQ" />
  • XML mobile sitemaps

XML sitemaps are an extremely important part of mobile web development. Without an XML sitemap you may as well try to build an inflatable dartboard for all its worth.

So what is an XML sitemap?

An XML sitemap is  a way of organizing a website, identifying the URLs and the data under each section. Previously, the sitemaps were  geared for the users of the website. However, Google’s XML format was designed for the search engines, allowing them to find the data faster and more efficiently.

XML sitemaps were not, as some people thought, a tool for search engine optimization. It does not affect ranking, but it does allow search engines to make more accurate rankings and searches. It does this by providing the data that a search engine needs, and putting it one place-quite handy, given that there are millions of websites to plough through. – Source: XML-Sitemaps.com

This is vital in the mobile world where accurate results are the difference between conversion and ignorance. Mobile web visitors do not want to waste time, for most of them time is money, literally they are being billed for being on the internet. So give them what they want, when they want it!

A great site map generator is XML-Sitemaps.com but like I said in my last post you need to adapt their sitemap for mobile content. Here is how to do it in more detail for Google optimisation.

  • Correct media sizes for mobile video

I’m going to refer you to an old post of mine which clearly explains mobile video encoding

  • Phone number link for mobiles

As not every phone recognises telephone numbers like the iPhone does. Here’s a cheeky little tip I use to make user navigation better for mobile users. It’s called a WTAI link and basically makes mobile devices recognise a phone number in the text of a mobile site and allow the user to link on the link and call the number directly from the page.

Here’s the snippet you can use:

<a href="wtai://wp/mc;+(countrycode)telephone number">Telephone Number</a>

As I don’t want to bombard you with too much in one post, we’ll end it there with the 7 essential mobile web development tips.

If you found these useful please share them around and if you would like to contribute please leave a comment below!

Thanks

Gary

P.s you can also visit my quick guide to marketing your mobile website.

Tags: ,

Sunday, April 11th, 2010 Mobile Web Development

Related Posts

Leave a Reply

About Me

Gary Taylor


Hi, I'm Gary Taylor. I have interested in domain names since 2002. In January 2008 I won the Young Entrepreneur of the Year Award at the Midlands Business Awards. I have been featured on sites like Mortgage Strategy, speak at events like Think Visibility and SAScon and develop sites like Rottweilers.co.uk and South Africa. I am a Director of One Result and head up all aspects of SEO, Project Management and Internal Operations. I live in Birmingham with my dog Alfie and love to play the guitar. You can follow me on Twitter or connect with me on Linked In.

Search this Site

Blogroll

Domain Registration Company Reviews

  • Domain Monster
  • 1&1 Internet
  • 123-Reg - Coming Soon
  • Fasthosts - Coming Soon
  • Go Daddy - Coming Soon
  • Namesco - Coming Soon
  • Webafrica - Coming Soon
  • 101Domain.com - Coming Soon

Domain Name Sites Like

Categories

Archive