Presentationen håller jag tillsammans med Visar, och Marwin, två av våra extremt duktiga Art Directors, och ni ser mig sist i presentationen.

1. Everyone is anonymous on the web, if they want to

If you depend on trying to identify who a particular user on the web is, you will fail in every way possible. This is what lots of law firms try to do, especially in the context of file sharing. You will never ever be able to know who someone online is, if they don’t want you to.

Technical reasons: IP-numbers are easy to fake, but using proxy servers of different sorts. New services are constantly popping up, that makes this available for unexperienced users. Just push them a little more, send a couple of more cease and desist letters and even ordinary home users will start to cloak who they are. It’s possible, it’s easy.

Social reasons: It’s very easy to surf using someone else’s internet connection. Ways vary from just connecting to an unencrypted wireless network, to just using the free connection at a library or school. And it’s getting worse: people are starting to move around while using the web (mobile), hopping from one connection to the next as their geographic position permits. The link between internet connections and users are getting blurrier as we speak.

Despite the above, there are things you can identify and use. One of those is categorizing users into user types. This is what Google (and lots of others) are successfully doing with their advertising system. “Based on what you’ve showed interest in previously, we think you will like this”. This enables you to personalize and customize your content to a particular user type, something that holds lots of economical value (if that’s what you’re after).

2. Give your content away for free, or watch someone else do it

The web is a gigantic content creation machine, and except for very niched content, you can find anything on it. If you are in the business of selling content online, you will see your profits steadily decline. The competition is just too intense when anyone can create content.

How do you tackle that? Well, put your previously costly content online for free, to drive people to your site. If the content is good, your will see a massive surge in number of users. Well on the site, you will need to figure out how to make money of them, either by showing them ads or getting them to buy something physical.

Industries that depend on online content creation are really living on the edge right now, and for a future prediction, just look at the music industry. You still have some time to rethink your bussiness model.

3. Linking is the core of the web, make people want to link to you

It’s called a web because of the links. Trying to limit or control other sites linking to you is fundamentally breaking the web. It’s also downright stupid, since every external link is a vote for your site, and a sure way for people to find you. Having an “link policy”, controlling how people may link to you, is a sure way to make a fool out of yourself online. Not to say that people won’t care one bit about it.

Instead, you should encourage people to link to you. How? By first giving every piece of content a linkable address. Many flash- and frame-based sites miss this fact, and instead require users to click through your frontpage to find the content they want. This is a sure way to turn users away. Just make your content linkable, it’s not hard.

Then, make sure the content is in such a high quality that users want to link to it. This rules out saying what everyone else is saying, in the same way everyone else is saying it. You need to be different, and have genuinely interesting content, that no one else has. This is hard, but a problem you need to solve to make it on the web.

4. Link to external sites with good content, it’s all about servicing your users

There’s billions of sites a user can go to, and you need to work hard to servicing your users if you want their attention. Sometimes your content is so extensive, that no matter how hard you work, users will still want more. This is a perfect situation where you should link to external sites and give your users what they want.

Many newspaper make this mistake, and end up with users leaving their site for Google, trying to find more information about a particular piece of content. They have instead linked to good follow-up content directly, given the user what they wanted, and be accessible via the most used button on the web, the back-button. Happy users that have easy access to your site, or annoyed users that leave for Google, your choice.

5. People will copy your content, and there’s nothing you can do about it

Some people are worried about the copying of their content. And if they see that as an issue, they better be worried. You see, each time someone reads your texts, or looks at your media, it’s copied from your server to the users computer. Web browsers are really effective copyright infringement machines, and by just clicking a link, you copy that page.

So if you are worried about users copying your content, please don’t put it online at all.

Other people think that they can have their content on the web, and still prevent people from copying it. This is pure lunacy, and all ways to prevent copying have failed. People even miss the most obvious way people can copy, by hitting the “Print screen” button on their keyboards. When it comes to video and audio it’s a bit more annoying, but everything that comes out of your speakers, or is displayed on the screen, is recordable. So stop worrying about copying, you can’t stop it.

Instead, know and accept that people will copy your content, and just ask for a simple link back if they do. That way, small pieces of your content on other sites will act as marketing for the whole site.

If you want this formalized as a license, there is the creative commons attribution license, which I use on this site (see footer).

6. Use the web to communicate with your users, or watch your impact fade

Almost everything is moving to the web, including most of your business and private life. This of course has implications for web sites. Back in 1999, a couple of smart people sat together and tried to formulate how the future would look for businesses. One of the fundamental truths they found was “Markets are conversations“. In essence, this means that you sell stuff by talking about it with customers. It can be through marketing or through recommendation, but it is talking. When that communication moves to the web, you too better start talking on the web. And quickly.

This movement of websites for two-way instead of one-way communication has been given the techy name Web 2.0. And it turns out, this new web is a terribly effective way of communicating. The more people realize this, the more of the conversations will move to the web.

The question is, when hoards of people come to your site to talk to you about your product, are your ready? Or will you give them: “Sorry, this store is closed, but we have this nice brochure you can read…”

7. Communicate with your users in natural language, marketing speech has no place on the web

It’s easy to find marketing speech about products today. Companies compete with each other to make sure as much of your field of vision as possible is filled with their message. When people are subjected to that much information they have no interest in, there are consequences. On the early web, the consequences were banner blindness, people simply started ignoring some banner formats. On the modern web, people have started ignoring marketing language use instead. The words “Best”, “Revolutionize” and “Cheapest”, instantly makes people stop reading.

Why? Because companies writing about their own products don’t have anything to compare to! They can’t say what’s best, because they don’t use their competitor’s products. They don’t know if the product will revolutionize the users life, because they know nothing about the user. And any user can look up how cheap they are on a price comparison site.

So what to do? Talk to them like you would to a friend, in the afternoon, after two beers. This will make sure you don’t turn customers away by trying to push to much crap on them. You wouldn’t do it to your friend? Then don’t do it to potential customers. Just changing your language has huge positive implications, but let me just sum it up like this: it builds trust.

8. Be honest about what your strengths are, liars are easily uncovered

Never has it been so easy to look up facts. Liars are easily uncovered by a couple of soft tappings on a keyboard. What’s even better, is that even subjective things can be checked. If someone yells: “Our product is the best one!”, you can find out if that’s the case in a few seconds. Just read a couple of reviews, look at comparison charts, and you will know.

Lying in person is rather bad, but lying on the web is worse. All the facts are so close. A customer is literally seconds away from finding out if you’re bullshitting them or telling the truth. This makes it vital not to lie on the web.

If you want to brag anyway, make sure your add a “we think” before all your bold claims, and back them up with solid arguments. Because if you say “We’ve found no cheaper product than our own”, and I find out there are others that in fact are, you’re not a liar, you’re just badly informed.

9. Care about search engines, and double your number of users

You are not the only site on the web, and people will spend most of their time on sites other than your own. This means, that if you don’t think about how people find your site, all your content work is in vain.

So how are people found? I have yet to see a customer of mine that gets less than 50% of their users from search engines. Usually 60-70%. People tend not to understand the implications of this. A e-store could potentially lose over half their sales by misbehaving in Google’s eyes. This is huge.

You need to care about search engines. Luckily, they are well synced with the ground rules you’re reading. If you make your content linkable, unique, interesting, and talk to them in a language they understand, you will be successful. All serious search engine optimization guides will say the same.

The last step, and what many miss, is to keep track of how people find you, and what they find. Then feed that information back to your content producers. That way, you can produce content that people actually like.

