Monday, 26 July 2010
Sprucing up the website
Building a website and an author's platform can be a big distraction, or would be if I had to try to do it all myself (finding out how to first). Luckily when I decided my website wasn't up to scratch and wanted to rebuild it I had help. In the review with Whisp Productions, we looked at what other writers were doing on theirs, how they laid them out etc. What follows is a guest posting from Whisp Productions with details of the changes they have made to my website that we hope will be useful as we're assuming that other writers, like me, need some technical help with some aspects of building a platform. So over to Whisp.
Wilkie's previous website was a fairly simple site as it was built using Frontpage with a few buttons to navigate around the page. This worked ok, but the main problem we found was that the website took up the whole of the screen and wasn't very easy for a reader with a wide screen to read. When we reviewed other websites with Wilkie we found that the ones we liked best were those with a more blog-like layout, that didn't display text across the whole width of the screen. The rebuilt website now has more blog-like pages that appear in the middle of the screen. It also allows the website to look similar to this blog (which was previously changed using the new template editor - see Using Bloggers new template designer).
It was rebuilt using the RVSiteBuilder tool on Wilkie's hosting service, so unless you use on the same service, sharing the instructions on how it was generated won't help. However, what may be of more interest are some of the additional bits and pieces that we added to the website. We hope you find the following useful.
ADD ADDITIONAL META DATA
1. We do not want search engines to archive every page (especially those with time dependent material or competition information. So we added a meta setting to each page where Archiving isn't wanted:
<meta name="ROBOTS" content="NOARCHIVE" />
2. We added another meta settings, to tell mobile phones to format the information differently for the small screens.
<meta name="viewport" content="width=670, initial-scale=0.45, minimum-scale=0.45" />
ADD A SITEMAP
3. The file sitemap.xml is for search engines. If you keep it up to date it tells them which files on your site have been changed so it doesn't have to search them all. Put it in the root directory. For example:
<?xml version="1.0" encoding="UTF-8" ?>
- <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
ADD A ROBOT FILE
4. The file robots.txts also gives instructions to search engines. This tells them which parts of your website not to look at. Put it in the root directory of the website. For example,:
ADDING WEBSITE ICONS
5. We added a favicon.ico file. This is a very small image file that appears in internet explorer at the left of the address box. Again, this is in the root directory.
6. We added an apple-touch-icon.png file. This, like the favicon.ico file, is an image file that is used by iphone apps to display with the website.
ADD A LINK TO YOUTUBE
7. Add a connection into Wilkie's youtube videos. For this we've used a video strip. The code for this can be built on youtube, but we added a line before and a line after the code that youtube gave us. The lines we added are:
We built the youtube code as follows:
Goto youtube home page. You don't need to logon.
At the bottom of the page click on the 'Developers' link.
Click on the 'Widgets' link.
In the 'Widgets' description in the middle, click on the link to the Video bar wizard.
Fill in the information:
Horizontal or vertical.
Untick the popular video feeds unless you want these too.
Fill in the name of the youtube channel you want.
Then click to show the code and copy it to your website.
ADD A LINK TO TWITTER
9. Add a connection to Wilkie's twitter so that a subset of it shows in the side bar.
At the bottom of the page, select 'Goodies'.
Click on 'Widgets'.
Click on 'My website'.
Then on 'Profile widget'.
Complete the Settings, Preferences, Appearance, Dimensions to what you want.
When it looks like you want, click on 'Finish & grab the code'.
ADD A LINK TO THIS BLOG'S POSTINGS
10. We also added a link to this blog on the website so that the titles of the last 5 entries are shown. We've done this using the www.feedburner.com services that can be linked to your blog.
Choose your blogname.
Change the settings to get what you want.
Copy the code that is given.
Wilkie's Related Postings
Some of the above settings and files were used before the site was rebuilt and the instructions for these were included in some of Wilkie's previous postings.
Changing my website for #iphone users
How to #twitter your blog updates and add twitter to #website
Adding a website icon for iphone and stopping page not found for mobiles
Adding free blog subscription options
Add blog to website
Starting an author's platform