Convert your site to a friendly mobile viewer

27Jan10

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.

Updated:

New movie about a new screen design TikTok very small to give you better the idea that small screens will be such important as the high resolution monitors

http://vimeo.com/moogaloop.swf?clip_id=16647049&server=vimeo.com&show_title=1&show_byline=1&show_portrait=1&color=00ADEF&fullscreen=1&autoplay=0&loop=0

TikTok+LunaTik MultiTouch Watch Kits for iPod Nano from Scott Wilson on Vimeo.


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: http://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&#8243;;
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&#8221;);
}
}
/* 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

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

No mobile device detected on 1stwebdesigner

No mobile device detected at chris wallace

no mobile device detected at echo_during

no mobile device detected at net tuts

No mobile device detected at spoon graphics

no mobile device detected at vanderlay design

no mobile device detected at web design wall

No mobile device detected at zeldman

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?

Advertisements


11 Responses to “Convert your site to a friendly mobile viewer”

  1. 1 Sunny D.

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

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

  3. Hey… first, thanks you both for comment the article. Hope you enjoyed 😀

    @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! 😛 But its only my point of view.
    Once more Thanks for your input Jordan.

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

  5. Thanks m8! hope you like it…

  6. Its true José, seems like there is going to be alot more users using mobile devices to connect online in the future

  7. That’s not really fresh news 😉 but thanks anyway. Wonderful blog by the way.

  8. Thanks for the comments guys.
    @pressure this article is already from the start of this year 2010 😀 but yea, its not fresh new… But im pretty sure that some ideas debated here will stick very actual in a near future!
    I do think the next device connected to the internet with a huge mass usage will the TV 😀 maybe some post in future about it!!

  9. Excellent article. Thank you!

  10. thanks Ethan!


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: