04 Jul Making Your Site Mobile Friendly
Optimising user experience for mobile is becoming more and more important. We Irish are early adopters, gadget nuts, serial chatters, texters and users of social media. The Irish love smart phones and the mobile internet.
For my money Apple is the common denominator when it comes to mobile development practices and standards. When it comes to the Irish market Apple have the lions share so it makes sense to prioritise them. Plus the other 15%-20% represent numerous handsets with a variety of web browsers and screen resolutions, which are so niche they are not worth mentioning or catering for.
Irish Mobile Operating Systems Usage
The stats show the iPhone as the market leader with 85%+ of the Irish Smart Phone user base, with Android being the major competitor peaking at about 22%.
What happened 6 or even 3 months ago has become less and less relevant, especially in world of mobile. That said in Ireland O2 are the big driving force behind handset sales, particularly Apple devices, I predict that Apple will continue to monopolise, but that Android’s Market share will increase globally and within Ireland in the coming weeks and months as newer Android based alternatives to the iPhone are released and the range expands.
Please note these statistics are supplied by the excellent people at Clicky Web Analytics. Market-share is calculated from over 300 million daily page views across the 300,000+ web sites on their network, including this one!
Creating iPhone, iPad and iTouch Icons
If you are not familiar with Fav Icons you should be, they are those little 16x16px images that appear beside website urls and bookmarks in your browser. Apple Devices have a few sizes and naming conventions, download any of the Bray Summer Festival icons, to get a rough size guide.
When creating your images you do not need to round corners or add and effects, the Apple shine and icon look will be applied your square images, always use .png image format.
Add Your Icons for Mobile Only
This handy JavaScript will add your icons when a users browses via an Apple device only. Add it to the head on every page of your site, just below your regular meta tags.
<script type="text/javascript">
if ('standalone' in navigator && !navigator.standalone && (/iphone|ipod|ipad/gi).test(navigator.platform) && (/Safari/i).test(navigator.appVersion)) {
document.write('<meta name="apple-mobile-web-app-capable" content="yes">');
document.write('<meta name="apple-mobile-web-app-status-bar-style" content="black">');
document.write('<link rel="apple-touch-icon" href="apple-touch-icon.png" />');
document.write('<link rel="apple-touch-icon" sizes="72x72" href="touch-icon-ipad.png">');
document.write('<link rel="apple-touch-icon" sizes="114x114" href="touch-icon-iphone4.png">');
}
</script>Automated Mobile Book Marking
This is a really subtle way to ask mobile users to bookmark your site, a process which is overlooked in many mobile sites. There are a variety of ways to add this functionality. I always aim to keep the prompt as close to the OS UI as is possible, check out a recent screen shot from the Bray Summer Festival site when viewed on an iPhone. A small dialogue appears to prompt users to add the site to their home screen.
QR Codes & Phone Numbers
Fad or not QR codes are free and measurable, which makes them very useful in my mind. Personally I love them. You need to get to a web page on your phone, click, scan, and the pages opens, no messy thumb typing, the way it should be. QR code can be deployed online or offline as print or projections.
