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

A Long, Long Time Ago…

The first version of HTML was created by the web’s inventor, Tim Berners-Lee, and was loosely based on an existing standard called SGML (Standardised General Markup Language). This very first version didn’t have an img tag, which meant that no graphics at all could appear on web pages. Berners-Lee informally extended the language, but didn’t standardise it.

As the web grew, the lack of standardisation started to make it difficult for web browsers to interact one web browser might have a new tag that others didn’t support, meaning that people would see pages completely differently depending on which browser they used. In 1995, HTML was formalised as a standard named HTML 2, which was the version that the first mass-market web browsers were based on.

As they extended the standard further, an HTML 3 was introduced in 1997 to keep up-to-date. HTML 4 was introduced later that year as an effort to clean up the standard, making it clear that some tags should no longer be used. Apart from a few minor fixes in 1999, this is the version of HTML that is still in use today.

DHTML.

Parallel to this development, though, other languages were being developed that could be included in HTML documents: languages like Javascript (for interactive pages) and CSS (for styling). DHTML (Dynamic HTML) was the name given to the combination of HTML and these technologies. To put it simply, HTML is for web pages while DHTML is for ‘web applications’. As people start to do more and more things on the web that they used to do with separate programs, DHTML techniques are becoming ever-more popular.

XHTML.

Sometimes considered ‘next-generation HTML’, XHTML is a stricter version of HTML that makes it follow XML standards. XML (eXtensible Markup Language) is a standard for HTML-like languages that is being used for more and more purposes, including configuration and sharing data.

Stripped of the technical talk, XHTML can basically be thought of as a stricter version of HTML. Where HTML is often messy and hard to test, XHTML is strictly standardised and can be run through automatic ‘validators’ that will point out any errors you’ve made. This improves cross-browser compatibility and makes web pages much easier to maintain, since it mostly forces information on the style of the page to be separated from the actual text of the page.

XHTML exists in a few different versions: there is a ‘transitional’ version, which lets you keep using some old practices from HTML4, and there is a ’strict’ version, which is the one you need to use to get most of XHTML’s benefits.

The web’s standards body, the W3C, runs an HTML validator at validator.w3c.org.

What Does All This Mean to Me?

You might be wondering at this point why exactly you need to know about the different kinds of HTML. Well, as ever, the answer is that you need to choose one before you start developing your website. You have to be aware of which versions your tools support to know whether your tools can work together, and you should aim to pick the kind of HTML that will be most suitable for your site.

At the moment, XHTML is recommended for most websites, simply because it makes the whole process much easier, especially if you use an editor that saves to XHTML automatically. The only situation in which you should really keep using HTML4/DHTML is if you’re designing a web application instead of a web page. If your site is, like 99% of the sites on the web, designed to give information more than it is designed to do anything else, then you should be using XHTML, preferably the strict version.

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

You Know Your Code is Correct.

If your code validates, then it’s correct, and therefore very likely to work as intended on every web browser out there. If you don’t validate your pages, then you might find that people who visit your site with less forgiving browsers see nothing at all.
Correct code is more likely to display correctly on many different browsers, because it puts them into their ’standards’ mode. If code is even slightly incorrect, many browsers will use a different way of displaying it, known as quirks mode, which is designed to handle old and bad HTML, takes a long time and may make your page end up with errors you didn’t expect.

Without web standards, you end up going back to the bad old days of having to develop entirely separate web pages for different browsers. Validating by the standards ensures that all working browsers can view your content if they can’t, the fault’s with them, not with you.

Search Engines Like Valid Pages.

When it comes time for a search engine to add your page to its results, it’s going to have a much easier time understanding the page if it’s been validated. This will often get you a higher ranking in the results, which means free visitors for you. If your page isn’t valid, search engines will often miss keywords in your pages or not understand your navigation, and may list nonsensical parts of your code under your site’s name in the search results not exactly helpful to potential visitors who want to know what your site is about.

Mobile Devices.

More and more people are accessing the web using mobile devices like mobile phones and PDAs, and these devices have a lot of trouble with code that isn’t valid. Because they have limited processing power, it would take them a very long time to try to untangle invalid code they will simply strip out the formatting and do the best they can with it. Writing valid HTML lets users with mobile devices see your pages as you intended.

Disabled People.

