Subheadings are Key.

Do you see what I’m doing here? I gave you a short introduction, and then I go straight into a series of subheadings. These subheadings divide the article up into clear sections, letting you dart around, scan more easily, read the bits you’re interested in, perhaps go back and read some you didn’t think you were interested in… it’s really up to you. Web readers simply cannot abide being given a big chunk of text and having to sort through it themselves they want clear sections in your writing. Note that your subheadings should be much more descriptive and less ‘creative’ than they would be in print.

Make Sensible Paragraphs.

When it comes to the web, paragraph splits are, surprisingly enough, less necessary than they are in print. You will make your site look odd if you put in a paragraph break after every sentence, or every two sentences. Instead, split paragraphs when you start a new idea note that if you combine two, many readers won’t register the second. In most cases, you shouldn’t go for too many paragraphs before introducing a new subheading. Your aim at all times is to make your page as easy as possible for a reader to scan.

Lists are Always Good.

If you’re about to write out a big list with commas and semicolons, stop. Semicolons have no place on the web. Instead, you should be using lists, complete with bullet points, to get your point across effectively. Treat it less as prose and more as a presentation. Clear presentation of information lets people find what they’re looking for more quickly.

Of course, you shouldn’t go overboard with the lists. If you have more than one list in a row, or your list goes on for more than ten items or so, you might want to consider revising the layout of your writing.

Don’t Be Afraid to Link.

It might feel strange at first, but link whenever you’re talking about something that isn’t included in an article. You’re quoting a dictionary or encyclopaedia definition of something? Link to it. Are you reviewing a website? For goodness’ sake, link to it! There is absolutely no justification for fear of linking: it’s the way the web works, and if you’re not linking when you could, you’re not writing for the web.

Make Everything Independent.

On the web, you can’t be sure that your text is always going to be seen together. Maybe your headline will be listed in an index of headlines. Perhaps your intro will be next to it. You just can’t be sure. In every case, then, you have to resist the temptation for mystery, and play things straight. Imagine how your headline and intro would look if they were detached from the rest of the article. Would you know what the article was going to be about? Would you click through to read it?

You should pay particular attention to this problem if you’re used to writing short, punchy headlines and explaining yourself in sub-headlines: realise that the sub-headlines might not always be there, and adjust your style accordingly.

Listen to the Authority.

This has really just been a brief introduction to the kinds of things you should consider when you’re writing for the web: there’s plenty more out there. If you want to read the best articles on the subject, though, you should read Jakob Nielsen’s articles on writing for the web, at http://www.useit.com/papers/webwriting/. Although many of them explain the results from research that was done quite a few years ago now, they remain as relevant today as they were when they were written. Spend an hour or two making notes, and watch your writing improve.

Technorati Tags: web design, html, websites

Free Templates.

A quick search for ‘free website templates’ turns up a lot of offers. You have to realise, though, that almost any template you get for free is either going to be really very amateurish looking through the results, in fact, a lot of it is downright nasty. There will also probably be some annoying conditions of use, such as having to link back to the designer’s web page from your page, or not being able to use the design commercially.

If you’re really determined to get a template for free, a better way of doing it is to use the ones that come for free with whatever software you’re using. WordPress, for example, has some very clean, attractive templates.

However you do it, though, you have to realise that free templates will never be unique: your website will look just like hundreds of other websites out there that found the same free template you did.

Cheap Templates.

Once you start to get into the territory of paid-for templates, things start to look up. The idea behind sites that sell templates (templatemonster.com is the market-leader) is that they can pay designers a proper rate to do something good once, and then resell it as many times as they want for a relatively low price. This lets designers be paid for as many designs as they want without ever having to deal with customers, and it lets customers buy and use the designs for a much lower price than they’d usually pay for something a lot worse and that they can’t see in advance.

Although the effect isn’t quite as bad as with free templates, you still have to understand that other people out there are going to have the same design as you. This can be a problem, especially if you use one of the big template sites and pick the obvious design for the type of site you’re running. Used carefully, though, it can be one of the best ways to get a good-looking site up without breaking the bank.

Exclusive Templates.

After realising how much some people dislike other sites being able to use their design, many template sites started selling exclusive templates ones that are only sold once, to one website, and then taken down. They found themselves with a runaway hit on their hands.

The reasons for this might not be immediately obvious, as buying exclusive rights to a template are often more expensive than just paying a designer to do it to begin with, and you get less say in what the site looks like.

If you ask me, the popularity of exclusive templates is down to removing the often-fraught relations between a web designer and the customer. Customers all too often come into the design process with all sorts of requirements and preconceptions, and designers will fail to understand what customers care about and what they don’t.

This way, designers are free to create something great, and customers can take it if they like it or look at hundreds of alternatives if they don’t. It takes all the uncertainty and negotiation out at both ends, and leaves both the designer and the customer much happier than they would have been. Of course, if there is something small you want changed, most sites are happy to get the designer to do it for you for a small extra fee.

Putting Text in Templates.

Once you’ve got a template, the only remaining step is to take your text and put it into the template. The designer might be able to help you with this, or you might prefer to add the template to whatever software you plan to use so that your content and navigation can be added automatically.

Technorati Tags: internet design, web design, html coding

There are Millions of Websites.

Why would you need to do that? Well, if there were only a few hundred websites in the world, you wouldn’t it’d be fine for people to have to learn a slightly different way of working to use yours. Unfortunately for you, though, there are literally millions of other websites. Even your most loyal visitor is overwhelmingly likely to be spending the majority of their time looking at other websites, not yours and if your website doesn’t work similarly to the others, then they’re going to find your website hard to use.

The Learning Curve.

When people come to your website, do you really want them to have to figure out how to use it before they can get started? Do you want to write big help files and FAQs just to explain it to them? Of course not. Part of the power of the web (as opposed to desktop programs, for example) is that it gives a consistent interface to all sorts of things. If you break this, then you’re making your site require some learning to be usable.

The web is competitive enough that, in most cases, your visitors will just desert you for your easier to use competitor even if there isn’t one now, one can easily enough spring up and take advantage of the niche you created with your bad design.

What are the Conventions?

The web’s design conventions are simple, but effective, to the point that you probably don’t realise they’re there most of the time. Here are some examples:

Your logo should be a link to your homepage.
The links on your navigation bar should all be internal links.
Clicking a small picture will display a bigger version.
Links go to HTML documents unless they’re clearly marked as a movie, PDF, etc.
Things are bought by adding them to a ‘cart’ and then going through a ‘checkout’.
Identity checks are done with a username and password system.

There are many, many more.

What Happens When You Break Them?

People get annoyed. It’s immensely frustrating to want to see a bigger version of a picture on an e-commerce website and click it, only to get the same size picture in a new window or something equally stupid annoying enough that I, at least, would go and look for a site that had a better picture.

Not only do people get annoyed, though, but they also get confused. If you put an external link on your navigation bar, for example, then people could think it’s part of your website that creates all sorts of issues, since you have no control over external content.

Exceptional Circumstances.

The only time you should break the web’s conventions is when your website is different enough to others that it will be worth people learning a better way to use it. For example, when Google launched Gmail, the world’s first webmail service with a gigabyte of storage space, they introduced an interface that used Javascript to change entire pages without reloading. That broke the web’s conventions, but worked well enough that the technique caught on, and is now starting to develop new conventions all of its own.

Don’t get carried away, though, and start thinking you’re more important than you really are. Your great new product is very unlikely to justify you adding streaming video to your homepage it’s more likely to just annoy people (far better to add a large picture of the video and a ‘click here to see our new product’ headline). Know your website’s limits for the most part, you should try to make it work as much like other websites as you possibly can.

The ultimate test is this: if you sit an experienced web user in front of your site, can they use it without getting confused? If they can’t, then it’s back to the drawing board.

Technorati Tags: web design, html, websites

No Need for HTML.

Weblog software will give you an easy interface to upload articles you write. You don’t need to put them in templates, you don’t need to add HTML tags, and you don’t need to use any WYSIWYG editor all you do is paste them into the box the software gives you and press ‘post’.

