Web access is important these days, no matter where you are. Your customers’ ability to access your website at their convenience is vital. Making your website user-friendly on a computer is one thing; making it available on a mobile platform is another.

The mobile Internet is the next battleground for developers and designers and should be seriously considered by advertisers. Your regular website won’t cut it on mobile phones. Making your website accessible on a mobile network does require a little extra work. If you do this work now, proactively, you’ll have a leg up on this growing trend.

In this article, we’ll look at basic techniques you can employ to make your mobile website work well.

You may be interested in the following related articles as well.

• Mobile Web Design: Overview, Examples and Tips
• Is Opera Mini 5 the New Game Changer?
• Can Flash Move Forward?
• 40+ Essential iPhone Apps for Freelance Web Designers
• A Guide To Social Network Design

Please feel free to join us and you are always welcome to share your thoughts that our readers may find helpful.

Don’t forget to subscribe to our RSS-feed and follow us on Twitter — for recent updates.

Traditional Websites Don’t Work on Mobiles

Let’s talk a little more about how regular websites don’t work well when people try to access them from mobile phones. Traditional websites are set up for traditional web browsers, and mobile devices do not have the same browsers or capabilities; mobile devices are small, have different shapes and sizes and might be unable to display regular websites. Your mobile website should be a simplified version of your regular website.

Almost every website would benefit from a mobile version, but certain kinds will benefit more than others, as Andy Scherer writes on EzineArticles.com:

1. Local and hyper-local business websites such as restaurants can benefit significantly from a mobile website because it’s an efficient and customer-friendly way to communicate with the public.
2. E-commerce websites are a given; they need to reach customers and make purchasing their products as easy as possible.
3. News-driven websites and blogs want to make their up-to-date, sometimes breaking content available quickly and easily. A mobile website can help accomplish this goal.

Obviously, having a great website is a priority for every business. Be proactive, and get ahead of the competition by creating a mobile version of your website; it’s truly the future of business online!

If you’re still not convinced, then read through the rest of this post. Here are a few facts to whet your whistle:

• The iPhone holds a significant portion of the mobile-device market share—and it doesn’t display any of the Flash-based components that traditional web browsers do.
• According to AdMob, one of the leading mobile-advertising networks, nearly 40 million unique Android and iPhone mobile devices were in use across the world in April 2010—and this is just two of the major players (that stat doesn’t include Blackberry, for example).
• In the first quarter of 2010, 54.7 million smartphones were shipped, which is a 56% increase over the previous year (see this ZDNet article).

The bottom line is that many people are beginning to rely on their mobile devices to access the Internet. The web market is growing and expanding, and while traditional web browsers are still in use, they’re being used on mobile devices more than on computers.

Is There a Lesson to Be Learned?

Well, if you’re using a Flash-based design and you don’t have a mobile version of your website, chances are you’re already experiencing some trouble. Your mobile visitors are probably not seeing the whole website.

If your website is graphically heavy or uses multimedia or programming functionality, it will not perform well on mobile devices. Remember, not all mobile users are using the latest high-speed data networks. Also, mobile-device processors aren’t as robust as the one in your home or office PC.

Simple, clean, gimmick-free websites should do well on most mobile devices without any additional modifications, but testing is important. Lightweight standards-compliant websites naturally perform better than resource-heavy websites on mobile browsers.

How Do I Go Mobile?

Creating a mobile version of your website is not as difficult as it sounds. Displaying the content of a modern CSS-coded website in a mobile setting can usually be accomplished by creating an alternate stripped-down version of the CSS style and then using automated code to direct mobile users to that version. Some website hosts with content management systems (CMS), such as WordPress, have ready-made mobile templates that take the hassle out of the process. In other more complex cases, though, it can be a big challenge.

Some website owners give just the major areas of their websites a mobile-friendly makeover. The choice is yours. If at all possible, bite the bullet and go for it. Your mobile visitors will definitely appreciate that your website accommodates them!

Why Make Your Website Mobile-Friendly?

The mobile industry is growing steadily, maybe because of convenience or instant gratification (especially given today’s zero-patience attitude). Here are five compelling reasons to optimize your website for mobile devices.

