As the number of people browsing the web from mobile devices increases, the demand for websites that respond to those devices surges. And still there are websites that aren’t equipped with the tools necessary to respond to those changes, whether it be lack of information or just not having the time or money to upgrade. The process of optimizing your website for a mobile device isn’t actually as hard as it seems, but knowing the steps in creating an effective mobile website can be the difference between success and failure. In this article I will walk you through five fundamental checkpoints to keep in mind in the creation of your mobile website. Feel free to leave comments if you feel I’ve missed important steps, or wish to touch upon any of them.
Choose the Right Markup
In short, markup will make the content readable by mobile browsers. In the creation of your mobile website, it’s important to choose one markup language and stick to it. Explore your customer’s needs in choosing the right one that best fits their demands. How do you go about choosing the right language for your user? Here are the basic languages below, along with their key benefits/limitations.
- WML (wireless markup language) is one language used to make sites mobile-ready.
- Sites providing email service, sports scores, and a calendar service are the one’s that can benefit the most from having WML
- WML is used by legacy systems or sites targeting users with low-end phones such as the Nokia.
- If your customer uses a basic, affordable phone such as the Nokia, WML is the best markup language for you.
- XHTML is the computer language designed specifically for mobile phones.
- Most phone-browsers support this language, and has become the predominate language of the web.
- XHTML-MP is a modularization of XHTML, and is basically indistinguishable from it.
- If you’re designing for an advanced device such as the iPhone, XHTML is preferred over XHTML-MP.
In deciding between the two, access your site’s analytics to see which devices your visitors are using.
Knowing Your Device
Aside from markup languages, mobile phones differ greatly in rendering capabilities across browsers. Just as with IE6, Safari, and Firefox have extreme differences, mobile phones are a whole different device you have to account for. And since there’s so many shapes and sizes on the market, it makes the task even more cumbersome.
- Common screen sizes are 128 x 160, 320 x 480, 176 x 220, 240 x 320
- Although many people have their website adjust automatically for hand-held devices, others create a mobile website from scratch. Web services such as Mobify make this possible.
- This is usually the best method, as you can create a customized site geared specifically towards mobile users, while allowing traditional web visitors to access your full site.
- To avoid user frustration, include links in your website’s footer to the mobile version of your site, and vice-versa. This way visitors know both are available, easing the stress of the unknown.
Scaling Down Your Website
A common tactic for those designing for the mobile web is to simply scale down their existing site to fit the parameters of a mobile device. This practice is counterproductive, as the mobile user is visiting your site to access specific information as quickly as possible. Also remember that many mobile devices use touch-screen technology so designing your UI around it is worthwhile. In determining what to include on your mobile website, consider the following:
- Remove any copy that is not important for the mobile visitor
- Reduce the amount of navigation items to only those your mobile visitor needs to access on the go.
- Increase the size of your text to a readable level, links are recommended to be 32 pixels to account for the human fingertip.
- Design UI elements large. Mobile users tab and drag so you must accommodate to their fingertips.
- Optimize blog posts using pagination to make skimming and reading more natural.
- Remove unnecessary animations or images as they will load down the loading time of the website.
- When applicable, Media Queries can be used to scale an image properly across all browsing devices.
Enhance your mobile websites usability by including only pertinent information that a mobile user needs while on the go. You have to keep in mind that browsing a website through a mobile device presents its own challenges. And while phones such as the iPhone and Android have made great strides in enhancing the web usability for its customers, not all phones make the task easy. Here are some tips to keep in mind regarding usability for mobile websites:
- Older phones aren’t able to scroll left and right, leaving the user unable to browse a full website.
- If your website requires a lot of tabbing and clicking, navigating it on a mobile phone becomes a challenge.
- In creating your mobile website, focus on the primary features that mobile users are likely looking for. Such features could be contact information and store locators.
- As mentioned previously, links should be around 32 pixels to account for the human fingertip. Contact forms should also fit the viewport.
- Test your Website. Your layout may look great in one device, but slightly different in another. Online emulators allow you to see what your site will look like on different devices.
Adding Your Mobile Website
There are few different ways for adding a mobile version of your site to your domain. For instance you can create a subdomain from your primary domain that houses your mobile site. For instance, mobile.yoursite.com and yoursite.mobi. In any case many viewers still reach the primary domain when typing in your url. In this case you can:
- Route traffic to your site depending on the viewer’s browsing agent. If they visit yoursitename.com, they can automatically be redirected to mobile.yoursite.com, for instance.
In this article I’ve discussed key checkpoints to keep in mind in the creation of your mobile website. As the web expands, so does the devices and technology used to access it. Gone are the days where we had to worry about how our site renders in Internet Explorer. These new advances in technology presents more opportunities to appreciate and gain the most from the web. It’s our job to make this as easy as possible for those who wish to get on board.
GET EXCLUSIVE WORDPRESS & BUSINESS TIPS
Enter your email to join with 1WD in 2016. We will send you only the best content as well as special subscriber only tips to supercharge your WordPress website and how to succeed as freelance designer!