The advantages of this are obvious: it saves you time and trouble (especially of you don’t know HTML all that well). It also tends to make it much easier to avoid layout mistakes caused by typographical errors, since the weblog software is producing the HTML for you.

No Need for a CMS.

Likewise, you don’t need a CMS (content management system) to keep your site’s content in check: all you need to do is add tags to the content as you post it. Most weblog software will create categories for you as you go, instead of you having to categorise everything and pay attention to the way it all works. Instead of managing your content, you just throw it on there and let the software do the managing.

Since there’s much more good weblog software available for free than there is CMS software, this can save you quite a lot of money. Also, although this is a subjective judgement, weblog software tends to make your site look better than CMS’ templates do.
People Know How Weblogs Work.

The weblog format has now become a standard, and people know what they’re doing with it. Instead of having to learn yet another website format, looking around to see how you do things, they know straightaway where to look to find things. The date, the name of the author, the archives, the page about you everything has a standard position on a weblog, and most web users have read enough weblogs to know what they are and how they work.

This becomes even more powerful when it comes to asking visitors to leave comments on articles: every non-weblog site does this wildly different, while with weblogs it’s quite standardised. You just type your name, leave your comment, and it gets added to the list no muss, no fuss.

A Little Each Day.

It’s a well-known fact that it’s easier to do things if you chip away at them a bit at a time instead of trying to do them all at once. The same goes for websites: it’s much easier to write little bits of content each day instead of trying to do it all in one go. Weblogs give you the freedom to write when you’re inspired to and write as little or as much as you like, instead of having to create a structured article or set of articles.

Trackbacks.

Using weblog software that supports trackbacks (most do) makes other weblogs more likely to link to you, as they know that their site will appear in your trackbacks section. These links increase your traffic and search engine rankings, especially if you get linked from a popular weblog and if you link to others, they’re more likely to link back to you.

RSS and Syndication.

Putting your data in a weblog format also has the effect of letting the weblog software produce data about the latest posts using RSS (really simple syndication) format. Users can then ’subscribe’ to these feeds using special software and websites, and keep track of your latest posts, clicking through to read the ones they’re interested in. This is a little like turning your existing content into an email newsletter, with no extra trouble on your part it gives people the opportunity to come back over and over again.

Technorati Tags: graphics, internet, web design, website design

The Quote Problem.

All those foreign letters you see in that text were originally nothing more than an attempt to make documents a tiny bit nicer to look at. You see, the design of the keyboard comes from the age of typewriters, and the symbols present represent the kind of writing that appears on typewriters. We’re stuck with our keyboard designs, but they were never meant to account for all the extra letters and characters included in modern fonts. This led to the quote problem.

What’s the quote problem? Well, to answer it, take a look at your keyboard. Notice how there’s only one kind of double-quote mark the straight one. Worse, when you want a single quote, you have to use the same key as for apostrophes! Now, if you were writing on paper, you’d put different shaped quotes at the start and end of a quote, instead of just making straight lines. Altogether, things that would be represented by five different marks on paper only get two symbols on the keyboard.

Long ago, Microsoft decided to solve this problem. First, they set up Word to look for quote marks and replace them with nicer, curly quotes, known as ’smart quotes’. Then, they took some unused character codes hey, what could anyone ever want those for? and decided that they would represent these new, pretty quotes.

Everything was fine until, years later, people started copying text they’d written in Word and pasting onto the web. Because Microsoft didn’t stick to any international standard when they chose how to represent their smart quotes, the quotes ended up displaying as all sorts of unintended strange letters in web browsers. Word’s users never meant to do this, but Word had gone ahead and done it for them, because smart quotes is turned on by default!

Not so smart after all, was it?

Terrible HTML.

Of course, there’s more to all this. When Microsoft finally caught on that the web was going to be big, they quickly added web features to Word, not least of which is the ability to save documents to HTML. Unfortunately for the rest of the world, though, Microsoft again failed to stick to any standards at all. They made up their own HTML tags to represent the layout of Word documents, purely to make sure that the documents would look the same if people wanted to open them in Word and save them in another format. These proprietary tags now pollute HTML documents all over the web, simply because the people who created the pages by saving as HTML in Word don’t know enough to remove them and they make pages load much more slowly.

Worse, even if you do remove all the Word-specific tags from the documents, the leftover HTML is still a nightmare. Presumably Microsoft decided to re-use the HTML generation engine from FrontPage, with the same kinds of results a complete and utter mess.

Smart Tags.

Do you think it ends there? Amazingly, it doesn’t. For their latest versions of Word, Microsoft decided it’d be great to add something they called ’smart tags’ a kind of ‘link’ that adds contextual information to things you type. For example, if you type an address in your document, that address allows you to link through to a map. Useful? Very rarely.

The problem comes when documents containing smart tags are saved as HTML the tags are saved too! This means that documents all over the web have odd text linked to completely frivolous places, simply because Word thought it looked like an address. Not only do these links take ages to load correctly, but they’re ugly too.

What might Microsoft Word unleash upon the web next? We can only wait in fear.

Technorati Tags: internet design, web design, html coding

Microsoft and Sun.

Java is an open standard, and it’s one that Microsoft originally embraced. They made their own Microsoft JVM (Java Virtual Machine) part of Internet Explorer. This led to the rapid growth of Java on the web.

Sun, Java’s creator, then decided to sue Microsoft, for being anti-competitive in bundling the Microsoft JVM with the world’s most popular web browser. This was a bad move Sun wanted Microsoft to bundle its JVM instead, but it actually led to Microsoft simply removing all Java support from Internet Explorer, and forcing users to go and download Sun’s (from www.java.com) if they wanted to see Java content.

That leaves us in the situation we’re in today, where users can be divided into three groups:

Users with old versions of Internet Explorer. They have the Microsoft JVM, which is wildly incompatible with Sun’s.

Users with new versions of Internet Explorer but no JVM. They don’t have a JVM, meaning that you’ll have to get them to download Sun’s to see Java content and Sun’s JVM is a big download.

Users with Sun’s JVM. They’re not only the smallest group, but they’re also using a JVM that is incompatible with Microsoft’s.

This leads to a situation where you can either code for the smallest group of users (who have a supported plugin), or the next largest one (who have an unsupported one), or try to force the largest group (who have no plugin) to get one. This is obviously an extremely bad situation to find yourself in.

The Speed Problem.

Java’s problems, though, don’t end there. Even assuming that your user has one JVM or the other, they still won’t want to use Java content. The big reason for this is that Java is very, very slow.

How slow? It’s slow to the point where going to any page that has Java on it will cause most browsers to freeze up for about 30 seconds or so, appearing to have crashed completely. Users are unlikely to be patient enough to wait for the Java to load, instead press control, alt and delete to get out of there.

Java’s adherents mostly refuse to acknowledge the speed problem, but it’s bad enough that downloadable desktop programs written in Java have become a complete joke anything useful written in Java will be pretty promptly re-written in someone else to make a more responsive and usable version. Java programs are simply impractical thanks to their speed problems, and no matter how fast computers get it doesn’t seem to get any better.

The Looks Problem.

The next problem is the way Java tends to look. It uses non-standard buttons, not to mention rather simple and overly programmatical ways of producing graphics. To put it less kindly, content produced with Java tends to be ugly.

If you try producing the same application in Java and in Flash, there’s just no comparison. The Flash version might be a little harder to code, but it will work in so many more browsers, load much faster, and look better when it does. You would be very silly at this point to use Java instead of Flash, and there are very few things that Java applets can do but Flash can’t.

Java on the Server.

At this point, Java is pretty much dead on the desktop, or in the web browser. For this reason, if you’re going to write programs in Java, you should keep them where they belong and work best on the server. Java on the server is growing all the time, and is a good alternative to many other ways of doing things, providing your server is powerful enough for it. Sun knows this, and is re-focusing its Java efforts at server installations, as an alternative to Microsoft’s .Net. Let’s leave client-side Java to rest in peace.

Technorati Tags: graphics, internet, web design, website design

What I’m here to tell you, though, is that you should consider doing things another way. I’m telling you that you should go get yourself some wood and a saw. In short, you should do it yourself.

Why Would I Do That?

