A twitter feed is simply a list of recent tweets published to twitter. You can narrow them down to show only tweets about a particular topic, or you can set the feed so that it shows  only your own tweets.

Why might you want one on your site?

Twitter is a good way of sharing relevant links and information, and hence a way of providing visitors with useful information and news.

Publishing tweets on your site allows you to highlight your recent tweets and encourage people to subscribe to your feed.

Outbound links may attract the attention of other site owners and encourage them to link back to your site. This may improve your page rank.

Of course, just publishing a feed won’t do anything for your page rank. It’s more sensible to focus on ensuring that your tweets are relevant, interesting or useful for visitors, as Matt Cutts of Google explains in this brief video.

How?

One of the easiest ways to publish a feed to your site is to use Twitter widgets. But they don’t seem to work in every browser, and they’re a little inflexible when it comes to adjusting colours and other aspects of the feed.

Instead, there are hundreds of free scripts available, and you can simply paste them into your existing pages. One of the best is available at http://www.taranfx.com/live-twitter-ajax-script.

This script is particularly useful because it includes nearly all the javascript and styling you need in one place. That makes it simple to change colours and font styles and you just need to upload one file to your server.

We’ve put up an example of the script in action here. It searches Twitter for the term ‘Danube’, displays the most recent tweets, and refreshes the display every 10 seconds.

You can adjust the appearance in many ways by changing the parameters in the code. For example you can change the colours used, the fonts, the refresh frequency, and the number of tweets used.

Things to watch out for

The hiccup you’re most likely to come across with this script concerns CSS styling. The script includes common styles such as lists, which may conflict with your existing style sheet. So to start with, the feed may not have the appearance you want.

One solution to this is to put your feed in a div with a distinctive name, and change the appearance of lists only when they appear in that div.

To do that, you preface the <ul> or <li> in your CSS with a hashtag and the div name. For example:

#twitterfeed li
{
display:none;
list-style:none;
background:#ffcc33;
margin:0 15px;
overflow:auto;
padding:10px;
color:#cc0033;
font-family:Arial, Verdana, Sans-Serif;
line-height:20px;
}

To create the div, you would then place the opening and closing tags around the code for the feed:

<div id=”twitterfeed”>

All the code for your twitter feed goes here

</div>

In this way, any lists you already have on your site will continue to display correctly, and the list style you apply to your twitter feed will not interfere.

In a perfect world, nobody types URLs incorrectly.

Your internal links work perfectly, inbound links don’t get broken when you alter the site structure, and money grows on trees.

In the real world, visitors occasionally end up on pages that don’t exist and are given the “404 File Not Found” error message. This tip shows how to customise the 404 page to really help your site and your visitors.

Why?

The standard 404 page is unhelpful. A more useful page might direct you to the home page, offer a set of options to help the visitor, or provide a search box allowing people to find the correct page.

Creative designers have also used the 404 page to display friendly and funny messages, great artwork, or just to express themselves.

How?

Making a custom 404 page and putting it to work is very easy.

The page itself is a standard web page. It can be HTML or any other common format such as PHP.

First, decide what’s most likely to help a lost visitor. Here are some suggestions:

• A simplified site map allowing people to reorientate themselves
• Contact details so that the site owner can be contacted for more information
• Links to the five most popular pages (risky, since this might just frustrate users)
• A site-wide search box

Next, create the page. For design inspiration, check out the Flickr site error message pool, or Fab404. Those two sites have amazingly creative examples, but don’t forget that your page should above all be useful.

If your 404 displays links, those links need to be absolute. That’s to say they should not just include the filename (such as /index.htm) but the full URL beginning with http://

Save your page with a recognisable name such as filenotfound.htm.

You can upload it to any directory on your site you choose, but it’s common to use the main directory.

Next decide whether you already have a file called .htaccess on your site or whether you’ll need to upload one for the first time. The best place to check is your main directory, but bear in mind some applications such as content management systems may put your .htaccess file elsewhere, and might use several.

Once you’ve found it, download it and open it in a text editor such as Wordpad. If you have no .htaccess file, create a new empty text file.

Add the following text on its own line:

ErrorDocument 404 http://www.yoursite.com/filenotfound.htm

Needless to say, change the URL to the name of the page you designed.