Or, you could lose half your sales. Your choice.

10. Encouraging and acting upon feedback is currently the best form of marketing

Asking for feedback is unfortunately still uncommon. Unfortunate because there are so many out there that could benefit from knowing how they can do better. It’s also fortunate, because it means that you have a chance to be different, and stand out, just by asking people what they want.

Dell IdeaStorm is a great example of this. They are simply saying: “Hi, we want your feedback”, and instantly they have media coverage everywhere. Additionally, they get great feedback on how to improve their business.

Of course, this means you need to act upon feedback too. Telling people that you listen, and then don’t is a much worse offense than not listening at all. So find yourself a good chair, hand out the megaphones, and listen carefully.

Where to now?

Thanks for reading this far. This article comes from a frustration over how some companies, and individuals, think the web is still a place were they can makes their own rules. I would therefore like to set the foot down, and tell people what I’ve learned about the web, about what works and not.

I also know that there are other people out there that needs to read this. Do you know some of them? I then appreciate if you could send them the link. More people need to read this.

Thanks.

Good code never repeats itself. The number of techniques to avoid it are numerous, and all new languages compete in trying to remove as much repetition as possible (Especially the dynamic ones).

Good design repeats itself, good code does not.

With interface development, you face the conflict above over and over again. You get a design that (rightly) reuses the same concepts over and over, and you need to implement them in code that makes you write the same logic only once. This same time both when writing the code and later when fixing bugs in it, and deep inside, all programmers know that it’s the correct way to do things.

I’m currently working in a .NET project (EPiServer CMS 5), and is faced with a design that uses the same kind of boxes all over the site. The boxes only differ by color and content, so things like shadows and rounded corners are clear repetition that I want to do only once. I’ll do the shadows and corners with CSS, but for that I need a couple of wrapper divs. Divs that I only want to specify once, and then reuse.

The prequisites are:

1. I want a flexible solution, so I’m not tied to a specific HTML structure (number of divs, or even if I use the div tag or not).
2. No HTML in properties that get sent to user-controls
3. No HTML in code-behind (a common way in .NET to split logic (code-behind) and templates (ASP.NET and HTML))

What I came up with was templated user controls. They provide a way to write controls that wrap any other controls you may have, and add content around them. And it’s easy to write and user. This is how the one I wrote is used:

<MyProject:Box runat="server">
    <Contents>
        <h2>Random header...</h2>
        <asp:Repeater runat="server">...</asp:Repeater>
        ...
    </Contents>
</MyProject:Box>

It simply wraps anything inside it (in this case a heading tag and a asp repeater), and lets me do whatever I want with them. In my case, I wanted to add some generic HTML around lots of different content, but you could do anything you wanted.

This is how the above was implemented. First the code-behind:

using System.Web.UI;

namespace MyProject.templates.units
{
    [ParseChildren(true)]
    public partial class Box : System.Web.UI.UserControl
    {
        private ITemplate contents = null;

        [TemplateContainer(typeof(TemplateControl))]
        [PersistenceMode(PersistenceMode.InnerProperty)]
        [TemplateInstance(TemplateInstance.Single)]
        public ITemplate Contents
        {
            get
            {
                return contents;
            }
            set
            {
                contents = value;
            }
        }

        void Page_Init()
        {
            if (contents != null)
                contents.InstantiateIn(PlaceHolder1);
        }
    }
}

… and then the “code-front”:

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="Box.ascx.cs" Inherits="MyProject.templates.units.Box" %>
<div class="box">
    <div class="boxwrapper">
        <asp:Placeholder runat="server" ID="PlaceHolder1" />
    </div>
</div>

I think this is a really useful way to write user controls, especially for those of you that work as interface developers in a .NET world. Asking the people around me I found that quite a few didn’t know how templated user controls worked, so I hope I will be of use to some of you out there. Happy coding!

How to install MySQL-python on Mac OS X

Step 1: Brace yourself, this proccess is really really annoying.

Step 2: Download MySQL for Mac (Skip registration by clicking the link below the login form). You probably want “Mac OS X 10.5 (x86)“. Is it possible to use some other version of MySQL? Yes, as long as you have a version that includes the source code (MAMP does not include them, so it won’t work). You’ll need the source later on.

Step 3: Install MySQL by mounting the image you just downloaded, and double-clicking the package file for MySQL. Also install the prefPane that’s included in the package. That adds an icon the system admin that lets you start and stop MySQL, very convenient.

Step 4: Make the mysql command accessible from anywhere by adding it to your PATH (a variable that holds all directories the terminal looks in to find the command you’re trying to execute). The below just adds mysql’s bin directory (it’s probably the one I’m using below) to the PATH you currently are using:

export PATH=/usr/local/mysql/bin:$PATH

You probably want to add this line to a file called .bash_profile (yes, it starts with a dot), that is situated in your home directory (which you get to by just typing “cd”). This file gets run each time you start a new terminal, so it makes sure the mysql command is always accessible, no matter where you are.

Step 5: Download MySQL-python, you probably want the file that ends with .tar.gz.

Step 6: Unpack the file you just downloaded in an empty directory (anywhere)

Step 7: Download XCode from Apple. The reason you need this is because XCode includes a C++ compiler you will use when installing MySQL-python soon. The download is huge (1 Gb), and to be able to download you first need to fill in a long form. The registration process for Apple Developer Connection is about the worst things Apple has ever created, so after completing it, you will either laugh or be really annoyed, just pick and choose. You do need XCode however.

Step 8: Install the XCode Tools package by first mounting the file you just downloaded, and then double-clicking on the XCode Tools package. It’s the only one you need from the huge set of junk you just downloaded.

Step 9: Try installing MySQL-python by going to the directory where you unpacked it and typing:

python setup.py install

