Making a mobile version of your website with PHP

droid-doesCreating a mobile version of your website is not a very hard task, but it requires a bit of work. Unlike a desktop browser (PC browser) a mobile browser still have limited resources and usually it has it’s unique way to interpret and renders the page.

When creating a mobile version of your website there is one thing you need to know before starting to develop:

  • it will work for all phone types or only smartphones and newer types of devices?

Even with support of detection and translators to develop mobile sites, this decision actually might help you on how far you will want to go with the features of the website.

Now it is time to get your tools set.

First things first. Download WURFL witch is a mobile device detection system and register on their Community group. This is the must important tool that you will need for your mobile site. WURFL is a XML device system that will read a user agent string and based on that it will give a full feature and capabilities from the device.

The next step is to install a translator. This will help you on writing the code without worrying about if it is WML, CHTML, HTML 4, etc. Make’s things a ton easier. Currently WURFL works great with WALL (old WALL API) and WNG (the next generation of WALL – go with this one if you can).

With both of these you have all your libraries set and you should be ready to code.

The best and most advisable way to use this is to use WURFL to detect the device coming and if is a detected phone, then redirect to the mobile site, otherwise, normal site. Consider the rules fully and test all. In case of doubt, redirect to the normal site (there is a greater chance for the user agent being a browser from a desktop than a phone).

A couple of good useful notes:

  • Create a domain.mobi or m.domain.com to support your mobile application
  • Javascript is still very limited even smartphones
  • size matters: rule of thumb 10 seconds for full page rendering
  • devices such as iPad are considered mobile devices
  • WURFL also is supported by Java

Good luck and have fun.

Advertisements

About mcloide

Making things simpler, just check: http://www.mcloide.com View all posts by mcloide

5 responses to “Making a mobile version of your website with PHP

  • Mobile Marketing Plan

    […] Making a mobile version of your website with PHP « PHP Libraries, API's and Frameworks […]

  • Lebogang

    So far I have only been developing sites using php, Content Management Systems using php and managing databases in php. So I don’t know where to start when developing mobile sites. Any tips or sites that I can use to begin coding?

    • mcloide

      A mobile site is not so different from a normal site and you can definitely use a LAMP environment for that (that is what I use).

      With php you should check:

      1. WURFL
      2. WALL4PHP

      You will probably need both, but check on WURFL first because they were working on a newer library that would be a even better fit than WALL4PHP to develop.

      Note: Not taking the merit of WALL4PHP here. I have developed a complex fully applicational site for mobiles using WALL4PHP and WURFL as the primary libraries to detect and encode correctly to phones.

    • Robert

      @Lebogang:

      I just did it, so here my reply:

      1. Create a directory like /mobile within your standard homepage root (where files like index.php for your normal website are hosted)
      2. Create a subdomain of your homepage, e.g. your homepage is http://www.example.com – create a subdomain http://m.example.com
      Use tools provided from your hoster like PLESK, CONFIXX or selfmade tools of your hoster. Login to your website hoster and look for links like Domain Management or Create Domains – Create Subdomains
      3. When creating a subdomain, you are asked for a directory to point to. Use your already in step 1) created directory /mobile
      4. Write a file called “index.php” in your directory /mobile with the magic line echo ‘Hello mobile world!’.
      5. Allow your hosters DNS-server for a few minutes or hours to make domain name server know your mobile subdomain. Be patient.
      6. Call your mobile homepage from web or smart phone using this address:

      m.example.com

      – you should see “Hello mobile world!” on your phone or PC.
      7. To make it easys for mobile visitors one solution is to redirect all mobile devices automatically to your mobile version. One solution is using following Apache .htaccess entry:

      RewriteEngine on
      RewriteCond %{HTTP_USER_AGENT} (OneMobileUserAgent|AnotherMobileUserAgent|…)
      RewriteRule (.*) mobile/$1

      another solution is to use PHP to detect mobile browsers.
      PHP Snippet:

      $haystack = $_SERVER[‘HTTP_USER_AGENT’];
      $needle_1 = ‘Android’;
      $needle_2 = ‘iPhone’;
      $pos_1 = strpos(strtolower($haystack), strtolower($needle_1));
      $pos_2 = strpos(strtolower($haystack), strtolower($needle_2));
      if ($pos_1 === TRUE || $pos_2 === TRUE) { header(‘Location: http://m.angel-in-bondage.de/‘); }
      else { header(‘Location: http://www.angel-in-bondage.de/‘); }

      Real life example: m.angel-in-bondage.de vs. http://www.Angel-in-Bondage.de (work in progress).

      Hope this is useful 4 u.

      Robert from Berlin

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: