Partner Views Blog

Five Steps to Optimize Web Page for Mobile

Tweet

 

According to Nielsen’s latest figures on smart phone purchases by US Consumers, Apple’s iPhone 4S is closing the gap on Android. Overall Apple’s operating system now accounts for 30% of all smartphone users as opposed to Android’s 46.3%. The operating system that has been losing ground is the RIM Blackberry with only 14.9% of the market share. This is interesting in itself but I think that the bigger news from Nielsen is, “As of Q42011, 46 percent of US mobile consumers had smartphones, and that figure is growing quickly.” Another more revealing study shows that 62% of Mobile Users 25-34 own Smartphones. With the number of people owning smartphones growing and the market pretty much split between Apple and Android there are five very important things you need to do to make your website accessible to mobile smartphones. 

1. Mobile Web Page: Make sure your website is organized to display on a mobile web page. Generally this means your site has Mobile CSS (Cascading Style Sheet) which is HTML code in your header section of your website that looks similar to this:
   <link rel="stylesheet" href="http://domain.tld/mobile.css" type="text/css" media="handheld" />
   This is not a technical “How-To” blog so if you are not familiar with CSS and HTML don’t put this code in your header and expect everything to be ok. Check with your webmaster first. If you use a platform such as HubSpot (affiliate notification) then this is taken care of as a default function. Many WordPress themes now come with Mobile CSS and if yours does not there are plenty of plug-ins available. If you like to get under the hood and do your own coding check out Mobile CSS by Sea Breeze Computers and the The 5-Minute CSS Mobile Makeover by Perishable Press. Another good way to check your website is to get a smartphone and look at your webpage and see how it looks.
2. Meta Viewport Tag: This is a simple code that tells the mobile device how to orient your mobile web page. This is what makes it possible to turn your smart phone at any angle and see the page and it usually looks like this:
   <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
   This code should be in your Header HTML but check this function on your smart phone and make sure that it works.
3. Apple Icons: With nearly 45% of new smartphone buyers choosing iPhones this is a necessary step. This is an icon that allows iPhone and iPad users to add a quick link to your site on their device. You can see our Apple Icon here on the right. If you don’t have an Apple Icon it is a pretty straightforward procedure. First design a 57x57 pixel icon for your web page or business. Make it in the .png format. Upload it to your website’s file manager then add the following link to your Header HTML:
   <link rel="apple-touch-icon" href="/filename.png" />
   Be sure that "/filename.png" is the file name of your new Apple Icon. That is all there is to do.
4. E-Mail Optimized for Mobile Smart Phones: Along with the rise of mobile and smart phone use is the practice of reading e-mails on a mobile device. If you send e-mails as part of your business’ marketing efforts or if you send e-mail newsletters, make sure that that they can be read on smart phones. The easiest thing to do is to just send text e-mails. If you just need to have a bit of color or some images in your e-mails be sure they are optimized for mobile. The Email.grader.com is a great tool that will show you how your e-mail looks on different devices. Most e-mail programs like MailChimp and Constant Contact now give you the tools and options to optimize your e-mail for mobile devices.
5. QR Code Marketing: This really has nothing to do with how your website looks on a mobile phone but if you have gone through the work of optimizing your website for mobile phones you might as well encourage people to connect with your site by using QR Codes. If you are interested Image Media Partners provides a free and a professional QRCode Generator and Mobile Web Marketing Platform. You may also find the QR Code Checklist handy.

Remember; if you are not familiar with HTML do not try to change the code without any help. It is best to work with an experienced web designer. The HubSpot platform is already optimized for mobile devices and as a Certified HubSpot partner we highly recommend this platform for any website whose inbound marketing goals are greater web traffic, higher conversions and mobile optimization. Let us know if you would be interested in a free inbound marketing and website analysis.

Photo credit: Tsahi Levent-Levi