http://webcache.googleusercontent.com/search?q=cache:http://www.yoursite.com/

This is especially useful because at the time of writing, Google’s cache functionality seems a little unsteady in the organic search results.

A neat way around this is to have a custom scrolling effect using jQuery’s .animate. The demo page for the following demo is at http://www.codemonkeysteve.com/tutorials/demo_scrolling.php

HTML/CSS

To start,you need to have a div to contain the content to scroll. Let’s give it a class of  ’contentHolder’.  The important part is to set the overflow:hidden CSS property.  Give it the following style.

<style>
.contentHolder {
overflow:hidden;
height:320px;
display:block;
width:490px;
}
</style>

Within that div, place your content. Now you need up and down buttons. Images will be fine but for the demo, I’ve anchored simple text. Give the up button a class of ‘page_up’ and the down button a class of ‘page_down’.

<a href=’#’ class=’page_down’>down</a>
<a href=’#’ class=’page_up’>up</a>

Javascript

Within your javascript, you need to calculate the height of the element we’re to be scrolling. At the same time, we decide whether the up and down buttons are to be available. The following function will assign the number of possible pages to a variable ‘contentPages’. This variable should be initialised. At the same time, initialise ‘contentPage’ which shall hold the current page we are scrolled to.

function setPageArrows() {
contentPages = Math.ceil($(‘.pageContent’).height() / 150) -1;
$(“.page_up, .page_down”).addClass(“disabled”);

if (contentPage > 1) {
$(“.page_up”).removeClass(“disabled”);
}
if (contentPage < contentPages) {
$(“.page_down”).removeClass(“disabled”);
}
}

//initialise the starting page and the number of pages
var contentPage = 1;
var contentPages = 1;

Now we need to attach the animate functions to the up and down buttons. In your jQuery ready function, create a click event for each button. At the same time, call the ‘setPageArrows()’ function to set the initial state of the buttons. This is done with the code below.

$(document)
.ready(function() {
/* Page scroll */
$(“.page_up”).click(function() {
if (contentPage > 1) {
contentPage–;
$(“.pageContent”).animate({
“margin-top” : “+=150px”
}, “slow”,function() {
setPageArrows();
});

}

});

$(“.page_down”).click(function() {
if (contentPage < contentPages) {
contentPage++;
$(“.pageContent”).animate({
“margin-top” : “-=150px”
}, “slow”,function() {
setPageArrows();
});
}
});
setPageArrows();
});

Again, the demonstration code can be found at http://www.codemonkeysteve.com/tutorials/demo_scrolling.php

1. Log into your google account and go to http://www.google.com/talk/start.html

2. Visit this site to obtain the code needed http://www.google.com/talk/service/badge/New

3. Copy and paste the code. I placed mine just above the navigation bar but it isn’t important.

4. Surround your pasted code with

<div id=”chat”>…</div>

5. Put the following code into your css file

#chat {
position:fixed;
bottom:0px;
right:0px;
}

That should be it! Enjoy your new google chat button!

Once the customer has reached checkout however we’re no longer trying to persuade them to buy a product, we’re focusing on making their checkout experience as painless and intuitive as possible. In effect we’re looking to take every step NOT TO DISSUADE a customer from buying something.

One important method of keeping someone interested throughout the checkout process is to have a stepped progress bar at the top. This allows the customer instant visualisation of the steps they will need to go through.

An example of a progress bar

When a customer has their credit card in their hand, they want all the reassurances they can get that this transaction will go through without any problems. Without a progress bar, the customer is always thinking ‘Is this the last step? Does my money come out of my card now? What happens next?’. All these questions are distractions to the sales process and can only serve to dissuade a sale.

There is also a human psychological element to actually gently push someone through the checkout process. We have an inherent need to fill progress bars. There’s something jarring about seeing a progress bar at 40%. We want it to be 100%. There is some science behind this but the bottom line of it is that an incomplete thing causes subliminal tension. So adding a nice progress bar can actually motivate a user through the checkout process!