1. Think of the customers. Traditional websites are often rich, usually include Flash and video content and do not render correctly on mobile platforms. If you don’t provide a mobile version of your website, you are providing a poor user experience and risking customer dissatisfaction, which can mean only one thing: lost sales leads.
2. When you search on a mobile device, the query accesses a separate index maintained for mobile content. Mobile searching is still in its infancy; the indices are relatively small, and that means there are fewer websites to compete with. Optimize your website and build a mobile version and you’ll rank high now as well as in the future, when indices grow and the competition gets fiercer. In fact, in the future you’ll have a better chance of ranking high because you’ll have a strong reputation in the area.
3. Get ahead of the competition. The number of mobile users is expected to hit the 1 billion mark by the end of 2010, and one can realistically foresee mobile web usage reaching an unprecedented high over the next few years. If you don’t optimize your website and target this demographic now, you’ll waste a great opportunity to tap into a mother load of traffic.
4. Target the mobile-savvy. Surely you’ve seen them: the people who can’t bear to be separated from their BlackBerrys, PDAs or iPhones even for a minute. These “mobile junkies” spend more time using their mobile devices than their PCs and prefer to access the Internet via their mobiles. Typically, they are upwardly mobile urbanites, not averse to spending money, and several studies reveal that targeting them through any other medium would be a waste of time. If you don’t build a mobile website and calibrate your marketing efforts accordingly, you won’t reach a demographic with high spending power.
5. Various studies conducted over the last few years reveal that when compared with online ads, mobile ads have better click-through rates (CTR); mobile CTRs are between 5% and 15%, while computer-based CTRs average at 2%. Mobile space is the new frontier in Internet marketing and offers you the opportunity to take your marketing efforts to a new level.

Making Your Website Mobile

There is a special procedure for designing a mobile website. The easiest way to build a mobile website is to modify your existing website and make it compatible for mobile handsets. There are a few principles and elements to understand before you begin.

Layout

Browsing a mobile website can be time-consuming, so put the most important information at the top of the page. The layout might include the following elements:

• Logo:The logo should be attractive, but take care of its size; make sure it doesn’t exceed 2 KB, because images take a long time to load on mobile networks and you don’t want your website to look incomplete to some people.
• Website Navigation: Minimize left and right scrolling; that’s difficult on a phone. Instead, arrange your content in a single column. Typing on most mobile devices involves small or virtual QWERTY keypads, which are not easy to use. If your website is going to be mobile-friendly, it needs a thorough navigation system.
• Content: The information on your mobile website should be easy to read and navigate, and it shouldn’t take much time to figure out because visitors are probably on the go while they’re looking at it. Select the content that should be displayed, and tailor the menu by adjusting text so that users don’t have to zoom. As for typography, consider using headings to control font sizing.

If you want to put images on your mobile website, they should be in JPEG, GIF or PNG format; these are fairly lightweight. Compress pictures to avoid zooming, and allow users to turn images off as they browse. Always use the alt text property for images.

Coding

Mobile websites can be coded with XML, XHTML or basic HTML and CSS. Title tags, description meta tags, heading tags and file names should be carefully crafted with target keywords that maximize available content.

Many new mobile-interface developers hesitate when it comes to coding. Below are some tips that might remove that hesitation.

Make sure your code is proper and 100% valid, because most mobile browsers aren’t as able as their PC counterparts.

Seeing what your layout looks like on all existing mobile browsers is not always easy. One way to address this problem is to use fluid layouts that automatically adjust to the screen size. To accomplish this, avoid setting widths in pixels, and use percentages or ems instead.

Style Sheets: You can target various mobile devices to create a better user experience. For example, for users browsing your website with handheld devices, you can use in your website’s <head>:

<link rel="stylesheet" href="handheld.css" type="text/css" media="handheld"/>

Ads

Don’t fill the page with ads on either your mobile or main website.

Applications

If you have a large user base, create a dedicated application that targets a variety of mobile interfaces. If you make an app for specific handsets, then you don’t have to worry about fancy scripts, and you can enhance the application your own way.

Page Size

When assigning a style to a mobile website, keep it simple and keep page sizes small. The maximum page size for a mobile page is 25 KB, so make everything fit, and use fewer than 10 KB if possible. Keep in mind that users often have data plans that charge by the kilobyte.

Page Links

A good mobile website design has “Back” buttons and links. Navigating the Internet from a mobile phone isn’t easy, and many phones aren’t equipped with “Back” buttons, so provide them to help visitors escape dead ends. Also, make sure every page is linked to another page.

Testing

Test the mobile version of your website on multiple devices (and preferably on different platforms); it’s the only way to be sure that your website offers a good experience. If you don’t have access to multiple devices, use a web-based emulator such as iPhoneTester.com.

Applications and Tools to Assist You

Let’s talk about some techniques you can use to create a clean and professional-looking mobile website.

MoFuse

MoFuse uses your website’s RSS feed to create a mobile version. It stands for “Mobile Fusion” and provides a platform that enables businesses, bloggers and other publishers to offer a great mobile experience.

MoFuse allows a lot of customization: you can change colors and add new pages, logos and links to your mobile website. It also has its own tracking tool (like Google Analytics) to keep track of visitors. For a price of zero bucks, it has everything you could ask for.

Official Link

Mobify

