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.
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:
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 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.
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.
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!
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.
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.
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:
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.
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
<link rel="stylesheet" href="handheld.css" type="text/css" media="handheld"/>
Don’t fill the page with ads on either your mobile or main website.
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.
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.
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.
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.
Let’s talk about some techniques you can use to create a clean and professional-looking mobile website.
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 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 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 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, 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 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 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 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 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.
For those who use WordPress as their platform, many free and paid plug-ins are available. Below are some.
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 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.
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.
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.
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.
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.