This will attempt to install the drivers, but will fail. This is because the coders behind MySQL-python have failed to fix a very simple bug in types.h (1808476 – “#define of uint breaks compiling on Mac OS X 10.5″). However, you can easily fix it yourself: Look for a reference to types.h in the terminal. When you find it, open that file in your favorite text editor and comment out line 92, which should say something about #define and uint (comments in C++ are double forward slashes: //).

Step 10: Now, try the above command again. It should install fine. If it doesn’t, you will probably find out why by looking in the terminal for errors while compiling.

What did I say, isn’t this process about 7 steps to long? Well, I hope this little guide helps someone.

• Adobe Update
• Google Update
• Microsoft Update
• Ten Commandments of Update Services

Let me start by showing when updates go wrong:

Adobe Update

I start Adobe Fireworks because I want to resize an image I have. After it has started and the image has loaded the update service prompts me that there are new updates available. For what? It doesn’t say, so I click more info and get a list of things. Strange: None of them seem related to Fireworks.

The update starts, and tells me I have to close Fireworks to complete it. Bah, I just started it! I’m trying to resize an image here, remember? But Ok, this time. Next it tells me to close Firefox. What?! All my precious tabs I’ve saved for later reading! Bitches.

The download begins, and the progress window takes focus over the other stuff I’m doing while not looking at the progress bar. *Repeated clicking to hide the window*. Then when it’s done it takes focus again, and asks me to click the only button available. GAH?!

Ok, done. Why was I starting Fireworks again? And hey, what’s those new PDF icons doing in my Links toolbar in Internet Explorer?

Google Update

Oh, a new web browser: Google Chrome, I surely want to try it out. *Couple of hours of fiddling*. Nah, I still like Firefox more, I’ll go back to using that one. Wait, what’s that GoogleUpdate.exe process doing there? I’ll try closing Chrome. Nope, still there. Ok, I’ll force it to close. Hmm, it restarts after a while. Ok, must be some kind of process that starts with Windows. Ah, registry setting, lets remove that one. *Reboot*. Still there?! Ah, they also installed it as a service. Lets remove that too. Finally!

What’s that? A new version of Google Gears! *Installing*. Hmm… What’s that GoogleUpdate.exe process doing there? GAH! What were you thinking Google?!

Microsoft update

I really should make sure my OS is up to date. Lets go to the windowsupdate website. What? I need to run IE5 or later? Ah, no Firefox support, damn it. Lets switch browser. Ok. Install validation thingie? Ehm… I guess I have no choice. *Waiting*. Ok, now let’s see if there’s some updates, Express or Custom? Custom, of course. *Waiting quite a long time*. Why are you making me look at a progress bar? Ok, no OS upgrades, but there’s some update to Windows Media player. Yeye, I guess it couldn’t do any harm (not that I use that one). Trust ActiveX thingie? Yeye, I know what I’m doing. *Waiting some more, with focus stealing*. “Please restart your computer to complete the installation”. Sigh.

So why don’t I just use Windows Update program instead? Well, there’s a window that pops up every 5 minutes that remind you that you have to restart the computer. Do you know how annoying that one is? No, it’s MORE annoying than that.

Ten Commandments of Update Services

So I hope that’s enough evidence that big companies have no idea how do conduct a decent update of their own program. So let me offer some (free of charge) advise:

1. If your update is web based, let me use any modern browser I want. Don’t start by getting me annoyed.
2. Check for updates right before the program starts. I know that you want me to close the app while it’s being updated, but why on earth do you let me start it then? Lets keep it simple, update before the program starts, and resume starting the app when you’re done.
3. Don’t leave processes running in the background when I close the program. When I close your program, I don’t care about you, or any updates to your program.
4. Only update the current program, not bundled ones. I know you want me to have the latest versions of all your programs, but odds are I don’t even use them. Update those programs when I start them, not now.
5. Show me what gets updated, and if possible link to a change log. If you want me to download 70 Mb you need to first talk me into why I need it. You may want to hide detailed info for inexperienced users, but could you please then remember that I’m not one of those?
6. If it’s a tiny update (less than 1 Mb), you can just go ahead and install right away. You don’t even have to prompt me.
7. Download and install in the background, without stealing my focus. If you’re shipping a big pile of fixes (ie. the version I bought was not done), you have to let me do other stuff while you update. Like surfing the web. It’s not Ok it require that I close unrelated programs, sorry.
8. Never ever touch my browser bookmarks. Never add things to the quicklaunch bar. Never make things start automatically unless I’ve told you that’s what I want (why do most people have a Quicktime icon in their systray?). The only way of getting into my bookmarks or my quicklaunch bar is writing a really good application. You can’t force me to like you. The opposite works well though.
9. Never require me to restart the computer. There’s only one exception for when you may: when I’m updating the operating system. No excuses.
10. When you’re done, just start the program. I don’t want to confirm anything, I want to get to work using your app.

(Bonus point from James Socol in the comments: 11. Use incremental downloads, so I don’t have to download stuff I already have installed.)

If you are a software company, and can’t manage the above, just do it the old fashion way: let me manually download a file from your website. That will annoy me much less than a bad automatic process. Or if you want things to be really convenient: write a web application instead.

Now get to work. I’ve had it.

First off, to do a real accessibility test, you need real people, with real tasks to accomplish. These are not tools to replace people. Instead, they can give you a quick rundown on where you stand, and find things you’ve missed. I like to compare it with HTML validation: Validation is a great way to find your errors, but just because you validate does not mean you have good code.

Oh, by the way, I limited this to only free tools. Thought you’d like that. Also, for your enjoyment, I’ve split this article into three parts (you’re just soooo spoiled):

• Automatic testing
• Semi-automatic testing
• Manual testing

Automatic testing

Automatic testing is one of the quickest way you can check your site’s accessibility. What the authors of the below tools have done is to go through the available standards, and tried to find things that a computer can check. The tools will not find every error, but the things they do find, they find quickly. This is why I like to start with these.

• W3C Markup Validation Service – This is a real classic. It goes through your HTML or XHTML and makes sure you follow the basic syntactic rules. What does this have to do with accessibility? Well, if you deliver invalid code, you have no chance but to test every user agent and how it renders your page. Will you do that? Didn’t think so.
  • Bonus #1: Test up to 100 pages of your site at once with the WDG HTML Validator, just check “Validate entire site” before you validate.
  • Bonus #2: As a developer it’s handy to get to know directly if the page you’re looking at validates or not. HTML Validator for Firefox is an extension that sits in your browser’s status bar, and shows a red cross when something is wrong. When you double click the icon it shows you the exact error. Very handy.
• W3C CSS Validation Service – Even though screen readers don’t care much about the CSS you need to make sure it’s alright. Why? Because there’s more to accessibility than screen readers. Surely, most people that need your help are people surfing with their ordinary browsers: Internet Explorer, Firefox, and so on. To make sure all of them see the content and can interact with it, check your CSS for obvious errors automatically.
• Cynthia Says, WebXACT, and Wave Accessibility Tool are all testing tools that are aimed at accessibility testing. They support both Section 508 (an American accessibility standard) and WCAG 1.0 (W3C’s own standard). Like the W3C tools above they do not catch all errors, in fact, most of the feedback you get is that you should check things manually. None the less, they often find simple errors that you have missed. Make sure you enable all extra options when using them.
• Basic accessibility analyzer is a much less known, but very impressive accessibility tester. Among other things it adds checks for proper heading structure and form labels, two things many have problems getting right. Built by Peter Krantz (former colleague of mine) and based on his accessibility library for Ruby).
• W3C Link Checker is another tool that’s easy to forget about. It walks through your site and picks out all the links it finds, checking that each of them works. Using a tool like this makes sense for more than accessibility reasons, but accessibility alone is a reason to use it.
• Juicy Studio hosts a whole series of useful online automatic tools. There’s tests for Readability, Your CSS file, Luminosity and Color Contrast (really useful), and an Image tester. You will most certainly find something to improve here.
• Nikita the spider is a great tool going through a lot of pages in search for errors. It crawls through a site and reports broken links, missing doctypes, and validation errors. Good for big batch checks after the fact.

Semi-automatic testing

Semi-automatic tools do part of the work for you but also requires that you twiddle with the results yourself. They can’t give you a “passed validation” stamp to put on your site, but correctly used they can give you deeper knowledge than the automatic ones.

• Accessibility Toolbar for Internet Explorer is a collection of accessibility tools bundled as a toolbar. The best part of it is it’s support for color and contrast testing. Click “Colour -> Contrast Analyzer [application]“. By selecting “Simulation” from the menu you can see what your site looks like with different vision impairments. If you rely on color alone for some feature it will be obvious with some testing with this tool.
• Fangs is a screen reader simulator in the form of a Firefox plugin. It’s simply shows (not reads) the text on a page as it would be read by a screen reader. This is a great way to get a feel of how your site works with non-visual browsers. Due to a bug in Firefox you need to run an English version of the browser before installing Fangs. It’s worth switching language to run Fangs, it helps that much.

Manual testing

Then we have the old fashioned gruntwork, manual testing. I’m going to put things here that you don’t use special tools for, just the browser and your accessibility knowledge.

