How to Create a Mobile Version of Your Website
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.
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:
- 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.
- E-commerce websites are a given; they need to reach customers and make purchasing their products as easy as possible.
- 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.
- 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.
- 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.
- 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.
- 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.
- 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.
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.
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.
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.
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.
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).
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.
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.
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.
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.
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.
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.
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.
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.
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.
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
Great article and incredibly useful list of resources!
Good article. The only issue I have with mobile devices is the screen size. I have a touch phone, and have to strain my eyes to read something that small (and I have 20/20 vision). The small screen size is also uncomfortable for typing. I really don’t like to use phones to browse the internet. My 24″ screen is much more comfortable. I, personally, don’t think the future is with mobile phones. It’s probably with something like the iPad.
The iPad screen isn’t too small and the device isn’t too bulky to carry around. In which case, I don’t have to do anything differently when designing my website. The iPad accommodates the website’s size if designed within 1024×768 pixels (which is a standard canvas for building websites).
I may still make a mobile version of my website, but I don’t really feel a big need.
Thanks for the great resources!
This is kind of a bummer since I have about 9 websites and probably am going to have to alter each one for mobile. Glad you posted this. Time to get the thinking cap on.
You forgot WPTheme for one of the wordpress plugins.
Why don’t you talk about CSS media queries ? Media handheld is totally outdated and useless. Do you ever have tested your mobile websites ?
First read this article on mobile versions of sites via a feed reader link – on my Droid X – and I noticed that this site does not have a mobile version. Or at least, not one that works automatically.
Just sayin’.
Great article, very useful resources
Good article. A lot of the popular shopping cart platforms are finally catching on and offering mobile-optimized sites.
Nice collection, will give some a try
thanks
beautiful article great information to learn about mobile websites
Great article thanks.
AWESOME coverall article. well-written coverage of the topic, and useful resource list. thanks.
I am little confuse that which app should i use for my blog to turn into mobile version because all are best. By the way i use Mobilepress plugin because its easy to use!
I’d like to know where you heard that the maximum page size for a mobile page is 25 KB. For which phones? On what types of networks?
What happens if the page is over 25k? Does the phone explode?
There are no hard and fast rules to page and file size on mobile devices. Each project should take into consideration the devices and networks their audience are on and use that as a guide.
instead of using the CSS2 media type ‘handheld’ it’s now pretty save, and more stable, to use CSS3 media queries. And you will have better control over viewport switching (portrait to landscape) by using the CSS3 multi-column layout module.
Thanks for the information regarding the use of internet on mobile sets..I totally agree with your all post and specially that application should be mobile friendly so that any body can access it as the trend of using internet on mobile is rapidly increasing day by day..
Thanks for the great resources!
There should be one more entry on the list of tools for automated mobilization. http://www.zubibu.com mobilizes e-commerce websites, including checkout, in few minutes.
Hopefully it will get it’s place in next revision of this useful post :)
anyone have any idea of a great wp-theme for android phones?
Thanks for the article. Just wondering if having a mobile.css and javascript to detect the mobile device and call the mobile.css is a good alternative to having a mobile specific website?
Great overview! Thanks! We would like to suggest the application we are currently developing under “Applications and Tools to Assist You”. It is still in beta stage and worth a free trial: Automated web to mobile application: webtosmartphone.com, which converts your websites and blogs automatically to be mobile-friendly.
Everytime we upgrade our mobile engine your sites is automatically updated, you can also integrate your ads (google adsense for example) and analytics to be mobile-friendly. More to come soon!
Really super blog to readers,everyone can motivate from this blog. Good going, give some more pictures in future.
welll explained and i have been searching for such info. Thanks for this great article. would like to be notified of any more of this.
Hi guys,
To the list above you may also add MobilizeToday.com
IMHO it’s much better than MoFuse and cheaper than Mobify. Will see how it work on my real website. There is free registration.
This is really a nice collection thanks a ton.
There are also several other ways to create a mobile version of your traditional website. Just like me, I’m a photographer with a bit of knowledge on CSS and HTML, I was able to create on my own a mobile version of my business website by using mobile CMS providers. My CMS provider, brick&mobile provides all the resources for an easy setup of your website.
What’s more, most people do not browse all of the contents that’s in a mobile version of your website. When it comes to consumers, all they need to know when they come look for you is your contact details and address of your establishment or enterprise. No need for fancy java programming. I do recommend brick&mobile because of their 100% good service.
welll explained and i have been searching for such info. Thanks for this great article. would like to be notified of any more of this.
We are in the look out for having a mobile version for our site veethi.com. It has a huge database along with images and videos. I’m not sure if the products suggested in this article can be used. Very informative article.
Just wondering if you could help, I’ve set up a .mobi website but all the codes to automatically redirect mobile phone users to the mobi site doesn’t work. Any suggestions? So that when users click on josephinejost.com on their mobiles it automatically redirects them to the mobile version?
Of course: great article – it goes without saying.
One thing that still shocks me, as a user rather than a vendor, is the number of restaurants in major UK cities that still use homepages that are just Flash files – with no alternative navigation and no way to consume their content, let alone make a booking. Given that a large chunk of mobile use is related to local search it’s staggering that so few restaurants are aware of their invisibility to local customers. Evidently they haven’t tried viewing their websites on mobile devices.
Despite our, and Google’s best efforts with their significant mobile campaign, we still need to do more as industry to encourage more establishments to “think mobile”.
Regards,
Lee
One aspect missing from this fantastic post was the SEO implication of creating a non-responsive mobile site. Many of the tools we see don’t offer customers the ability to add canonical tags from their mobile website to their dashboard or don’t instruct customers how to implement rel=”alternative” tags from desktop to complete the SEO look.
At the very least a mobile website should include canonical tags if customers are going to largely copy content from desktop to mobile.
Totally agree. More and more people now spend time on mobile, thus having a mobile design can help to boost your sales. Building a Magento mobile site or a mobile app is a great idea.
I take a look at your blog it’s really great……Thanks for sharing such a valuable information with us…
Hi, Do you think mobile sites alone are better than having html sites? What would you recommend for the future of web development. Html or mobile?
Thanks
Thanks for this wonderfull information
Thanks for sharing … good information