Convert your site to a friendly mobile viewer

You´ll stay admired when you check your website statistics and see that you´ve lots of traffic provided by mobile devices or other screens with 420 pixels resolutions or even lower.

Truly thinking in this permissive wrote by Ben Parr @mashable web site: “Web access will not focus around the computer”, I truly believe that this will be one of trends for the next´s years and for that reason I´m posting at designi1 some tips that may help you to handle with this new concern.

Been a long time that we stoped using the oldest monitors 800 x 600, 640 x 480 or even lower… for that reason we start drawing our websites with a huge resolutions. In our days we define 950 px width as a minimum required for the lowers screens.

Attempting to the designi1 statistics we can realize that the 10 most users has a superior resolution screen. Have you had your web site prepared for lower resolution as a mobile phone?

After this round up about the screens i´ll give you some tips that you can use to turn your blog/site more friendly mobile user. You´ll stay admired when you check your website statistics and see that you´ve lots of traffic provided by mobile devices or other screens with 420 pixels resolutions or even lower.

If we think the use of “pc vs cellphone” we realize the cellphone as an easy acquisition. Everyone has a cellphone – the pc not everyone; We can have Internet in almost everywhere – the pc can be an heavy tool to do that. We may say that the cellphone it becomes a powerful tool in our days for web browsing (1billion predict user at readwriteweb).

I give to you the cellphone example but what i want to be understandable is that we´ve many digital screens that can be used to Internet access. That´s the future and that’s the reason we need to be prepared for.

Screen evolution will take more importance then ever

Some of this examples, as watches, digital photographer cameras and GPS can be harsh to used as tool to web access. But we can start to the mobile phones because its a reality already.

Simple free and fast way to mobilize your website or blog:

1 – Grab you RSS into the mofuse application

In this free service you just need to grab your RSS and easily returns you a new link with your site to be seen by the respective mobile users. After that you just need to make sure that the mobile users will access to that URL mobile version.

You may do also:

Custom Domain
Design/Colors
Your Logo
Add a New Page
Add a New Link
Wordpress Plugin
Automatic Redirect
SMS Widget
Visitor Count Chicklet
Mobi Badge
QR Code
Analytics
Monetize!
iPhone Settings
Site Settings
Site Demographics
Preview

2 – Embedded the script code into your web site

You can say that having a link icon to your mobile web site version will be enough. I can say ok to that if you´ve only a few contents to share at all your web site. Realise that your web site starts growing up and you felt lost with so many information in your HD monitor with 21 inches?! imagine opening the website by a mobile phone? Will be hard to find the icon, right? So lets make it automatic!

PHP code to header of your website:

<?php
/*
Start of MoFuse PHP Redirect Code For DESIGNI1 – A LIFE STYLE
Version 1.0a
*/
// If your website or blog is in a sub-directory edit the next line.
$mf_subd=”";
// Example: www.mysite.com/blog/ — enter in $mf_sub=”/blog/”;

// Check to see if request URI is homepage or deeplink.
function mf_hpd() {
global $mf_subd;
if($_SERVER['REQUEST_URI']==”" || $_SERVER['REQUEST_URI']==”/” || $_SERVER['REQUEST_URI']==$mf_subd) {
return true;
} else {
return false;
}
}

if ($_SESSION['mofuse_nomobile']==1 || $_GET['nomobile']==1) { $_SESSION['mofuse_nomobile']=1; } else {
// Access MoFuse API to detect mobile device
$mf_ua=urlencode($_SERVER["HTTP_USER_AGENT"]);
$mf_url=”http://api.mofuse.com/?action=mobiledetect&useragent=$mf_ua&s=33553″;
if (@file_get_contents($mf_url)==1) {
$mf_ismobile=1;
}

if (mf_hpd() && $mf_ismobile==1) {

//Just change this line for your URL mobile device
header(“Location: http://designi1.mofuse.mobi”);
}
}
/* End of MoFuse PHP Redirect Code For DESIGNI1 – A LIFE STYLE */
?>

This code can be founded at mofuse app. They´ve also a widget for wordpress users can be downloaded at mofuse web page.

Another redirect script option:

I found a free script that works pretty good. You just need two URLs: one made already at MOFUSE; and your website URL. It will be given to you many script language and programmer languages options, i´ve tested the javascript and worked very well. But you can use server side language and wont be a problem to.

3 – Test your Mobil browser

W3C already took the concern around the web mobile. If you´re preparing yourself one mobile version i´ll need to test your work at the W3C Mobile.
You can test it also at mobiReady as i did:

Final preview of some websites prepared for a mobile device

Designi1

This show us some of the best examples of websites in a good mode for a mobile user.

Some important design websites that don´t have mobile version

Note: this websites were visited in a mobile version by firefox addon – Mobile agent.

Other resources

Final thoughts

In this case study i´ve wrote, i prepared the designi1 website for a mobile browser as well, and, it can be seen thanks to MoFuse app. They´ve a pretty good service to mobilize your blog in a few steps. What i recommend in first instance is that you use this service to mobilize right way your website. You may be loosing important traffic because you are not prepared to receive them.

In a second step i would prepared by your own one version of your website to mobile:

You may not want other advertisers on your mobile version (as mofuse do);
You may want a full control of you style sheets – visual aspects;
You may want to select you info to show in the mobile version more detailed.

In this study case we´ve focus on the mobile devices but the concern and my point of view about the future stayed around the screen evolution/resolution and the easy way that it can be plugged into the WWW. Are we prepared for this reality?

32 saves

We Recommend

Recent

Comments

Sunny D. (Feb 01, 2010)

Saved for future used!! Awesome post José!!

Jordan Walker (Feb 02, 2010)

Seems like these days everyone will be accessing your site via mobile phones.

José Pacheco (Feb 02, 2010)

Hey… first, thanks you both for comment the article. Hope you enjoyed :D

@jordan as i said at the article i´m not expecting that everyone will access to my site via mobile. If i expected that i would made only the mobile version. What i said is that the mobile devices, and for a visionary mind, the other screens, maybe a important revenue for your web site that we need to be prepared for! :P But its only my point of view.
Once more Thanks for your input Jordan.

How To: Create Or Convert Website Into Mobile Format - Memphis, Tennessee's Premier Web Design Agency (Feb 03, 2010)

[...] Convert your site to a friendly mobile viewer [...]

Tweets that mention [Designi1] Convert your site to a friendly mobile viewer « -- Topsy.com (Feb 03, 2010)

[...] This post was mentioned on Twitter by bkmacdaddy designs, cmoreira, Frank Matuse, Jose Orestes, Tom Raines and others. Tom Raines said: RT @bkmacdaddy: Convert your site to a friendly mobile viewer – http://bit.ly/9ToUOv [...]

Convert your site to a friendly mobile viewer | Dev Loom (Feb 03, 2010)

[...] Convert your site to a friendly mobile viewer Via / CSS Globe [...]

logolitic (Feb 14, 2010)

hehe interesting stuffs here, great I`m going to check them!

José Pacheco (Feb 17, 2010)

Thanks m8! hope you like it…

Convert your site to a friendly mobile viewer (Feb 24, 2010)

[...] resolutions. In our days we define 950 px width as a minimum required for the lowers screens.Click here to continue … Share this on del.icio.us Stumble upon something good? Share it on StumbleUpon [...]

buy louis vuitton (Jul 18, 2010)

GREAT ~