• Testing in several browsers is of course the most obvious way to test a site. If 10% of your users can’t access the site because it doesn’t work in Firefox you have a problem. So fire up both versions of Internet Explorer (6 and 7, not 5.5, it’s dead), the latest version of Firefox and Opera. If you have access to a Mac make sure it works on Safari there too. If not you have to try with the buggy Safari 3 beta for Windows (it’s better than nothing).
• Text zoom is one of the first things you should try. Firefox and Internet Explorer 6 relies on only enlarging the text, and not the whole window, so make sure you test that. Internet Explorer refuses to zoom text set in pixels, so keep a lookout for that. Text zoom helped me greatly when my old monitor broke and got all blurry. Thanks for letting me zoom!
• Turning off CSS and Javascript is another great way to make sure people can access your content. You don’t need to mind what the content looks like, just make sure it’s understandable and that things work as expected.
• Remove images and replace them with alt text. There’s options to do this with both Web Developer Toolbar and the previously mentioned Accessibility Toolbar. Testing your image alternatives helps both people that gets their content read to them and those that disable image loading due to a slow dialup connection.
• Keyboard navigation is another thing to test. Just push your mouse to the side and navigate using only the keyboard (use the tab-key, arrows and enter). Does things work like you expect? Good, you passed.

That’s it. Lots of little tools and tricks you can use to make your site accessible to more people. If you ask Jakob Nielsen or Roger Johansson if this is enough they will of course say no, but I say you should be proud anyway! Passing most of the above tests isn’t easy, and you’re certainly on the right track now. Well done!

Feel free to tip me off on more tools using the comments. Thanks for reading!

Aside from starting to think about the implications of blog links, I got another interesting question in my head. What is Web 2.0 really? Most people working with interface development would say that Web 2.0 is everything that uses AJAX. But the newspaper didn’t use AJAX at all, and still they claim links to blogs is Web 2.0. Time for some research!

The hunt for a definition

The phrase “Web 2.0″ was first put into widespread use at an O’Reilly conference in 2004. The organisers wanted to talk about a change that has happened on the web, and just bumping the version of the web seemed like a good idea. Paul Graham found this first try at defining Web 2.0 at the conference:

“While the first wave of the Web was closely tied to the browser, the second wave extends applications across the web and enables a new generation of services and business opportunities.”

Note that there’s no mention of AJAX there. Hell, there’s no mention of users either! They must have meant something else, and the definition might have changed over the years since then. Let’s keep looking for a good definition.

Tim O’Reilly comments on the issue two years later, in a clairification on his blog:

Web 2.0 is the business revolution in the computer industry caused by the move to the internet as platform, and an attempt to understand the rules for success on that new platform. Chief among those rules is this: Build applications that harness network effects to get better the more people use them.

Tim acknowledges the change in meaning and talks about “network effects” here, something that starts to look a little bit more like what my idea of Web 2.0 is. But isn’t there still something missing? To me, that looks only like a small part of what I call Web 2.0. Let’s keep looking…

Gartner has tried to convince companies of the merits of Web 2.0 for a rather long time. In one of their many (business oriented) PowerPoint presentations they attempt to define “three anchor points around Web 2.0″:

• Technology and Architecture — Consisting of Web-oriented architecture (WOA) and Web platforms.
• Community — Looks at the dynamics around social networks and other personal content public/shared models, wiki and other collaborative content models.
• Business Model — Web service-enabled business models, mashup/remix applications and so forth.

I believe we’re getting closer. Gartner is making business models a separate point which I don’t agree with. Many of the biggest Web 2.0 sites didn’t have a business model when they started (and many still don’t). Digg has troubles covering their hosting cost with the tiny bit of money they acquire from their ads. Del.icio.us still doesn’t make any direct money (although they got sold to Yahoo, and they surely use the data…). My point is, a business plan isn’t one third of Web 2.0, it’s something sites add afterwards if things work out.

So let me state my own (slightly more general) definition of Web 2.0:

“A collection of ideas and techniques that can be used to make more interactive sites”

The thing is, just doing something in AJAX does not mean it gets the Web 2.0 stamp of approval. You need several of the ideas or techniques and you need to combine them in clever ways. So lets agree on the definition above and got look for ideas.

Ideas that are part of Web 2.0

I’d like to gather a whole bunch of ideas under the Web 2.0 roof. My selection is of course not all there is. Googling could uncover more I’m sure, but I think this is a good start.

• User generated content
• Radical trust
• Syndication of content and services
• Long tail
• Collective intelligence

User generated Content

Many companies still view the web as a one-way medium, an extension of a paper catalogue, it’s main advantage being that it can be distributed to more people. It’s not like that any more! There are people that want to add content to your site, that want to contribute their ideas and thoughts. Why are you denying them to help you?

User generated content is content that your users are willing to give you. It can be everything from a simple “like it” or “don’t like it”, to fully featured articles written by users. The two most used ways of contributions are the simple ones: votes and comments. The author is still in full control of the content but users are given a chance to chip in with minor corrections. This is the least you can do. It’s what I do on this blog; let you chip in by commenting.

But if you have users that are passionate about your subject, users that are willing to use your site to get their ideas out, you should really endorse that! Allow them to post articles on your site, allow them to regroup and reprioritize according to their own wishes. It is technically possible, even rather easy to do; you just have to do it.

Six simple things your users can help you with:

• Reviews of your products
• Comments on your articles
• Stories about how people use your product
• Multimedia using your product
• Questions about your products
• Articles in an area you choose

Radical trust

Another approach many sites have taken can be summarized as “radical trust”. It builds on the simple idea that users know what they want better than you do. So let them order, categorize, sort, select your data as they like!

This is exactly what wikis do. They acknowledge that there are more users doing good than doing bad. If that’s the case, why not let them in on your content directly, letting them edit and improve it like they want. They few people that do bad can be hunted away with a combination with versioning (saving old versions of content that’s easy to restore), and some simple monitoring. Wikis trust users, do you?

Syndication of content and services

Web 2.0 is not only about “user to website” interactivity. It’s also about letting other sites and tools interact with your site directly. This is often summarized as “syndication”.

It’s a very fancy word for a simple concept. Let me try to explain.

Somewhere you have some kind of database with your content, be it products in your e-store or posts on your blog. Usually you take that content, add some structure (HTML) to it, and send it to the user.

Another website that wants to access the same information could parse the HTML and try to understand what it means, something called “screen scraping” (or microformats ;). The problem with that method is that it’s very dependent on that the webmaster doesn’t decide to change the HTML. The other problem is that computers and humans often want different types of information. A computer that is going to parse a list of your products doesn’t need navigation like humans do. What you do is send your data directly to computers instead, without messing it up with HTML. Formats include: RDF, RSS, or perhaps custom XML through a Web Service.

Thing is, when you start syndicating your data you make it easier for others build services based on it. Now people get several entrances into your content instead of the one you produced. Again, your users are helping you reach more people.

Allowing full RSS feeds is another way of syndicating, I’m switching right now. Do you syndicate?

Long tail

The theory of the long tail is one of the ideas that are usually associated with Web 2.0. It’s a business model that many companies that are successful on the web use. As with most business models they are invented after the fact, and as such I’m not sure it really belongs on this list, but people always bring it up, so let’s go. I’ll let you choose yourself.

Wikipedia describes the long tail like this:

“Products that are in low demand [...] can collectively make up a market share that rivals or exceeds the relatively few current bestsellers and blockbusters, if the store or distribution channel is large enough”

Most physical stores need to aim for the bestsellers to sell anything. There’s simply too few interested in odd products, to make it worth hiring store space and personnel to sell it.

Web based stores are in a different position. Selling another product usually means just adding another page to your site, no extra store space or personnel needed. In addition people are prepared to wait a couple of days before receiving their products. That time span means you can skip warehouses and not start producing your products until you have an order ready.

No more is there a need to estimate what people will be interested in and pre-order them. For the right kind of product the internet is a huge benefit. Amazon did it with books, iTunes did it with music, do you do it?

Collective intelligence

You have let each user customize their experience and add content of their own. Now it’s time to organise that content to better help the everyone benefit from it. There’s hundreds of ways of doing it, but here’s a couple of things that you can present to your users:

• The most popular swedish article right now… – Crawl all Swedish blogs and keep track of what they link to.
• Others that bought this book also bought… – Query your shipment table. Pick a product, select the number of times each other product appeared together with said product, and recommend that product to your customers. Amazon does this and it’s said that it has increased their profits considerably.
• You probably think this movie is a four out of five – A Swedish movie site give its users personalized ratings of movies. They find users that have similar taste as you have (based on your previous grades) and then checks what those people have rated the movie as.
• This is probably spam – Write a word filter that learns what is considered spam when users mark them. Share that filter with fellow users and let their markings stop your spam. A form of collective sieve filtering, Akismet does this.

None of them are technologically hard to do, you just Google and copy other people’s samples. Why not?

Techniques involved in Web 2.0

But there are techniques involved too. Let’s go through a few of the important ones.

• AJAX (and other javascript)
• Feeds (RSS, Atom)
• Tags

AJAX (and other javascript)

Everyone talks about AJAX together with Web 2.0, but I think it’s important they are kept separate.

AJAX is just a technology that helps prevent (full) page reloads. Instead you connect to the server silently in the background and receive your data that way. What’s the revolutionary about this technique? Nothing. It has been in use for at least 5 years. They new thing about it is that people started using it to build better interfaces.

Javascript is language that enables AJAX, and playing with reloads is not all it can do. Through some nifty use you can change attributes on any HTML element on the page. Move things around, react to mouse movement, fade and animate, it’s your choice. This means a lot of new controls become possible, ranging from simple sliders to interactive maps.

Why do most accessibility people hate it? Because most developers don’t know enough about accessibility. And when those start to use AJAX they disregard accessibility completely. Javascript and AJAX have different goals and I think a good compromise is making sure the basic functions of the site (buy a product and pay for it) works without javascript, but enabling it adds additional features.

When was the last time you used javascript to enhance your site? What was the last control you invented?

Feeds (RSS, Atom)

Feeds are great for syndication of content. There are many different feed formats to choose from but they all have one purpose: to communicate pure data, skipping all design.

A feed is simply a list of feed items, each with an unique identifier. A user adds the address to their “feed reader” and it starts polling you, asking for updates. I have my reader set to just a couple of minutes, making sure I quickly notice changes in people’s feeds.

The good thing about feeds is that they make it easy to follow several at once. There’s no annoying different designs in the way if you don’t want to (you can always just visit the site if you want design). Feeds are getting more and more of a commodity; you should already be allowing your users the possibility to subscribe your content. Do you?

Tags

Tags is another hip concept. It deals with the collective intelligence idea and how to categorize content efficiently. A tag consists of a phrase of some kind that describes a piece of content. This blog post could have the tag “javascript”.

There’s several ways you can use them. One is the just fix what tags are allowed and use them as regularly groups you can assign content to. But allowing more than one tag enable you to do more than just split things into groups, you can instead pick all contents bits that have the same tag. You can go further, allowing custom tags that the users can pick themselves. That gives you a wide array of descriptive words for your content, free to play around with. For example, if many users pick the same word, that one is probably a better descriptor.

Picking many bits of content and analysing all tags tied to them can be easily done with a tag cloud. In that you simply print all tags used after each other, and make those used often bigger. Doing this on a whole site is an effective way of giving users a snapshot of what you write about, something I know I like.

Can tags help you solve a categorization problem you have?

Summary

Now. To build a Web 2.0 site, pick from both of the lists above. You Google for more ideas and you work hard to interact with your users as much as possible. Web 2.0 is the combination that happens when your ideas and technology finally just works.

Your users want to help you, do you let them in?

It has been said over and over again; very few people actually read full articles unless they know it’s worth it. It’s all about trust. They must have previously gotten the idea that the article they are about to read is on topic, interesting, worth a read. It’s a tricky situation, before they have read the article they need to somehow already know that they are on the right track. The solution is of course good links.

A link tells you something about the page you’re about to visit. You get a quick two or three word summary, often from an author you have previously deemed trustworthy (after all, you’re reading her/his site are you not?). When you are on a trusted site and click on a link you know that the destination is a good one. Why would there be a link there otherwise? You also know roughly what the site is about, it’s summarized and underlined in blue right there. You click and you start reading.

Instead of the above scenario I see the same problem repeated over and over again. Instead of using good link text people use “click here” to name their links. You force me to read a lot more than I should need to. Damn you!

But not only do you annoy your users. Search engines use link text as a primary source of information about the site linked to. Who wants to be found on Google only by those that search for “click here”? Sure, Google sometimes act like a persistent human and reads the surrounding text too, but it also values those words less. What? I can’t use Google to find you? Damn you!

Many screen readers have an option to only show the links for a site. This is a useful feature if you are browsing, navigating, searching for something, but know it’s not on the current page. Since screen reader users are dependent on hearing things they navigate much slower than an average user and all ways of speeding up that process helps. On a page with the usual “click here” links, the generated list will be useless. The links are taken out of context and users are forced to read the whole site to see where a certain link goes. Why are you punishing them when it’s so easy to do it the right way? Damn you!

Sometimes the existence of “click here” links has to do with design. It’s very popular right now to remove the underlining on links. This makes links harder to see and you need other methods to show the user where to click. One of them is telling the user what to do in text instead: “I want you to buy my product, but you can’t by clicking directly, you need to click here”. “Click me” designers: Damn you!

And it’s so easy.

Link with the words that best describe the content you link to.

Now. No one is going to do funny things with their comment signatures or trackbacks will they?

First I look at the validation. Does the front page validate? Do all sub pages of the site validate? If they don’t, what kind of errors are there? While validation isn’t the most important metric, it’s a very quick way to get a feeling of if the coder is “web standards aware” or not. I use the Firefox validation plugin that checks all the pages I visit and puts a little green check in the statusbar if the current page validates. For doing sitewide validation I use htmlhelp’s validation spider and let it loose on the site (check “Validate entire site”). Validation is slowly catching on as a standard tool in the webdev toolbox. Someone who is not using the validator probably doesn’t know much about web standards.

While on the subject of validation: don’t forget validating the CSS. There’s a lot of basic errors that the validator finds that only leads to errors in some browsers. The W3C CSS validator might help you fix some of those right away. Before you complain: the CSS validator has a few issues. If you use line-height, you need pass it a decimal number; 1 becomes 1.0, 0 becomes 0.0. Secondly, if you use CSS 2.1 or CSS 3 properties you need to inform the validator you do. Add the URL parameter “profile” with the value set to “css21” or “css3”, and revalidate. CSS errors and whether or not the style sheet is well organized clearly propagates what CSS level the developer is on.