Save the file and change the name to .htaccess. This may look like an odd name but it’s correct.

Finally, upload the file to your home directory, and make sure it works by typing in a nonsense URL.

And finally…

Some things to watch out for:

• Some hosting providers don’t give you access to your root, so you’ll be unable to change the standard 404 page.
• Your .htaccess file may be invisible in your FTP client. The Core FTP client can be set to show all files.

It’s also worth noting that you can create separate .htaccess files for any directory, and this allows you to have multiple 404 pages according to which section of your site the visitor is on.

This is where we stretch the definition of 5 minutes a little. When you’re familiar with the mapping app we’re going to use, it will take 5 minutes to design and publish a map. The first and second times will probably take longer.

Many organisations publish a standard Google location map alongside their contact details.

Google maps allow styling, but here we’re going to use the styling tool on Cloudmade because it’s marginally easier to edit and embed a basic map on your site.

Why?

“How to find us” pages often look rather similar, when they could be striking and distinctive. They could use your organisation’s colours or your website colour scheme, for example, and they could include local information which only your customers will find useful.

How?

First, let’s look at what we’re trying to achieve. The following is a styled map showing the centre of London and an arrow pointing at a location on Trafalgar Square.

The colour scheme isn’t wonderful, but it illustrates how different you can make a map look and it’s easy to change the colours.

• First go to Cloudmade, where we’ve set up a basic style you can build on. At the moment, you can’t link to it, so just use the search in the top right hand corner to find it.

Search for 23177:

• A small section of the map will appear. In the bottom right hand corner of the screen, click on Clone Style.

• Now you should see a large version of the map on your screen. The URL will have changed to show your new style number – it will look something like this:

http://maps.cloudmade.com/editor/style/your new style number

The main roads are orange, minor roads are white, buildings are pink, water is blue. Points of interest such as tourist attractions, stations and supermarkets have been removed, but you can add them if you like.

• To change an element, just click on it.

For example, to change the main road Piccadilly from orange to alarming violet, just click it and select the colour from the popup that appears. Note that this will change all main roads to violet, not just Piccadilly.

• Click on the button marked “Refresh the map with your changes” to check everything’s going OK.

It’s possible to spend hours fiddling with a single map, and there’s nothing to stop you doing just that. But a quick first go round will help you get the feel of the app.

• When you’re satisfied, click “Save this style”. You’ll be asked to log in or sign up for a new account. Do the latter, unless you happen to have an account already.

Embedding the styled map on your site

To embed the map in your page, you’ll need to gather the following:

1) Your map style number.

2) Your latitude and longitude. You can get this from itouch. Just zoom into the Google map until you’ve located the exact position you want to map, and copy and paste the coordinates.

Now alter the following HTML snippet and paste it into the page you want to use to display your map.

<iframe width=”420” height=”380” frameborder=”0″ scrolling=”no” marginheight=”0″ marginwidth=”0″ src=”http://maps.cloudmade.com/iframe?&lat=51.50797764737426&lng=-0.12802720069885254&zoom=16&styleId=22664&marker=51.60797764737426,-0.12802720069885254“></iframe>

The code sets the size of the map you want to display, then the latitude and longitude, the zoom level, the style and finally the location of the marker. The example above puts the marker dead centre, but you can change this.
And that’s it.

Any problems, let me know in comments.

And finally…

Cloudmade allows you to change dozens of map elements. Once you’ve made your basic custom map according to the process above, you might want to look at borders, additional data such as local transport, or creating your own custom markers.

All the information you need to do this is on the Cloudmade site.

What’s a swipe file?

Designers, developers and copywriters often keep a swipe file or grab-bag of content that’s impressed them and is likely to be useful in future.

It might be an entire website, a code snippet, an article, or just a particularly striking headline.

Swipe files are a good way to learn from others.

A typical swipe file might contain

• images
• snippets of text
• html, css or javascript code
• entire pages, or screen shots

Clicking on ‘File’ in your browser then ‘Save as’ has never been a satisfactory way to save content. A swipe file should be a system that saves interesting examples in the blink of an eye, then organises them for findability.

What are the best available tools?

The best solution is the solution that suits you, your working style and the content you frequently come across and need to keep.

Here are some suggestions:

• Scrapbook is a Firefox extension allowing you to save entire web pages and sections of web pages. You can drill down so it also captures the pages linked to. You can organise pages and snippets like bookmarks, but the really striking feature of Scrapbook is the ability to remove elements of the page before you save it.

• Screengrab is also a Firefox extension. It creates and saves a PNG or JPG image of what appears on the screen. You can save an entire page, even if it’s larger than the screen, or you can select an area by dragging the cursor across the element you want to capture.

• Instapaper is web-based bookmarking. After signing up, you can drag a “read later” button to your toolbar. Whenever you see an article or a page you want to come back to, you can simply click to read later. Useful features include folders allowing you to organise your bookmarks and RSS feeds that can be integrated with your news and blog reader.

It can be useful to save snippets of code – HTML, for example, or CSS selectors. Although saving code is still a matter of copy and paste, there are numerous websites where you can upload and share snippets.

• DZone Snippets is one example, and this article suggests 27 resources for saving code.

• Snippely also comes recommended, though it’s probably best for hard core coders rather than casual swipers.

And finally…

Your working style will determine your system. Bear in mind that snippets need to be findable months later. They also need to mean something when you’re just browsing them, so annotations are important (eg “great benefits-driven headline found at http://example.dom”).

A list of the three most important tasks visitors want to achieve on your website will focus your content and help make your site more usable.

Many web developers are now thinking in terms of tasks, but that’s mostly because evangelists such as Gerry McGovern have promoted the idea.

Here are three examples of typical user tasks

• Sign up and create a profile on a community site
• Buy birthday presents for mail order delivery
• Find staff telephone numbers

Why make a list?

Organisations often treat their websites as a top-down broadcast. They carry on adding content without stopping to consider how people use the site. Others try to control what visitors do, how they behave, and what journeys they should take.

Thinking in terms of tasks is a very effective way of bringing attention back to the user. It guides decisions about what content to publish, how information should be presented, how to make transactions and searches easier, and what type of language to use.

How?

A simple and commonsense approach often works best, so start with a piece of paper and a pen!

Most website owners know instinctively what tasks people want to achieve on their sites, but sometimes confuse that with the tasks the organisation would like them to achieve. The key is to focus on the user.

Ask yourself

• What search terms people are using to find your site
• What people have said about the site when you’ve met them in person
• What your site search logs tell you
• What tasks your competitors believe their visitors want to achieve.

As well as sharpening new content, knowing the top tasks will help you put each page on your website through the wringer. In Killer Web Content, Gerry McGovern says “On every page of your website, you should ask these questions:

• What is the core task?
• How does this page help my customer to complete that task?”

And finally…

Your list of three tasks can be used as the basis for something much bigger – reviewing your existing content and governing the creation of new content.

It can also be the beginning of a comprehensive list of tasks. It’s rare for a site onlt to have three tasks, and many successful e-commerce sites have dozens of tasks on each page. So this is just an introduction to a project that will evolve as your site and your users evolve.

Let’s be honest. As website managers, we all have pieces of non-performing content on our sites.

A/B testing is a quick and free way of testing small changes to your content to improve performance. It can be used to increase clickthroughs, subscriptions, sales, or any other action you’d like visitors to perform.

Imagine that you have a page with a button encouraging visitors to click through to a destination page. In an A/B test you show some website visitors the current Version A of your content, while others see an experimental Version B. If Version B persuade more people to go to the destination page, it can be kept and Version A can be deleted.

How?

It’s best to start A/B testing with Google Analytics, for reasons of speed, ease and cost.

First choose one element of a page you would like to improve. It might be a signup button, a call to action, a form, or some link text. Alter the element in any way you think likely to work better and save your file with a new name. Then upload it to your web server and check the appearance.

Next open Google Website Optimizer.

Click on “Create a new experiment” and select “A/B Experiment”. If you already have your two pieces of content ready to go, tick the checkbox to confirm you’ve followed the relevant steps and click on the button marked “Create >>”.

Choose a name for your test (the name can be anything you want), and copy in the URLs of the original page, the new experimental page, and the destination page.

Google should then confirm that it’s found the relevant pages and you can press ‘Continue’.

You should then confirm that you will be making the changes to your code yourself.

On the next page, Google will display four snippets of code. Open pages A, B and C in a text editor, and copy and paste the code in as instructed. Upload all three files to the web server again.

Finally, click to check the code is working and start your experiment.

What results can you expect?

In around three hours, you’ll be able to start accessing your statistics. As more and more visitors are directed to content A or content B, the Google reports will change until you see a statistically significant difference in performance between your content.

The information is presented as a slider bar like this:

When you’re happy that one piece of content is clearly outperforming the other, the experiment can end.

And finally…

Unsure about what you should be testing? Two excellent A/B test results sites are full of ideas, showing what other website owners and managers have tested recently.

Check out which test won, then surf over to abtests for some inspiration.

Online or off, readers cling to the concrete. They like concrete nouns and verbs, but adjectives send them to sleep.

Adjectives reduce the impact of nouns and verbs because they weaken facts, force people to think, and can make the reader wonder what you’re trying to hide.

A lot of experienced writers have covered this ground already, but Geordie poet Basil Bunting said it well when he urged writers to “fear adjectives; they bleed nouns.”

Five minutes weeding out adjectives will give your written content greater strength and keep your visitors reading.

How?

If you’re an autonomous website owner or manager, tweaking your prose is easy.

Marketing content is famous for its adjectives, so your About Us page is a good place to start.

Next, look at content describing what your organisation does. Product information tends to be plain and factual, but service descriptions are often puffed up with redundant adjectives.

Keep your eyes skinned for nouns pretending to be adjectives. ‘Strategic logistics services’ is two adjectives modifying the noun ‘services’.

Finally, go through the headlines at the top of individual pages, in sub-topics and in email subject lines. If the first word is an adjective, replace it with an information-carrying word such as a noun or verb.

There are limits to this pruning. Value propositions – those few words describing your promised benefits and target audience – express the DNA of a business and will take much longer than five minutes to revise. So keep things simple and limit your ambitions.

And site managers in large organisations may meet resistance. In a mature industry packed with similar companies, marketers use adjectives as a poor substitute for real product or service differentiation. So an IT firm might not only provide infrastructure, but vital infrastructure. Managers find it hard to surrender these adjectives-as-differentiators.

If you run a style guide, include some general advice about using adjectives and keeping your prose strong enough for the mind to vault across effortlessly.

And finally…

Avoiding adjectives is a habit and takes time to learn. It even takes an effort for experienced writers. But nowadays sophisticated and impatient readers want fewer opinions and more facts. Cutting out modifiers like adjectives is one way to deliver what your visitors want.

Typeclear creates content for websites, email campaigns, e-learning, intranets and mobile. Contact us to find out how we can help you take simple steps to better content.

Web users are incredibly impatient nowadays, and they abandon slow-loading sites in a matter of seconds. To put it bluntly, when there’s a billion enticing sites just a click away, slow pages are irritating and boring.

In April 2010, Google also confirmed that it was starting to take loading speed into account in search rankings for some pages. So in future, speed may be important for search engine optimisation.

By reducing file size (minification), you can make your website load more quickly. This will please Google and keep your visitors happy and engaged.

What’s minification?

Most websites nowadays use CSS files to control the look of pages. CSS minification simply reduces the size of those files by stripping out unnecessary white space and comments.

How to minify your CSS in five minutes

First download and make a backup copy of your CSS file which you can fall back on if you make a mistake.

Next, open up the file in a text editor such as WordPad, and surf over to one of the following sites offering free minification:

• Minify CSS has all sorts of options ranging from heavy compression to light.
• Ventio offers a quick and basic minifier.
• Yahoo’s YUI compressor has a great reputation with the experts.

Select all the text in your file, copy it and then paste it into the box provided.

Once the text has been minified, copy and paste it back in to the CSS file then upload it again to your website.

Finally, don’t forget to test a few pages that depend on the minified CSS.

What result can you expect?

A minifier strips out as much white space as possible, and often removes comments too. The CSS file will be smaller, hopefully more attractive to Google, and will help accelerate loading times for your visitors.

The following shows CSS with no compression:

And the same code minified looks like this:

And finally…

So I’ve minified my CSS. How the heck am I supposed to read and edit it in future?

Easy! Whenever you need to edit the CSS in future, you can beautify it again, using CSS Beautifier.

• Typeclear creates content for websites, email campaigns, e-learning, intranets and mobile. Get in touch to find out how we can help you take simple steps to better content.