I’ve recently started working on some mobile websites. You’ll notice that davepcguy.com has its own mobile alternative as do some other sites. Mobile devices are growing in number and gone are those days when internet was viewed only on the computer screen. WAP is not even used either so that old school coding is gone too.

These days, almost everyone has an iPhone or a BlackBerry, or a Palm device. Some of us even have other devices like PSPs, tablets, and others that require quite a bit different formatting. Here’s how to go about making your mobile website.


Step 1 – The Vision

First, you gotta have a vision of what you want. The best way to get a good vision is by picking up your phone and browsing the internet, looking through some popular websites such as youtube, flickr, facebook, myspace, and other sites that you know get a lot of traffic and are likely to have their own mobile version.

I recently saw a really nice blog post detailing some of the nicer mobile sites. The theme there is common:

Everything is single column. There are no side-bars, there are no fancy tabs. Everything is in a single column. Think of it as a letter. There are no columns in a letter, you have a header, the body, and the footer.

  1. Header: Generally, you’ll use the header of the page to announce the website’s name and to show menu links. You may also place a commercial in this area (Google Adsense uses commercials). Here’s what I used on my Only A Quote mobile site: It’s a simple banner that effectively tells the user what’s going on.
  2. Body: This is pretty self-explanatory, you put the meet of your site here. Try to use well organized information. Don’t just slap stuff there. Mobile users are more likely to leave your site than regular computer users. Also, keep the graphics swift! Not too much.
  3. Footer: Use the footer for copyright info and other blah blah stuff but don’t over do it! I know huge footers are fashionable but not for mobile users!

Keep it all simple!

Step 2 – Design

Here are a few tools that will help you with your design:

Keep in mind that different phones will render your page differently so try to make it as simple as possible. To catch the widest possible audience, focus on the big three: iPhones, BlackBerries, and Palm phones. Samsung and Nokias are common too, especially outside of the US but BBs and iPhones capture most of the market. Android is coming up too, so watch out for them too.

A few simple rules:

  • Keep the site less then 400px wide.
  • Cross-browsing is a bitch on Computers, it’s worse on phones, render for Safari and Opera Mobile
  • Graphics should not exceed 20kbs
  • Keep the layout basic

There are tons  more rules but those are the basics.

Step 3 – Coding

First of all, DON’T USE JAVASCRIPT! It works on a lot of phones, it’s gaining support, but it’s really bothersome (I know, I use my phone to browse the net a lot). There’s no need for it. Hover and other pretty stuff is useless too. Many phones don’t support it.

Use as little mark-up code as you can. If your original site has thirty divs, make it three in this one. There’s no need for all that on phones. If your CSS screws up, so will your divs.

Use the following doctype:

<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.2//EN""http://www.openmobilealliance.org/tech/DTD/xhtml-mobile12.dtd">

This will tell the browser that it’s meant for phones. It’ll help rendering and it’s the RIGHT thing to do haha. Once you start coding, again, keep in mind that your website should be the smallest possible.

Here are a couple of rules to keep in mind:

  1. Don’t use px/em sizes, do everything in percentages, you never know what kind of a phone the user will use.
  2. Keep all files as small as possible.
  3. If your .PNG graphics do not use transparency, convert them to JPGs with smaller quality
  4. If you use .PNG graphics WITH transparency, consider remaking them into JPGs or GIFs (for transparency) if at all possible
  5. Keep all graphics less than 400px wide. I suggest 350px tops.
  6. Use “ALT” for images, some phones may not render the text and it’s standard .mobi rule
  7. Try not to use tables or javascript
  8. Don’t use external resources (ie pictures from other sites, scripts from other sites, etc)
  9. Define sizes for images with the width = “” and height = “” html tags
  10. NO POP UPS!

That’s about it.

Step 4 – Testing

You’ll need to test your site, so use the resources mentioned in the emulator part. Use your phone as well!

Here’s another resource that will catch ALL of your mistakes:

Ready.mobi

This site checks your markup, the size of your site, and many other features. It will tell you if you did something wrong and will usually tell you what you can fix on your site. It also features five different phone emulators on the spot. It also ranks the speed of your site. Here are my stats:

Oh yeah, that’s a bad rating. It’s mostly because of all the graphics on my site, the CSS involved and inter-linking on my blog. It happens but it does pretty well on my BlackBerry so try to look at your rating positively especially after you do your own tests. As you can see, it tells you the different speeds with GPRS, 3G, and Wi-fi.

Step 5 – Implementation

Let me save you a few hours of searching. In implementation, you’ll have to figure out how exactly you’re going to redirect your traffic to the mobile version whence they use their phones. It took some time for me to figure out but here are a few options:

  1. DetectMobileBrowsers – This is almost a fullproof method of redirecting your traffic. The problem? You can’t use it unless your site is COMPLETELY non-profit. Nope, not even ads are allowed. If you want the commercial version, it will cost you $50 a year to use it
  2. LightWeight Device Detection – This is probably one of the simplest scripts you’ll find and it works really well. It also doesn’t have any restrictions as far as I’m aware.
  3. Mobile Detect – This is a slightly more functional version of the above-mentioned Device Detection. They’re not related but work in a similar way

Let’s move on to actually using these scripts. I haven’t used number one but I’ll tell you how you can incorporate number 2 and 3.

  1. Decide whether you want a separate site for the mobile version. I recommend creating a sub-domain such as m.onlyaquote.com (whence using sub-domains, remember that m.onlyaquote.com = onlyaquote.com/m )
  2. If you did not create a separate sub-domain, you can place the whole thing in a loop but don’t forget to create a backdoor so that the user can switch between the desktop and mobile version.
  3. Put all the script messy stuff into a separate file (so as not to clutter up your index.php file) except for the if/else statement found in number 2. If you’re using number 3, don’t worry about that at all.
  4. Use include(script file ); to put the script back into your index.php file. Put all of your PHP before the <html> tag

If you’re using Number 2, here’s what you do:

include ('scriptfile.php');
if($mobile_browser>0) {
   // do something
header( 'Location: mobilesite.com' ) ;
}

If you’re not using a different site do this:

include('scriptfile.php');
if($mobile_browser>0) {
 // place your mobile site here.
}
else {
   // place your desktop version here
}

You can also simply switch out CSS files with this method (make sure to put the loop inside the <head> tag then). I don’t suggest you use the default CSS method of switching styling according to the device (ie. <link rel=”stylesheet” type=”text/css” href=”css/quotestyles.css” media=”handheld” />) because it doesn’t work that well and most devices will try to read BOTH stylesheets.

For number 3, again place the following loop before the <html> tag:

include("Mobile_Detect.php");
$detect = new Mobile_Detect();
if ($detect->isMobile()) {
    // any mobile platform
header( 'Location: mobilesite.com' ) ;
}

With the number 3 method (ie. Mobile Detect) you can also specify which mobile device you want to do what. You can choose a separate site for an iPhone and Blackberry or separate CSS files. Well, whatever, you can do it all.

CAUTION: The detection system is NOT perfect. With newer phones, newer browsers, and newer software, the detection script may become obsolete. Be always on the look out for better versions!

Conclusion

That’s it, with these few tricks, you should be able to easily make your own mobile site. Here’s what mine looks like (I still have a TON of work to do!):



Share and Enjoy:
  • Print
  • Digg
  • del.icio.us
  • Facebook
  • Google Bookmarks
  • LinkedIn
  • Reddit
  • Tumblr
  • Twitter
  • email
  • Slashdot
  • StumbleUpon