Next I look at the doctype. That single line of information at the first line of the HTML that defines what language the coder is using. Use of Strict or Transitional is what matters most. Most pages that validate as transitional can with very small changes be upgraded to strict. And why not? Strict signals that an effort has been made to ensure that the document separates structure from design. If you know how, there’s no reason not to. At this stage I also check that the doctype is properly set, there’s an IE bug that makes IE render things badly (quirks mode) if the doctype isn’t the first element of the page. Incorrect use of doctype is also a common way to recognize a beginner.

Sites that pass the above code tests get another batch of checks. Is the code semantic? (ie. does the HTML describe the content?) I look at elements, classes, and ids in use. Do they describe the content they contain? Bad sites use class names tied to design. Mediocre sites use general names like “wrapper” or “column2”. Great sites use “copyright”, “invitation”, and “footnote”. Many CMS:es generate design-oriented classes and ids, and only a few reach mediocre. This is one way to see that a site was robot-made.

Another code issue is the content over HTML quotient. For just a few lines of content you shouldn’t have to need huge amounts of HTML. You shouldn’t need 10 divisions just for one header. A high content over HTML quotient signals that the developer knows what he’s doing. An “overmarked” site means that the developer is on the right track but suddenly forgot that content is more important than the code behind it.

One last angle is the accessibility one. How will a screen reader read this site? Is all the content of the site available as readable text? Does the site require javascript when it isn’t needed? A good place to see if someone knows about accessibility (on the web) or not is checking the forms. Fieldsets, legends, and labels: they all tell their story about the developer and his knowledge about accessibility.

A quality site ranks high in all of the above.

You rarely think of sites as “easy to use”; they just work. You enter them, click here and there, and don’t think much about how the navigation works or what to do. That’s the feeling we should go for.

Separate the interaction layer

A very simple way of making it easier for your users is clearly marking what can be interacted with. Are users expected to click on those small arrows of yours? Are the only links to your content through your headers? Then you better make sure those arrows or headers come across as clickable.

The fastest way to convey that something is clickable is using blue underlined text. Why? Because that’s what most sites use (see Google, Amazon, eBay). It’s what we have grown up with and it just works. Designers tend to dislike blue underlined links and have started to use other colors and skip the underlines. Jakob Nielsen, the notorious usability expert, writes about what you should think of in his article about the visual style of links. It’s a good reminder.

You don’t have to stop with just the links though. Are your images clickable? Then make sure they connect with your links somehow. If you pick orange as your link color, make something around or in the images use that color too. Make your form fields use the same color. When someone enters your site it should be possible to quickly get an idea of what to do: “I can either click a link in the menu, search for a phrase, or click this thumbnail”. Don’t make people confused by mixing in orange on the static parts of your site.

With some cleverness I’m sure this idea can be expanded to work even without being dependent on color. A small figure? A border? Use your imagination, and be sure to tell me about it.

Split up your content

You know those portal sites? There’s one big reason they don’t work. There’s too much content cramped into a too small area. A portal is rarely about something specific, it’s about everything that they can possibly fit in. Whatever content you are looking for you will have to search hard for it. Do you use the portal parts of Yahoo or MSN? Didn’t think so.

There has been a long discussion recently about how badly designed pages work better. Like Andy Rutledge I mostly disagree but I can understand how bad design works for ad-driven sites. Is the point of your pages to make people click ads? Then make them confused, make them think your navigation is the ads, I’m sure it drives your revenue up. If the point of your site is the content on it, stay away from being a portal.

The simplest way of avoiding the portal-look is splitting up your content. Do you have info on both crocodiles and stock numbers? Don’t put them on the same page. Make sure only the people interested in stocks get the stock info. Anyone else will just see them as “something I am not looking for”. If you have lots of info from diverse fields, perhaps a directory is a better bet?

Use <label> for form elements

Bad form elements are one of the most annoying things on the web. Worst are those tiny little checkboxes you need to check to specify if you like to get spammed or not. They are simply too small. There is an easy solution though, that everyone should be aware of: the label element. What it does is associate some text with the checkbox. The browsers use this information by making a click on the text check the box. Note: this also works for radio buttons. Here’s the markup you need:

HTML:
<form action="">
   <input type="checkbox" checked="checked" id="send_spam">
   <label for="send_spam">Send me all your "newsletters"</label>
</form>

CSS: [Update: This does not work in Safari, might confuse people.]
label { cursor: pointer; }

There’s a lot more to learn about how to make your forms usable and accessible. Just head over to the Web standards project’s Accessible forms tutorial (don’t miss the intermediate one either).

Make it interesting

You have a few seconds to get you visitor hooked to your site. In that time the user needs to understand he’s on the right track. “Ah, this site seems to be about web development” is what I want my users to feel when they enter Friendly Bit. Therefore almost all my pages have a little info box that tells the visitors just that. To just put this info on your front page isn’t enough, search engines or other external links can make them enter deeper into your site. Please put this little info-box somewhere on all of your sites. It’s one of the best ways for me to see I’m where I want to be.

To actually get your content interesting you need to work on your writing. My best tip is to follow the points Liz Strauss summed up nicely in her post about what a reader wants.

Read through your text over and over again, out loud if you need to. Pay attention to typography, don’t make your paragraphs too long and use headers extensively.

Conclusion

These are just some of the tricks I find myself using on my sites. I’m sure this site does not follow all of them perfectly but that doesn’t stop me from telling you about them, does it? Pick and choose as you like, but try to reach make you visitors feel that “it just works”-feeling.

Do you have any tricks you can share?

The article consists of 20 points that a pro should know. Here are the points I found errors in:

Stylesheets: importing vs linking (point 3)

The point is that importing is better than linking since many older browsers will not apply the CSS then. This is correct but they also go as far as suggesting developers to add a separate stylesheet for Netscape 4 (NS4). As someone that has experimented with NS4 I can say that its CSS support is bad. Really bad. Considering the near zero percent of NS4 users I would strongly advise against fixing your site for it. That is of course, unless your site logs suggests you have a lot of users with that (old) browser.

There’s also a code error here, simple.css is included twice, and the second @import reference should probably be advanced.css. Not a big error but might confuse someone.

Smarter gradient backgrounds (point 4)

Again a good point. CSS can be used to repeat background images on any element, not just body. This means you can save on file size by replacing big images with smaller ones. The article then suggests using 1 pixel wide images which is something old versions of IE has problems with. A lot of repetitions can easily get the browser very slow so my best bet would be to make them at least 5 pixels wide.

In the code you would be better off using shorthand notation (I know, this is not a big deal). To add an extra pedagogic twist something else than body could have been used:

form { background: white url(background.png) repeat-x; }

IE Box Model Hack (point 8)

A lot of confusion here. Internet Explorer 5 (IE5) uses another box model than the modern browsers. The padding and border are not added to the outside of a specified width, but instead included in it. This means that if you specify a 500 pixel wide box and add a 10 pixel border to it, it will still be 500 pixels wide. Some say that this is a better way of calculating widths but that’s missing the point. The point is that according to the W3C box model the padding should be added outside of the width.

This problem does not appear in Internet Explorer 6 (IE6) if you include a proper Doctype.

So IE5 is broken, should you care? Again, check your logs if people still use the ancient IE5. My guess is that they don’t which saves you a lot of work. There’s probably no need for this hack.

Also, the Box model hack is Tantek’s hack using the voice-family property to add a “}” to your CSS. It’s really ugly. The article uses the same name for another solution to the problem: wrapping the offending element in another element and moving the padding to that box. That’s a much cleaner way of fixing the problem.

