-

Complete Tutorial To Mobify An Entire Site Via mobify.me

May 27, 2011 |

Guess You Made A Site (Specially blog site what has same structure as ‘Blogger’ or ‘Wordpress’). After completing design you come to underst...

wt4a8aa8ef98434
Guess You Made A Site (Specially blog site what has same structure as ‘Blogger’ or ‘Wordpress’). After completing design you come to understand that your site isn’t mobile friendly. Now what will you do?
You can leave it and loose almost all mobile visitor (Now a days, 60% of internet user are browsing via mobile. Guess how much u loose!!)
Or you can re-code it and made a mobile friendly site and add it to m.xxxx.xxx or whatever you want. (Now isn’t it a real panic?)
But now there is a third choice! You can mobify the whole site via www.mobify.me
Now let’s learn how to build a successful xxx.mobify.me site
******Note: This is an exclusive tutorial created by me. I have added full step-to-step description so that everyone can understand. If you already know those steps, just skip it******
Step 1: Go to www.mobify.me and sign up for a new account. If you already registered then sign in.
Step 2: Go to your mobify.me dashboard. Enter the site URL that you want to mobify.
Snapshot 53
Step 3: Now select those parts that you want to show in mobified site. Cursor with green (+) means that part haven’t selected. If you click on it, that part will be selected to show in mobified site. And cursor with red (-) means that part is already selected and if you click on it again then it will be dis-selected. The unselected parts will look like original in choose section and selected parts will covered with light red color.
After complete selection, click next or navigate to design.
Snapshot 54
Step 4: Now here you can design your selected parts. You can also add new html blocks or bubbles. You can re-arrange blocks by using ‘Move UP’ ‘Move Down’ and ‘Delete’.
Ø  On the Right panel, you will see a live preview of your mobified site. If you change any parts, it will change automatically (Real time).
Ø  On the left panel, there is an editor CP.
Ø  Add HTML: This option will add a new html block. After clicking on ‘Add HTML’ a new editing box will appear. Here you can post HTML codes to make a new html block.
Ø  Add Bubble: This option will add a new bubble (POP-UP menu I think). You can edit the bubble layout and text.
Ø  Move UP: This option will move takt the highlighted block (highlight a block from right panel by clicking on it) one level up.
Ø  Move Down: This option will move takt the highlighted block (highlight a block from right panel by clicking on it) one level down.
Ø  Delete: This option will delete the highlighted block (highlight a block from right panel by clicking on it). Be Careful!!
Note: You may see some blocks will show “This block is not ……………………………..This massage will not be shown to visitor” written in red color. That means this block isn’t mobile friendly and so it won’t be visible to visitors. You can simply delete the block or just leave it. It doesn’t matter.
Snapshot 58
Step 5: Now save it click next or navigate to manage. Click on lunch (See The image below). Select a sub-domain. It will be your mobify domain. Ex mytestsite10.mobify.me .  Now you have a full mobile friendly home page.
Snapshot 59
Snapshot 61
============================xxxxxxxxxxxxx============================ 
You have learned and made your site mobile friendly. But what will happen when you will click on any link? You might already noticed that those links are opening in your real website style (PC-Style).
So what to do next?  ========>>>
Go to manage. You will see a section named ‘Suggested Template’ and some links just below that. Select any one of them and repeat Step 3 and Step 4. Do this to all of links under ‘Suggested Templates’.
Snapshot 62
That’s it!!! Now You have a full mobile friendly site.
Whenever you will update your main site, your mobified site will also be updated automatically. So you need not to edit it any more.
============================xxxxxxxxxxxxx============================ 
Colorize Mobified site:
After creating whole mobile site, you will see there is no colors, no site headlines. Your site will look dull and boring. You can change it and make your site more unique and colorful. If you have enough HTML knowledge, edit the CSS part from ‘Design’.

 
If you aren't good at HTML, no problem. Here I have created a model html code for you. Just Copy the code, replace ‘Trick-Center’ with your site name (Headline) and ‘Welcome to The World OF Free Zone!’ with your site description.
Here's The Code:


<style type="text/css" style="display:none">/**/body{font-size:75%;background-color:#4CEE07;font-family:Verdana,Arial,sans-serif;margin:0;padding:0;}img{maxwidth:100%;}a{color:#000000;text-decoration:none;}a:focus,a:hover{color:#0AF;text-decoration:underline;}h1,h2,h3{font-family:"Lucida Grande",Geneva,Verdana,Helvetica,sans-serif;}h1{font-size:x-large;}h2{font-size:large;}h3{font-size:medium;}hr{height:1px;color:#CCC;}#header{background:#FFCC99;color:#FFF;margin:0;}#header .title{color:#d56adc;font-family:"Comic Sans MS";font-size:150%;font-weight:bold;padding:3px;}#header .description{color:#000000;font-size:85%;font-weight:bold;padding:3px;}#header .nav{padding:3px;background:#7A209A;font-size:85%;color:#FFF;text-transform:none;border-bottom:solid 1px #393837;}#header .nav a{padding:0 5px 0 5px;color:#FFF;text-decoration:none;}#header .nav a:hover{background:#FFF;color:#345C9A;text-decoration:none;}#search{padding:3px;background:transparent;text-align:left;border-top:1px solid #CCC;border-bottom:1px solid #CCC;}#footer{background:#FFF;color:#CCC;margin:0;border-top:solid 1px #D93B14;}#footer .copyright{color:#888;padding:3px;}.button{padding:3px;color:#D67622;}.button:hover{color:#0AF;}code,.code{font-family:"Courier New",Courier,monospace;font-size:12px;color:#006;border:solid 1px #F72059;background:#8AC2FA;margin:3px;padding:5px;line-height:14px;list-style-type:none;overflow-x:auto;white-space:pre-wrap;white-space:-moz-pre-wrap!important;white-space:-pre-wrap;white-space:-o-pre-wrap;word-wrap:break-word;}blockquote{color:#333333;margin:3px;border-left:solid 5px #CCC;background:#EEE;padding:5px 5px 5px 10px;font-style:italic;}.right{float:right;}.date-header{font-size:75%;}.blog-posts{background:#FFF;color: #008800;border-top:1px solid #CCC;border:1px solid #AAA:}.post{margn:1px 0 1px;padding:3px;border-top:solid 1px #BDCCBA;border-bottom:solid 1px #BDCCBA;}.post-title{margin:0;font-weight:bold;border-bottom:1px dotted #CCC;font-size:120%;}.post-body{margin:0;}.post-footer{margin:0;padding:3px;text-align:left;border-top:1px dotted #CCC;}.rmlink,.quickedit,.widget-content,.status-msg-hidden,.share-bookmarks,.comments,.post-comment-link,.post-icons,.feed-links,.addthis_toolbox{display:none;}.status-msg-body{margin:1px;padding:3px;background-color:#FFF;text-align:left;border:1px solid #AAA;}.blog-feeds{background:#335CFF;border-top:1px solid #CCC;border-bottom:1px solid #CCC;}.blog-pager{background:#FFF;}#blog-pager-newer-link{float:left;}#blog-pager-older-link{float:right;}.home-link{padding:0 10px 0 10px;}

</style>

</head><body class="loading"><div id="mmcontent"><div><div name="header" id="header"><div class="title">Trick-Center</div><div class="description">Welcome to The World OF Free Zone!</div>
© Reyad010
 
Now go to manage, select any templates you have created before, click “Add HTML” and paste the code there. Move the block in front using “Move UP”.
See the difference in the right panel.
You can also change color codes here and make a matched new style.
Now save this and repeat it to all templates.
Now you have a colorful mobile friendly site.
Adding An In-Site Search Script:
Having an in-site search engine makes any site more easier and friendly for visitor.
So let’s add a search option.
There are many in-site search script but very few of them will work in mobify. Here I am sharing a easy to use PHP and HTML based search script.
Just copy the following codes and paste it to any previously created templates.(Select the desired templates and navigate to design. Choose ‘Add Html’ and paste the code there. Re-arrange it by ‘Move UP’ or ‘Move Down’ if Needed)
You need not to change anything in this script. Just Copy And Paste.
Here's The Code:


<p align="center"><form id="searchthis" action="/search" style="display:inline;" method="get"><input id="search-box" name="q" size="25" type="text"/><input id="search-btn" value="Search" type="submit"/></form></p>
Redirect Mobile User Automatically into Mobify Site:
After making all change and finalizing your mobile site, you may want to re-direct mobile users automatically to new mobified site. So let’s do it.
First download the whole PC-Site Template and Open it with Notepad++(Optional). Or just edit html online.
Search for <head> and paste the following code anywhere under it. (Check The Image)
Snapshot 65
<script type="text/javascript" src="http://trick-center.mobify.me/mobify/redirect.js"></script>
<script type="text/javascript">try{_mobify("http://trick-center.mobify.me/");} catch(err) {};</script>

Ok, Now you have to make some change here. Replace Both http://trick-center.mobify.me with Your Site Url. Now Save The Template.
You Are Done now. Try to visit your PC-Site from Mobile (Or Wap-UA) See it re-directs into mobile site! And Try From PC Browser (Or PC Browser UA) and See it loads The PC-Site.
Note:

CMS PLUGINS

Use a CMS Plugins if you are using a CMS like Wordpress on your site. To use a CMS Plugin you must have configured a custom domain with Mobify.
Wordpress Plugin
To use the WordPress plugin you must have a configured custom domain and you must not be using the WP-Cache or WP-SuperCache plugins. To install:
Drupal Module
To use the Drupal Module you must have configured a custom domain. To install:
ExpressionEngine 1.6x
To use the ExpressionEngine Extension you must have configured a custom domain. To install:

APACHE PLUGIN

Use the Apache Plugin if you are using the Apache webserver and have access to your htaccess file. Virtual hosting users should confirm with their hosting provider whether they are using Apache and that mod_rewrite is available. You  must be able to place the htaccess file at the root level of your site. To install:
By At:

Related Posts

No comments :

Post a Comment

Note: Only a member of this blog may post a comment.

Subscribe to: Post Comments ( Atom )