Mobile Optimization: How To Make Your Existing Website Mobile-friendly
Now that you have a fair idea of the differences among Responsive Design vs Mobile Site vs Mobile App, let’s proceed to the next stage which is to make your site engaging to the consumers who utilize mobile phones. Read on to learn more.
Mobile-Friendly vs Mobile-Optimized.
Mobile-friendly shows the site exactly the same as how it is shown on desktop or a handheld phone. Although it is viewable on the latter, it is not truly optimized because the viewer has to pinch-to-zoom or scroll left, right, up or down to view everything. Mobile-optimized, on the other hand, is specifically designed for phones and tablets. This is like the second version of your main website, only, it is more condensed in terms content and graphics.
You can choose to maintain your current and modify to turn it mobile-friendly or opt to create a second copy mainly intended for smartphones. Whichever it is, below are seven (7) tips to achieve your goal – that is, to reach out to the mobile client.
- Mobile compliance. Check if your website is already mobile-compliant. You can either test how it looks in different gadgets or try a web tool to receive recommendations. A good tool is Gomometer by Google.
- Compatibility. If you have plans to revamp such as employ a web design professional in the Philippines, consider a platform that is compatible to mobile. If you’re using WordPress, either apply a responsive theme or install a WPtouch plugin.
- Technology. As much as possible, do not use Java as it loads a lot of codes. Flash is a big NO as Apple products do not support them. Stick to the HTML-based or CSS.
- Design and Layout. Take note of the following.
- Screen. Study the range and size of various screens so that UX (user experience) won’t be compromised.
- Navigation. Simplicity is beauty! Not too complicated, keep them large and easy to navigate with both via web and mobile.
- Buttons. Follow the size of an average finger tip, at least 40px.
- Small graphics. Stick to slideshows and image rotators that function without Flash.
- Key information. Focus on the chief content then de-prioritize those that are not.
- Minimum typing. If you opted on a mobile-optimized site, maximize drop down menu and check box when user is asked to enter data. If you have a search bar, instead of letting your visitors type in the words, show the top 5 results where they would just click on the checkbox next to the most searched word.
- Call to Action.
- Text-based contact information.
- Address. Have an extra button that will link to the directions app
- Phone numbers. Add a link that can easily direct the visitor to make a call simply by clicking on the number.
- No to pop-up windows.
- Loading speed. One of the most integral factors to consider is how fast your website loads on a mobile phone. Design with small images and program with not too many scripts to improve load speed.
- SEO/Search Engine Optimization.
- Mobile Sitemap. Just like the regular SEO web practices in the Philippines and around the globe where you normally include a sitemap for Google robots to read, a mobile sitemap is important too for mobile search engine index.
- Mobile redirects. Code with mobile redirects so it will automatically redirect to the correct site based on the device you used. Always give the reader an option to go to the web version.
Learn how to market your mobile website on the next post.