Space saver (point 9)

Don’t use inline styles for styling. Try to keep all your styles in the external CSS file. Two more general ways of saving space across browsers are outlined in my cross-browser CSS article (the star-selector and using a premade CSS file that resets browser defaults.

Format fundamentals (point 11)

Good points about image formats. Use 8-bit PNGs instead of GIF, it makes you smaller files.

An addition: JPEGs are generally smaller than 32-bit PNGs but that’s because JPEG removes information in your image to improve compression. Remember that, if you use JPEG.

If you use PNG you need to know that IE has problems showing them in the exact correct color (technical explanation of the PNG color problem). If that matters a lot to you, use another format (remember that all PNGs change color in IE, so images still match each other). Friendly Bit uses PNGs only.

The ‘title’ and ‘alt’ attributes (point 12)

Don’t use the title attribute unless it’s needed to convey what you mean. In the example it does not make sense at all, why repeat the alt text? The main point is still true though, always use the alt attribute and make good use of the title attribute.

Wrapping text around images (point 17)

Come on! Using the align attribute is going against what was just recommended, use of semantic markup (point 14). Alignment is style and should be added through CSS, nothing else. Adding a strict Doctype and validating will generate an error on this kind of ugliness. Use img.typeOfImage { float: left } instead.

That’s it for now, hope you learned something. I just wanted to make sure my readers know more than the .NET readers :)

Typical comment: “Linux is much better than Windows”

On a trendy club in the middle of town you’ll find the next group of people. Some of these also have glasses, but not because they need them, more because it makes them look hip. These people never talk directly with the programmers; a few words could easily ruin their reputation completely. While these people also make a lot of money it’s more spread out over the year. They sometime get a creative period in January and paint images of pink goats that they sell for thousands of dollars, just to get no ideas at all in February and be broke. People from this group should be interesting if you’re in for fame and fortune, passion and flame, but be aware that you might need a couple of partners to switch between depending on their weekly mood. If they get a break in their busy schedule, you should say hello to the designers.

Typical comment: “Did you see those shoes she was wearing? They where teeeeerrible!”

In the third corner, not talking with any of the two groups above, we have a smaller group of people. These started as programmers but didn’t like sitting isolated in basements. They wanted to work more with people and what people wanted. After studying methods for doing that they suddenly stopped thinking about anything else. They quickly made enemies with the designers because of their often pretty creations that made people go “oh, this looks good” instead of using the product right away. People in this group are great at handling people, and are often good company on dates, that is, if you can take their know-it-all attitude. They tend to know everything that matters and love to tell you about it. They get decent salary and tend to stick with partners that stay “useful” (not too pretty) and focus on right things. If you find the most functional way to say hello you should try it with these people, the usability experts.

Typical comment: “Door handles are really quite bad, 60% of users would be better off with something else”

But I’m not here to talk about programmers, designers, or usability experts. I’m here to talk about a fourth group of people. These are the people that all three of the previous actually talk to. Not because they necessarily want to, but because they need it to get things done. These are the people that get frowned upon for being bad programmers, lousy designers, and for knowing too little about usability. Truth is, they still they manage to ship sites that actually work. They tend to be good at coding, but not in the way programmers are used to. While they don’t have the status of designers, they are visible in the same way. They are actually good at explaining their thinking to people around them (often without technical experience), and know who they design for. You’ll have no problems saying hello to the front-end developers.

Typical comment: “Don’t use tables for layout”

So, this fourth group of people have all the good characteristics of the other groups. Just like programmers they are able to have an intellectual conversation with someone. If you like the “nerdyness” that pretty much defines programmers, you’ll sometimes find it with the front-enders too (just try mentioning that you like XHTML). Like designers they do get some of the fame when a site gets successful, since they are the ones pulling the strings and making things work they are quite visible. But unlike designers, these people will not desert you because you used the same t-shirt two days in a row. As a final strike you’ll find that front-enders are good with people, just like the usability experts. They even know about the people that will be using the site and will gladly meet with them if they get the chance.

So front-end developers are simply the best kind of date, so what are you waiting for? Go out there and get one before they run out!

Data layer

The data layer is the most important one and strangely the one most people get confused about. HTML is not the data layer, the content is. The data layer is the raw data that you are presenting, the text, the images, the sound, the video, whatever content you want to serve. For bigger sites the data is often stored in a database or perhaps XML files somewhere and then processed server side every time someone wants to access it.

This layer is also where all websites should start. What content do you have? If the content is bad no pretty design or fancy Web 2.0 technique is going to cater for that. In fact, content together with bad uses of the other layers, might still work!

One last point to make about data is that you should make sure to use the best possible media for representing your content. If it can be text, use text! Don’t use images for text, narrate your podcasts (or at least provide a text-summary), put your videos online with descriptions to them. Having that text there helps you convey your point, search engines will find you, your users will be able to skim read while it loads and disabled users will get access to at least some of your content.

Structural layer

The structural layer is where the much misunderstood HTML comes to play. HTML’s job is to take the data it has received from the data layer and add some structure to it. Mark up what parts are headers, make sure lists get the HTML that best describes them, split the page up in the important parts and so on.

HTML also adds some semantics to the data but since it’s quite a limited dictionary we have to work with I believe this is secondary. If you happened to have the kind of data that HTML happens to catch with its elements be sure to use them, if not make sure you at least capture the structure of it.

You know you have done this level right if your site works with nothing but data and structure.

Design layer

The design layer is where you define the looks of your data. Design requires a good basic structure to be useful. On the web you should use CSS for this layer, a language that has been built upon the idea of a solid structure and is remarkably powerful. As you know CSS targets certain elements and then defines their look. Without a solid structure this is not possible.

Good designers often point out that only working with the looks of a site will not accomplish good design. They also work on the structural layer by making sure structurally important content gets the most exposure in the design. This is also strengthens the idea that structure is a layer upon which design works.

Behavioral layer

Behavior is the last layer I’m going to talk about. It’s the one that’s least important; data, structure and design are all more effective in conveying your message. None the less, added behavioral functionality can be powerful if executed properly on top of the other layers.

Javascript is the most used language for adding new behavior to websites. With the whole Web 2.0 and AJAX wave we are experiencing many new sites that adds a behavioral layer without even thinking about it. We should be careful; becoming dependent on the new behavior (the site not working without it) means you will lose many potential visitors, the most important single one being search engines. Behavior should always be added separately and only enhance the experience for those that has it enabled. This is what’s called unobtrusive javascript.

Putting it all together: four tier web development

Putting all these four parts together we get the following:

Is this the same mental model you use? Let me know through comments.

[Update: Threehouse has an image up showing the four layers in the context of javascript connection the layers together.]

We need more information

We need more information. People will argue and say “No, there’s enough junk online already” but I don’t care. More information is a good thing. The web is currently not a good representation of the world at large. The is a million technology weblogs and five about shoemaking. Another million sites about how it’s like to be a teenager today and another five about life as an 80 year old. You know what I’m getting at? We need a wider variety of people on the web, not only people that are just like us.

Another thing to remember is that text only is one facet of information. With today’s bandwidth available we can look at live video from all over the world. We can listen to live radio and music just as easy as we read the web. We then have a look at availability. I’d say that at most one out of 1000 people publishing on the web is using something else than text (This site is no exception). I know that there are people out there that have a video camera, that have a microphone, and know how to put it up on the web. But they don’t.

