With the number of people owning smartphones growing and the market pretty much split between Apple and Android, your website needs to look good on any smartphone.
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. Your site should have Mobile CSS (Cascading Style Sheet) which is HTML code in your header section of your website. It should look similar to this:
<link rel="stylesheet" href="http://domain.tld/mobile.css" type="text/css" media="handheld" />
(Since 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! Instead, check source code of your website, by right clicking on the page and choose "view page source".)
Check with your webmaster if
<link rel="stylesheet" href="http://domain.tld/mobile.css" type="text/css" media="handheld" />
is not shown in the source code.
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. And, 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.
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" />
Again, 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.
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.
Second, 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 buy 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.)
Your website needs to look good on a smartphone or your not in the game.