Being that Dahlak’s back in Cali for the holidays and the others have picked up dayjobs (damn you, economy!) I’ve been left to my own lonesome devices…literally.  So if you’re one of the trusty iLL-Literates who checked our site on your phone today, you might have noticed a new surprise.  Tadaaaaaaa!  A mobile app website!  Now you can soak up all your iB4the1.1 goodness anytime, anywhere (except for most Targets, where for some reason I can never get reception).

Developing a mobile version of your website is good for several reasons:

1. Today, more than 30% of online surfing is done on mobile phones. And even though I just pulled that statistic from my ass, I’m pretty sure it’ll be true at some point.  I just know that a hell of a lot of people do it now.  And being so, you want to make sure that you have an option for your site to be quick to load and easy to navigate.

2. You’ll be ahead. Despite the growing amount of mobile web surfers, the majority of sites haven’t caught up, which leads to a vast amount of sites that are logged onto via phone, and quickly met with frustrated visitors.  Why not be one of the refreshingly updated sites?

3. You won’t be behind. Which is different from being ahead.  Not only does having a mobile site get you with the times, it also ensures that anyone who comes on your site isn’t assed out.  Since most mobile browsers aren’t compatible with Flash, most audio and video players, and other things that people like to use to spice up their sites, they’re completely unusable for people who come on your site through their phone.  Each visitor is important, and you want to make sure they have what they need to support you.

4. You’ll have more creative freedom. If you’ve developed a site and have been keeping the mobilians in mind, you might opt to keep your website simple in consideration of all that.  But why do that?  Creating a mobile version is pretty simple, and allows you to go all out for your web followers.

So when our record dropped a couple of weeks ago, I went on the front page of our site and noticed that it was pretty much useless if not logged onto through a computer.  The videos didn’t work, no one could download or listen to the album, and the links were teeny tiny.  Look how sad my fingertips were.

Really, the main thing that we want people to be able to do on our site are to listen to our music, watch our videos, read our blog, and contact us.  The site as it was didn’t provide a decent solution to any of them.  Figuring out how to make this was much harder than actually doing it, so I thought I’d break it down as it worked for me.  Join me as I take you on the process, and hopefully together we can start a mini-mobi-revoluti.

1. Create a “mobile” directory. I made ours m.ill-literacy.com, but you can also create a subdirectory like www.yoursite.com/mobile or whatever.  This is the light version of your site that mobile users will be redirected to.

2. Keep your site light. Most mobile phones can’t read Flash, and would take forever to load heavy images.  Being so, build your site with the most basic HTML and CSS coding possible.  If you’re not a site builder, I recommend checking out Adobe Dreamweaver (which costs beaucoup money though) or Taco HTML which is a decent free alternative.  Save all your images as low to medium quality since it won’t make a difference on a mobile browser, and be as sparing as possible.  Remember that, at least right now, folks are surfing their phones more for function than extravagant design.

3. Keep your site simple. There’s not really any special coding required for your actual mobile site.  You just want to make sure it fits in the browser, is easy to navigate, and doesn’t take the visitor much to figure out, since they’re probably on the go while looking at your site.  I decided to model the iLL-site after an iPod to keep the navigation intuitive.

4. Size up. Based on the artwork for our music you already know that I hate following design guidelines.  But with mobile web technology still in its earliest stages, I had to pull back a bit to make sure that it was usable.  Since we have an iPhone house, I’ve been relying on word of mouth to test the compatibility on other phones, but I kept the width of my content at 1000pixels, which is the default that iPhones use.  Many mobile browsers adapt to website widths so if your site is basic enough they should pick up your dimensions fine.

5. Audio = MP3. It’s somewhat convenient that we’re giving our music out for free anyway, because at this point the only audio that works universally for browsers is a basic link to an MP3…which can be a problem if you’re trying to go platinum off your single.  But if not, a link will work just fine, and even though it might take a little time to load, in the end people can listen to your tracks iPod stylee.  Sweeeet!

6. Video = Youtube. I personally prefer Vimeo’s interface, but alas, tis not compatible with mobile phones yet.  We have our video link leading directly to a Youtube playlist, where people can see our embarrassingly low playcounts.  Consider yourself special!

7. Don’t do too much. Depending on the functionality of your site, you might not have to completely remake a site.  I only created two pages specifically for this (the front page and the “Listen to iB4the1.1″ page.  The others lead to pages that are either already mobile compatible, or that don’t have to be fully mobile functional as long as it does the job.

8. Redirect the people. The majority of my research was figuring out how to get the damned thing to redirect for mobile phones, and most of the guides involved a bunch of coding and engineering that I’m not familiar with.  I finally stumbled upon a Javascript code that so far proves to work for iPhone, Blackberry, and Android so kapoww!  Place this code in the header of the page you want people redirected from, right below your title:

 <style type="text/css"><!-- body {   background-attachment: scroll;   background-image: url(images/ib41wallpaper.jpg);   background-repeat: repeat-y;   background-position: top center; } --></style>
<script language=javascript>
<!--
if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)) || (navigator.userAgent.match(/android/i)) || (navigator.userAgent.match(/opera/i)) || (navigator.userAgent.match(/blackberry/i)) || (navigator.userAgent.match(/palm/i)) || (navigator.userAgent.match(/windows/i)))
{
location.href='http://m.ill-literacy.com';
}
-->
</script>

Except where it’s red, replace it with wherever your mobile site is.  Here’s what it looks like from our front page:

<html>
<head>
<title>iLL-Literacy | iB4the1.1 out now for FREE!</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
 <style type="text/css"><!-- body {   background-attachment: scroll;   background-image: url(images/ib41wallpaper.jpg);   background-repeat: repeat-y;   background-position: top center; } --></style>
<script language=javascript>
<!--
if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)) || (navigator.userAgent.match(/android/i)) || (navigator.userAgent.match(/opera/i)) || (navigator.userAgent.match(/blackberry/i)) || (navigator.userAgent.match(/palm/i)) || (navigator.userAgent.match(/windows/i)))
{
location.href='http://m.ill-literacy.com';
}
-->
</script>

9. Use a plugin. Yikes I hope you read all the way through before beginning, because if you’re on Wordpress there’s a plugin that automatically makes our blog mobile compatible!  I haven’t tried it on ours because I’ve hacked so deep into our design I’m worried that if I do anything to it the monster will turn into Barbara Walters.  But I’ve heard great things about it, so dare to try HERE!  Also, let it be noted that if you’re running your site via Blogger, Wordpress, Tumblr, etc, you should check to see if your site might already be mobile compatible, because it might be!

And voila!  Your very own mobile site.  Now the people can jam free to your music.  Go off and prosper!