Your website finally looks perfect in your Web browser — it’s the jewel of your desktop. But what about people coming to your website through mobile phones?
It’s more important than ever, in fact, to have a website that’s mobile friendly.
According to research from Morgan Stanley, global shipments of smartphones and tablets have surpassed those of desktop PCs and notebooks by the last quarter of 2010, and this gap will increase over the next few years.
The report goes on to say that more and more people are using their phones to interact online, and that means that organizations with great mobile websites will inevitably have an advantage over others.
There, of course, are many challenges to creating mobile websites. Mobile Web browsers often render sites properly, but not always. Also, with smaller screens, the Web design adage that every pixel counts gains even greater importance.
To make sure that your website is prepared for mobile visitors, we’ve come up with three questions to ask your Web developer.
1. Are my forms in HTML5?
Many sites have contact forms that let visitors enter their email address and other information. Entering data is often more difficult on a mobile device than on a desktop computer because you don’t have the luxury of having a full-sized keyboard.
Luckily, the latest iteration of HTML, HTML5, supports tags that tell a mobile Web browser what type of data belongs in the form field. Many mobile phone browsers use these tags to adapt the text entry keyboard to suit data entry for that field.
For instance, when an iPhone user focuses on an email form element, they get an on-screen keyboard with a shortened space bar (spaces are less important for email input), and it adds “@” and “.” keys next to the spacebar. When inputting into a telephone form on an iPhone or Android phone, it will switch from its regular text entry keyboard to a number screen.
HTML5 forms make it easier for visitors to interact with your site, making them more likely to do so. We recommend updating your forms with HTML 5.
2. Does my website work without Flash?
Flash is used to add animation, video, and interactivity to webpages, however, not all smartphones are compatible with it. It’s best to make sure your website gracefully falls back on alternative ways of showing animations, video and interactions.
Your animated and interactive elements that use Flash can often be recreated using jQuery.
There are some options to ensure your Flash videos are properly displayed. Video for Everybody is a HTML code snippet that uses the HTML5 <video> element to embed a video into a website. If the HTML5 video doesn’t work, it will fall back to an embeded quicktime movie, and then to Flash.
If Video for Everybody isn’t able to show a video, a placeholder image is shown and the user will have a link they can click to download the video.
3. Do I have a different CSS style for mobile?
You can easily add an alternate stylesheet for mobile devices to create a set of style options specifically for mobile devices.
On mobile screens, there’s less space for extravagant layouts. When designing the mobile-specific page, it’s important to eliminate clutter, and keep it simple. Evaluate every button, badge, ad, photo, and any other page element, and determine if it’s absolutely necessary. This may mean eliminating many elements, or changing a three-column layout to a single column.
When creating your mobile stylesheet, keep in mind that simple pages often look better on mobile devices, and are more useful to users.
An easy way to evaluate your mobile website is to simply borrow your friends’ phones and see how your site looks and functions on them. Try to browse your site from as many different phones as you can. You can also see how your site looks from online mobile emulators like Opera Mini Simulator or any of the downloadable emulators.
Need help ensuring that your site is mobile friendly? Kobayashi Online is here to help deliver great experiences to your visitors, no matter what device they use!