Posts tagged as:

General

Content is King.

by Jeff on November 17, 2005

Somewhere between ever more sophisticated graphic design and more complicated CSS, many designers are starting to forget one of the ground rules of the web. This rule is arguably the most important rule to follow at all times; one that you should always keep in mind when you’re designing your site.

So what is it? It’s simple. Your visitors are at your website to get information. Content is King.

The Search-Driven Web.

Studies show that well over 90% of users now have a search engine as their homepage, and use it for around half of everything they do on the web. Unless you’re advertising your site heavily, most of your users are likely to arrive through a search engine.
However, they’re relatively unlikely to be searching for a description of your products. What are they looking for? Information. There’s a reason why the web was once referred to as the ‘information superhighway’ while some people might be actively looking to buy things, most of them are just looking for information.

Relevant Articles.

So, if you’re selling products, you need to provide articles that your potential customers are likely to want to read. The bigger the audience you can build for your articles, the more conversions you’re going to have to sales. It can’t be emphasised enough just how important your content is: if it’s badly-written, or not useful, your visitors are likely to just go back to their search results page and try another link. If you give them good information, though, you instantly create the kind of loyalty that no number of advertising dollars can buy.

What many practitioners of techniques like ’search engine optimisation’ don’t realise is this: you can’t fake good content. However many keywords you might stick into it, you’ll fool search engines, but not the visitors they bring in all you’re doing is costing yourself money in bandwidth and wasting people’s time.

No Time to Write?

The most common objection I hear when I tell people they should write great content is that they have no time to write the amounts that would be needed and, yes, writing can be very time-consuming. What you have to realise, though, is that there are plenty of ways around this, such as hiring a freelance writer to do some of the work for you, or using speech recognition software.

You might also consider buying in content from people who resell it, or even getting your users to write the content there’s nothing better than getting visitors to write their own content and then getting more visitors from search engines where people have found it. There are even sites offering content for free in exchange for a link back to them at the bottom of the article, although you should be cautious about reviewing the quality of content offered this way.

Keep it Updated.

Here’s something that many people don’t realise: it’s better to write a little occasionally than to write a lot all at once. This means that, even if you have written hundreds of articles, you should release them one by one on a regular timescale. Both visitors and search engines prefer sites that are updated often to ones that have a big pile of content dumped on them once and then aren’t touched for years.

Content Makes Money.

Nowadays, it’s once again possible to make money from good content without even having anything to sell. Plenty of businesses were based on advertising back in the dot-com boom, but ad prices eventually dipped too low for this to be sustainable. Ad prices have now recovered, however, thanks to text advertising.

You can sign up with most of the big search engines now for context-sensitive ads for your site that are chosen automatically Google AdSense runs the most popular service. This kind of advertising eliminates human ‘ad editors’ altogether, while producing ads that are targeted enough to give far better returns than they ever used to. Purely content-driven websites with ads are once again a viable revenue stream, and content is as much King as it’s ever been.

If you enjoyed this post, make sure you subscribe to my RSS feed!

{ 0 comments }

Column Designs with CSS.

by Jeff on November 16, 2005

So CSS makes layouts easier than they were with tables there’s not really much debate about that. One of the reasons many people stuck with tables for so long (and, in fact, still stick with tables to this day) is that it can be difficult to create column-based designs using CSS. Since there are so many websites that essentially consist of a middle column of content surrounded by left and right columns containing navigation and ads, this was considered to be unacceptable.

The Power of Float.

Really, though, CSS columns aren’t that difficult to produce once you understand how CSS float rules work. Float allows you to say that some parts of your content should ‘float’ next to other parts, instead of being displayed one after the next (that is, underneath each other).

Despite all the fear of column layouts in CSS, it’s quite simple. Basically, the first thing to do is to divide your content from your navigation using the div tag, like this:

