Is your blog or website optimized for mobile devices? We discussed about enabling mobile version on Blogger though. Modern days, people are very fond of using mobile devices and even reports indicate that most of social networks such as Facebook, Twitter are mostly accessed via mobile devices too. Did you know that 43% of phones are smartphones and over 85% of them used to access the Internet? If your site is still in the waiting list to support mobile devices, you are definitely missing out the opportunity and turn your back to lot of users who could have make use of your content.
A Branding Opportunity
Whether you already optimized your site for mobile devices or not, here I'm gonna share a simple tip that will contribute to your branding efforts among mobile users. Especially, among the iPhone and iPad users.
If someone drops by on your blog or website using an Apple device, they can simply add a link to your site in their Home screen. This saved link is called as a Web Clip and it will looks like an application too. As like other mobile applications, web clips are represented by icons. However, unlike other apps, web clips may not have eye catching icons but renders a recent screenshot of your web page as the icon.
Let's talk about using a screenshot as an icon. Is it really effective? Probably the icon will looks like an icon with gibberish in it. Small enough to notice.
What if you can replace this gibberish-looking-icon with your professional logo and give it a nice look? Even the user can identify from where this web clip originated from. Not only the look, but also an icon can communicate effectively with users and convey different messages to their brains. Isn't it why we use self-explanatory icons or images everywhere? Unless you represent your brand properly, you will be missing out the opportunity.
Yes! You can replace the gibberish-looking-icon with a custom icon of yours.
What if you can replace this gibberish-looking-icon with your professional logo and give it a nice look? Even the user can identify from where this web clip originated from. Not only the look, but also an icon can communicate effectively with users and convey different messages to their brains. Isn't it why we use self-explanatory icons or images everywhere? Unless you represent your brand properly, you will be missing out the opportunity.
Yes! You can replace the gibberish-looking-icon with a custom icon of yours.
Apple Touch Icon
Once we discussed about adding favorites icon to sites and again, it is aiding your branding efforts by representing a custom icon along with bookmarks. But favorites icon can't convince iOS devices to use the same icon for web clips. Hence, we need to specify a custom icon for Apple devices - Apple Touch Icon.
It's much similar to specifying favorites icon, but the dimensions of Apple touch icon is different. Your icon should have the width and height of 57 pixels. Further, it should be in PNG format too.
Once you set Apple touch icon for your blog or website, Apple devices will use it to represent web clips originated from your site and further, the same icon will be used for bookmarks on iOS devices too. Mmm... Branding opportunities can take you a long way.
Are you ready to take this branding opportunity? Let's do it!
It's much similar to specifying favorites icon, but the dimensions of Apple touch icon is different. Your icon should have the width and height of 57 pixels. Further, it should be in PNG format too.
Once you set Apple touch icon for your blog or website, Apple devices will use it to represent web clips originated from your site and further, the same icon will be used for bookmarks on iOS devices too. Mmm... Branding opportunities can take you a long way.
Are you ready to take this branding opportunity? Let's do it!
Steps:
1. First, you need to create an image to use it as your Apple touch icon. If you have a professional logo to represent your site, make sure you are using the same here to prevent inconsistencies in branding.
Your image should have following dimensions,
Width: 57 pixels
Height: 57 pixels.
Your image should have following dimensions,
Width: 57 pixels
Height: 57 pixels.
Note: You can use an online tool such as Pic Resize or an image editing software for the purpose of re-sizing your image.
2. Upload your icon to a publicly accessible place such as your own website or free photo hosting site like Picasa, Flickr.
3. Once uploaded, make sure to grab the exact file URL of your icon.
3. Once uploaded, make sure to grab the exact file URL of your icon.
4. Now, insert the URL of your icon to following line of code and place it in your site's header section, just before the </head> tag.
Note: If you are a Blogger user and don't know how to edit your template, read How to Edit Your Blogger Template.
<link href='[Icon URL]' rel='apple-touch-icon'/>
Color Indication Information:
- URL of Your Uploaded Image (Apple Touch Icon)
- URL of Your Uploaded Image (Apple Touch Icon)
Enjoy :-)
Hi Mayura,
Informative post indeed :)
I say this because people DO use a lot of their iPhones and iPads or mobile devices for checking out their blogs, especially the youngsters. I see the analytics and get to know that for my blog too. However, isn't it important to have a mobile friendly theme or can you make these adjustments and that's enough, because people normally say that having such a theme is any day better. I did switch to one, but nowadays they have better ones...or perhaps we really can't do everything possible always, isn't it?
I remember your post about the Apple Icon you'd shared earlier, but I really never got down to making those changes, which I think I better do now. I guess having such a device is better so that you can have a look and see how your blog looks with the changes made too :)
Thanks for sharing this with us.Have a nice week ahead :)
Hi Mayura,
I don't use an iPhone - I have an android I hardly ever use - but I can see the sense in doing this. I haven't yet done anything about optimising my site for mobile users because to be honest I'm bewildered by the options available and don't know where to start!
I understand all your instructions for this, Mayura, but would come to grief at the final hurdle because I'm afraid I'm not brave enough to add code to my site's template - I never go into the "editor" in my dashboard, regarding it as alien territory in which I'm likely get lost and probably wreck my site in the process. See, not a techie at all, not even a little bit ;)
Hi Harleena,
Indeed! A recent study shows that most people are accessing Internet using their mobile devices :) We can't ignore 'em. Can we?
Yeah, looking through analytics is a best way to find evidence to decide if we should think more about being mobile friendly or not. Mostly, it suggests we need to :)
Actually, it's not essential to have a mobile friendly theme now Harleena :) As you are on WordPress, you can find numerous plugins that will optimize your existing theme for mobile devices and instead of placing the above mentioned line of code, you can simply upload the Apple Touch Icon via a plugin too.
You got it right! :) Eventhough you don't spend time on your mobile device, you can use it to find out the mobile experience of your blog and make sure it's convenient enough for the readers :) Hope you will!
Thanks for coming by and adding your thoughtful comment to the discussion Harleena :)
Hope you are having a nice week too!
Cheers...
Hi Sue,
Well, I don't have an iPhone either, but I'm an Android fan ;)
We can't ignore how mobile friendly the users are today, eh? :) Hence of the increasing demand, we should consider making our blogs mobile friendly too.
You may haven't taken any action on optimizing your blog for mobile devices, but most of the themes out there are already optimized for mobile devices dear. Now you can make use of your Android smartphone to check it out :)
I know that asking to add a line of code can scare you away Sue :) As you are on WordPress, you don't need to take that route though. Just a simple plugin can take care of that.
If you need to optimize your blog for mobile devices and add Apple Touch Icon, you can use this WordPress plugin ~ WPtouch Mobile Plugin. Just make sure you follow the correct dimensions when creating your icon.
Hope it will be helpful :)
Thanks for coming over and adding your thoughts on this topic Sue :)
Cheers...
Mayura, you always have awesome tips and tricks up your sleeves :) This is genius! I wasn't even aware that a website could be saved as a web clip on smartphones let alone represented by your own icon. I expected a long, detailed process, but it's as easy as 1, 2, 3 (excuse the cliche).
With Tim Bonner's guest post on Adrienne's blog and your post, I feel tech savvy and ready to work out the gears and bolts of my blog. So many aspects that are all equally important.
Have a phenomenal week up ahead, and see you around the internet world :)
Thanks for the tip about the plugin, Mayura - I'll have to check my blog out on my android, as you suggest - a good idea.
Thanks for letting me know about the plugin, too - my only worry there is that I already have far too many on my blog and I'm trying to avoid adding new ones!
Hi Kalina,
Owh YEAH! Easy as A-B-C ;)
Thank you dear :) Well, not a biggy tip, but helpful for sure.
You do have an iPhone or iPad? ;) So you can definitely see how web clips render for yours. Anyway, Apple Touch Icon is already implemented for your blog though :)
Ah... I've gone through his guest post few hours before and that's a very good starting point for you to take care of the maintenance process Kalina :) You can keep learning and experimenting with your blog. I know you are smart enough to DIY :)
Ha ha... Have a phenomenal week there too dear ;)
Cheers...
Anytime Sue :) I think it's time for you to list down all the plugins you have and take a note of plugins you can't blog without.
I definitely agree with you about the opinion you have about having so many plugins installed, but ignoring mobile optimization can cost you dear.
Just don't listen to me :D Like Harleena mentioned, take a look at your blog stats and see how many users landing on your blog via mobile. Then, you can decide yourself :) Agree?
Cheers...
Last time I checked, it was about 20% - is that enough to change anything?
You're right about needing to go through my plugins - I've probably forgotten what half of them do!
And I always listen to you, Mayura - and Harleena, too :)
Ha ha... I know Sue ;) Just wanna let you decide on that dear.
Mmm... 20% and counting :) It's good! Probably we have to take bounce rate into account there 'cause it could be the factor to determine if mobile users are happy with mobile layout.
Instead of logical assumptions, the best shot would be checking it out by your smartphone and so you can decide if it's convenient enough or not dear :) Just be an mobile user for few minutes.
Cheers...
Hi Mayura.
First let me apologize for taking so long to stop by for a visit. This week has been exceptionally busy and Friday we had a family emergency that kept me offline for most of the day.
I must admit I was ready to do this until I read I had to place it in the >/head>. I'm super intimidated for fear of messing something up I can't undo. Is there another way I can add this to my WordPress blog?
Thanks for your help and I'm sure this will be a life-saver for anyone who would like to add this icon. Hope you're having a great weekend my friend!
Hi Corina,
C'mon! Here you are. You don't need to apologize at all dear :) I've been offline enough too.
Well, If you are unfamiliar with editing source code, you don't need to worry at all, as you are on WordPress Corina :) That's why plugins exist.
If you don't use a mobile plugin for your blog, you can make use of the plugin I recommended for Sue ~ WPtouch Mobile Plugin. You can simply create your Apple Touch Icon and upload there :) Just make sure to follow correct dimensions when you create it.
Hope it helps dear :)
Thanks for coming by and adding your thoughts about adding Apple touch icon Corina :)
Cheers...
Hey Mayura, I made it! Dang, sorry that took me so long my friend. I know we've both been busy but I did NOT forget about you. No way!
I was wondering why I would need an Apple icon and then I realized duh, it's for Blogger. I know you use this platform and you teach so much about it but you also know WordPress so see, my mind still isn't quite here.
That's pretty cool though, Blogger's coming a long way from when I use to use it. That's really neat! Great tutorial, again.
~Adrienne
Hey Adrienne,
Owh, I know how it feels dear :) It's such a relief when you make it, while you are going through a lot. Ha ha... Of course! It's not about forgetting at all :)
Well, it applies for any platform Adrienne :) Blogger, WordPress and even on custom built websites with no CMS support. Just the code need to be implemented in your header section or file. But, as you already have WPtouch plugin installed (I assume), you can upload the Apple touch icon via that plugin too ;)
Once you made it, you can use your smartphone to check it out how it looks when you create a web clip or bookmark your blog :) You don't wanna find it just weird looking on mobile devices, eh? :)
Thanks for coming over and sharing your thoughts on this topic dear :) Especially, in your busy schedule.
Cheers...
Hi Mayura!
I finally made it over here. Well you know about my move so I was very busy packing and unpacking and setting up my new home. I'm loving it, especially because I took my mom with me.
Ahh...back to this post! This is awesome. I know that most people are using their phones more than their computers. A few months ago I purchased an IPhone because of that reason. I wanted to familiarize myself working from a phone and I'm doing pretty well so far.
I think this is a must to do, but first I need some kind of professional logo. That's on the list of things to do. My step-daughter is a graphic designer and an amazing artist. Once she comes to visit me, that will be her first job before I cook her dinner he he!
Thanks again for this valuable information.
-Donna
Hey Donna,
Woohoo... Glad to see you back online dear :) I knew it was a very busy week for you as with the move. Glad to hear you made it smoothly and that's lovely to have your mom with you. I guess she's happy too :)
We can't ignore mobile World anymore. Isn't it? :) I can see incoming traffic is growing with mobile users very rapidly. I think it's indeed a wise decision for you to familiarize with a smartphone Donna. You can get a better understanding about mobile users in that way :)
As you have a iPhone, you can try out creating a web clip for your blog too and see how it looks like without an Apple touch icon :) Nice idea! Having a professional logo will be a BIG plus for branding Donna. You know it better. I hope you will get it done sooner and implement the icon for your blog too dear :)
Thanks for coming by and contributing your thoughts on this topic Donna :) I do appreciate as you were busy enough over there.
Cheers...
thanks man ! it awesome . one doubt ?? the icon can be anything .. right ..? can it be my logo ??
Hi Adu,
You're welcome mate :) Of course, it can be anything relevant like your logo and just need to follow correct dimensions when you create the image / icon.
Cheers...