Tag Archives: mobile site development

  • 26 June 2011
How to: Mobile(ize) Your Site

How to: Mobile(ize) Your Site

Last time in this series, we asked you to think about whether your marketing should be aimed at the wealthy but specialized mobile market. Is this 6% of internet traffic a segment that you want your message to reach?

If you decided to take the mobile leap, read on, as our development team delves into the specifics of making your site mobile-ready, whether you plan on adapting a pre-existing site or creating a brand new one from scratch.

So  What does a mobile-ready site entail?  

Making Your Site From scratch
It’s easier to make a total redesign of a site, or an entirely new site, than it is to retrofit an existing one.

No flash
iPhone users are a huge part of the mobile market,  and iOS (the operating system for portable Apple products) does not support Flash at all. Although it is tempting to use Flash to embed video or create enticing interactive features, just know that using it cuts you off from many mobile visitors.

Big text
One great way to deal with the users’ tiny screens is to make sure that the main title and the other most important text on the page are unusually large. Try to find the balance between large enough to be read at a glance on a mobile screen, but not so large that desktop users find it distracting. 60-80 points are ideal. To apply this to text, put this in its paragraph tag.

If you get bored with the defaults, you can always use different fonts to make the text look so good it resembles a polished image (text should be an image as infrequently as possible for SEO reasons, especially long strings of it).

Brief menus

Large text and a small screen means less characters should be on the page. Try to boil the text down to its key points. Make the top menu have no more than 5 options, with short words instead of traditional phrases. “Products” instead of “About Our Products,” for instance.

Optimizing an Existing Site
Depending on how your site was built, you can use those three tips just mentioned to modify it. If you are making your own site, decide how much of an investment that will be. If someone else is developing your site for you, you should ask them for a time/cost estimate, since it could be fast and superficial changes, or, if you’re unlucky, it could entail significant rehauling; requiring lots of new graphics and code.

Many developers prefer to have two versions of the same site: one mobile and one “full,” or desktop. Great idea, but how is it done? Nobody wants a “choose your own adventure” screen a la 2002, with “choose mobile” or “choose desktop.”

The site has to automatically detect what sort of device the user is on. Thankfully, each browser gives off a signal as to its identity. Using the programming language Python, a web programmer can write code to automatically load the appropriate version of the site based on this signal (known as a “user agent string”).

Other programming languages can be used to program device detection and redirection scripts, including PHP, Ajax and Javascript. Look in the comments of the above link for examples of that. You can also develop an app- which will be discussed in the next post.

Need more help?
If you need an expert to discuss these options with, or want some coding talent to help optimize your site, feel free to contact our web development and consultation team at info@webserves.org.