For example you have a site showing off your homeopathic beauty treatments. For the next month you want people to know about a 20% offer on some nice candle treatment that you’re keen to promote. You send out a mail shot to all your contacts with the exciting news but where do you send them?

If you send them directly to your home page then people may well go there, have a little look around and eventually find this discount (remember that’s what they came for in the first place!). But wouldn’t it be better to have these users see a page that has a nice graphic and all the details they want about the discount along with a little contact form?

This is a landing page. Remember that your website is all about converting people into paying customers. The more effort that a customer has to put into making a purchase, the less likely they are to do so. Make things easy for your target audience by creating or at least customising a landing page for your target audience!

If you use a landing page in this way, you can also set it as the starting step for a conversion goal so you can track the success of the initial facebook campaign. This is useful if you have many sources of traffic hitting your site and you want to be able to see which campaign is more successful.

Now you’re sure you can improve the performance of your site but don’t quite understand what’s going on with your traffic because google analytics isn’t for the novice? This is something I can help you with for free with no obligation.

This is how we can do it

1. We have a quick chat to start things off.

2. You let me take a peek at your analytics data. This can be done easily by adding me as a ‘standard user’ within your settings section of google analytics. You can remove me any time should you not require my services.

3. I’ll send you a report consisting of traffic sources, marketing campaigns and easy wins that may improve sales.

4. You can then part ways should you wish armed with some knowledge on improving your site!

As you can imagine I would love to demonstrate my worth to your business and hopefully build a good working relationship from this. If you’re interested in my service, you can contact me here or by using the contact button at the top.

I’d created something similar before with Abyss Web Server as part of an integrated package that could be downloaded and installed with one click and WAMP does the same. You simply download it, run the installer and let it get on with business.

Before the laptop format and reinstalled, I’d exported all my databases to raw SQL dumps. To recover the MySQL databases I merely reimported them. A quick visit to the command line and a mysql -u username -p -h localhost < data.sql later, I was up and running. However if you’re a little command prompt shy, then using SQLYog Community Edition works as well.

WAMP started up first time, however when I first rebooted my laptop, WAMP stopped and showed and orange icon in the taskbar. A quick investigate showed me that another application was hogging port 80. Fixed that and everything has been smooth since.

You can enable and disable modules (e.g. GD and cURL) in PHP from just the click of a button, no more messing about with PHP.ini. The same with Apache although I found that popping into httpd.conf still worked best for me. WAMP can add aliases using its own drop down menu, but I found that entries created weren’t configured exactly how I’d like so I still suggest going manual. Of course, if you’re a less technically minded person, then the ease of use would counteract that particular annoyance.

I’m still using it now and I barely notice any performance hits compared to installing everything individually. All the applications sit nicely in their own folder and it’s been plain sailing! Definitely an easier way to manage your local development installation.

To access the English WAMP site (it’s French by default), you can go here http://www.wampserver.com/en/

For a nice installation guide, visit here http://www.webdesign.org/web-programming/php/how-to-install-wamp-server.20344.html

Once the initial template was written and I saw it was good, I also created a skin for wordpress that seamlessly fitted with my new site.

All in, about 20 hours work but like any work of art, it’s never complete so I’ve got a good amount of tinkering to do as time goes by but I must remember never to overegg the pudding.

Whenever I’m using permalinks, things will be absolutely fine locally but as soon as I copy the website to a live environment, all the permalinks will no longer work and return a 404 error.

It’s a simple fix but what I do is go into the wordpress admin section -> Settings -> Permalinks and switch the permalink setting to default and then back again. This will reset the permalinks and should hopefully get things working again.

Google at the ready and hands on the keyboard… nothing. My mind emptied and I froze and for the life of my I couldn’t think what to type! So I decided that was the time to look for a site that would return random web pages. The only couple I found were returning a lot of 404 errors and one or two refreshes even brought up some pornographic content.

So I made random.codemonkeysteve.com for the next time I decide I end up staring at a search bar blankly. Enjoy!