Useful information about websites, for businesses and web developers

When I started Oxford Webware in 2002, my experience with websites had been very Microsoft-centric.  That is to say, my programming language had been Visual Basic, moving on to C#, against a backdrop of various Windows operating systems.  Linux intrigued me, but I didn't know if I would take to it.

The process of finding fast, cost-effective hosting for customers meant that we tried out Linux hosting and PHP, the standard web programming language on Linux at the time, and now perhaps THE standard web programming language.

Linux hosting meant finding out how to mess with all sorts of settings files, examine log files using the command line, etc., grimacing but all the time knowing that there's no graphical user interface (in the case of our web servers) hogging processor time. 

The downside of Windows has definitely been memory hogging by Windows applications, and the occasional service pack or security downloads killing innocent bystanders (like the MySQL database) in its wake.

Using Linux, though, means not being able to use c#, a most thorough and elegant language with a very well organised library of supporting functions. 

So we do Windows and Linux, and we love it.

We've been using FCKEditor for some time now, and we were very pleased to come across TinyMCE (http://tinymce.moxiecode.com/), a simple, highly-configurable and very clean editor from Moxiecode systems.

The editor is very easy to install - see the code here - http://wiki.moxiecode.com/examples/tinymce/installation_example_00.php - and just replaces all textareas with the editor tool (or named text areas if you prefer).

Good designers need to continually search out places which will encourage the percolation of new ideas.

Do you ever look at a brief and think 'i don't know what to do'?

If you find yourself churning out one design after another with no other visual stimuli than your computer screen and office walls then it's time to get out there.

Of course design is everywhere. In the 21st century we are saturated by images. They whirl towards us in a storm of images as we walk down the street, stand at the bus stop, contemplate whether it's a normal latte, a skinny latte or a frothy caramel topped seasonal cappuccino day.

You don't even need to leave the house to find them as they pour through our letter boxes, shout at us from our zillions of tv channels or swoosh down our broadband connections.

The advantage of this immersion by image in our culture is that we are getting better and better at thinking visually. Practising mental visual gymnastics everyday by looking, seeing, and thinking means our responses to signs and advertisements and promotions is getting faster. So the designer can in turn develop their own ideas to create work which is more subtle, more thoughtful and more interesting as they know that there ideas will be met by an audience with a strong visual insight.

However there is also the danger of a complete visual shut down. Image fatigue.

It is a battle in this climate to create new innovative work which will stand out in all the good and the bad.

Vivienne Westwood's methods are an inspiration to me as her work is kept fresh and provocative because she feeds her mind with art - cycling around london visiting art galleries and museums finding influence from pictures in the National art library and the Victoria and Albert Museum.

As designers we can't stand still expecting our inspiration to rest solely on what passes infront of our eyes on the way to and back from work, taking whatever happens to fall into our laps.

We need to work at finding new and interesting sources for inspiration to keep our work fresh and innovative; to think about new ways of cutting through the visual clutter that surrounds us.

Clare

Content Management is a fantastic tool for adding menu items, news, and other content to your website.  But is it always helpful?

One problem with coming to content management from the traditional perpective of word processing and desktop publishing tools is that not everything translates.