No matter what you might do, unless you’re doing it yourself that is, coding your website by hand you’re not going to have full control. Doing it yourself gives you control over every tiny, tiny detail, and puts you in a situation where there should never be a problem you can’t fix. You’re not relying on a company, or a designer, or anyone else whatever goes wrong, you can fix it.

Thanks to XHTML and CSS, creating websites by hand has never been easier in fact, once you know the basics, it’s often easier than fighting with some piece of software to get it to make things look the way you want. Once you know the tag for an image, it’s much easier to just type it than go through a bunch of menus. When you know you want something to be a certain width, it’s easier to type that in than to try to make it the right size using the mouse. Web design benefits from the kind of preciseness that you get from doing it by hand.

At every stage in the process, you know what you’ve done and you know what you have left to do. If something isn’t working the way it should, you can easily look through, find the problem, and make it right. Altogether, not only do you save the money that you would have spent on Dreamweaver or FrontPage, but you also end up with a better website in the end.

Tables and Coding.

For a long time, the biggest reason to stay away from hand-coding websites was that most complex layouts were done using tables, and tables were hard, especially when you had to put one inside another. Any modern website, though, really shouldn’t be using tables at all, which means that you won’t have to learn how to do them that takes down the biggest barrier to hand-coding. HTML is very easy to figure out, and from there all you have to do is learn a little CSS (there are plenty of good books on it, and there’s not that much to learn altogether) and you’re away.

Re-using Code.

There are only a limited number of things that you’d want to do in HTML, and they’ve all been done by someone, somewhere. When you see an effect you’d like to use on any website, anywhere, knowing HTML means that you can simply use your browser’s ‘View Source’ function to see how it was done and adapt it for your own website this is generally considered an OK thing to do.

You’ll also be able to start building up little libraries of code you’ve written yourself a two-column layout, a splash page, and so on and quickly adapt them as they’re needed. Even better, if you already have some HTML from a template that you bought or that came with some software, having built websites yourself will give you enough know-how to figure out how to edit it and make it look exactly the way you want.

Technorati Tags: graphics, internet, web design, website design

MySQL.

MySQL is the most common database software for small websites, but is laughed at in the rest of the industry. It’s fine for simple insertion and retrieval of data, but if you start trying to do anything more advanced with it, you’re going to start running into problems.

So what doesn’t MySQL support? Today, MySQL doesn’t support views (’virtual’ tables made from other tables), stored procedures (small programs that can be stored in the database) or triggers (actions that the database can be told to do automatically when certain things happen). However, many of these features are promised in future versions.

What does MySQL have going for it? Well, for one thing, it’s free, and it’s the most-used database on the web. The database has speed, simplicity, and a no-nonsense attitude on its side. MySQL is usable with a lot of different programming languages instead of being artificially restricted, and runs on a lot of operating system. There’s no shortage of big websites using MySQL and doing just fine: CNet and Friendster spring to mind.

Visit www.mysql.com for more information.

PostgreSQL.

MySQL’s biggest open source competitor is PostgreSQL (www.postgresql.org). It’s often considered to be a better database overall than MySQL, and yet it has a much smaller market share. It a more established and mature database than MySQL, with roots in the early ’80s compared to MySQL’s start in the mid-’90s, and is also released under a more flexible license.

The biggest strength of PostgreSQL is that it lets the database do more of the work: you define rules to say how your tables relate to each other, and PostgreSQL ‘understands’ and make things easy on you. It supports all the latest standards and features, making it a much better choice as a drop-in replacement for an expensive enterprise database than MySQL is.

Microsoft SQL Server.

Microsoft’s SQL Server supports lots of extra features that other databases don’t because they were entirely made up my Microsoft. There are two reasons why some people use SQL Server: first, it works well with IIS and ASP, and second, it works graphically instead of using text.

However, as with most Microsoft products, security has proved to be SQL Server’s weak point. Back in 2003, the Slammer worm demonstrated how insecure the software is when it spread between servers using a vulnerability in SQL Server. The problems caused were bad enough that the entire Internet actually slowed down, and although Microsoft says it has committed to improving security in all its software, it remains to be seen whether something similar might happen again.

Oracle.

Oracle is widely considered to be the best database out there. It’s a very old, stable database, and is the most-used in big enterprise operations, mainly because it’s so much faster than anything else out there. Oracle works on lots of different operating systems, and has support for lots of interesting features like Java and XML.

Oracle offers a lot of documentation and support on its website and, despite what you might think, is usable with languages like PHP. People used to avoid Oracle because it was wildly expensive compared to other database soft out there, but Oracle now makes a ‘Standard’ version available for around $150 per user quite comparable to Microsoft’s SQL Server. At this point, the only reason not to use Oracle is that you want your database to be entirely free you’d be a fool to choose SQL Server instead of this, for sure.

Technorati Tags: internet design, web design, html coding

The Advantages of WYSIWYG.

WYSIWYG is quite uncontroversial at this point its advantages are clear, in that it lets you make your page look exactly the way you want it to while you’re writing it, with no surprises. In the early days, it was sometimes referred to as being like a kind of ‘interactive print preview’. Professional typesetters were at first opposed to its use in publishing, but it’s easy and quick enough that it has come to dominate. The alternative now, though, is to go back to the days of layout commands, which isn’t something most users want to do.

On the web, WYSIWY it can be far more problematic, because what comes out of the other end of the program isn’t a static, printed page it’s computer code, HTML, that has to be interpreted by a web browser before it becomes anything viewable.

Not Even All Browsers are the Same.

The first problem with what you see in an editor being what you get in a browser is that all the different browsers available don’t always make the same page look the same way. How are HTML editors supposed to account for bugs in Internet Explorer? They can’t, really.

Each piece of HTML editing software is forced to either write its own HTML rendering engine (the engine that decides how the code is translated to a visible page), or use one from an existing program. Recently, for example, Dreamweaver moved over to Opera’s engine, which means that it shows pages the way Opera does. FrontPage has always been closest to Internet Explorer. Because Mozilla is open source, there are a lot of HTML editors based on its engine, the most usable of which is Nvu.

That doesn’t exactly help, though, when it comes to things looking the same in every browser if you use Dreamweaver, for example, what you see will be what you get in Opera, but not necessarily in Internet Explorer. This is a problem that can be partially solved by testing everything in every browser, but doing that doesn’t let you see what your page is going to look like as you’re going along.

Maybe What You See Shouldn’t Be What You Get.

While users demand WYSIWYG software, it’s somewhat misguided when it comes to the web, for the simple reason that it expects everyone to be using your site the same way, and designs towards that expected use. In reality, the web was designed to be a document format that was interpreted by the program receiving it, meaning that if a browser wants to leave out all the graphics, or ignore all your tables, then it’s perfectly justified in doing so. This is especially significant when it comes to mobile browsers they simply don’t have large enough screens to display normal designs, and it’s silly to force them to try.

Realising this is one of the most important differences between being a good designer and being a bad one. Bad designers will be constantly nudging at their designs, doing everything they can think of to get them to look exactly the way they intended in every browser possible, even if it doubles the size and complexity of the code. A good designer will write good code that displays in all browsers, but doesn’t necessarily have to be pixel-perfect.

Technorati Tags: internet design, web design, html coding

The Business Card Website.

For many people, having a website is something they feel the need to do as a duty, not because they really want to do it. In this case, it’s perfectly justified to put up a website with nothing more than your name, your business name (if any), and your email address. You could also include your real-world address and your phone number, if you’re comfortable with that. The key here is to at least put up something for someone who happens to be looking for you with a search engine.

You have to understand, though, that these kinds of sites can be as frustrating as they are helpful. Friends and co-workers may be excited to find your site, only to say “oh… is that all it does?” Customers, especially, have a tendency to get upset, especially if they just wanted to know something about your products or pricing. Not having a complete website makes work for them when they have to ask you about these things, and for you when you have to answer.

The CV/Portfolio Website.

An extension of the business card format is to make your website brief, and directed at getting people to call you if they’re interested in you. It could just be a listing of the jobs you’ve had, or it could be an archive of the articles you’ve written for various publications whatever, it’s there to get you work. These kinds of websites can be effective, although you should realise that you’re more likely to get some work because of a site that people find useful than because of one that’s just about you.