When you write valid code, it becomes much easier to view with things that aren’t web browsers, such as screen readers. Technology for disabled people doesn’t tend to be as forgiving as web browsers, so having valid code is important when it comes to working with these programs.

Future-Proofing.

Before your code will validate, you need to explicitly say which version of HTML you had in mind when you created it. This future-proofs your code, as each version of the standard doesn’t change once it’s been decided on: a valid XHMTL 1.1 page will always be a valid XHTML 1.1 page, even if everyone else has moved on to XHTML 5. Once you’ve validated your site once, you can put it on the web and be confident that people are going to be able to read it for a long time to come.

Finding Errors.

If there’s a mistake in your website’s code, validation gives you an easy way to track it down and fix it. Before validation, people had to test their site after each change and look carefully to make sure that nothing had gone wrong. Writing valid code lets you use programs that will examine what you’ve written and point at the exact place where the code doesn’t validate.

A List of Validators.

Here are a few validators that you can try. Most HTML validators are online, but there are a few that you can download and use on your own computer.

The W3C validator: validator.w3c.org

The WDG validator: www.htmlhelp.com/tools/validator

CSE validator: www.htmlvalidator.com (downloadable)

WebTechs validator: www.webtechs.com/html-val-src

Doctor HTML: www.doctor-html.com (downloadable)

You might also be interested in visiting the W3C’s main site at w3c.org, as well as the Web Standards Project at www.webstandards.org.

Technorati Tags: web design, html, websites

Why PDF?

PDFs are marketed as an easy way to re-use print designs and content online: all you do is export the data from your desktop publishing program as a PDF, throw it on the web for download, and you’re done. It avoids the whole question of web design, or of having to break up the data into sections and create links between it. What’s more, it preserves things like pictures and diagrams intact, so, in theory, nothing is lost in the transition.

This appeals a lot to big companies that don’t want to pay two people (one for print, one for the web), when they see a way to make one do. The saving on web layout looks real to them, because they’re never going to be on the receiving end of the content. In short, the reason people use PDFs is that they don’t understand the web.

They Require a Plugin.

Like Flash, PDFs require a plugin, with all the downsides that involves. Users have to go and download the plugin (assuming there is a version for their platform and browser at all), and then come back to your site that is, if they remember.

However, the PDF plugin is even more painful than most. Why? Simply because it takes a ridiculous amount of time to load. It actually has enough time to pop-up a splash screen and explain which parts of the program are loading this can take anywhere from 10 to 30 seconds, and there’s no way to cancel it once it starts. It’s painful enough for most users that opening a PDF unexpectedly will cause them to say “argh no, a PDF!” and leave the computer in disgust, only coming back later to close what loaded.

The Layout is All Wrong.

Even if you know you’re loading a PDF and you’re happy to sit and wait, what you end up with in the end still annoys you, more often than not.

PDF layouts are nothing but ‘virtual pages’: they’re laid out entirely wrong for the screen. You can’t see an entire page on your screen at once without making the text tiny, which forces you to scroll. Anyone who’s ever tried to scroll a PDF with columns scroll down, then back up, then down again… will know the pain this causes.

Opening a PDF is most often an experience of scrolling past a massive table of contents (that hasn’t been made into hyperlinks to the relevant pages), and then trying in vain to find what you were looking for somewhere among the pages. The scrolling in the program is painfully slow, and most of the time you end up giving up pretty quickly.

The Reader Often Crashes.

As a final blow, Adobe’s PDF reader program, for all its slowness, isn’t even all that stable: it has a tendency to crash people’s browsers after a while, especially if they try to use any of the browser’s buttons. This upsets your visitors to say the least, and they’re not likely to come back to your site again after their browser crashes because of your PDF.

But They’re Good for Printing.

However, there is one area in which we have to give PDFs some credit. It’s their original intended use: to preserve print layouts over the web so that they can be used for printing. If you want to give your visitors something that is best printed out on paper (a complicated graphical page, for example, or an official form), then the best way to make sure that it survives the journey across the web intact is to let them download it as a PDF.

What does all this mean? Well, really, it means that unless you want to upset your visitors, the only time you should have PDFs on your site is when they’re linked to like this: ‘Download PDF (for printing)’. Any content you put in a PDF should always also be available as HTML.