Mobify provides a quick way to optimize a website for mobile access. Publishers, web designers and bloggers use Mobify to design visually engaging and usable mobile layouts for their existing websites.

Official Link

Mowser

Mowser mobilizes the web by taking HTML pages normally viewed on a PC and adapting them for mobile phones. During the translation process, Mowser converts the page in a predictable, linear manner (details of which can be found on the dev.mobi). To ensure that the highest quality and most useful web page is displayed on a mobile device, Mowser might alter images, text formatting or certain aspects of a page’s functionality or forward to the visitor to a mobile version if one exists.

Official Link

Wirenode

Wirenode is a very basic mobile-website creation tool. Customization options are limited; Wirenode offers some pre-made templates and allows some minor modifications (like for font color and background color). It doesn’t support custom domains, but it does have a tracking tool.

Official Link

Instant Mobilizer

Instant Mobilizer, from dotMobi, delivers mobility in seconds. It now offers a convenient and cost-efficient service for adapting existing websites. Instant Mobilizer resizes images, reformats text and inserts other mobile-friendly features to ensure that your website works on any phone.

Official Link

Mippin

Mippin is another tool that turns an RSS feed into a mobile website. It’s straightforward, but customization options are limited; you cannot use custom domains or track mobile visitors, but you can upload a logo, change the font color and type and monetize the website (keeping all of the revenue for yourself).

Official Link

Google Mobile Optimizer

Google Mobile Optimizer is the quickest way to make a website mobile-friendly. Just supply the URL and it will optimize the website for viewing on mobile phones by removing the header and ads and resizing all image content. This is actually an on-the-fly creation tool. There is no signing up and no way to customize the look.

Official Link

MoSync

MoSync is a mobile application development SDK based on common programming practices and standards – like full Eclipse integration and C/C++. With MoSync you can easily develop complex applications and then, with a few clicks, build that application for many different mobile platforms and hundreds of different mobile devices.

Official Link

Wapple

Wapple provides technology and solutions for mobile web sites and services that work on all mobile internet browsers. Not only do Wapple have the leading technology in Canvas™ to allow you to achieve this at the best price, we are also experts on mobile web design, experience and advertising offering a full managed service.

Wapple Architect™ allows developers to quickly and perfectly adapt existing web content and applications for mobile, using a revolutionary new programming language.

Wapple Exhibit™ adapts and optimizes your mobile websites to the capabilities of every mobile device, ensuring the best end-user experience and full brand integrity.

Official Link

WordPress Plug-ins

For those who use WordPress as their platform, many free and paid plug-ins are available. Below are some.

MobilePress

You can set this plug-in to display a particular theme for a specific device model or mobile browser (such as Safari for iPhone or Opera Mini); your blog will display according to the device’s capability. This plug-in also allows theme developers to develop their own mobile themes for WordPress blogs.

Official Link

WordPress Mobile Edition

WordPress automatically detects visitors using mobile browsers and loads the mobile version of your website. You can edit the list of mobile browsers in “Settings.” This plug-in allows particular themes to load on specific mobile browsers or devices, including iPhone, Windows Mobile and Opera Mini.

Official Link

WordPress Mobile Pack

This one’s got mobile recognition and device adaptation and is widget-ready. With these features, it automatically resizes images and splits articles or posts into multiple pages. The admin panel lets you manage your website with ease, and the ad widget displays mobile ads or AdSense on the mobile versions of your web pages.

Official Link

WPhone Admin Plug-in

With this plug-in, you can manage your WordPress installation from a mobile browser. It has two admin interfaces. One is for the iPhone, iPod Touch and other devices that support JavaScript, CSS, AJAX and sliding menus. The other “lite” version is for phones that don’t support JavaScript. The plug-in automatically switches between the rich and lite versions based on the browser being used.

Official Link

Wetomo WordPress to Mobile

Wetomo simplifies complex websites to make them accessible to mobile phones. This plug-in detects mobile phones and acts as a proxy between you and the user, modifying the blog to suit the handset.

Official Link

Mobile Admin

This WordPress plug-in enables you to access the admin interface on mobile devices in a user-friendly manner. It is specially developed for iPhone and iPod Touch browsers, and it supports most other mobile browsers at a basic level. Mobile Admin supports most WordPress admin features, such as auto-saving, tagging and comment moderation.

Official Link

Conclusion

The debate continues as to whether and when mobile technology will catch up and allow users to access full websites. We shouldn’t assume everyone will get there at the same time. Ensuring that your key content is accessible now will help you get the traffic you want in future. People who can access the mobile version of your website today might want to return when they are able to access the whole thing.

If you have any questions about designing mobile-friendly websites, feel free to contribute in the comments section.

Image Credits

• Man With Many Arms
• BBC News Internet Website on Apple iPhone
• A Woman Writing
• Our Site on the Go