The Brochure Website.

They’re often-mocked in web design, but they’re not really that bad: brochure-style websites simply reproduce the kind of material you would send out in a brochure to an interested customer, complete with pictures and technical details. Instead of actually doing any business online, you give the customer your contact information.

In many industries, really, this is the only way to work. There are things you just can’t do with shopping carts and credit card processing, after all, especially when it comes to services. These kinds of websites are especially prevalent among businesses with a more local focus.

The E-Commerce Website.

There are two situations where e-commerce works really well: if you’re selling a service that can be provided over the web, or if you’re selling a small product that you can handle shipping for. In these situations, e-commerce websites are very powerful. You can sell your product direct online, cutting out whatever middlemen there might be.

The Content Website.

Ever more popular, content websites work by providing useful writing and then putting ads around it. That’s the whole business model in a nutshell, but it works surprisingly well. The more writing you can do (or get), the better it works for you. If you want, you can even leave off the ads and put up a small button asking people to donate to your site if they found your information helpful people can be nicer than you’d expect.

The Community Website.

Finally, an often-ignored kind of website is one that exists to serve a community. The community might be geographical (people who live in the same town), or it could an interest or hobby community (a forum for people who really like a certain genre of TV show, for example). Community websites can be fun to participate in, and they can make a lot of money if you can find advertisers who are interested in the very specific audience your site has got. If your site gets popular, you might even be able to charge people for membership! Even if it stays free and small, though, it’s nice to have a web community to call your own, and you’re likely to benefit in all sorts of ways that you wouldn’t expect

Technorati Tags: web design, html, websites

How Did Weblogs Start?

Many people say that there have been weblogs (or blogs, as they’re sometimes called) for as long as there has been a web. Back when there were only a few thousand websites, the ‘What’s New’ page that announced each new one (yes, there really was such a thing!) worked in just the same way as blogs do today.

Early weblogs included Scripting News, Robot Wisdom and Camworld, which all started in 1997. To begin with, blogs mostly consisted of often-updated lists of useful and amusing links to other websites, but it gradually became clear that the format was just as good for distributing longer articles. Blog software started to be developed, and their popularity quickly exploded. By 1999, everyone was talking about blogs.

Why are Blogs So Popular?

In recent years, the blog format has very much taken over from the ‘personal home page’. People seem to find it much easier to just put a kind of public diary online, instead of putting up a little biography of themselves and a collection of articles. It’s more personal, more fun, and more interactive day-to-day.

Businesses have started to open blogs too in many ways, they’re like a replacement for newsletters. A regularly-updated blog gives customers a great sense of what a business is like, while giving the business a great way to keep communicating with its customers and being useful to them, even when they’re not buying anything right this minute.

In my opinion, the biggest reason for blogs’ popularity is that they make publishing to the web very easy. You don’t really have to know anything about what’s happening behind the scenes: blogs finally make publishing your thoughts for everyone to see as easy as posting to a forum or sending an email. In a way, blogs fulfil the original promise of the web.

Weblog Software.

Today, there’s a lot of blog software out there if you want a blog, you’re spoiled for choice. What you get will depend on how comfortable you are with technical stuff, and whether you want it to be part of your main website or not.

Movable Type. This is software that you install on your web server. You simply log in and type your post, and it creates your pages for you. Movable Type can be a little complex to set up, but you can use a version called Typepad that is hosted by its creators instead of using your server.

Blogger. You don’t install Blogger on your server instead, you give it your FTP password and let it upload files to your web server for you. If you don’t have any hosting, you can also host blogs for free at Blogger’s Blogspot. Blogger is owned by Google.

WordPress. WordPress is a free alternative to blogging software. It works in basically the same way as Movable Type, but without the restrictive licensing and with nicer-looking default templates. Many people have switched to WordPress out of frustration with Movable Type and not looked back. You have to host it on your own server, but it’s very simple to set up don’t be scared!

LiveJournal. LiveJournal is a completely online service, meaning that it has nothing to do with your website, except that you can link to your LiveJournal if you want. LiveJournal is more social than most blogging, allowing you to join communities relating to your interest.

There are plenty of other online services, but they’re all pretty much the same: MSN Spaces, AOL Journals, and so on. You’re unlikely to get taken very seriously if you have a blog at any of these places, although it’d be easy. In the end, it’s all about power versus convenience: the more work you put in to get your blog working, the more likely that it’s going to be what you really wanted it to be. If you’re creating a website anyway, you’d be silly not to put a blog on it.

Technorati Tags: graphics, internet, web design, website design

Is It Really Easier?

Well, it’s largely a matter of personal preference, and what you’re used to. If you’re an experienced programmer, you’ll probably think that VBScript is a joke, and prefer Javascript. If you’re not, though, VBScript’s English-like code can make things clearer and quicker when you’re writing scripts. For example, compare this code for an if/then/else condition.

Javascript:

if (a == 1) {
alert(”a”);
} else if (b == 1) {
alert(”b”);
} else {
alert(”z”);
}

VBScript:

if a=1 then
msgbox “a”
elseif b=1 then
msgbox “b”
else
msgbox “c”
end if

See what I mean? This is a pretty representative sample of the differences (a ‘for’ block would provide a more extreme example). To put it simply, Javascript looks ‘code-like’, with all kinds of brackets and semicolons all over the place and it’s all-too-easy to forget one. VBScript, on the other hand, is designed to be more human, and closer to natural language. While its approach is less flexible for complicated operations, it’s much quicker for simpler ones.

Useful VBScript Functions.

Here are a few of the functions VBScript has that you’ll be wishing you could use in Javascript.

DateDiff. Works out the difference between two dates this is a nightmare in most programming languages.

FormatCurrency. Takes a number and formats it as whatever currency you want.

InStr. Looks for some text in a string, and stops when it finds it. Useful for including text up to a special ’stop’ phrase.

Split. Divides some text up into an array depending on where a certain character is (similar to PHP’s explode command, and just as useful).

Replace. Lets you look through some text and replace every instance of a certain character or phrase.

Apart from this, VBScript offers quite a few of Javascript’s functions. Even though that’s useful, it can sometimes make you feel like you’re just writing Javascript in an odd way the same way that doing anything complex with desktop Visual Basic gradually seems to turn into writing a kind of C with a slightly different layout. If you keep things simple, though, VBScript is good at what it does.

So What’s the Catch?

Well, the catch is a big one. Pages written using VBScript won’t work in any web browser other than Internet Explorer it’s Microsoft’s own language, and no-one else supports it. For better or for worst, the web has long since standardised on Javascript. This unfortunate fact means that, for use on the web, you’re pretty much stuck with Javascript, unless you want to alienate many of your visitors, or your scripting isn’t essential for your site to work. This is the number one reason why you hardly ever see any VBScript anywhere on the web.

If you’re writing web pages to go on a corporate intranet or some other environment where you have control over how users access the site, however, VBScript can make your life considerably easier. You might also consider using it if you’ve written Javascript that works in every browser except Internet Explorer, as just using VBScript for one or two things can save you playing around with lengthy workarounds.

An Alternative Way of Doing Things.

If Javascript intimidates you and you’d really like to use VBScript, but you want your site to work on as many web browsers as possible, there is a solution! VBScript and Javascript that there are converters freely available to translate between them a good one is at http://slingfive.com/pages/code/scriptConverter/, but there are plenty more. You can simply write your scripts in VBScript and then run them through the translator to turn them into cross-browser Javascript, without having to write a word of Javascript!

Even better, once you’ve got the two versions of the script side by side, you can compare them, and start to learn how things are done in Javascript. Before long, you’ll be writing it with no trouble.

Technorati Tags: internet design, web design, html coding

All About Quizzes.

Kids just can’t get enough quizzes: the reasons why are a mystery, but it’s true. They think it’s great fun to answer questions about yourself only to be told something like “you’re 60% goth that’s more goth than 83% of the people who’ve taken this quiz so far!” What’s more, not only do they love taking quizzes, but they love making them for each other as well. It’s got to the point where any site offering them the facility to create their own quizzes becomes an overnight hit.