Technorati Tags: web design, html, websites

Domains and Hosting Together?

Many domain name companies have taken to offering you hosting when you buy your domain from them. This is generally an expensive option, and a bad idea you’ll be getting few features compared to what you’re paying. Few people who are serious about web hosting get it from the same place they get their domains.

So Where Should I Start?

Well, that all depends on what your website is going to need. How many visitors do you expect to have? Are you going to have lots of large graphics on the site? Do you have a lot of articles or products that you want to put in a database? Do you want to have an email address at your website (yourname@yourdomain.com)? On and on it goes. Each host you look at will offer you different combinations of features at different price points, and finding the one that’s right for you can be quite a task. Here’s a technical-to-English guide to what you should be looking for.

MB storage. The more MB of storage you have, the more you can put on your website. For most websites, this number can be really very small without it being much of a concern the pages would be too big for anyone to download and see before they’d be too big to store. You only really need to worry if you’re planning to put something apart from plain pages on your site. If you want to make a gallery for your digital photos or let people download ebooks from you, for example, this number needs to be higher.
GB bandwidth per month. This is a limit on how much data your website can transfer each month. For small websites, you don’t need to worry too much, but as you get more visitors the amount you need will increase sharply, especially if each one looks at lots of pages or downloads large files from the site. The amount of bandwidth your site needs is generally considered to be the deciding factor in how ‘big’ it is, and how much it will cost you.

MySQL databases. The number of databases your website will have to store things in. It will make it much easier for you if you have one. Don’t pay more to get extra, though: one database is all you need. It’s worth noting that if your host may offer some other kind of SQL instead of MySQL (for example, PostgreSQL). You should usually avoid anything apart from MySQL, unless you know what you’re doing.

PHP, Perl, ASP, JSP, ColdFusion, Python, Ruby. These are all scripting languages, used to write your website. You should make sure your host offers the languages that any software you plan to use is written in. If you don’t have specific requirements, then you should be fine with just Perl and PHP.

Subdomains. These allow you to split your website into more sections than just ‘www’ you might decide, for example, that you would people to be able to go to ’shop.yourdomain.com’ and ‘news.yourdomain.com’ and see pages there. You don’t really need these, though, as doing the same thing with subfolders (’www.yourdomain.com/shop’) is usually just as effective.

FTP accounts. An FTP (File Transfer Protocol) account is what you’ll use to upload your website to your host. You’ll always get one of these. The only situation when you’ll need more is if you want to let someone alter things on your site without giving them the master password.

POP3 accounts. POP stands for ‘Post Office Protocol’, which is just fancy-speak for email. The more POP3 accounts you get, the more email addresses you can have: useful if you want to have sales@yourdomain.com for new customers and support@yourdomain.com for existing ones, for example.

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

Flash is a Plugin.

Flash isn’t integrated with any web browser instead, it’s available as an installable plugin. This has a lot of downsides. The first time someone views something that users Flash, they’re asked to install the Flash plugin this takes time and is annoying, especially considering that Flash plugin isn’t available for all browsers. After that, every time some Flash content appears, the Flash plugin has to be loaded into the browser before the content can even begin to be loaded, losing a vital few seconds.

Flash is Slow to Load.

Once the plugin itself has loaded, the next step is for it to load the Flash movie in question. Because Flash movies are typically so heavy in images and animation (that is, after all, the point of them), visitors will often end up spending a considerable amount of time being forced to stare at a ‘loading’ graphic. This is supposed to be the web, not a PlayStation no-one wants to watch your site load.

Flash Makes Sound.

Flash upsets users because they generally have no way of knowing that it’s going to make sound many users disable all their browser’s sound functions, not wanting random websites to be able to make sounds at them, but Flash sound still gets through, since it’s a plugin and doesn’t obey these settings. Flash is part of the reason why users end up browsing the web with their speakers turned off altogether people just hate having unexpected sound forced on them, and they have no way of knowing whether your Flash website might suddenly start making some.

Flash is Often Unnecessary.

Because Flash lets you make little animations, many websites use it for things that are completely unnecessary and un-interactive, but that they think look ‘cool’. The classic example of this is the web crime of the Flash intro: a useless piece of Flash that visitors have to sit through before they get to a website, usually saying and doing nothing useful whatsoever. Using Flash for unnecessary things is actively user-hostile, and many users have come to associate its use with that mentality.

