By Today is the day we discuss eye-candy for your iWeb site. It’s bling day! Things that take your iWeb site that little bit further and help it stand out from the crowd. Also getting a mention will be bits and pieces you can add in the background to help you get the most from your site. We’ll start with adding a favicon to your site along with a poll so you can start quizzing your visitors. Other things we can include are Google Analytics so you can monitor what your visitors like or not.
[premium level=”1″ teaser=”yes” message=”Sorry, you need to be an active subscriber to view this post.”]
FavIcons
A favicon (or favorites icon) is a 16×16 pixel icon that displays in the address bar of a browser or in the bookmarks list. Did you know it was introduced by Microsoft in 1997 when they gave us Internet Explorer 4.
Add a favicon to your iWeb site is simple, all you need to do is upload an image to your web folder (you can do this by saving your iWeb site to a folder then just pasting your favicon into the same folder; it’s the same method as adding the sitemap to your site explained in yesterday’s post). You will now be able to work out the URL for the favicon (just like I explained yesterday) but replace ‘sitemap.xml’ with ‘favicon.ico’.
You then need to add the code shown below to the head section of your site. I would recommend using the iWeb SEO Tool from Rage Software once again as it will make re-adding everything so much more easier thanks to its save/reapply function.
<link rel="shortcut icon" href="http://yourdomain.com/youriwebsite/favicon.ico" type="image/x-icon"/>
Strictly speaking you don’t have to save your icon in the ‘ico’ format, you can save it as a GIF or PNG but this won’t work in Internet Explorer (surprised?). If you do want to use them though then the code is slightly different:
<link rel="shortcut icon" href="http://yourdomain.com/youriwebsite/favicon.png" type="image/png"/>
Taking this one step further, you can now add an icon for when an apple touch screen user (iPhone, iPad etc) saves your iWeb site to their home screen. You will need to add another image to your iWeb site’s folder, a 57×57 pixel PNG and then add the following code to the head section of your site.
<link rel="apple-touch-icon" href="http://yourdomain.com/yourwebsite/custon_icon.png"/>
Using the iWeb SEO Tool to add both would look like this:
And while we are using the iWeb SEO Tool lets add the Google Analytics code. If you haven’t already sign up for a Google Analytics account and add your iWeb site. You will then be given some code to add to it to start the analytics working. If you are having trouble finding the code you can visit this Google help page which will explain how to find it. Once you have got the code copy/paste it into the Header code section under the favicon links and publish your site. You will have to wait a day or 2 before you get any results, but that is all there is to it.
Icons in your design
I could have covered this in one of the page design lessons earlier in the program however I felt as if it deserved a little bit of attention on its own, and of course it is optional in your iWeb design but adding icons to your iWeb site to highlight certain areas can be a very good idea. There are hundreds if not thousands of free icons available on the WWW for you to pick from and use on your site and not only do they give your site a bit of extra personality but they help users with navigation too.
We all use icons everyday, they are on our desktops and in our docks so adding them to your iWeb site can bring a certain level of comfort to a user; they already know how to use icons to navigate a computer so getting around your site will be easy.
A word of caution though. Don’t go mad and cover your site in icons, stick to the more popular ones to highlight major areas of your site such as the Contact page, the Blog, a Products page and the Home page. Also if you do want to put icons on your site make sure you try out many types and styles first. Icons don’t work in every design so if you are in any doubt, leave them out. Icons should add to the design of your site, not distract a user; remember the animated GIFs from the late 90s?
Take a look at a few of the sites below for some fantastic free icon collections which you may want to use on your iWeb site:
50 Fresh& Free Icon Sets For Web Designers
11 Beautifully Designed Free Icon Sets
30 Free Icon Sets Created in 2011 for Web Designers
30 Beautiful Free Icon Sets for Web Designers
Adding a Poll to an iWeb site
Adding a poll is a simple yet effective way of adding interactivity to your iWeb. not only will it help to make your visitors feel as if they are contributing but if you use a poll often enough and ask the right questions it can give you some idea of what your visitors want to see on your site. And getting one on your iWeb site is easy thanks to AddPoll.com (naturally).
To begin with sign up for an account. Then follow these steps:
Choose 'Create Full Custom Poll' as this will give us HTML for a snippet.
Add your poll question and answers or add more answers if needed.
Add a name for your poll and the URL of your site.
Choose a color scheme to match your site (you can edit this later in iWeb, it's all CSS). Click 'Generate HTML'.
Copy all of the code from the larger code window and paste it into an HTML Snippet on your chosen page in iWeb.
Click Apply and your poll will appear on your page.
Now wasn’t that easy. As a little tip, if you want a completely transparent background to your poll (as I have above) just delete ALL instances of the following code:
background-color: rgb(xxx,xxx,xxx);
where xxx is the number representing the color you originally chose. There should be three instances of that code and as you delete each one press on the Apply button again to see it disappear from your poll.
So now you know how to add favicons, iPhone/iPad/iPod home screen bookmark icons, polls and fancy navigation icons to your iWeb site which you can track with Google Analytics. Have fun![/premium]
Loading ...
Comments