So why the popularity? A big factor in the whole thing is that it’s self-perpetuating: every quiz they complete will give them some HTML for linking to it from their blog, as well as a button to email their results to their friends. Add to this the fact that kids who’ve created a quiz of their own will obviously want to send it to everyone to know, and you’re generating a lot of traffic.

Imagine one kid making a quiz, and sending it to their friends. Out of these friends, maybe five would send their results to their friends, and maybe two would make a quiz of their own. Four of the five invited friends take the quiz, and maybe one goes on to make one. The two who made one of their own send it to all their friends. On and on it goes, like a chain letter (or its modern cousin, the chain email) it’s unstoppable.

Offering Games.

Taking it to the next level, you can offer games to your visitors. Games have the advantage that they appeal to young visitors, but they also appeal to some older ones as well you don’t limit yourself to being a kids’ website quite as much as you do with quizzes. The downside of games, of course, is that you have to produce them, or pay someone to produce them it’s not that expensive, but you need to have good ideas if you want your games to get popular.

What’s the best format to offer games in? The answer, without a doubt, is Flash. It’s installed on the overwhelming majority of computers, and lets you create appealing cartoonish graphics without your game running too slowly. Java, for comparison, is intended for more technical users not only do Java games tend to look dull, but they also make the user’s computer slow to a crawl, not to mention being more likely to just plain not work. If a user doesn’t have Flash, then they can install it as easily as clicking ‘Yes’. Installing Java and other systems tends to be significantly more involved.

The next thing you’ll be wondering, of course, is what kind of games are popular. The answer is just about anything, as long as it’s original. If you’re trying to build a big game, you should make it extensible in the style of Runescape (www.runescape.com) or Habbo Hotel (www.habbohotel.com) it should be something you could literally play all day without getting bored.

For short games, good versions of classics are always popular if you want a steady trickle of traffic long-term, but if you want a short-term burst of traffic then you might want to look at something topical: humorous games about current events are surprisingly appealing across age ranges, but have a limited shelf life. If you want more significant long-term traffic, then an excellent area to look at is innovative puzzle games: if you can come up with something simple but addictive in the style of PopCap Games (www.popcap.com), you’ll have people coming back for a long time to come.

Technorati Tags: graphics, internet, web design, website design

Games.

Flash’s number one use is games, where it’s simply the best solution for the web. The alternative, really, is the slow-loading, ugly Java disaster, and there’s just no contest. Flash lets you easily provide interactive games that go far beyond anything that could ever be done in HTML or DHTML, with Flash’s slick animation capabilities producing a well-recognised graphical format that many feel to be ideal for small games, especially puzzles and ‘classic’ games.

Make no mistake: all the most popular games on the web are offered in a Flash version, perhaps with a downloadable version for purchase alongside. People don’t want to go to the trouble of downloading and running programs just to play games, especially considering that what they’re downloading could be a virus Flash is the ideal solution here.

Cartoons.

Another format that Flash is very good for is entirely non-interactive cartoons take a look at homestarrunner.com for a famous example. Flash’s bold lines and easy animation tools give Flash cartoons a distinct style, and make it easy to create long-running cartoon series.

Once you get used to the ‘Flash look’, you might even notice that some of the cartoons on TV nowadays have it too. That’s because plenty of ‘real’ cartoons are now produced with Flash, since it makes it so easy to animate things on a computer without having to send off hand-drawn scenes to be animated.

Statistical Presentation.

By this point, you might be thinking that the only good uses of Flash seem to be for kids. Well, you’d be wrong. Flash is also a very good tool for presenting statistics in a creative way: the way that it lets you produce graphics easily from numbers and scripts makes it an ideal tool for this. There are plenty of websites out there with dull Excel-produced charts and graphs that would really benefit from a Flash makeover.

When you do this, though, do be careful of using excessive animation. Sure, it’s fine for the bars of a chart to grow until they reach where they should be, but don’t do it too slowly, or you’ll lose the audience in the process. Likewise, never move things around without input from the user the reaction that tends to provoke is “hey, I was looking at that!” If you keep your Flash sober, restrained and relatively static, though, it can be a real winner for this kind of application.

Used properly, then, Flash can be just as effective for real-time stock market data as it is for games and animations which makes it a very unusual kind of program. This is part of the power of Flash, and the reason it survives on the web today, despite its more annoying uses.

A Word of Warning.

However, before you do use Flash for any of the things listed above, it’s worth noting that your visitors still won’t like coming across it unexpectedly, no matter how nice a use you put it to. For this reason, you should always label links that go to a page with Flash with the word ‘Flash’ in brackets, like this:

Watch our latest cartoon [Flash]
See our performance projections [Flash]

If you don’t do this, you’ll get just as many back-button clickers as you would with any other Flash when users don’t know what’s coming and something unexpected happens, their instinct is to panic and get out of there as soon as they can. If you make sure that your site is predictable and always keeps them informed of where they’re going next, then you’ll make them much happier.

Technorati Tags: graphics, internet, web design, website design

What’s FTP?

FTP stands for File Transfer Protocol. It’s a standard for transferring files quickly and easily between computers, intended to allow computers with different operating systems to exchange files without users needing to worry about the different file systems they use. Compared to HTTP, transfers over FTP are very reliable, meaning that your upload will not just fail without telling you, and you can pause and resume any upload you start.

To connect to an FTP server, you need three things: the FTP server’s address, a username, and a password. Your web host should have provided these to you when you opened your account, or you may also be able to create one yourself using your website’s cPanel. Check your host’s help for more information.

Before you can use FTP, you need an FTP program. Luckily, you have quite a few choices.

Internet Explorer.

What, Internet Explorer? Yes, IE actually has an FTP program built in. Just go to your host’s FTP server using a URL with ftp:// instead of http://, like this: ftp://ftp.example.com. You will be asked to enter your username and password, and then you’ll be presented with a view of the files and folders on the FTP server, just like if they were on your own computer! To upload files, all you need to do is drag them from wherever they are now into this window.

So what’s the problem? Why not just use IE for all your FTP uploading needs? Well, unfortunately, the answer is that it isn’t very reliable as an FTP program: it works, but it’s very slow, and won’t automatically try things again if it runs into errors. It also lacks a good way of telling you how far along your uploads are or giving you much control over them fine for uploading one or two files, but not so great when it comes to uploading a whole website.

CuteFTP.

CuteFTP (www.cuteftp.com), by GlobalScape, was one of the first useful graphical FTP programs for Windows, and is still popular. It supports resuming, scheduling transfers in advance and multiple transfers at once, and also has the useful feature of allowing you to quickly edit files on the server using a built-in text editor. It costs $40, or you can get a Pro version with more features for $60.

WS FTP.

WS FTP (www.wsftp.com) is another old, established FTP program, but recently became a lot easier to use than it used to be. Some useful features include its various wizards and tutorials for doing common things, editing files on the server using any software you like (a rare feature) and sorting options that let you find files quickly. It also has special features to help you out with blogging and digital photography. Cost: $60.

BulletproofFTP.

BulletproofFTP (www.bpftp.com) is an FTP client that does a lot of things automatically it’s clever when it comes to handling common situations in a good way, where other FTP programs can often do things you wouldn’t want or constantly ask you to confirm things. However, the interface is looking a little dated now, and it costs $30.

SmartFTP.

SmartFTP (www.smartftp.com) is my personal favourite FTP program. Why? Well, it has a modern, easy-to-use interface. It’s updated often, and has almost all the features of the programs above, as well as very good support for queuing, proxies, backups, and some obscure things like chmod that you might need to do from time to time. Best of all, although it costs $37 for business use, it’s free for non-commercial or personal users.

FileZilla.

Finally, if you want a completely free and open-source FTP program, FileZilla (filezilla.sourceforge.net) is worth a look. While the interface is simple and a little technical, it does most things you would want it to do, and is surprisingly fast and stable. If you want an easy to use program that doesn’t hide anything for you, then you could do worse than FileZilla and hey, if you want it free, you don’t have that many choi

Technorati Tags: internet design, web design, html coding

Apache. The most popular web server. It is open source and free for anyone to use.

Blog. A short for ‘weblog’. A web page that is updated like a diary, with the most recent writing first. Usually done using blogging software instead of being maintained by hand.