Note that the divs must be in this order left, right, centre because otherwise one column might end up underneath another in a way you don’t expect. Ordering things logically as left, centre, then right, for example, will cause your right column to end up under the centre one.

Anyway, the next step is to write the CSS for those IDs you just set up. Are you ready for the CSS that’s made old-style HTML developers run in fear for about five years now? It looks like this:

#left-nav { float: left; width: 20%; }
#right-nav { float: right; width: 20%; }

Obviously you can adjust the widths depending on how wide you want your left and right columns to be (you can choose whether to set the widths as percentages or in pixels). And that’s it! You’ve set up a successful three-column layout.

Then, though, the problems come they might seem small, but they’re big enough to drive anyone who works on CSS column layouts nuts. Luckily, however, they can be solved with a little lateral thinking.

The Background Problem.

If you want your left and right columns to be have a different background colour to the centre one, you’re in for a problem. In most browsers, your columns are only considered to extend downwards as far as the text in them does, which means that the bottoms of your columns won’t line up.

What’s the way around this? The best answer is to make your columns fixed-width (meaning that you specify their width in pixels, eg. ‘width: 100px;’). Once you’ve done that, you can create one-pixel-high image that includes the colours you want for the columns, and make it the background image, tiling it using ‘background: repeat;’.

The only problem left to solve at this point is that fixed-width columns can look strange if you leave them spaced as they are. The solution is to specify a fixed width for your document’s body, and then set the left and right margins to ‘auto’ this will centre the page on the screen.

The Header and Footer Problem.

Another problem? Well, yes. If you want to display a header or footer separately from the page’s columns, CSS can give you a little trouble sure, you can add them to the middle column, but that would require you to add extra space to the navigation columns at the top, and make sure they didn’t reach down further than the main content text at the bottom. It quickly becomes painful to work with.

The solution to this lies in a little-known CSS rule called ‘clear’. The clear rule means that you don’t want anything to be floating around the tag you apply it to. It has three possible settings: left, right and both.

In this case, you want to add your header and footer before and after the other divs, like this:

Then you want to add this CSS to what you’ve got already:

header, footer { clear: both; }

That tells the browser that you don’t want anything floating on either the left or the right of your header or footer: you want them clear of everything. You might also like to add text-align: center, so they appear in the middle of the page. And that’s it! What was all the fuss about, eh?

If you enjoyed this post, make sure you subscribe to my RSS feed!

{ 0 comments }

ColdFusion: Quicker Scripting, at a Price.

by Jeff on November 15, 2005

ColdFusion is a rapid application development language for the web, developed by Macromedia. It’s not free, but many people say that it’s more important to them to have the development speed that ColdFusion offers and you can download a free ‘developer version’ to experiment with before you commit to anything.

No Need for a Test Server.

One of the nicer features of ColdFusion is that it comes with a whole application to help you write it the language. While it can be used with Apache or IIS once you’re finished, this application effectively acts as your test server while you’re writing your scripts, saving you quite a lot of trouble.

As a downside, though, ColdFusion on the web can sometimes be unreliable and slow, mainly because it runs on a Java framework. Its Java support does, however, make it capable of running on many more operating systems than it otherwise would be for most purposes, having written a page in ColdFusion is as good as having used Java for it, but much less difficult. Since ColdFusion also uses the ODBC (Open Database Connectivity) standard instead of tying itself down to one database, this gives you a lot of choices.

In other words, you’re sacrificing some of your website’s speed in exchange for more choices and compatibility, and quicker development time.

Easy to Learn.

One of the things that makes ColdFusion easy to learn is that it isn’t all that different from normal HTML: it acts more like a set of extension tags for HTML than like trying to get a programming language to do things and output HTML afterwards. This is because it was designed from scratch for the web it’s not just a normal language trying to be web-compatible.

For example, here’s some code that queries a database and writes the fields it finds to the page:

SELECT * FROM table WHERE id = ‘1′

#result.field_from_query#