This lack of variety in information is a real problem. It builds barriers towards people we just don’t know anything about and it fools us surfers to believe the world is smaller than it seems. “No, there can’t be any problems with the Chinese government, we would have heard about it!” or what about “Christianity must be the biggest religion, just look at what people are writing most about”.

There are ways the tackle this problem and the concept of blogging is one of them. It makes it easy to almost anyone, anywhere to just start writing in a few minutes. You can be anonymous, you don’t have to tell the truth, there’s no age check and it doesn’t cost you money. This opens up to real diversity on the web. The technology exists, what we need to do is get people online and make them use it. So tell your friends to pick something they love or hate and blog about it. We need more information.

We need relevant information

The next step, after we have gotten a larger and more diversified web, is to start filtering it. I’m not talking censoring here, I mean filtering in the sense to “filter what you want”. This can be tied to a certain task you want to accomplish or it can be a strong interest of yours that you want to follow. It doesn’t matter which, what matters is that there are ways to easily find relevant information.

There are many ways of determining relevancy on the web and the one most successful is linking. Links are like recommendations; anyone that links to a site is telling their readers a certain site is recommended. It’s relevant for the subject at hand and it contains good information. If you are just looking for random information about something looking at a few links might be enough. For example, if Roger Johansson links to something web related I can be pretty sure it’s good.

For more task oriented queries we need something else. If someone is looking for a plane ticket they will probably not know who the authority in that area is. Google is the search engine that has had the greatest success with solving this problem and the solution is simple. Gather the recommendations for as many sites as possible and reply to queries with what most people recommend. Just think about it, if 100 people recommend FlyPlane and 1000 people AirFlight, who would you go for?

In reality it isn’t that simple, but in essence that’s how search engines work. Something that is important to note is that the system encourages people to write good content. Why is that? Simply because good content gets linked to, and more links means it’s probably more relevant. This way Google and all the others are actively encouraging people to improve the web. Good, isn’t it?

Making information accessible

So, we have lots of information from all over the world and we have the tools to find the most relevant info at any point. The last step is actually delivering the information to our users. This is where web standards come to play.

In the early nineties browser makers raced to get the coolest new features included in their browsers. The result was things like blinking text, different methods of representing “layers” and scrolling text. Web developers had a hard time keeping up with browser differences and often you had to construct two or more separate pages to send people to depending on what browser they used.

The W3C acknowledged this and presented a solution. Instead of browsers trying to find the coolest additions, let a standards organization handle the new additions. Let hundreds of people sit together and discuss new ideas long before they are implemented. When everyone has had a chance to say their meaning and problems has been eliminated you release a document presenting the new features together with implementation details. Now the browser makers can race over who supports the most recommended standards instead, and webmasters can just pick a set of standards that is well supported. One way of doing things instead of many incompatible ones.

Right now, the current recommendation is to use the strict versions of HTML of XHTML for structure, CSS for design and Javascript for behaviour. Using those standards means that your site is accessible by more than just the few browsers you have tested with. Both people and automated crawlers that that are after just your content can easily skip your design. People with old browsers will still be able to view your content, even though they don’t see the design the still get the content.

If you adopt the recommendations I mentioned above you have gotten quite far, but there is more. Accessibility is an area in web development that has gotten far too little exposure. It’s focused on making it easier to people with various disabilities, varying from broken arms and color blindness to dyslexia. Previously people cared about old browsers, it’s time for a shift towards caring about people instead. Read up on accessibility, Mark Pilgrim’s Dive into Accessibilty is a good start.

In summary

I’ve gone over three areas where I believe there is space for improvement on the web.

• More diversified information. Get your friends on the web!
• Better tools for filtering all the information depending on what we need. Build new and better tools for doing this!
• Use web standards and care about accessibility. I try to help in this area with the help of this blog.

Now I’m interested in your comments. What do you think? Are there more areas we need to look into?

Separation of content and design

Separation is the fundamental idea that CSS builds upon. Ten years ago there was only one way to make pages that worked across browsers: you mixed everything in one large file and copied that file if you wanted pages that looked similar. Then Håkon and Bert came up with CSS and things got much easier. Their idea is to make the code easier to maintain by extracting everything that has to do with design, put it in an external file and link to that file when we want a certain look. CSS is all about design and HTML is all about content and structure.

Even though this sounds good in theory there are a lot of cases where it’s hard to determine whether something is design or not. Is the company logo design or content? When you start thinking about those kinds of problems you know you’re on the right track. You can find a couple of examples of the separation I’m talking about on the second page of my beginners guide.

Clearing floats

Floats and clearing is another problem almost everyone has in the beginning. What I like to use when I explain how floats work is the old align-attribute on images. Long time ago, when you only could use HTML for design, and wanted the text to “flow around the image” you used:

<img src="image.jpg" align="right">

The above code is clearly design (placement of the image) so we should use CSS instead of HTML for this.

img#id_of_image { float: right; }

CSS is not restricted to float only images, all elements can be floated. This opens up to both new layout methods and confusion. To place three divisions side by side, just give them a width and float them. You can see a layout based on this in my article about layouts or the 3-column example.

Clear is also important to know of. Setting clear: both; on an element makes it move downwards until it’s below all previous floats. That was how the footer in the above example was made.

Floats and clears are not always easy to understand though. One thing people often ask about is what’s wrong when their container isn’t expanded to contain everything inside it. Eric Meyer excellently explains both that problem and its solution in the article Containing Floats.

Validation is a timesaver

Why is validation so important? Because I just can’t stand you forgetting your alt attributes? Because I think that valid pages are better than non-valid? No and No. It’s because validation finds the simple errors. If I misspell width or some other property a validation will find it. If I nest my tags incorrectly a validation will find it. If I forget to close a quote in a link? A validation will find it. Validation is a great timesaver because it actually finds all the small errors that humans have trouble finding. To make validation even easier I use the Html Validator extension for Firefox. A little icon in the bottom right corner tells me when I have an HTML error. Validation is a great tool, use it.

Accessibility is not about blind users

It could be that I’m trying to explain why someone should add labels to their form. I say something in the lines of:

Me:
“Not having labels hurts your site’s accessibility”

User:
“But I don’t have any blind users on my site!”

Accessibility is about making it easy for as many as possible to access your content. With, often simple, means you can make it much easier for people to access your site. Let me give you some examples or people your can help by thinking about accessibiliy.

The list could continue for a whole article. People from those groups would very much like to see your site and buy your stuff just like anyone else. Read up on the basics of accessiblity, it helps a lot of people. Robert Johansson has written a nice article about how you could evaluate your website’s accessibility.

Some things are harder to do with CSS, that does not mean CSS is a bad language

People that are switching from tables to CSS often complain about what a bad language CSS is for not supporting [insert favourite feature]. I did so too in the beginning. What makes me like the language is all the other powers it gives me. It is not possible to do everything as easily with CSS as it is with tables. But other things are much easier, and some things aren’t even possible with tables. There are good parts and bad parts and to me the good parts greatly outweigh the bad ones.

Equal height columns

The last thing I’m going to talk about in this article is equal height columns. The problem is that your have two or three columns of content that stretch down the page. You want the columns to stretch as far as the longest column but the content inside does not expand the columns that far.

This problem is most easily solved by a technique known as faux columns. Add a container to the columns you have and then add a background image to that container. The image will repeat down that page and make it look like your columns take up exactly as much vertical space. I’ve added a faux column example for you to look at.