Browser. A web browser is the software that you use to view pages on the web. Internet Explorer is the most common browser.

Cache. A web browser’s cache is where it keeps files that it has downloaded from the web and might need to use again. A site’s logo and navigation graphics may be stored in the cache, for example, so that they don’t have to be downloaded again each time you go from one page of the site to another. This happens automatically.

Cookies. Small files that websites can store on your computer to let them ‘remember’ you. When you log into a website and you’re still logged in when you go back there later on, that’s because the site gave your browser a cookie.

Favorites. Also known as Bookmarks, this is a place in your browser where you can save links to pages that you’d like to visit again.

Flash. A browser plug-in developed by Macromedia that displays animations and animated websites.

FTP. File Transfer Protocol. The usual method of uploading files from your computer to a web server.

HTML. Hypertext Markup Language. The language that web pages are written in.

HTTP. Hypertext Transfer Protocol. Theoretically, the way that HTML pages are sent between a server and a browser, although in practice HTTP is used for sending all sorts of data, including graphics and file downloads. Many files should really be provided using FTP, but HTTP is considered to be easier and faster.

IIS. Internet Information Server. Microsoft’s competitor to Apache, comes with versions of Windows that can be used as web servers. Often considered to be somewhat insecure and prone to crashing, although recent versions have improved.

ISP. Internet Service Provider. The company or institution that provides your computer with access to the Internet, usually in exchange for a monthly fee.

Link. A link is some text on one web page that will take you to another page if you click on it.

MySQL. MySQL is a free, open source database. It is often used for smaller web applications and websites.

Open source. Open source software is software which makes its source code freely available. This is intended to give you more freedom to modify the software however you want (or pay someone to modify it for you), instead of tying you to a company and relying on them for updates. In practice, this means that the software is available for download at no cost. Visit www.opensource.org for more information.

PDF. Portable Document Format. A document format that aims to reproduce text exactly the way it would appear on a page. Viewable in web browsers using a plug-in, but disliked by many users because it can be very slow.

PHP. Stands for ‘PHP: Hypertext Processor’. A very easy to learn and easy to use scripting language that is one of the most common on the web, helped along by the fact that it is also free. It is most often used in quite simple ways, such as retrieving text from a database and adding it to a page.

URL. Uniform Resource Locator. A technical term for a whole web address, such as http://www.example.com/page.html. It is called uniform because you can use similar addresses to refer to entirely different kinds of resources: for example, file://c:/windows refers to your Windows folder, and ftp://ftp.example.com/public_html refers to a folder on an FTP server.

W3C. The World Wide Web Consortium (three Ws and a C, so W3C). This is the standards body that is considered to be ‘in charge’ of the web, and decides what gets put in and taken out of the various versions of HTML, amongst other things.

Technorati Tags: internet design, web design, html coding

Server Log Analysis.

Most web servers keep a log of every file they send, with information about the request they received. These request headers contain all the information a user’s web browser sends to the server when it asks for pages, images or other files. The information includes the user’s IP address, their web browser’s name and version, and the kind of files their browser can handle.

Out of this information, the IP address is probably the most useful. Each block of IP addresses is allocated to a certain ISP in a certain country, meaning that you can use them to tell roughly where people are from. There are plenty of free databases out there that map IP address to physical location, letting you break down your visitors by country or even, in many cases, by state.

The other thing IP addresses do for you is let you identify how many unique visitors you have that is, how many actual people saw your site as opposed to how many pages were loaded overall. This lets you figure out things like the average number of pages each visitor sees, or the number of times the same visitor comes back.

You can get software that will take this information from your server logs and turn it into easy to view tables and graphs in fact, most web hosts will have already installed some software like this, if you look under the ’statistics’ section in your hosting control panel.

Cookies.

IP addresses can be influenced by all sorts of things, notably ISP proxies making a whole ISP full of visitors look like just one. As well as crude IP address tracking to find unique visitors, then, you might also consider using a cookie. All you do is leave a cookie on each users’ computer with a randomly-generated ID number, and then check each visitor for cookies to see if they’ve been to your site before.

If you log how many ID numbers you give out and how times each ID number appears in return visitors’ cookies, you can get a better idea of just how many visitors there were overall, and how many times each one came back. You should consider, however, that many users have cookies turned off in their browser, or ask their browser to prompt them to accept or decline each cookie individually, so while they’re generally more reliable than IPs alone you can’t depend on them completely. A mixture of the two methods is best.

Registration.

If you want to know more detailed information about your visitors, you can ask them to register and log in to use your website. This gives you an opportunity to collect their email address, their exact location, and pretty much anything else you dare to ask.

You have to understand, though, that many people will be unwilling to associate detailed demographic information with their identity. Also, it’s difficult to get registration right: ask for it too early and people will just leave without seeing what you’ve got to offer, ask too late and they’ve already got what they came for.

Surveys.

As an alternative to registration, you might try including random surveys. This is the technique favoured by most big companies: simply pop-up some kind of message saying ‘would you be willing to participate in a survey to help us improve our website?’, and then pop up the survey questions if the visitor says yes.

The advantage of this is that surveys can clearly state that they’re completely anonymous: you don’t know the person’s name, where they live, or anything else like that. This gives you the opportunity to ask more personal questions that you would otherwise be able to, establishing a solid demographic and preference profile for different parts of your audience.

Technorati Tags: graphics, internet, web design, website design

Title Bar, History, Favorites and Searches.

Everything you do with your web titles should be geared towards these four places that the title can appear: that is, in a web browser’s title bar, history pane, and favorites menu, and in search engine results. Never forget this. Sure, your titles might look just fine on your main page, next to a picture, but do they work out of context? It’s even worth looking at the titles in each of these places yourself (or doing a mockup of it), just to see.

Be Concise, but Explain Everything.

The thing those four places where titles can appear have in common is this: they’re separated from the context of the rest of your page, and they’re limited in space. Each one will cut off over-long titles and replace it with an ellipsis (’…’) not good if some important detail goes missing in the process.

What you need, then, is to be concise with your titles: ten words is, effectively, an absolute maximum. However, what you can’t do is cut out words that tell the reader what to expect from the article, moving them into a sub-heading or a picture caption or something similar this works in print, but on the web the reader won’t always be able to see those things. The challenge, then, is to create a short headline that tells you what the article is about even if you can’t see any other part of the page.

Useful Words First.

In browser favorites and history, there’s usually only room for about three or four words, not for a whole title. That means that you’d do well to put the most useful words of the title first. Compare the following headlines:

Why Web Titles and Headlines are nothing like Newspaper Ones.
Titles and Headlines: It’s Not a Newspaper.

What’s the difference? Well, if you’re looking at it in a browser history view, the first one would probably read ‘Why Web Titles…’, while the second would read as ‘Titles and Headlines…’. In effect, it’s useful to have the first three or four words of your title stand alone as a title themselves, while elaborating in the title’s second half. A colon or dash is especially useful for this, which is why they’re so much more popular in web headlines than they are in print.

Keywords.

When it comes to preparing titles for search engines, don’t underestimate the importance of the keywords in your title. Search engines consider the title to be one of the most important parts of your page, not to mention that it’s often the only part of your content that someone doing a search will see entirely intact before they click-through. You want your titles to be relevant to what your users are likely to be searching for.

What does that mean in practice? It doesn’t mean that you should make your site’s main keywords show up in every title, leading to string of titles all sharing the same two words: this is the hallmark of a site that is trying to do nothing more than game search engine rankings, and the search engines are wiser to it than you’d think. What you should do instead is simply describe clearly what the article is about as if you were searching for that specific article.

If you’ve written a way of doing something, don’t be afraid to put ‘how to’ in the title (although not first: ‘How to Write Better Titles’ is bad, ‘Titles: How to Write them Better’ is good). If you’ve interviewed someone, put the word ‘interview’ up there. For product comparisons, don’t shy away from the word ‘comparison’. This approach will get you search engine visitors who really want to read your articles, and are more likely to stay and read more instead of feeling conned into visiting your site.

Technorati Tags: graphics, internet, web design, website design