You can see that the ‘cfquery’ tag is used for sending queries to a database, while the ‘cfoutput’ tag adds text to the HTML. The text surrounded by hashes (#) is a variable. How are variables defined, you wonder? Like this:

Once you get used to thinking in tags, it starts to feel quite natural: ColdFusion just feels more HTML-like than other languages do.

Despite its simplicity, though, ColdFusion is considered to compete more with languages like JSP and ASP.Net than it does with PHP.

CFScript.

Unfortunately, trying to write dynamic web pages with nothing but tags can start to feel restrictive quite quickly, especially if you want to do something complicated you end up with a hard-to-read mass of tags, reminiscent of trying to do a page’s layout with tables. To solve this problem, Macromedia introduced CFScript, a Javascript-like language that you can use by putting it between tags. If you’re already a programmer, you may find CFScript easier to work with than ‘real’ ColdFusion code.

Java.

One ColdFusion strength is that it doesn’t just run on top of Java it can also call Java classes using its createObject function and use any methods it needs to, with the results being put in ColdFusion variables. This will be very useful to you if you have existing Java code or know of Java code that you’d like to make use of you’ll get access to all the J2EE libraries as well as ColdFusion’s own. It’s this fact that has led Macromedia to market ColdFusion as “a scripting layer for J2EE”. Of course, whether or not that excites you is a matter of personal preferences.

Integration with Other Macromedia Products.

If you already design your pages in Dreamweaver, it can be good to do the scripting in ColdFusion, as you get the advantages that integration between the two gives you. You can insert ColdFusion code into Dreamweaver files quickly and easily, and you can even use its built-in editor to edit the code however you want without messing up Dreamweaver’s WYSIWYG view.

ColdFusion also integrates surprisingly well with Macromedia’s flagship product, Flash but don’t let that lead you into developing nothing but ColdFusion-scripted websites with fancy Flash interfaces, whatever you do.

If you enjoyed this post, make sure you subscribe to my RSS feed!

{ 0 comments }

Clean Page Structure: Headings and Lists.

by Jeff on November 14, 2005

When HTML started, people put all sorts of things on their pages: there was a tag to say which font you wanted your text to be in, a tag to say you wanted it to be in the centre of the page, and so on. Now, though, that way of writing pages is out-of-date and very inefficient compared to keeping content and style separate using CSS.

What is CSS?

CSS stands for Cascading Style Sheets it is basically a way of saying once what you want your pages to look like, instead of having to repeat it in HTML all the way through the document. In old style HTML, for example, this kind of code was a relatively common sight:

Welcome to my website!
I hope you enjoy your visit.

Now, though, you can remove the font tags altogether, and just have this:

Welcome to my website!
I hope you enjoy your visit.

At the top of your website, you put a style tag, like this:

p { font-family: Arial, }

Now, instead of having to say again which font you’re using with every new paragraph, you’ve told the browser that you want every paragraph you’ve got to be in Arial.

Headings and Lists.

Thanks to CSS, you can make documents that are more ’semantically correct’ that is, they would make sense to a human reading them, instead of having to be weighed down with lots of extra presentation code. This has two great effects: it makes web pages smaller (and so faster to download), and it makes them simpler.

On a modern web page, the only things you should ever need to include apart from paragraphs of text are headings and lists. After all, web pages are just text, graphics and navigation put together in a particular order there’s no reason for things to be done as messily as they often are.

You use headings for the title and subtitles of your page they’re the HTML tags that begin with h. You might, for example, write website titlearticle title.

Lists, on the other hand, can be used for pretty much anything else that isn’t paragraphs of text. Instead of just putting links one after the other to make a navigation bar, for example, you should put them in a list, using the ul and li tags. Not only is this easier for you to read and add to, but it’s also more compatible with non-graphical browsers.

A typical list looks like this:

item 1item 2

Bold, Italic, and Images.

Of course, in practice, you’ll need a few more tags. CSS lacks any good way of making individual words bold or italicised, so you can still use your b and i tags. Images, of course, still need a tag of their own too, although you might consider putting your images in a list if you have more than one.

In theory, at least, that still means that it should be perfectly possible to create a clean looking web page using only six tags: h, ul, li, b, i and img. And, yes, it is very possible if you can stick to this attitude towards web pages, your page will be extremely clean, quick to download and fast to display. If you’ve ever sat and waited more than a few seconds for a page to load, you’ll know how important this is.

Custom Stylesheets.

One more advantage of this approach is that it lets your users view your website however they want to. There are a surprising number of users out there who are elderly or just want some consistency on the web, and they have their own CSS stylesheets to add to pages to make text bigger, for example, or make the layout simpler.

Once you’ve written your page cleanly, you can even offer visitors a choice of stylesheets yourself you can write more than one and then offer an option to switch between them. This makes redesigning your page much easier, if you ever need to, since you can simply swap one set of CSS for another and even leave the old one available for any visitors that prefer it.

If you enjoyed this post, make sure you subscribe to my RSS feed!

{ 0 comments }

Building Online Communities.

by Jeff on November 14, 2005

When you’re thinking of starting a website, you have a few problems. Where will you get content from? How do you keep visitors coming back? When you make your website an online community, though, you can solve all these problems at a stroke.

The Advantages of Communities.

On a community website, people come there mainly to communicate with the other visitors your role is to set up the software that makes this possible, handling the technical side of things. Once your visitors make friends and find that people posting give them useful information (or just amusing writing), they will keep coming back, day after day, often even making time for it when they really ought to be doing something else. Even better, you don’t have to pay anyone to produce content, because the members of your community are producing more content for each other than you could ever hope to commission commercially. The only rewards they ask for are the replies they get from other members.

Altogether, this adds up to an attractive proposition. Even better is the fact that the owners of online communities tend to quickly acquire cult leader-like status thanks to their ability to make the final decision when it comes to deciding who can be part of the community and who can’t. Members don’t even slightly resent supporting them, and will donate over and over again to make the website better not only will they tolerate ads, but they’ll click on them more in an effort to support you. There are forums out there that run entirely on community contributions: the Something Awful community forums and Metafilter community weblog, for example, charge $10 and $5 respectively per membership, and yet both have tens of thousands of members.

What You Need for Your Community.

Of course, thousands of members don’t just appear overnight. To get people to start coming and writing in the hope of getting a response, you need to give them a reason to come to your website in the first place.

In many cases, your software will be what differentiates you. You’re likely to be competing with other, similar community websites, and providing better features than the next guy can drive a surprising number of visitors to your website. If you listen to and act on every request, you can’t do far wrong find out the visitors’ ideal features, and go out of your way to provide them, whatever they might be.

Another excellent way to build initial traffic to your site is to provide some data that’s rare or difficult to get elsewhere, or to organise data in a way that will be especially useful to a certain community. You could, for example, compile live stock price data in a way relevant to a certain business sector, or organise TV listings so that they show all the times a certain show can be seen, whatever channel it’s on. If you can find something unique, people will flock to it and love it.

Advertising a Community Website.

One thing to note about this kind of website is that they don’t respond well to traditional promotion few people will respond positively to an ad asking them to join a community. Why should they write for you when you’re obviously only in it for commercial gain? Instead, you should make sure your community relates to something you have a genuine interest in, and then promote it casually in other relevant communities. An ideal situation is one where the owner of an existing website doesn’t have the time for it any more, and you can move their community over to your site this kind of ‘evacuation’ can give your site a thriving community overnight.

Once you’ve got a community, of course, don’t underestimate how much promotion its members will do themselves: they will link it from everywhere they get a chance to put links, email things from it to friends, show it to people they know and get them to join the possibilities are endless. If you care for your community properly, it will pay you back many times over.

If you enjoyed this post, make sure you subscribe to my RSS feed!

{ 0 comments }

Beware the Stock Photographer: Picking Your Pictures.

by Jeff on November 11, 2005

You can always tell the websites that want to be big, but aren’t. How? By the sheer number of stock photographs plastered all over the design. If you’ve ever been to a business’ website and seen one of those ubiquitous photos of a guy in a suit or a woman smiling and wearing a headset, you’ll know what I mean. Before you venture into the world of stock photography for yourself, there are a few things you need to know.

How Stock Photography Works.

Stock photography companies have libraries of photographs that they believe will be useful in graphic design. If you’re starting a site about tennis, for example, you’ll no doubt be able to find stock photos of tennis balls, tennis players, tennis courts, and so on all of which can be integrated into your design. The photographs broadly fall into three categories: landscapes (including landmarks), objects, and models (people posing in a particular way).

There are two types of stock photography: royalty-based, and royalty-free. In royalty-based stock photography, you pay a small fee each time you use an image a part of this fee will go to the company, part to the photographer, and often part to the model (if any). For the royalty-free version, you pay one flat up-front fee and get a license to re-use the image as many times as you want.

Unfortunately, when stock photography is used on the web, it pretty much has to be royalty-free: there’s just no way of tracking use in a way that would create a sensible royalty structure. This means that stock photography for the web is typically very expensive: you basically have to buy a permanent license for an image you only want to use once. This, in turn, forces people towards lower-end, cheaper stock photos, which is how we all end up with uninspiring pictures of some guy in a suit.

Is It Worth It?

In most cases, then, stock photography on the web simply isn’t worth it, at least when it comes from the established companies. You can pay absolutely hundreds of dollars and end up with images that aren’t exactly anything to write home about. If you’re a big corporation and you’re planning to use the same image for a year, then perhaps but even then it’s unlikely.

Look at it this way: not only are you going to end up paying an absolute premium to use relatively mediocre images on your site, but all your competitors will have easy access to the same ones too, and might even use them without noticing.

There are plenty of sites on the web devoted to tracking how often stock photos turn up in different contexts. Magazines regularly have to send ads back to advertisers because two ads have ended up using the same stock photo for wildly different products? Wouldn’t you be embarrassed to have some site circle that girl you put next to ‘friendly customer service’ and then present their visitors with the same picture playing all sorts of roles at other sites? I know I would be.

Cheaper Stock Photos.

Instead of jumping on the stock photo bandwagon, then, the much better alternative is this: do it yourself! In most cases, you can create stock photos that are just as good as, if not better than, the stock ones. Why pay $100 for a picture of a pencil when you have a digital camera and a pencil of your own?

If you don’t have access to the thing you want to photograph, though (you don’t own that object, or live near that place), then an excellent alternative is to go looking for appealing amateur photography. If you look around, you’ll find people with great photos who are willing to let you use them, often in exchange for nothing more than a credit and a link back.

Alternatively, you can use stock photography sites that aren’t big and ‘established’, but are more like groups of enthusiasts, doing it because they like to and charging minimal prices to get their work out there. Take a look at istockphoto.com, for example, where many photos are only $1.

If you enjoyed this post, make sure you subscribe to my RSS feed!

{ 0 comments }

Avoiding the Nuts and Bolts: Content Management Software.

by Jeff on November 11, 2005

If all this talk of coding and designing scares you off, you might want to know that there is an alternative to all this. You can install a kind of software called a Content Management System (CMS) that allows you to put content up on the web without ever knowing a thing about HTML.

Fantastico.

Depending on your host, you might find that you already have a selection of CMSes available and ready to install from your cPanel. Log in, and take a look for the Fantastico script installer. If you have it, then you’ll be able to read a description of each piece of software you have available to you try out a few of the CMSes to see which ones you like.

Finding a CMS.

If you don’t have Fantastico on your host, or you don’t like what it offers you, don’t worry: there’s plenty of choice out there on the web when it comes to CMS software.

For finding free CMS software, a truly excellent resource is www.opensourcecms.com. At that site, you can use the menu at the side of the page to see lots of open source CMSes running before you commit to downloading them and installing them yourself. Textpattern, Drupal and Plone are very popular right now, so they’re a good place to start.

If you’re considering commercial CMSes as well, then you should take a look at www.cmsmatrix.org, which provides an up-to-date comparison of almost every CMS out there. Be prepared, though, that commercial CMSes can be ridiculously expensive or unnecessarily expensive.

Getting a Custom CMS Built.

If nothing out there seems to meet your needs, you might consider having a web designer build you a custom CMS in a scripting language like Perl or PHP. Any web designer worth their salt should have something basic already that they can build whatever features you want onto. This can be really good when it comes to making your website work the way you want, since the CMS will be built around your website to make it as easy as possible for you to modify.

Using a CMS.

The whole point of a CMS is to make it much easier to add content to your website and to edit the content that’s already there. Once you’ve installed your CMS, you will generally be able to log into its user system using a special admin password. This will add ‘edit’ options to the existing pages of the site, as well as giving you a ‘new page’ link somewhere to allow you to create a new page.

When it comes to actually writing the content of the pages, most CMSes will make it easy for you to copy and paste from programs like Word: they shouldn’t require any special HTML formatting. Some will require you to mark words with special symbols if you want them to be bold or italic, but it shouldn’t be too troublesome.

Changing the design with a CMS usually involves installing a template into a template folder and then selecting it in the options. Creating your own templates can be complicated, depending on what software you’re using, but it shouldn’t be any trouble for a web designer, and most template sites will provide designs in a format suitable for this kind of use

Finding a Hosted CMS.

Once you know which CMS you want, an alternative to installing it on a web host that doesn’t necessarily support it is to do a search and find a host that specifically supports your CMS. You shouldn’t have too much trouble finding a host somewhere that will support you if nothing else, you might try opensourcehost.com, which supports almost every open source CMS out there.

Using a host solution might be a little more expensive, but it will save you a lot of time in configuration and a lot of problems if anything goes wrong. Using a hosted CMS is one of the quickest ways to set up a website: you simply pay the host, log in, add your content and you’re away.

If you enjoyed this post, make sure you subscribe to my RSS feed!

{ 0 comments }

All About Design: Principles and Elements.

by Jeff on November 7, 2005

A truly shocking number of web designers are unfamiliar with the basic principles and elements of design. Having never been through any formal design education, many just go with what they think ‘looks good’, with very mixed results. If you’re going to design a website, you’ll do much better if you have some idea of what you’re doing when it comes to graphic design. Here, then, is a crash course in the principles and elements most useful to web designers.

Balance.

It is important for things to be balanced. That doesn’t necessarily mean symmetry, making one side exactly the same as the other, but it does mean that you can’t make one side ’strong’ and not balance that on the other side. For example, if you use a dark colour, you should balance it with a larger area of a lighter colour. What balance allows you to do is to lead the viewer’s eye to certain parts of the page without making the page look ridiculous.

Emphasis.

If you want to make part of the page stand out from all the rest, you can give it emphasis using a variety of techniques. Grouping everything together and then moving one thing a significant distance away from them will make it a focal point, as will making it a different shape from the others, or a different colour.

Line.

The directions of your lines will give a mood to your design: as a rule, horizontal lines are calmer, vertical lines are moderately active, and jagged or diagonal lines are very active. If you were designing an austere financial news site, then, you’d use horizontal lines, while a fun site for kids would be full of lines going in all sorts of directions.

Shape.

One thing that lots of people don’t realise is that there are two kinds of shapes positive and negative and every design has both kinds of shapes. The positive ones are the ones you, the designer, actively placed on the page, while the negative shapes are the spaces created around the positive ones. Many web designers simply ignore this, leaving their negative shapes as a mess this leads to the ‘boxy’ look that many amateur pages have.

Colour.

Colour is a big subject. As soon as you add more than one colour to a page, you make the other colours look different. Some colours are complementary, and some just look terrible together. On the web, though, you should usually avoid using too many colours on one page even if they are complementary, it will look garish.

For the web, hue is more important: the best way to create a colour scheme is to use black, white, and various shades of one colour. You have to consider the brightness and intensity of your colours, to make sure you’re not overdoing things. One of the easiest mistakes to make is to use the built-in CSS colour words (background-color: red, for example) instead of creating colour codes the colour words should generally be avoided, because they’re just too intense.

Space.

You can create all sorts of illusions with the amount of space you put between your objects, and where you put it: design is often as much knowing where to put something as it is knowing what to put there. If you make things overlap, or example, the covered things appear to be at the ‘back’ while the uncovered ones are at the ‘front’.

Lots More.

This is the briefest of brief overviews, because graphic design is a surprisingly large subject, and one that’s changing all the time. If you want to get properly up to speed, it’s worth buying a book, or even taking an evening course at your local college you won’t regret it.

If you enjoyed this post, make sure you subscribe to my RSS feed!

{ 0 comments }

AJAX: Should You Believe the Hype?

by Jeff on November 6, 2005

There’s a craze on the web at the moment, and that craze is named AJAX. What’s that? Well, according to some people, it’s a technology that’s going to redefine the web.

What Does AJAX Stand For?

AJAX means ‘Asynchronous Javascript and XML’. Adaptive Path came up with the term in this essay: http://www.adaptivepath.com/publications/essays/archives/000385.php. However, the word is really a bit of a misnomer: AJAX doesn’t really rely on XML at all, but rather on a Javascript function that happens to be named XMLHttpRequest.

All About XMLHttpRequest.

XMLHttpRequest was originally invented and implemented by a Microsoft team who were working on a webmail application, and it’s been around for a while now (since 1999, in fact). The reason it has suddenly come to prominence now is that Google used it in three projects, Gmail, Google Suggest and Google Maps, and in each case managed to create a much better user interface than they would have been able to otherwise.

So what does XMLHttpRequest do? To put it simply, it lets your Javascript go back to the server, fetch some new content, and write it back out onto the page all without the user having to change pages. This gives a ’smoother’ feel to web applications, as they can do things like submit forms without the whole browser window needing to go blank and reload the page. Take a look at maps.google.com now, and notice how you can drag the map around anywhere you want to go without having to reload the page. This would be unthinkable without XMLHttpRequest.

One of the biggest reasons XMLHttpRequest has become popular now is that browsers other than Internet Explorer have started to support it, mainly due to the fuss over its use in Gmail. The function is, by all accounts, a very simple one in technical terms: it was just a matter of someone having the idea.

Getting Started with AJAX.

The first thing to do to get started with AJAX, then, is to create an XMLHttpRequest object in your Javascript code. As ever, Internet Explorer has to be difficult, doing this a different way to every other browser out there. That means that you should use this Javascript code:

var ajax;
onload = function () {
if (window.ActiveXObject) {
ajax = new ActiveXObject(”Microsoft.XMLHTTP”);
} else {
ajax = new XMLHttpRequest;
}
}

What you’ve done there is declared ajax as a global variable (usable by all functions), and then created a new AJAX object when the page loads, either using ActiveX for Internet Explorer or the XMLHttpRequest function in other browsers.

The next step is to write two more functions: one to get data from a URL, and one to handle the data that comes back.

function getText(url) {
ajax.open(”GET”, url, true);
ajax.send(null);
}

ajax.onreadystatechange = function () {
if (ajax.status == “200″) {
// do things with retrieved text (in ajax.responseText)
}
}

All you need to do then is call getText from the relevant part of your code with a URL you want to get text from, and put that text wherever you want it to be in the state change function.

The most powerful thing about this approach is that the URL you send to the server can contain variables, using the old REST (question marks and equals signs) way of doing things.

That means that, using the code above, you can easily send a request to ajax.php on your server, and include the current value of, say, an input box for a username on a registration form. The ajax.php script checks whether that username is already in use, and then sends either ‘1′ or ‘0′ as its only output. All you would then need to do is check whether ajax.responseText was 1 or 0, and change the page accordingly, preferably using getElementByID.

Should I Use It?

The question remains over just how useful this is: it’s certainly good for some applications where users would otherwise have to submit data over and over again, but it’s not much use for smaller ones. AJAX coding has a tendency to take a lot of time, especially the first time you try it, and this is often time that could have been better spent on other parts of the project. In short, don’t be afraid of AJAX, but make sure you use it when you find a project that’s well-suited to asynchronous transfer don’t go trying to fit AJAX to a website that doesn’t suit it, just because you think it’s cool.

If you enjoyed this post, make sure you subscribe to my RSS feed!

{ 0 comments }

Ads Under the Radar: Linking to Affiliates.

by Jeff on November 4, 2005

One way to get a good income stream without doing anything that looks very much like advertising is to add affiliate links to your content. They’re just links, they don’t annoy anyone, and you can choose where you do and don’t want to put them. Sounds ideal, doesn’t it? Read on…

How Does Affiliate Linking Work?

Step by step, it works like this:

1. You become an affiliate. This works by you going to various online stores, looking at their product range and what benefits they offer to affiliates, and then signing up as an affiliate with the store that makes the most sense.

2. You write about products the affiliate carries. This might take the form of a review, or just a casual mention in a related article.

3. You link to the product at the store, using your affiliate code in the link. This affiliate code lets the store track that the customer came from your link.

4. For each customer you send their way who actually goes through with it and buys the product, they pay you a percentage of the product’s price.

You can see the power that this model could have for a lot of sites if you have a hundred thousand visitors, it doesn’t take a very large percentage of your visitors to buy that product before it starts to add up to quite a lot of money for you.

Amazon: the Web’s Biggest Affiliate Store.

The most popular affiliate store at the moment is Amazon.com, without a doubt. Why? Because it has such a huge range of products, from books to DVDs to truly obscure things. In terms of books especially, Amazon prides itself in having a listing for everything that exists, and selling as much of it as it can. That means that whatever you want to review, the chances are that Amazon sells it you’re not as limited as you are with other online stores, where you can only make affiliate links to things they happen to be selling this week, and maybe they’ll stop selling them sometime after that.

What does this mean to you? Well, imagine you run a book review site. Without being blatant about it, at the end of each article you can put a link that says something like “read more reviews of this book at Amazon”. This link then goes to the product’s page on Amazon, where there are indeed customer reviews not to mention the option to buy the book. If it’s a good book, this approach means that many people will click the link to see the reviews, and then buy it when they’re favourable. I’ve split-tested this, and “read more reviews” produced almost twice as many conversions as “buy this book”, making it a very good strategy.

Hang on a sec, though. What about those of us who don’t run book review sites? Well, whatever your site covers, I’m sure someone, somewhere writes books about it. Just introduce a regular ‘book review’ feature, where you review the latest books in your area of expertise, and then have the ‘more reviews’ affiliate link at the end. Give books bad reviews occasionally, despite the lack of affiliate income this produces, as it gives your reviews more long-term credibility than if you seem to love everything.

Done right, a book review every week or so can be a good supplementary source of income for your website. After a while, entirely random search engine visitors will start finding your book reviews in searches, and clicking through to Amazon from your site. I have year-old reviews that regularly make a few dollars per week it might not seem like much, but over time it can add up to a pretty significant amount.

Note: If you’re worried about paying more for books than you make back, remember that you don’t even have to buy the books yourself to review them get them from a library!

If you enjoyed this post, make sure you subscribe to my RSS feed!

{ 0 comments }