Step 1: Select sections for your mobile layout
First thing to do is to create an account on Mobify.me. It's simple and free. Than you have to choose the URL of the website you want to "Mobify". It appears an interface that allows you to choose sections to add to the mobile version of your website. The only thing you have to do is to pass your mouse over a section (red borders appear automatically around the section) and click on to select it:
Remember that, in order to improve readability, templates for a mobile device have to be simple, preferably with a single-column layout. I suggest you to select only the section that contains your posts (selected in red in the previous image). You can add the header and footer in the next step using the Design view that allow you to have more control over the CSS and HTML code.
Step 2: Design CSS + HTML code
At this point you are ready to customize the layout of your mobile template using the Design view and adding for example a custom header and footer. How you can see in the following image, Design view is divided in two parts:
Left section contains the CSS code and right section a preview in real time of your website (you can choose several mobile devices such as iPhone, Nokia, BlackBerry). To customize header and footer choose the related link on the right menu. This is the window that appears:
You have only to add some lines of HTML code and press "save and close". Then you can add CSS code to customize all HTML elements of your template using the left section of the Design view:
How I said all changes you make to your code are in real time, so you can see how your template looks immediately in the right section of the Design view. When your code is ready click on the button save to save your mobile template.
Step 3: Publish your website
Now you are ready to publish the mobile version of your website. Publishing is very simple. You can publish your blog using your hosting service or directly Mobify.me hosting choosing an URL like this: http://yourname.mobify.me (if you use Blogger this is the best solutions!).
At this point you have to add in the tag <head> of your original template some lines of JavaScript code that allows to redirect visitors that use mobile devices to browse your website. The code is very simple:
<script type="text/javascript" src="http://yourname.mobify.me/mobify/redirect.js"></script>
<script type="text/javascript">try{_mobify("http://yourname.mobify.me/");} catch(err) {};</script>
<script type="text/javascript">try{_mobify("http://yourname.mobify.me/");} catch(err) {};</script>
Save your template and don't forget to publish it otherwise the redirect doesn't works! Ok, your mobile version is now ready! Take a look at the final result trying to load your website from a mobile device. Simple no? And also free! Try to take a look at the mobile version of woork loading woork from your mobile device and tell me what you think about.
Any suggestion about this topic? Please leave a comment, thanks!