For websites, though, things just aren’t done this way. Many websites are always under development, and have typically only been tested by the person who designed them, and perhaps a random friend or two. Not only are bugs and problems not fixed, but most of them are never even found. What I’m telling you, though, is that websites aren’t immune from user testing: in fact, they can give you the advantage you need out there.

Finding Problems.

Let’s say there was a problem with your site that was stopping many people from looking at one section of it. You get by fine, because you designed it, but to everyone else it’s just not obvious at all. How would you know about this problem? You might just assume that the section is less popular than the rest maybe you’d even remove it or rework it, not realising that the problem lay in a simple layout mistake you’d made.

When you test, you’re testing for two things: firstly, outright bugs (things that are broken), and secondly, usability issues. The first are easy to catch on your own, but the second are considerably more difficult. Having designed your website, you’re unlikely to be able to see it the way a first-time visitor would: just because you know that clicking an article author’s name sends them an email doesn’t mean that anyone else is expecting it.

User Testing on a Budget.

The chances are that you’re not a big company that can afford to pay lots of people to test your site for hours on end. What you have to rely on, then, is pretty much your family and friends. If you do it right, though, they can be the best testers of all.

First of all, you have to sit with them while they use the site, but make it clear that you can’t say anything at all sitting next to them explaining how things work obviously defeats the point, as your other visitors won’t have you there, will they? You’ve got to make sure that their interaction is entirely limited to using the site as a normal visitor would.

The best thing to do is write them a list of common tasks that you’d expect users of your site to want to do for example, if you’re running a webmail site, you could ask people to log in, send an email and copy it to your address. You should observe how they interact with the site, and especially note anything they have trouble with or do wrongly.

Reacting to User Tests.

Once you’ve watched someone try to accomplish things on your site, there’s one key question you should ask them: “how would you expect to have done that thing?” Make a note of people’s responses if even two or three people say the same thing, you really ought to do it that way. Consistency is one of the most important aspects of web design: if you want your site to be easy to use, then you have to stick to what visitors expect, not try to show them how it can be done better.

Split Testing.

A powerful way of testing whether changes to your site improve it or make it worse is to do split testing. Split testing is when you create two subtly different versions of your site and test each one with an equal number of people. You then gauge their reactions to see which design worked better. It can be surprising just how effective this technique is: the most subtle of changes can make a big difference.

Feedback Forms.

Finally, you have to remember that your site’s testing doesn’t end when it goes live. Every visitor to your site is, effectively, testing it for you. Make sure you offer them every opportunity to leave feedback, letting you know if they ran into any issues or found anything hard to find or use.

Technorati Tags: web design, html, websites

Mozilla.

While Mozilla is a web browser itself, it is also an engine (Gecko) that powers a lot of other web browsers. The Gecko code is free and open-source, created by Netscape, and is currently Internet Explorer’s biggest competitor. It works on Windows, Mac, Linux, and almost everything else out there.

The advantage of Gecko is that if you’ve tested with one of the Mozilla browsers, your site should work on all of them. The Mozilla browsers include Mozilla Firefox, Netscape, Camino, Kmeleon, and lots of browsers for the Linux operating system. You’ll probably find it easiest to download Mozilla Firefox from getfirefox.com and test your website using that.

Opera.

Opera is, in many ways, the alternative alternative browser, for people who are too odd to even want to use a Mozilla browser. It’s very much a niche product, developed by a small Norwegian company, and many more technical users like it because of its constant innovation when it comes to features anything you like in another web browser was probably available in Opera first. Opera is for Windows, Mac and Linux.

You can download a free version of Opera from opera.com. It has ads, but it’s perfectly fine for testing. If you like Opera enough to actually use it for your own web browsing, you can pay a one-time fee of around $40 to remove the ads.

Safari.

Safari is now the official Mac web browser, which means that it’s important to test on it if you want Macintosh users to be able to see your website. Unfortunately, Safari doesn’t run at all on Windows.

However, Safari uses the same engine as a browser called Konqueror, which can run on PCs on the Linux operating system. Linux is free, and you can easily download it, burn it to CD, and run it straight from the CD. Knoppix (www.knoppix.com) is a popular and easy to use kind of Linux for this purpose.

Alternatively, if you don’t want to mess around with a whole other operating system, you could try a service like BrowserCam (www.browsercam.com). They will load your website into many different browsers, and then send you pictures of it to let you see if there are any problems that need to be fixed. Because of the bandwidth and the number of computers that have to be involved, though, most of these services aren’t free.

Lynx.

Lynx works on a lot of very esoteric operating systems, but works fine on Windows too. It’s a text-only browser, and it pays no attention to layout or graphics. You can download Lynx at lynx.browser.org.

Why would anyone want that, you wonder? Well, Lynx is mostly popular among blind people who use screen-readers to turn web pages into speech. How well your web page works in Lynx is often considered is often considered to be a test of how accessible it is to anyone with disabilities, as well as to anyone who turns off things like Javascript in their browser settings.

The very worst sites will come back with a message telling users to download a supported browser when they’re visited in Lynx never do this. You should be aiming to make sure that Lynx users can see a basic, text-only version of your site, with easy-to-use navigation. If your site doesn’t support this, then it’s probably breaking all sorts of disability discrimination laws, and you should fix it as soon as you can.

For more information, you might like to visit the Viewable with Any Browser Campaign at www.anybrowser.org/campaign.

Technorati Tags: web design, html, websites

Paper Doesn’t Scroll.

If you design a site as if it had to fit entirely onto one sheet of A4, you’re doing your visitors a disservice. Text on the web has a potential infinite amount of space. Why make me press a button to go to your next page? Are you stupid? Are you just trying to increase your pageviews and ad views, or what? Stick to the rule of one page for one article, and you’ll do much better.

Paper Has No Bandwidth Issues.

You can cover a sheet of paper in all the pretty pictures and backgrounds you like, and it still doesn’t take any longer to pick it up and read it. That’s just not true on the web. I’m sure you abandoned dial-up years ago, no doubt, but there are still plenty of people out there using the web at those kinds of speeds. It’s downright rude to make them sit and wait while your design loads, when all they wanted to do was read some text.

Columns Work on Paper.

One of the biggest issues with print designers find it difficult to get over is the web’s lack of columns. You really, really can’t do columns on the web. You just can’t. It doesn’t work. You have to spend hours writing a set of custom scripts, only to break functions like text selection and browser resizing that your visitors would rather have seen work properly not to mention that reading left-to-right on a computer screen is unexpected and altogether quite unpleasant. Get over yourself, and leave your columns on the paper, where they belong.

Paper Isn’t Linked.

One of the easiest ways to spot a site designed by a print guy is by looking for the links. If there aren’t any, the chances are the designer used to do paper layouts. Even more so if they’ve added notes like ‘go to our downloads page to see…’ you can link to it, you know! Don’t be afraid to link far more than you’d think is sensible. Linking is what the web is all about.

Paper Will Only Be Seen One Way.

Web pages, on the other hand, will be seen in a variety of web browsers, at all sorts of sizes, in lots of different fonts… the list goes on. It’s daft to think that you can control the way your website looks to every visitor: what you’re doing is offering a set of guidelines, for their software to interpret however it wants. If they choose to make all their fonts massive because they have trouble seeing, who are you to set your page to override that? Yet many designers do.

Never forget that your role isn’t to make sure that everyone sees the design exactly as you intended what you’re trying to do, really, is let as many people as possible see the site, and make it look as close to the intended design as possible, if it doesn’t interfere with their wishes. That’s the difference between a user-hostile website and a user-friendly one. If you’re not a print designer, you’re probably nodding your head and if you are then, well, I suggest you take some time to think it over.
The End of Paper?

Paper and the web aren’t adversaries by any means: the web is highly unlikely to destroy paper layouts as we know them, no matter how many ‘technologists’ might predict it. The important thing, though, is that paper and the web are different, and you need to realise that their differences are something to be celebrated, not worked around. The best layout for the same content will be very different on the web to the way it is on paper but, in the end, why is that bad?

Technorati Tags: graphics, internet, web design, website design

Colour Programs.

