call today
866.788.0023

Going Mobile - Taking Your Website to the Smallscreen

Submitted Tuesday, October 2nd 2012 1:34 pm by Jeremy
tags:   mobile  

There are currently over 1 billion Smartphones in use, and smartphones are being activated at a pace of around 1 million a week. Mobile internet usage is projected to surpass computer internet usage in 2014. According to figures from Microsoft, over 50% of all "local" searches, generally searching for things physically close by, are done on a mobile device. If the days of not being terribly concerned with what your site looks like on a mobile device aren't already in the rear view mirror, they're visible on the horizon. That goes double if you own a restaurant or business where getting people to a physical location is your aim.

You have many options for serving up your website to go. There's not really any main things that make your site a "mobile website" or not. You might find articles referring to mobile WAP websites when, back in the not-that-long ago past, mobile was a very different animal from a non-mobile site. Today internet browsers on smartphones are often times more capable at rendering a modern webpage than the browser on your computer. Your main concerns will be the implications of interacting with your website with a finger, instead of a mouse, as well as, generally, a smaller screen.

Four Options For Going Mobile

 A Light Polishing

A mobile version of your website may not be a major endeavor at all. It can be as simple as a tweak here and there on your existing website. As well as simply taking time to make sure your site works on a mobile device. Maybe your website has a flourish here or there that looks great on a monitor, but wastes precious screen on a mobile device. Those flourishes can simply be hidden, based on the screen size on the device.

Likewise, lots of people like certain things to happen when the mouse cursor moves over the item (mouseovers), such as popping up a submenu on a menu item. Phones and tablets don't have a cursor to be over things. Your finger is tapping the screen, or not on it. The mouse over events will take place if the finger lingers, but often times this "long pressing" on something is the smartphone's answer to a right click, so you can't depend on that. You can have your mouse overs, just ensure everything on your website is available via simple clicks as well. In some cases a compromise might have to be made in order to get your site to work well in both formats.

 A New Template

Many websites are made so that each page of content is wrapped in a single template. You could determine if a user is on a mobile device or not and serve up different templates for your website depending on what type of device they're viewing your website on. If done in this manner you don't have to worry about whether or not the mouseover driven menu from the non-mobile version works well on a touchscreen device, because you can show those users a whole different menu system, and method of navigation. This is a cost/time effective solution if there are compromises you don't want to make, that need to be made, to get your website that wasn't designed with a mobile phone in mind working well on a smaller touchscreen device. However, this approach still suffers from the fact that the content that your new mobile template might be wrapping around might also have been done without taking mobile into consideration. 

A Whole New Website

Maybe you don't want to make compromises anywhere. You want a flash-based site for desktop computers, as well as a mobile presence, or you just don't want to have to worry about either the base website design/template or the content looking/working great on all devices. (If I make a change for one, what happens to the other?) In that case you can make a whole second website wherein every image, every page, every character is put there knowing that it is there for a mobile website. (Conversely, on your non-mobile site, you never have to worry about what a change might mean to your mobile site.) While this approach offers the most flexibility, it's obviously going to be the most work. Your concerns will shift from making sure your website works consistently to making sure your content is consistent. You don't want to advertise a sale on your mobile website that you removed from your non-mobile site 3 weeks ago.

A Hybrid - A middle ground between only "A New Template" and "A Whole New Website"

If a simple light polishing, and maybe a couple compromises between your mobile and non-mobile, don't get you to where you want to be then the ideal solution is probably to meet somewhere in the middle of using your content as-is, or starting over on a new site. A solution like this will require a Content Management System, or CMS, however. What that means is that you can control the pages and content on those pages from somewhere within the website, rather than making changes on HTML pages, and transferring them up to the server. If you're typing your content into a webpage somewhere where it's saved, and the content is recalled and shown to your clients, then you're using a CMS in some form. 

Where the "hybrid" solution would come into play is as follows: If necessary, you would create a new template for your mobile website. Your CMS would be altered so that you had the ability to override the default content of the page with special mobile content. (There would be the box you type words into now, as well as a second one.) Your mobile website would use the default/non-mobile text for the page, unless you've specified mobile text to override it. 

The end result is that you get the ease of the "A New Template" solution with, nearly, the flexibility of "A Whole New Website." Most of your pages/content will probably look perfectly fine in the new template as is. Thus, you only have to supply mobile friendly replacement content in the few pages that currently don't work.

  device     site     compromises     generally     type     page     simple     smaller     times     simply     touchscreen     website     text     smartphones     internet     flexibility     approach     screen     works     system     finger     webpage     menu     usage     solution     main     computer     content     light     concerns     non-mobile     making     item     pages     hybrid     middle     template     mouse     options     great     work     websites     polishing     worry     cursor     change     cms     mobile         version  

Please Share Me On




webteam blog