Thinking BIG has gone mobile!

We have created an alternative site for mobile users, www.thinkingbig.mobi. While we don’t expect to generate very much traffic from the site we felt it was still something we should have.

We all know how popular mobile devices are, and how popular web browsing from those devices has become as of late, we felt is was time to have a mobile friendly presence.

While the vast majority of mobile browsing is for is stock information, sports scores and of course ring tones we still felt is was necessary to have a mobile version of our home page available.

It was very interesting for me to learn how to develop web content for mobile devices as I have never done it before. I will share some of the points of interest I came across while creating our mobile site.

** Please remember I am not an expert and these are merely my observations and not necessarily the best practices for mobile web site development **

Things to consider

Resolution, the screen size you are designing for is at best the size of your pocket. From what I have discovered if you design for 120px width you should be ok. Horizontal scrolling is evil as a rule with standard web design but when it comes to mobile use it is the devil!

Graphics, you must develop all your graphics to constrain to the 120px rule. Also it is a very good practice to not use very many graphics. Honestly your logo is really all you should have. Even then make sure you have very good alt tags.

Client Side Scripting, this is a “no, no” a lot of mobile devices do not support JavaScript. So for safeties sake do not use any client side scripting.

Navigation, make this straight up markup, no need to get fancy here. Good navigation is a must as we all know so in an environment such as the mobile environments we do not have much room or control, so keep your navigation simple!

Scaling and Flexibility, everything you do should scale. Since we are dealing with a lot of unknowns and size constraints let the browser do the work for you. Setup your content, look and feel and navigation to be very flexible and scale well with the various resolutions/ environments. Use a column based design method, use em’s for text sizing etc …

Content is King, while this is true in standard web development it is even more so when dealing with mobile development. While you want to create a pleasant look and feel at the end of the day you NEED to have your content accessible and visible. Do not get caught up with intricate designs and fancy CSS work, just keep it simple and clean.

Standards, it is very important to have clean and well written markup that validates. Most mobile devices support HTML and XHTML. I would suggest the use of XHTML when creating any mobile content. Once you have created your documents give them a rip through the www.w3c.org XHTML validation service.


While this also holds true when developing standard web content it is even more important when developing mobile content. Simply, you CAN NOT test in every major mobile environment.

Here is the doc type we used on our mobile site …

!DOCTYPE html PUBLIC “-//OPENWAVE//DTD XHTML Mobile 1.0//EN” “http://www.openwave.com/dtd/xhtml-mobile10.dtd”

The Ideal Solution

The ideal solution for creating a mobile enabled web page is to use the media attribute of the link tag to specify which style sheet to use. So if the browser detects that the user is a handheld device it will load the appropriate style sheet …

link rel=”stylesheet” href=”css/styles_mobile.css” type=”text/css” media=”handheld”

Then within the mobile defined style sheet you will have your styles set to hide or show various parts of your page and change the look and feel of your site to suit a mobile device.

In order to use this solution your original site would have had to been designed in such a manner as to support whole sale changes that are based on an alternative style sheet. Also if you take this route keep physical page size in mind. You do not want to burden your mobile users with high bandwidth requirements.

** While I have read this is the ideal solution and it may very well be; but from minor testing with various emulators I conducted I found that it didn’t load my mobile style sheet the majority of the time. **

Our Solution

So, because our site was not developed with mobile in mind we could not use the “Ideal Solution”. What we have done is created a server side script that detects if the user is on a mobile device. If he or she is on a mobile device we redirect the user to our mobile site, www.thinkingbig.mobi.

While this script is not 100% fool proof it does do a decent job of picking up mobile users. So even at the end of the day if we redirect 80 to 90% of mobile users to the mobile site then I consider that a success.

Odds and Ends

You will notice that the content is a bit different on the mobile site compared to the normal site. We did this simply to lighten the load on the mobile user. All critical content can be found on the mobile site.

Personally I enjoyed messing around in the mobile environment it made me feel like I did back in the mid 90’s when I was a newbie creating web pages.

While the mobile site is kind of “Plain Jane” I think it represents our company and the environment that is developed for very nicely!

So YAY to us, for getting our site into the mobile arena!

Cheers
Chris