There are some great tools for entering WYSIWYG (what you see is what you get) type text into browser-based content management tools - FCK being the most prominent and most advanced (http://www.fckeditor.net/).  However, HTML is not the same as the print formatting you get in word processing and desktop publishing tools, so users can get frustrated with even simple things like spacing and bullet points.

The ideal way to manage website content is to keep it very simple - and if items do need formatting in a particular way, or you need tables or unusual diagrams to be inserted - then use a web designer/developer to build a web page for you.  They'll know how it's going to look on different web browsers, and how to keep it standardised and in keeping with the rest of the website.

Nearly everyone knows by now that most people who interact with an organisation on a meaningful level (i.e. any deeper than buying a low-cost commodity) will check out that organisation's website.

This of course includes customers, suppliers, staff, shareholders, and many other groups of people.

Sometimes without knowing it, these people are judging the organisation by its website.

So one way in which a website should reflect a business is by appearing as professional and trustworthy as the business itself.

But more than that, a website should reflect the processes of the business.

If customers buy from you, is there a way for them to do this (or to learn about it) on the website?

If you offer customer support, can the website help?

If your staff interact with customers, can they use the back end of the website to process those interactions?  And so on.

Every time a business process is put in place, thought should be given to how that could be mapped onto the website.

Whenever this happens, there are potential savings in time and money, and potential benefits in terms of reaching audiences.

Sliverlight is a relatively new tool from Microsoft, which competes with Adobe Flash.

Silverlight is already used to make games and animations on an increasing number of websites.

The good thing about Silverlight, which Flash has always lacked, is the IDE (integrated development environment) for programming it.  The environment is Visual Studio, which is a superb tool for understanding and debugging code.

To find out more you can visit the Silverlight site here: http://silverlight.net/

Also, codeproject has some Silverlight articles: www.codeproject.com

Here's a gotcha:

Why doesn't this work:

<div style="display:inline; width:100px;">

For inline divs and spans, width is ignored.  Width is used for block elements, but if you want to put a width-specific div on the same 'line' as something else, you need to float it left or right, then possibly include a div underneath with "clear:both":

<div style="width:100px;float:left">THIS GOES LEFT</div>THIS GOES RIGHT

<div style="clear:both;">THIS GOES UNDERNEATH</div>

Over at Oxford Webware, what we think Web 2.0 is all about is using collaborative ways to create content.

This is a bigger than most people think.  All sorts of websites, from brochures to ecommerce sites, will need to adapt to take advantage of new practices, or see competitors take over.

Web 2.0 can be expressed as wiki sites, forums, product reviews, interactive surveys and polls, and comments (text and video) on blogs, news, and just about any other type of content.

What happens when you get user-generated content?  Lots of things, but here are three to start with:

• Users feel they are engaging with you
• Your website becomes more interesting
• Search engines appreciate the extra content being generated

An interesting take on web 2.0 here.

What is Web 2.0?

The answer, if you look at wikipedia, is mostly about the increased function you see in this generation of websites (i.e. websites in the 2000's) - particularly functions to do with collaboration.

Many of our customers, however, see design as an integral part of web 2.0, citing the bbc's new look and feel (http://www.bbc.co.uk)

Web 2.0 for them means shading, rounded corners, and panels which slide up and down.

What does Web 2.0 mean to you?

When considering a contact form on your website, what do you put on it?

We've found that when our customers add a contact form (in addition to phone + email details) a significant proportion of website contacts come through that form.

In other words, many people don't like to pick up the phone or write an email; they prefer to simply fill in a form and get you to contact them.

Two other variations on the contact form are popular:

"Call me back" asks the user to type a phone number and name (and optionally the best time to call).  This can send an email to your company, or it could pop up a window on a call centre operator's computer if you have many operators standing by to make calls.

"Live chat" is strictly for companies with a decent number of support operatives standing by.  This again pops up a window on an operator's computer and lets the user chat in real time.  Less pressure than a phone call but just as immediate.

Once you've set up with Google Analytics (see yesterday's blog), there's a wealth of information to explore.

The 'traffic sources' overview tells you how people are getting to your website.  Within this, you can see what search engines and direct links brought people there.

Within 'traffic sources', 'Google (organic)' means that people used "Google search" rather than clicking on a google ad - preferable as you don't pay for organic links.  If this statistic rises over time, your search engine optimisation is working.

Also within 'traffic sources', 'Keywords' tells you what people actually typed in to search engines to reach you.  This usually gives a mixed set of results, some surprising and others not so.  Using this may help you to brainstorm other words and phrases to work into your content in order to attract more traffic.

Google Analytics is a free tool from Google that can let you examine users' behaviour on any site.

It can be hooked up to Google Adwords, but it can also be free-standing.

Once you have signed up, Google will give you a small piece of code to place in the HTML of your website, which sends information back to Google.  Using this information, Google can give you graphs and usage statistics, including a breakdown of referring websites and search engines. 

You can also use Google Analytics to track goals - for example, downloads and forms being filled in.  Attaching separate pieces of code to these events means Google can let you see how users are being funneled into these events.

To give it a try, browse to: http://www.google.com/analytics

A static web page is a document (a file) which contains all of the information necessary to display the page content (though it may draw images and styles from other places).  These are typically named [something].html.

A dynamic web page pulls information from a database, and so may serve many different purposes.  For example a dynamic product page can be used to display different products depending on what parameters are given.

Whether or not you edit the website using a content management system, that system could potentially produce static or dynamic pages. 

Some people favour static pages for speed and for google spidering. 

Speed can be an issue if the server is being pushed to the limit, but web servers are still able to cache dynamic pages in many situations, so static pages may not have that much of an 'edge'.

Google likes web pages with names that make sense, so toaster.html rather than product.php?r=9219192.  However, tools like mod_rewrite and ISAPIRewrite can turn static-looking web addresses into calls to dynamic pages, so you really don't need static pages to impress search engines.

The big disadvantage of static pages is that they can never do clever things like saying 'welcome back, [name]', or displaying your current basket total in the corner. 

I would always recommend dynamic pages, unless there is a specific, proven speed issue and extra hardware is prohibitively expensive.

It's really easy to create a sliding panel on your website using jQuery.

You need these jQuery includes (available from the jQuery website):

<script type="text/javascript" src="/portal_lib/jquery/jquery-1.1.3.1.js"></script>
<script type="text/javascript" src="/portal_lib/jquery/jquery.bgiframe.js"></script>
<script type="text/javascript" src="/portal_lib/jquery/jquery.dimensions.js"></script>
<script type="text/javascript" src="/portal_lib/jquery/jquery.jdMenu.js"></script>

Then, say you have a panel with id 'mmhead1' to click on, and a panel called 'mmbody1' which needs to slide up and down, you can simply write the following script in the <head>:

$(document).ready(function(){

$("#mmhead1").click(function () {
if ($("#mmbody1").is(":hidden")) {
$("#mmbody1").show("slow");
} else {
$("#mmbody1").slideUp();
}
});

Hey presto!  jQuery takes care of the click event on the head panel, and slides the body panel up and down for you.

Splash screens are those web pages you sometimes get where you don't have any menu, just an image saying 'click here', or sometimes an animation.

MDs often like them because they look good, and let's face it, they do look good.

However, there's a difference between looking good and working.  If you imagine a beautiful yellow pages entry that doesn't give any contact details for your business you can see what I mean.

Splash screens turn people off, and provide another barrier between your potential customer and you.  Give them the info already!

We've just been through a round of hiring.  From past experience and wise advice, we've learned that interviewees need to be given real coding tasks if they're applying for a coding job, but just as important, need to be interviewed in a number of settings before you can really tell if they're going to work in your team.

Setting physics problems and abstract programming questions isn't enough; can your web developer understand the concept of an online shopping basket?  Can they make decisions about how to manage the shopping basket when faced with unpredictable data?  Only a coding task will test these abilities. 

It can be short, but it needs to test multiple abilities and a wide range of knowledge.  And I suggest that interviewees get treated like employees for this task - in other words, they get to ask questions and use the internet.  If they ask questions throughout, you'll know pretty soon that they're not the one.

If you're using apache as a web server and PHP as a tool for delivering web pages, you're likely to end up with a set of pages whose addresses look like this:

http://www.somedomain.com/product.php?p=1672835

However, if you've understood what Google is about, you'll know it likes your website to be as humanly-readable as possible in every aspect.

We've proved through research, and it's widely recognised, that if your web page is more like this:

http://www.somedomain.com/elephant_toy

Then the page can get a higher rank and perform better in searches for relevant keywords.

If you'd like to do this with your php pages on apache, you'll need the mod_rewrite extension (probably built into your apache installation).  If this is working, you can edit the .htaccess file to say something like:

  RewriteEngine on

  # Rewrite current-style URLs of the form 'product.php?r=x'.
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule ^(.*)$ product.php?r=$1 [L,QSA]

To get the lowdown on mod_rewrite, try looking at http://www.workingwith.me.uk/articles/scripting/mod_rewrite

Meta tags are information that is hidden to the user but seen by the Google spider.

The most important hidden information is:

• The <title> tag - this appears in the top bar of the browser window - and is not strictly a meta-tag
• The <meta> description tag - this usually appears in search results where your page appears
• The <meta> keywords tag - this appears nowhere, but informs Google about the main theme of the page

The key is to keep everything:

• Simple (not too many words - 7 as a rule of thumb)
• Varied (between the tags)
• Distinct (between pages)

Also remember not to place keywords which are not used in the body of the page - search engines can see this as spamming.

A good website will create titles, etc., for you as you create new news items or menu items.  However, a better website wil give you the option of overriding this and creating your own.

Jquery (www.jquery.com) is a really useful tool for a ton of DHTML operations on web pages.

Recently I wanted to shift the location of a <div> just for the IE6 browser.  I could have detected browser version on the back end and referenced a different stylesheet, but with JQuery I just needed a few lines of code to shift the one <div>..

Here are my script includes (I got the source files from the jquery website)

 <script type="text/javascript" src="/portal_lib/jquery/jquery-1.1.3.1.js"></script>
 <script type="text/javascript" src="/portal_lib/jquery/jquery.bgiframe.js"></script>
 <script type="text/javascript" src="/portal_lib/jquery/jquery.dimensions.js"></script>
 <script type="text/javascript" src="/portal_lib/jquery/jquery.jdMenu.js"></script>

Here is my code:

function ie5layout()
 {
  if ((jQuery.browser.version=='6.0') &&
   (jQuery.browser.msie))
  {
   var cssObj = {          marginRight: 17    };
   jQuery(".newsouter").css(cssObj);
  }
 }

and here is the body tag:

<body onLoad="ie5layout();">

CSS stands for Cascading Style Sheets.  Put simply, CSS is about saving you work and making your web pages consistent.

Once you start learning about HTML, you'll quickly find that you need a way to make your website consistent without having to write lots of attributes all over the place.

For example:

instead of <p><font face="Arial" color="blue" size="3">

you can write <p class="bigblue"> and write a stylesheet that defines the class "bigblue":

<style>
p.bigblue
{   font-family:Arial; color:blue; font-size:12pt }
</style>

Your stylesheet can go inside your HTML page or it can be referenced as an external file.

Here's a great guide to stylesheets: http://www.w3.org/Style/Examples/011/firstcss

Is your home page full of blurb?

Have a simple, accessible description of the service or product being advertised.
By 'accessible' I do not mean 'accessible to users with disabilities' or 'accessible to search engines' (I cover those topics elsewhere). What I mean is, accessible both to people in your industry and 'laypeople'. For example:

Welcome to Acme Shirts.
We sell the finest shirts of all shapes and sizes,
and deliver direct to your door.

It may be that your first-time visitors don't read it, and you can be sure that your second-time visitors never read it, but for someone who needs to understand what the site is all about, it's essential.

The text can go in your strapline or in the body of the page, but in either case, it must be in a prominent position near the top of the page.

Shop around

This applies to every type of business transaction, of course, but particularly when you've never ever commissioned a website, you need to talk to a number of suppliers about what they can offer you now and long term, and what it means in terms of helping your business to succeed. And most importantly you need to choose a supplier you think you can work with in the future. Working websites need attention.

Imitate

“There's nothing new under the sun” said the philosopher, and this is your excuse for copying the fantastic-looking website you saw last month. As long as it's not your nearest competitor's site, there's much to be said for borrowing large chunks of design brilliance from another site. Be as explicit as you can be for your website designer (“I want that header, with this picture”) – that will save them work, which means you get more of their goodwill.

Get a Content Management system

Many website buyers fall into one of two traps:

• They have to pay a designer each time they need to make a change, or:
• They have to understand complicated protocols for uploading new files to the website.

You really need a simple system for uploading content that's not going to break your website. This is generally known as a “Content Management System”. Ask your web developer how it works and get a demo before you commit to anything.

Photographs

This is where knowing a bit of technology will come in handy. If you can crop and resize pictures for use on the website, you will save a large amount of to-ing and fro-ing between you and the web designer once the site is up and running and you need to upload new content. Pick a package, learn the basics, and you can't go wrong. Here are some obvious ones:

• Paint Shop Pro
• Fireworks
• Photoshop Elements
• XNView
• GIMP

Copywriting

Keep the copy as simple as possible, especially on the home page. Remember that the home page is a conduit to other parts of the site, where people will be doing business with you. If they want the company history, they can find that under “about us”. Above all, get the copy checked by someone you can trust, and listen to their advice.

HTML stands for Hypertext Markup Language, and is a way of formatting text to display nicely in a browser - the HTML

<strong>one</strong>two

displays in a browser as:

onetwo

HTTP - Hypertext Transport Protocol - is the medium in which HTML is transmitted across the internet.  It's a stream of characters that pass in between the web server and your browser - mostly HTML, but including a few headers.  Headers can carry information such as the type of response being provided (e.g. 404 for page doesn't exist) and cookies (small nuggets of information that the web server requests your browser to store).

We surveyed a couple of our customers recently, one with 5,000 unique visitors per month and one with 10,000.

Both websites turned up a significant number of users using Internet Explorer 6, which is worrying considering that MS are now bringing out IE 8 beta, which of course we'll also need to test on, for future compatibility.

Safari figures were 1.2 and 1.4 - significant enough to test against - but most Mac users seem to prefer Firefox.

Total percentage for IE6 was 37% (!) on the 10,000 user site, and 23% on the 5,000 user site.

So that list (which in my opinion covers you for most purposes):

• IE8
• IE7
• IE6
• Firefox (latest)
• Safari (latest)
• Plus, make sure it meets w3c standards

Designers have often find it difficult to move from the comparatively free discipline of print design to the more straight-jacketed discipline of web design.

Consider:

• With web design, your pixel area is constrained, but you may need to cater for movement.
• You need to concentrate heavily on the top of the design, which is the only part guaranteed to be visible.
• Typically users spend short amounts of time trying to understand the web page, so you need to fit in with many conventions (logo top left, identity, strapline, housekeeping menu, main menu, etc.) if you are serious about serving them.

Of course, there are graphically innovative websites out there, but they are not making money, because users can't find the "buy now" buttons on those kinds of websites.  So if you are designing commercially, you need to get conventional!

Your website content now has to be accessible to Google's spiderbot. 

"Accessible" sometimes refers to the w3c standards on accessiblity, which are all about making sure that blind + partially sighted people (and people with other access needs) can visit your website and use it. 

It's crucial that you follow these standards, because you'll know, if you structure it as the standards dictate, that robots are going to understand the website too.

However, when I talk about accessibility in terms of Google's spiderbot, I mean in particular that all of the content must be available via plain links.  Easy ways to get this wrong are:

• creating javascript-driven menus
• creating a search box that's the only way to find some of the content

You can check your website for faults like this.  You can also, after your website has gone live, search Google for complete phrases (surrounded by double quotes) on pages you'd like to see indexed.  Give it some time, but in a well constructed website everything should be indexed.  Everything is on wikipedia, after all

Don't say I told you this, but get all those useful words and phrases you listed in steps (1) and (2), and make sure that your web site includes a variety of them, in various places.  We'll get onto meta-tags later, but by places I mean inside the text of your website.

Important: don't forget, your website must make sense.  Don't just scatter those words like sprinkling sugar.  Not just because it needs to be read by people, but because Google's spider is programmed to think more and more like a human being. And, of course, because it's the right thing to do.

If you're thinking of writing your first web page, forget Dreamweaver and start with Notepad (or Textedit if you're a mac user).

Why?  Dreamweaver's very good as an intermediate tool for web designers who want to create HTML documents (web pages) but it makes it too easy for beginners and isn't the best tool for serious web developers.

Beginners, rather than mess with a rich text (or WYSIWYG) interface, you need to understand the basics of HTML, play around, apply them, and see what happens.  Nothing's better than notepad for this.  There are some excellent web tutorials out there - try http://www.w3schools.com/HTML/

When you start developing web sites (as opposed to HTML documents, which may be used as part of a site) you'll need to give the computer instructions on how to produce HTML, usually by merging a series of hand-crafted templates with information from a database.  Then you'll need to use a programming language - typically PHP, C# or Java, and you'll typically use a tool specifically written for that language (such as Zend for PHP or Visual Studio for C#).

Hosting companies provide the disk space to store your website and expose it to the outside world.  Normally, hosting companies will also register your domain name for you.

Hosting can be fast and reliable when your website is on good hardware, and not sharing with too many other websites.  Hosting companies don't normally publish all this information, but price is a good guide to what you're getting.

For the complete beginner, I recommend supanames and namesco, whose low-end packages start at under £50/year.

When you start needing some serious reliability, look at dedicated servers from memset.  Here though you're paying upwards of £100/month.

Hosting companies tend to automate their customer service function.  If you'd prefer to deal with a human, it's worth asking your web developer to organise and manage your website hosting for you.

Once you have a list of words people are using to search for your site (see First Steps in Search Engine Optimisation (1)), it's also useful to know how many results these search words or phrases bring up in Google.  Although this won't be a hard and fast rule, generally speaking you ought to avoid targetting search terms which pull up the most results and concentrate on the ones that pull up the least results (these are your niche markets, in effect).  I'll talk about what targetting is in part 3.

It can be a useful (though not entirely foolproof) exercise to create a 'usefulness index'  for each search term based on the number of people searching, divided by the number of results that search term gives.