Flash Breaks URLs.

If you let visitors navigate around within a Flash movie, that navigation isn’t saved at all. If they go to another site and come back, or even just press the ‘Refresh’ button, they’ll lose their place entirely, and have to start from the beginning again. This isn’t good if they found a particular piece of information or picture they’ll be annoyed at having lost it.

Flash Breaks Right-Click.

Users like to be able to right-click, to print what they’re looking at, or save it, or copy it to the clipboard not to mention all the extra functions that they might have installed on that menu. Right-clicking on a Flash-based website, though, gives a right-click menu of things related to Flash, like whether the movie should display in high or low quality. Users just aren’t interested in this menu, and are upset that they can’t get their normal one back. This is an especially large problem for users that like to have more than one window open at once by using right-click followed by the ‘Open in New Window’ function.

Search Engines Can’t Read Flash.

Finally, perhaps the most convincing argument against Flash: it’s entirely invisible to search engines. Text you put in a Flash movie doesn’t exist, as far as search engines are concerned. It’s closed off from the rest of the web and unfindable by most of your potential visitors. That surely can’t be good.

Technorati Tags: web design, html, websites

What is a Web Server?

A web server is really just a powerful computer they use the same kinds of processors and memory that normal computers use, but they have more of it. Servers usually run a Unix or Unix-like operating system like Linux or BSD, but they can just as easily run Windows.

What makes these computers servers isn’t their hardware it’s the software they run. Web server software includes the HTTP server itself, as well as databases and other things that are needed to make a web server work however it needs to. This is why different hosts offer different features: they have different programs installed on their servers.

Web Servers Serve Files.

The role of the web server, at its most basic level, is to send people your files over HTTP. It has a hard disk (often more than one) and stores your files like any other computer if you don’t upload a file called ‘index.html’, many servers will list all your files for you instead of providing a web page. It’s the replacement of the index.html (named because it is supposed to be an index of files) that creates the illusion of everything on the server being one ‘web site’, instead of a set of files linked together.

Web Servers Run Scripts.

Of course, web servers don’t always just serve the same files over and over again. Sometimes they need to insert other information into pages, especially information that comes from databases. This is done with scripting languages like PHP and Perl the server is told that it should give files that end in .pl or .php to the appropriate script interpreters, and these interpreters then tell the server what to send to the browser. This means that dynamic websites can often be slow, as the server is having to produce a different page for each visitor.

Virtual Servers and Dedicated Servers.

When you buy web hosting, though, you’re not necessarily getting a whole server to yourself in fact, the chances are that you’re not, unless you’re paying lots of money. Instead, you’ll be sharing a server with the hosts’ other customers. You might not realise this, since the server doesn’t appear to have anything on it that isn’t yours, but the other customers are simply being hidden from you you’re using what is known as a ‘virtual server’.

For small websites, there isn’t really any option other than virtual servers: they’re a great idea for letting resources be shared among lots of websites that don’t use much of the server’s power or space. If one of the sites does start growing, though, you might find your website slowing down. Oddly enough, this fact means that it’s often better to find a host that offers price plans with limits instead of one that offers ‘unlimited’ disk space and bandwidth to each customer your website will be much faster at the ‘limited’ host.

More Than You’d Think.

One thing that people don’t often think about is that there’s more than one web server program out there. It’s not really visible to visitors, since they all do basically the same thing, but there are lots of servers available, and they’re all quite different in the way they work. There are three main groups:

Apache. The open source Apache software is the most popular server software out there, with around 70% of the market share.

Microsoft servers. Microsoft are responsible for the various versions of IIS (Internet Information Server) and PWS (Personal Web Server), which altogether have around 20% of the market.

Sun servers. Sun produce lots of servers, most notably the Netscape-branded ones. The market share of these servers depends on whether you count all sites (making it 3%) or just the actively maintained ones (in which case it drops to less than 1%).

Source for statistics: netcraft.com.

Other servers available are mostly ’simple’ servers that don’t have all the somewhat unnecessary features of these servers, such as thttpd (the ‘t’ is for tiny or turbo). There are literally hundreds of them, but they have mostly negligible market share.

Technorati Tags: web design, html, websites