Simple Tips About How To Develop A Mobile Version Of Your Site

Making a site mobile-friendly has nothing to do with whether it’s available at a .mobi address, and simply buying a .mobi domain won’t solve site owners’ problems

Emulators:
The thoughest task on mobile world is to deal with a lot of various devices which is exactly what an emulator does NOT do!

If there’s anything flakier and more inconsistent than the browsers in mobile handsets, it’s the emulators of those browsers. So slapping an emulator on a web page, then acting as if it not rendering a site correctly is proof somebody needs to buy a .mobi domain a little off base in concept. In reality, it’s actually even worse, since the .mobi emulator doesn’t call up the proper content on some sites that automatically serve correctly formatted content to mobile devices. This, of course, behooves .mobi by making the supposed problem it’s trying to solve appear more glaring — creating a view of the mobile internet that isn’t accurate, but better suits its marketing.

But try this:
Here are some simple tips about how to develop a mobile version of your site such as: choosing an URL address for your mobile site version, using a redirect script for mobile devices, designing a mobile-friendly layout using CSS and HTML and (if you are a WordPress user) using a free WordPress plugin to develop your mobile site quikly.

Choose an URL address for the mobile version of your site
First step is choosing an URL address for the mobile version of your site. You have some options, for example, you can create a folder (mobile) in the root of your site so your mobile version will be publishet at this URL: http://www.yoursite.com/mobile.
...or if you can add custom sub domains to your domain, you can use an url like thishttp://m.yoursite.com or http://mobile.yoursite.com which links to the folder mobile which will contain all files of your mobile site version.

Redirect script for mobile devices
The second step is creating a redirect script for mobile devices. It's not necessary, but it's useful to redirect automatically all traffic coming from mobile devices to the mobile version of your site. For more info about this topic take a look at the following links:

Redirect a mobile/PDA to a "lite homepage":
http://www.webmasterworld.com/forum45/260.htm

Redirecting visitors who visit a standard webpage to a mobile version:
http://studiohyperset.wordpress.com/2006/10/06/detecting-and-automatically-redirecting-website-visitors-who-visit-a-standard-webpage-website-on-mobile-handheld-wireless-pda-or-cel-cell-phone-devices-browsers-to-a-mobile-version-of-the-webpage-or-w/

...and in particular if you are a PHP, ASP programmer take a look here:

Device detection using PHP:
http://mobiforge.com/developing/story/lightweight-device-detection-php

Device detection using ASP:
http://mobiforge.com/developing/story/lightweight-device-detection-asp

If you know other interesting links, please add a comment :)


Simple page structure mobile-friendly
What is the better layout style for your mobile site version? I suggest you to use a typical one-column layout which is very popular for this kind of sites and make them more usable and readable for mobile users. YouTube, Facebook, Twitter , for example, use this layout one-column for their mobile versions:

http://img1.mobify.me/?url=http%3A%2F%2Flh5.ggpht.com%2Fantonio.lupetti%2FSIT2XpI2-RI%2FAAAAAAAABzA%2FPz4r0IzZWvI%2Fdevices3.png&h=195&w=234&max_h=234&max_w=234

Using this layout is a good practice but not a rule. In fact, if you surf the web using a mobile version of Internet Explorer, on Windows Mobile based devices, you can choose some layout options which the browser uses to "arrange" the content of the page to the device screen width (independently from the original page layout):

- Default, narrows content width to reduce horizontal scrolls
- One Column, forces all content to fit in a single column
- Desktop makes no change to the content (the site looks exactly how if you used a desktop version of IE)

But in general, the result can be bad if your site layout is too complex. To avoid this problem, you can think to spend a little bit of your time to design an optimized mobile version of your site using a more device-friendly one-coloumn layout how I illustrated in the following sections.



A proposal for your mobile site
If you have a blog, your mobile devices-friendly layout for your site can be something like this:

http://img5.mobify.me/?url=http%3A%2F%2Flh5.ggpht.com%2Fantonio.lupetti%2FSITe30ZRxFI%2FAAAAAAAAByw%2FTolR91VOFKM%2Fdevices1.png&h=250&w=234&max_h=234&max_w=234

...with the following elements: header, body and footer. Header contains the site logo, body contains your post (or a summary) and footer contains other info about your site.

HTML and CSS basic code
You can use Dreamweaver or your preferred editor to develop the code. HTML code is very simple and can be something like this:

http://woork.mobify.me/2008/07/tips-to-design-your-site-for-mobile.html


...and CSS code could be something like:



/* -- Reset default style -- */
body, h1, p{border:0; margin:0; padding:0;}
body{font-family:Arial, Helvetica, sans-serif; font-size:12px;}

/* ------------ */
/* HEADER */
#header{
padding:6px;
background:#444444;
}
/* PAGE BODY */
#page-body{padding:10px;}
h1{font-size:14px; font-weight:bold;}
h1 a:link, a:visited{color:#0033CC;}
.tag{font-size:12px; margin-bottom:20px;}
.tag a:link, .tag a:visited{color:#999999;}

/* FOOTER */
#footer{
padding:6px;
border-top:solid 1px #DEDEDE;
color:#999999;
font-size:11px;
}
#footer a:link, #footer a:visited{
color:#666666;
}



The result is something like this:

http://img2.mobify.me/?url=http%3A%2F%2Flh5.ggpht.com%2Fantonio.lupetti%2FSIUJLvqdwmI%2FAAAAAAAABzU%2FMNqn1t1ddxU%2Fmobile4.png&h=214&w=234&max_h=234&max_w=234

...naturally this is only a very basic proposal which you have to modify adding images, your logo, changing colors, font-family and add some lines of PHP, Coldfusion, ASP or other code to display dinamically all your post. For example with some lines of CSS code you can obtain a result like this:

http://img1.mobify.me/?url=http%3A%2F%2Flh6.ggpht.com%2Fantonio.lupetti%2FSIY9VvA15QI%2FAAAAAAAABzk%2FTxXNfy4XQ2o%2Fmobile7.png%3Fimgmax%3D512&h=249&w=234&max_h=234&max_w=234

You can also add a search field in the header of the page to help your readers to find quickly what they are looking for in your site. I also suggest to be simple and don't add useless element such as social network buttons (such as delicious tagometer or digg) or other widgets which use javascript. This is only a mobile version of your site and it have to be simple, usable and readable. Nothing else!

Issue with fonts using devices with Windows Mobile
If you use a mobile device with Windows Mobile, you don't have installed by default fonts like Arial, Verdana, Georgia... So to display correctly a web page you have to copy into your device some of the most used fonts in web design. Click on Explorer and copy from your PC (or also from your MAC) these fonts into the folder Windows > Fonts in your mobile device:

- Arial
- Verdana
- Georgia
- Trebouchet MS
- Times New Roman

WordPress Mobile Plugin
If you are a WordPress user, and you want develop your mobile site quickly, you can download WordPress Mobile Plugin, a free to download plug-in developed to make your blog mobile friendly.

Download Wordpress Mobile Plugin:
http://wordpressmobile.mobi/download.zip

It'all! For other suggests or to add interesting links about this topic please add a comment :)

Original source:
http://woork.mobify.me/2008/07/tips-to-design-your-site-for-mobile.html

.