One of the thorniest issues you’ll run into as a web designer is colour. Because web colours are all expressed in the somewhat mysterious HTML colour (#000000 to #FFFFFF), it can be hard to get the exact colours you want in your design. Don’t be fooled into thinking there aren’t many to choose from: those colours are in hexadecimal, meaning that each one of those six numbers can have a value anywhere from 0-F (that is, 0-9, A-F). 16 possible values to the power of 6 makes over 16 million possible colours that’s 24-bit colour, not bad at all.

So, really, instead of trying out millions of colours by hand to see which you like best, it’s much better to download an HTML colour picker tool an essential part of every web designers toolbox. It might sound like they’d be very simple, but there are all sorts of features they can have: suggesting ‘complementary colours’ to the one you’ve chosen, for example. Some let you take a picture of your screen and click on parts of it to see which HTML colour is being used useful when you see a colour somewhere that you think would work great on your website.

My personal favourite colour program is Color Schemer, available at www.colorschemer.com it has all the features you could really want in an HTML colour picker. If you’re after something free, though, you might like to try the more compact Pixie, from www.nattyware.com/pixie.html, which sits in the corner of your screen and tells you the colour code of any colour you hover over.

HTML Checkers.

There’s not much competition when it comes to HTML checking: what you really need is the W3C’s HTML Tidy, or one of the many programs based on it (see http://tidy.sourceforge.net/). Tidy can clean up truly disastrous HTML, including the kind of thing produced by many of the more popular editor programs like Dreamweaver, and applications like Microsoft Word. Even if you think your code is great, the chances are that Tidy will be able to make it smaller and better.

Mozilla Firefox Extensions.

When you use Firefox as your web browser, you gain access to lots of extensions that you can install quickly and easily. Since so many people using the browser are web designers, there are more extensions available for web development tasks than there are for anything else. This makes Firefox an ideal browser to use when you’re writing a website.

Which extensions are most useful? Here’s a quick list:

Web Developer’s Toolbar (http://chrispederick.com/work/firefox/webdeveloper/). This is the most useful Firefox extension out there for web designers. Its best feature is that it lets you experiment with CSS styles ‘live’, so the style of your page changes as you do it a great way to write CSS.

LinkChecker (http://www.kevinfreitas.net/extensions/linkchecker/). You absolutely must check your website for broken links, but it’s usually quite a chore. Because LinkChecker integrates with the browser, it can check your links for you on-the-fly. It highlights working links in green and broken ones in red. Simple, but very effective.

HTML Validator (http://users.skynet.be/mgueury/mozilla/). Lets you check whether your pages are valid HTML without having to type all their URLs into an online validity checker. Takes a lot of the pain out of code validation, which makes you more likely to actually bother to do it!

SearchStatus (http://quirk.co.za/searchstatus/). When you’re trying to monitor your site’s position in search engines, this extension is indispensible. It shows you the Google PageRank and Alexa ranking for your site, giving you an idea of both the link popularity and traffic the site gets. It also lets you check who links to your site, and whether the search engines have added it to their index yet.

Technorati Tags: web design, graphics design

1. Too Many Ads. When you’re trying to make money from your website, it’s all too easy to try to fit in more ads than you really should, or start using ad formats that are too intrusive. If you’ve put a new ad on your site, go to the site as if you were a visitor, and ask yourself honestly: is this just too much?

2. Plugin Overload. You’ve got to keep media that uses plugins to a strict maximum of one per page: that means that if you’ve got Flash, then you can’t have a media player, or if you’re using Java then you can’t have Flash. It’s not as bad to use the same plugin twice, however.

3. Flash Intros. Please, don’t use a Flash intro on your website. You’d think everyone would realise they’re a bad idea by now, but every web designer still gets clients who just don’t seem to realise that Flash intros are universally mocked and hated. Don’t be one of those people.

4. Unclear Layout and Navigation. Many websites, especially business sites, seem to suffer from some kind of disease where even the very simplest task takes ten steps to achieve. If people are emailing you to ask you how to do things on your site, then you need to improve your layout and navigation. Remember: if there are certain tasks people seem to want to do more often, put them on the front page.

5. No Marking for External Links. There are two kinds of links: internal (to other parts of your website) and external (to other websites). For the benefit of your visitors, though, it’s best if you mark external links, either by making them a different colour or using some kind of a symbol (a box with an arrow is the usual one). It’s also good to make the external links open in new windows, so people aren’t leaving your site altogether when they click them.

6. Unclear Linking. You might think it looks better to only show links when people put their mouse over them, or not make their colour stand out too much from the rest of the text, but it’s not while it might make the design look nicer, it makes it far less usable. Use a clearly contrasting colour for links, and preferably underline them.

7. Unlabelled Email Links. It’s a very bad idea to ever use a link that will send email (a mailto link) without clearly marking it with the word ‘email’. If you just make clicking people’s names send email, you’ll annoy visitors who just clicked wanting to find out more about the person.

8. Broken Links. You’ve got to check all your links regularly to make sure that they all still work. There’s nothing worse than finding a site that looks useful, only to find that it hasn’t been updated in years and none of the links work any more. Yes, a website does mostly run itself after a while, but that doesn’t mean that you should neglect the essential maintenance it needs from time to time.

9. Strange Fonts. Stick to the most common web fonts: that’s pretty much just Arial, Georgia, Tahoma and Verdana. If you’re using more obscure fonts, then most visitors probably won’t have them and the ones that do will find your text hard to read. The only time you should use non-standard fonts is in your logo or in headings, if they are displayed as an image.

10. Badly-sized Text. It’s important to keep your text around the standard size (preferably just below). Making text too big or too small makes it hard to read and annoying for many visitors. The best thing you can do is use relative text sizing (not pixels) that allows the browser to respect the user’s preferred text size. You might also consider offering buttons on your site to decrease or increase the size.

Technorati Tags: internet design, web design, html coding

It Takes Too Long to Download.

The first reason to cut down on graphics is that the more there are, and the larger they are, the longer it will take each of your pages to download. Now that many people have broadband connections, they’re much more impatient than they used to be when it comes to waiting for pages to download: in most cases, you have around five seconds before your visitors start hitting the Back button.

What can you do about this, apart from using fewer pictures? Well, you can also make sure that you resize your images in a graphics editor so that their file sizes get smaller. If you just resize images by specifying a width and height in HTML or CSS, then they still take just as long to download as they would have, without the extra time serving any useful purpose.

Also, you might want to consider turning on compression in your image editor: JPEG files especially can often be compressed by 20-30% before there’s any noticeable difference to the human eye. Try out different formats and compression levels to see what works.

It Gets Too Busy.

If you’ve ever tried to use a site that has more than three or four different images on the page at once, you’ll know what I mean by that. Your eye is forced to dart all over the page, not sure where to focus: the page simply has too much going on at once. Instead of making your site busy by loading it up with graphics, you should try your best to keep it as simple as you can.

One thing I would suggest is that you take a look at the front pages of a few newspapers, and notice how they only ever lead on one picture. Putting two pictures on a front page is considered to be very bad: the reader doesn’t know where to look. That goes double for websites, where the viewable area is much smaller than a newspaper page. Even if you have more than one thing to say, it’s better to ‘go large’ with one picture and then explain the other things in text, next to it or below it.

It Distracts from the Content.

Don’t forget that most of the people on your site are there to get information, not to look at your graphics. Too many graphics will distract visitors from your content, or, worse, even hide it from them, forcing them to look around before they find it. Any time your graphics get in the way of people using your site, you’re suffering from graphical overload.

What’s the solution to this one? You simply need to think about whether all those graphics are really needed the chances are, they’re not. Don’t just add graphics because you think they look nice. Every graphic on your site should have a purpose.

An Exception: Photo Galleries.

If photography is the purpose of your site, then you obviously shouldn’t be afraid to put a lot of graphics on one page. However, you really shouldn’t just post large photographs one after the other. Instead, you need to provide thumbnails: smaller versions of each image, with the visitor being able to click on one to make it larger.

This lets you fit more pictures on each page, and avoids visitors having to spend their time and your bandwidth downloading files that they don’t want to see. You can even add ‘back’ and ‘next’ navigation to each photo page, so the visitor doesn’t have to go back to the thumbnails to see your next photo, if they want to see them all.

Technorati Tags: internet design, web design, html coding