Performancing Metrics

How to Create a Mobile Version of Your Site in Just a Few Minutes

mobile version of your site

When 2013 was just kicking off, pundits and aficionados were dubbing it as ‘year of the mobile’. As much as we like to get snarky with the headline catching proclamations, they might actually have been onto something. Taking a look at the numbers between 2010 and 2013, we indeed see that mobile devices’ share of global internet traffic has jumped from 2% to 14%. Research is indicating also that this trend is only gaining steam. Whether in Southeast Asia, sub-Saharan Africa or Scandinavia, there is now an unprecedented amount of smartphone and tablet owners along with unprecedented accessibility to Wi-Fi and 3G networks.

WWW dot Darwinism

So the world is in the process of ‘going mobile’. Does this then have any implications for web content or web design? Do sites now need to perform and look differently? The short answer is, yes they do. In fact, many websites are actually losing traffic because they’re not adapting to the changing reality of how they’re accessed. In industry jargon, they’re not ‘optimized-for-mobile’.

How is this so? What do sites have to do to keep up with the changing world around them?

“Design is about how a product is used” – Steve Jobs

To answer the above, we need to understand that there are a few issues that need to be addressed when designing a mobile-friendly site. First off, many desktop sites contain a wealth of multimedia and javascript components, which a desktop machine – with its relatively high processing power – has no problem displaying smoothly. Mobile devices though, due to their relatively limited processing power, usually can’t handle them properly. These components then have to be used in a site sparingly.

mobile version of your siteSecond, because of the small screen sizes of smartphones (between 4 and 5 inches in size on the average), fonts which are normally suitable for a desktop monitor (around 19 inches in size) usually appear on them very small. Which brings me to my third point: On mobile devices, there’s only room for viewing objects vertically. There’s no room for positioning objects side by side (assuming they’re sized large enough for the human eye to behold), whereas on desktop sites, due to the large viewing space, components can be placed side by side. On a smartphone, such a layout would require the user to zoom out and in and scroll left and right (besides up and down) for accessing content (see screenshot).

In short, a desktop site on a mobile device can translate into a frustrating experience for a user, leading to his abandonment of a site. For site owners this can be a big deal.

The Everyman’s Solution

How then do we remedy this situation? How does a site owner transform his site from a mobile Syria into a mobile Singapore? If you’re a web professional who doesn’t mind the toil (superfluous?), there are a number of effective ways to do so. The thing is, these solutions require time and expertise to implement, or at least the funds to pay someone to implement, which renders them inappropriate for the layman, or even for the designer who just wants to take care of business quickly.

Fortunately, for time pressured, code-challenged, frugal folks, a solution is available in the form of one of the many online platforms for building a mobile website. Such platforms allow you to create an alternate mobile version of your site, which is served dynamically in as optimized-for-mobile HTML to mobile visitors. Let’s have a quick look at what I mean, and you’ll see how you can create a mobile version of your site easily.

Getting Mobilized

What an online conversion tool does is create an alternate version of your site, which is served to visitors identified as browsing on smartphones or tablets. But first we need to build our site’s mobile version. To get started, we navigate to one of the abovementioned online site builders (in our case GinWiz.com), input our site’s URL and presto! a mobile version of it is created in a matter of seconds. In our case we used dunkindonuts.com (who doesn’t love donuts?).

mobile version of your site

We’re also able to customize the look and feel of our site and can add unique mobile features too, such as the click-to-call, click-to-email buttons.

mobile version of your site

Once optimized for mobile, a site will look and behave differently than it would just being left in its desktop format. For instance here’s a look at the desktop version of the popular site Ask on a mobile device:

mobile version of your site

In order to properly view content a user would need to zoom in and then scroll in 4 directions. After optimization for mobile the picture is a bit different:

mobile version of your site

The content is within viewing range, is laid out from top to bottom.

How do smartphone-using visitors actually access a mobile site?

To make sure your mobile device-using visitors actually reach and enjoy your mobile site, all you’d need to do is insert a line of javascript in your ‘head’ tag on your regular site’s homepage. Once that’s inserted, any visitor to your site using a mobile device will be automatically redirected to your mobile site.

Summary

To sum up, there are more web surfers using mobile devices today than ever before and they don’t have much patience for sites that aren’t optimized for their devices. If you own a website or are a designer, a great way to cater to them (in addition to the standard professional ways) and make sure they have an optimal browsing experience when visiting your site, is to use an online site builder.

About the Author
This article was written by Shimon of GinWiz, a tool which allows you convert and optimize your website for any mobile device.

Lead Image via Bruce Clay

Categories: Blogging: How To, General, Guest Posts
Tags: , ,

This post was written by . You can visit the for a short bio, more posts, and other information about the author.


Comment with Your Facebook Account

Comments

  1. VectraSoft ) says: 6/3/2013

    Its best blog I must say because really informative and worth reading because of the mobile access we can have an easy development on mobile. Thanks for sharing.

    Reply

Content


Receive the top stories from BloggingPro and the Splashpress Media network every week, right in your Inbox. Relevant and timely content is yours for FREE!