Friendly Bit - Web development blog

Follow the 10 ground rules, or fail on the web

2008-11-20T18:58:16+01:00

When you work with the web, there are a couple of basics you really need to get right. These are things I see people misunderstand over and over again, with a varying degree of failiure as a result. Not only individuals make these mistakes, even really big organizations make them, and suffer as a result. So lets get at it.

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.

Templated User Controls in ASP.NET

2008-11-18T01:28:43+01:00

Good design repeats itself. It works hard to convey a whole, a feeling of consistency. Once you understand a part of such a design, you know your way around all of it. This is often done by repetition, using the same elements, colors, styles, positioning, and so on. This is a good thing.

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:

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).
No HTML in properties that get sent to user-controls
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!

Install MySQL-python on Mac OS X (leopard)

2008-10-31T18:37:18+01:00

What a pain. Getting mysql to work with python is the single most annoying step in getting Django up and running (if you choose MySQL as the database). You see, python requires drivers to be able to talk to MySQL, and you have to compile those yourself. I just devoted several hours last night to help friends do what I did some months ago. This time, I thought I document it right here.

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.

Ten commandments of update services

2008-09-21T23:10:25+02:00

I'm getting increasingly annoyed with update services shipped with popular applications. It's looks like it's getting worse and worse, and I think someone should stand up and say enough is enough.

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:

If your update is web based, let me use any modern browser I want. Don't start by getting me annoyed.
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.
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.
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.
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?
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.
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.
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.
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.
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.

Quick Accessibility Testing

2007-06-24T21:57:53+02:00

A recent project of mine required me to do a quick review of the accessibility level of a site. Nothing serious, just to show what was possible to test and where the site scored right now. I managed to assemble a small list of tools that I believe did a rather good job. This article is a list of those tools, and some tips on how to use them.

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#

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!

What is Web 2.0? Really.

2007-03-10T00:59:52+01:00

Web 2.0 is really hot right now. One of Sweden's biggest newspapers recently wrote a long article on their debate section. They had started linking back to blogs that linked to them, in a little box next to the article. The problem was that they had got into trouble with what blogs to link to. After all, you can't just link to anything, right?

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 organizers 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 clarification 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#

Many companies still view the web as a one-way medium, an extension of a paper catalog, 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 re-prioritize 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 organize 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)#

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 analyzing 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?

Click here to read this article

2006-10-19T00:25:28+02:00

No matter where you go on the web today you see those little anonymous links: "click here)". You clearly see them, often marked with a different color (links as they are), but you don't immediately see where they go. Instead you need to read the text before, no wait, after, Oh! That's a nice image up there? Hmm… What was I looking for again?

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?

Judging the technical quality of a site

2006-10-01T00:28:08+02:00

When you look at a website to determine its quality on the code level, you need a different set of metrics than you did some years ago. This article is my attempt at specifying what metrics I use. Have a look at them, do they match yours?

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.

Tricks to make your site easier to use

2006-08-01T19:17:40+02:00

There are lots of little tricks you can use to make your sites easy to use. Problem is that they are so obvious, you don’t think of them. This article is an attempt to share some of the ideas that I did think of. I'm sure I missed some; feel free to add your own tricks in the comments.

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:

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

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?

Correcting the 20 pro tips (.NET magazine)

2006-07-26T05:01:06+02:00

.NET magazine is a fairly big web development magazine. I've recently been referenced to its articles from many separate places, and often found the articles to be of good quality. The last one, called 20 pro tips, was not too good though, so I'm going to go through and correct it. I'm not trying to attack the magazine here (remember "friendly" in the URL), I just want people to know these things.

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 instead.

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

Why you should date a front-end developer

2006-07-22T13:01:31+02:00

You've heard all those rumours of how nerdy looking people in glasses obsess over numbers they call things like "pie" or "eee". You heard they dress up like aliens and go to big… ehm… seminars, where people sleep in sleeping bags and only eat bad food. Then you have the other side of it, in a couple of years they will have well-paid jobs at some major technological company. They also don't switch partners easily, if they find someone they like they stick to him/her for, like, forever. You might also be able to hold an intellectual conversation with someone from this group, just try to stay away from tech-talk, you don't want get hurt. If you are able to get their eyes off the screen, say hello to the programmers.

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!

Concept: Four layers of web development

2006-06-03T18:45:07+02:00

When thinking about web development on the client side, I tend to think of four different layers. Any (well built) framework will cater for all of these layers and all good developers will be aware of them. The layers I'm thinking about are: Data, Structure, Design, and Behavior. This article discusses all four of those and explains how they relate.

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.

Improving the web; Blogging, Google and Web standards

2006-05-20T00:12:31+02:00

The web has really changed the way we do things. Remember those paper timetables? No need for them anymore, we simply type in our destination on a box and get a step by step guide for what to do. Finding recipies? No need to look through books any more, just type in a few ingredients on your favourite food site. The examples are countless but there is no time for us to sit back and relax just yet. The web can be improved. We can get more people to publish their stuff online, we can get better tools for finding relevant info, and we can make the information accessible to more people. In this article I'm going to talk a little about each of those three points.

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?

What beginners ask for (and what I tell them)

2006-03-27T22:22:07+02:00

Being in an IRC help channel lets you meet a lot of people. Many are fresh beginners that just wrote their first lines of CSS and stumbled over something they found strange. When you look at their questions from a perspective you quickly find that many of them are repeated and come back over and over again. This article is an attempt to list a few of the important concepts that people seem to have trouble with.

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 in 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="/files/post-media/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.

User	How you can help
Partly color blind	Don't use only color to convey information
People unable to use a mouse. Either because of some physical disability or simply that they are linux hackers and dislike it.	Make sure keyboard navigation works as intended
Young users or users with another native language than yours	Don't overcomplicate your text
People with a slow connection	Mind the size of your site

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.

Building a poker template

2006-01-23T03:31:06+01:00

This is the first article in a series of niche templates I'm building. You can have a look at the finished template before we start if you want.

About the niche#

Today's topic is Poker sites. Poker, and card games overall, are hot these days and they are all over news. There are TV commercials for big international gambling sites even here in Sweden. Being in that kind of spotlight and receiving massive traffic must make those sites better than the rest, don't you think? Let's google for "poker" and have a look at the top 10 results (23 Jan 2006).

#	Site name	Doctype	Validation errors	Layout method
1	Pokerroom.com	Transitional	22 errors	Tables
2	Poker.com	Strict	62 errors	CSS
3	Pokerstars.com	None	48 errors	Tables
4	Pokerpages.com	None	336 errors	Tables
5	Pagat.com Poker	None	52 errors*	None
6	Worldpokertour.com	Transitional	56 errors	Tables
7	Pacificpoker.com	None	72 errors	Tables
8	Partypoker.com	Transitional	22 errors*	CSS
9	Paradisepoker.com	Transitional	1 error	CSS
10	Homepoker.com	Broken	146 errors	Tables

*) These sites required that we set a character set manually to even see how many errors there were.

What do we see up there? Poker.com and Paradisepoker.com do pretty well. Poker.com uses Strict doctype which means that their validation is stricter than the others, but 62 errors is still too much. Paradisepoker.com almost validates as Transitional which is a good thing compared to the other sites in the list.

Three sites use CSS for their layouts instead of tables. This is a good thing and they should be commended for it. However, that does not mean that they can't be better. All three with CSS layouts overuse divisions and spans terribly, often making the page a mess without CSS turned on.

Does this guy do nothing more than whine? I hear you ask. Yes I do. What I will do is nothing special; any one of you reading this could have done it yourself. I'm going to build a simple HTML document mimicking the front page of a poker site. If you are planning to build a site like that (or even if you are the developer of one of the sites above), you should definitely keep reading. The idea with all of this is to make it easier for people to follow the standards.

I will only include the front page of the site but it won't be hard to transform it to something simpler later on. Remember the purpose here: to show that it's possible to combine logical markup, valid code and make it look just the way you want it to. We need some kind of content though, so let's start with that.

Plan what features you want#

The features for the template will be my picks of the top10 above. Let's put some time on analyzing what features a decent poker site has.

The purpose of most of the sites seems to be to get people to play on their site. Most have some kind of client that is easily available from the front page and that button is the most important part of the page. Aside from that we need features to build a community around the game. Let's pick a forum as our community builder. Beginners need to have somewhere to learn the basics and everyone might need support from experienced staff sometimes. To build a good community you might also need news of some kind, displaying the largest prizes might give the site more players. Finally, all respectable sites have some info about the company behind it and if the site is big, they have a search. We want to earn some money too so let's add in a little advertisement. Sum this up in a list with descriptions.

Play poker button: One big button telling people to click it.
Beginners guide and support: Show on the front page that you don't need to be a pro to play and provide a quote from a professional player that illustrates this. Link directly into the guide to show experienced users that there might be something there for them too. Add frequently asked questions to this part too. Give users somewhere to turn to if they have problems.
News: Front page should link to a couple of top news and at the bottom have link to a dedicated news-page with more info.
Forum: Users should feel that this is a site with lots of people. Link to the topics in the forum most posted in to show them just that. This site is live and kicking.
Search: Search might be important both if you look for either a poker term or for a feature on the site. Add search for both the forums and the news here and let people decide which of them to search.
About us: Trust is important if you want people to part from their money. Put a picture of the staff online and quote reviews and happy customers (Don't fake this stuff. Never)
Advertisement (Ads): Ads need needs to be marked up as what they are. We want users to click on the ads only if they like the service the advertisers are serving

We now need to transform this to HTML somehow. When you do this yourself, try to think as little about the color, fonts and such as possible. Focus on what content you want to show your users and build the HTML based on that.

On the next page we will get down to business and start coding. You want to see what I'm talking about don't you?

Time has come to go through the list of features and write the code for them. The question which we should keep in mind here is "What content do I have?".

Play poker button#

Ok. We want a poker button. Some people prefer to use

<input type="submit" /> for all kinds of buttons. Those buttons are made for submitting a form though, and that's not what we want here. When you think of it, is this "Play button" any different from a link? I think not. We will make it look like a button with CSS later on. Let's use the HTML of a simple link:

<a href="play-poker.html">Play poker</a>

Advertisement#

All sites cost money to run and getting that money is often done with some kind of advertisement on the site. What kind of ads should we use for this template? Looking at the top10 it seems that images are more common than text so let's use images. Don't forget to let advertisers specify alternate text to their images so you don't have to make something up for the alt attribute.

<h2>Advertisement</h2>
<a href="url_to_advertisers_site.com">
   <img src="/files/post-media/play-roulette-online.png" alt="Advertisement: Play roulette online" />
</a>

Beginners guide#

To get beginners to play on our site we need to at least teach them the basics. How? People don't like manuals and they are often hard to navigate in. The best would be if no manual were needed at all, but let's be realistic, some people will still need help. A good approach is to use questions in natural language to lure people to read the guide. Keep it simple and easy to read. To mark that this is the beginners guide we add a header with that name in. Don't be tempted to use any other header than h2, the h1 will be used for the name of the site and this is a second level header, nothing else. To mark up the questions we use a paragraph of text with links. At the end we add a link to more information. The class "more" there is just a way to say that this paragraph is different from the one above.

<h2>Beginners guide</h2>
If you are a poker beginner you might want to start by reading
<a href="help/rules-of-poker.html">the rules</a>. When you are done with that
you can <a href="#help/register.html">register an account</a> with us. Don't worry,
to join is free of charge and you can even win some money in our
<a href="help/monthly-tournaments.html">monthly tournaments</a>.
More questions are answered in the
<a href="help/frequently-asked-questions.html">frequently asked questions</a> section

News#

People playing poker are probably interested in poker news too. By having news on your site your users don't have to go somewhere else looking for them. This will be a separate section so we should add a header here too, h2 is appropriate. The news items themselves are just items in an unordered list, so let's use the HTML for that, <ul>. End it all with a link to the news page that we wrap it in a classed paragraph like before.

<h2>News</h2>
<ul>
<li>23 feb: <a href="news/highest-prize-ever">Highest Prize Ever paid...</a></li>
<li>5 jan: <a href="news/caught-cheating">Top player caught cheating</a></li>
<li>10 dec: <a href="news/how-to-improve">How to improve your betting</a></li>
<li>1 nov: <a href="news/pokercompany-featured">PokerCompany featured on...</a></li>
<li>30 okt: <a href="news/murkus-baltomi">Murkus Baltomi the new...</a></li>
<li>24 apr: <a href="news/planned-downtime">Planned downtime on Sunday</a></li>
</ul>
We maintain an <a href="#news/">news archive</a> too.

Forum#

The forum posts can be handled much like the news. A header, a simple list, this time ordered by with the most active on top. End it with a now familiar classed paragraph.

<h2>Forum</h2>
<ul>
<li><a href="forum/forum.php?topic=7">Best strategy with one...</a> - 124 repl.</li>
<li><a href="forum/forum.php?topic=572">Anyone know of a store...?</a> - 115 repl.</li>
<li><a href="forum/forum.php?topic=17">What's the name of the...</a> - 89 repl.</li>
<li><a href="forum/forum.php?topic=67">What your biggest pot?</a> - 51 repl.</li>
<li><a href="forum/forum.php?topic=23">There was this guy in...</a> - 49 repl.</li>
<li><a href="forum/forum.php?topic=325">Help me get my...</a> - 36 repl.</li>
</ul>
<a href="#forum/">Our forums</a> are always filled with people to answer your questions.

Search#

The bigger the site gets the more important it becomes to get a site search. A search clearly resembles a form; the user fills in a few values and sends them to the site. A simple textbox for the search query with a submit following it.

Just in case you're not familiar with the modern way to make a good form I'll go through the elements used below briefly.

A <fieldset> groups similar form elements together. For example, if you have two separate fields for first name and last name, you can signal that they are both part of the full name by adding a fieldset around both of them.

Using <legend> we then tell what the meaning of the fieldset is. For the previous example we could use "Full name".

The last "new" tag here is the <label>. It simply shows that there are a relation between the text in front of the button and the input box right next to it. A good thing about this relation is that it enables you to click on the label and have the input selected; something that is particularly useful with small radio buttons. This is what the HTML looks like:

<form action="search.php" method="get">
<fieldset>
  <legend>Site search</legend>
  <label for="phrase">Search: </label>
  <input type="text" id="phrase">
  <input type="submit" value="search">
</fieldset>
</form>

About us#

Everyone wants to know who they're dealing with before they make a purchase of some kind (I believe that's one of the reasons some e-shops have problems, but that's a completely different story). Anyways, it's easy for you to put up an image and some quotes from people that are happy with your services, so do it. The header and "more" paragraph should be familiar by now.

<h2>About us</h2>
PokerCompany has been in the business since 1997 and is...
Want to read <a href="about/">more about us</a>?

On the next page we will take all the pieces of HTML and put them together. It's getting interesting, don't you think?

What a structured document looks like#

We have carefully constructed all the markup for the important parts of the site. Notice that we've said nothing about the look of it yet, we’re strictly dealing with content.

We will first add all a good doctype (strict), character encoding and the other things needed for validation. I will not go over this again, it was described a couple of weeks ago in the beginner's guide. This is just copy and paste, so don't skip this part.

Aside from that we also need to add some "hooks", namely classes and ids, to make it easier to style the document (If you don't know what those two are I recommend you read through the beginners guide before continuing). Good class and id names have something in common: they describe the content. So using "tinyredbar" is a bad name and using "latestnews" is a good one.

The basics, the bits of HTML we constructed above and the hooks, together form a good logical structure to start with. When looking at that page you will notice that it doesn't look pretty. When you view the source of it you will see though - that's what I want to see when I look at the source of your front page. I get all warm when thinking about it; pure, logical, and accessible content. It's now time to position things where we want them.

Apply some fancy CSS#

For me the design part always starts with an image program of some sort (Macromedia Fireworks lately for its ease of use). After a while of fiddling around with images and colors I decided to go for something like this draft (Note that I'm a programmer rather than a designer so don't expect wonders here :).

When you site there with your image in front of you and are on your way to start with the CSS there is one thing you should remember: do the positioning before you do the decoration. The positioning is the hard part and it will get even harder if you start to mix in colors and fonts. Let's all follow what I just said and start with the positioning.

Think of every tag you have on your page as a little box. By enabling borders on all your elements you can get a good idea of what I'm talking about. When deciding how to position these boxes it's always wise to start to look at "the flow" of the document. The flow is what you just saw when you looked at the structure above, content is just stacked on top of each other and most tags occupy the full width. By using some clever combinations of floats, clears and widths/heights it is possible to things to line up like we want.

Positioning the header#

Let's start by looking at the top. There seems to be four boxes here: a company name, company info, statistics, and the play button. The big image to the right can be added as a background, so we'll wait with that one. The first two boxes just need a smaller width to be where we want them (compare with how they where positioned in default flow). The last two ones need to be floated left and given a width (this will place them side by side).

#header h1 {
   height: 65px;
   width: 400px;
}
#header p {
   width: 400px;
}
#header ul {
   float: left;
   width: 130px;
}
#header a {
   display: block;
   height: 84px;
   width: 261px;
}

Next up we will deal with the navigation and search. Start by adding clear: both to the navigation to make sure we are below any floats from earlier in the code. To make the navigation list horizontal we add display: inline; to all list items. We complete the navigation by setting a width on the list and floating it left.

The search box is a bit harder. All that info won't fit in the tiny space we have left so my idea is that we hide the fieldset, legend and label. "Why go through the fuzz of adding them and then hiding?", I hear you shout. Relax. They're there because they help users that surf the site with CSS turned off, people like your rich grandmother (using Netscape 4), blind users (using screen readers) and Google. Visual users still know that the textbox is for searching because of the "Search" on the button afterwards, so we're not hiding important information. Ohh, and the header won't fit our design either so let's hide that too.

#navigation {
   clear: both;
   height: 41px;
   width: 720px;
}
#navigation ul {
   float: left;
   list-style: none;
   width: 400px;
}
#navigation li {
   display: inline;
}
#navigation form {
   float: right;
   width: 250px;
}
#navigation legend, #navigation label, #navigation h2 {
   position: absolute;
   left: -10000px;
   text-indent: -10000px;
   line-height: 0;
}
#navigation fieldset {
   border: none;
}

Positioning the advertisements#

Ahhh, ads, both hated and loved at the same time. Not to include ads on a big site like this would just look strange. Let's position it like we want. First move it down below the navigation by clearing. Then float it right to get it out of the way from the content below.

#adverts {
   clear: both;
   float: right;
}

Positioning the content#

This is going well; the content is next up for positioning. Note that I added a couple of divisions to this part of the HTML when merging. They will come to good use now as holders of the four sections. Each of the boxes is given a specific width and height and gets floated left.

#content div {
   float: left;
   height: 200px;
   width: 240px;
}

Phew, this feels like a whole days work doesn't it? On the last page of this tutorial we will put all positioning together and show an example of how everything looks when decorated. Click next below.

Putting it all together#

Now it's time to take all these small parts of CSS, put them in a CSS-file and apply it on the structure we had before positioned. Can you recognize the different parts from the previous page?

I could bore you to death by explaining every little margin in the decoration step but I won't. Instead I will just show you the prettied up version of the site. You can have a look at the second CSS file used if you want.

Final version of the site

Let's have a look at the same properties we looked at in the beginning of this article:

Site name	Doctype	Validation errors	Layout method
Friendlybit template	Strict	0 errors	CSS

Summary#

I hope this tutorial has showed you that CSS far from rocket science; could you not have done this yourself? The web really needs to be freshened up and made accessible for everyone, and with your help it can. Do your part by telling your friends, by holding a short presentation where you work, and by supporting webmaster you know work like this. Use your imagination, how can you make people understand?

Still here? Ok. If you're uncertain, ask yourself: can you afford to be left behind?

I hope this article gave you some insight to the development of a poker site. This article was the first is a series of articles about niche templates so be sure to check back for more. Any comments?

Cross browser CSS for your site

2006-01-13T00:21:39+01:00

This article will go through some useful cross-browser CSS techniques I use to get my sites to look the same in several modern browsers. It's fairly easy to send out different versions of your site to different browsers. This should be avoided though since it will end up with you having to maintain the site as if it was in fact several. That defeats the whole purpose with standards, why are they even needed if you are adapting to the browsers instead? My opinion is that good cross-browser coding is to find the set of standards that are supported and then use them.

Validate your site#

Validation is a much debated area and many Level 2 bosses doubt that this procedure really helps. It does help though. It ensures that you didn't do any simple spelling errors, things that could be incredibly hard to find manually. A validator also checks for nesting errors (did you put a <div> inside of an anchor?) and other strange things like your character encoding. Information about each of the errors is available as links when they appear, just click on one and you're on your way to learn something new.

Validation is the simplest of my tricks to check. There are validators available for both (X)HTML and CSS. Use them! Any errors that show up on those lists could be a potential cross-browser breaker so if you decide to ignore any of them you should be really sure about what you are doing. There are reasons why each one of all of the errors on the validation page show up, so validate, fix, validate, fix, validate.

Stay in standards mode#

The next trick is not as obvious. Modern browsers have two rendering modes they use to display websites with: Standards mode and Quirks mode. Standards mode is a rendering mode that is made to work according to the W3C specifications as closely as possible and Quirks mode is a bug ridden mode made for older sites. Why have a mode with bugs you ask? It's a way for browser makers to keep their users happy. When you do big changes to your rendering engine a lot of old sites relying on browser bugs will break. Some might think that this is a good thing, why should sites still work when they are poorly coded? If you think like that you have forgot about who the web is for. It's not a place for experts only, it's made for regular users, that is, anyone with a browser. Those people need to see a working site if that's possible.

So a new browser is released with a more standards compliant rendering mode and pages start to break. This is a bad thing for users so browser makers decided to first identify pages that tried to follow the standards, and if they did, switch to the new and improved rendering mode. You will probably see why I recommend standards mode now. All browsers are trying to render things as similar to the specs as possible when in standards mode, while in quirks mode they keep all their old bugs just to help regular users.

So how do the browsers identify who's trying to follow standards and who's not? They use the doctype. If you're not familiar with doctypes, don't worry, they are easy to learn. A doctype is a tag on first line of your site file telling the browser what markup language you will be using. There are basically two doctypes you should select among:

HTML 4.01 Strict (what I recommend)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

XHTML 1.0 Strict (without <?xml ...> on the line before)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Using any of these make sure the browser switches to standards mode and your design not fail because of that. Using a strict doctype means that you will do your best to separate structure from design and the validator will give you errors in those areas. It's very useful. (Worth a small note is that the XHTML Transitional doctype also triggers standards mode, but while using transitional you don't get as many good validation checks so don't use that one anyways.)

There is one last catch one needs to talk about when dealing with doctypes and standards mode - the doctype needs to be the first tag in the document. If you put any HTML comments or strange characters before it IE will go crazy and switch to quirks mode. This has cause many developers countless hours of trying to fix things. Just don't do it!

Remove default styling of elements#

Another cause of many web developers screaming in the night is the default CSS that is applied to elements. If you don't use any CSS at all on your page elements will still have a certain look. Headers will be larger than text paragraphs and blockquotes will have padding. Sizes of text is something that is pretty similar across browsers but something that's not is padding and margins. Let me give you an example: With no styling an <ul> gets a padding in Firefox but a margin in IE. Solution? Set either the margin or padding to zero and set the other one to the indentation you want. You need to somehow remove the default browset styles.

These kinds of problems take up a lot of development time if not handled nicely. "Do definition lists in Opera have padding or margin?". "What about second level headers in IE 6?". Two schools of thought have evolved to handling this. The first one tells you to start by resetting all margins to their defaults at the top of you CSS file. This can easily be done by typing in *, * being a universal selector that applies the same rules to all elements.

Problem solved right? That's where the second school of thought comes in. They argue that too many default margins are reset. Why should we mess with users form fields, rendering them hard to use unless they are set to good values again? Instead you could just reset those elements that have differences, and leave the rest untouched. This is quite a lot of work to get right so Faruk Ate? built a "starting css" template that you can easily include in your head. Personally I prefer the *-method, but try both and decide for yourself.

Browser bugs#

This is the area where CSS gets hard. Even though browser makers work their asses off to follow standards they sometimes don't reach their goals. This leaves us webmasters with bugs that when fixed triggers new bugs, either in the same or another browser. It can easily get real dirty.

One of the worst browsers (that is widely in use) is Microsoft's Internet Explorer, version 6. Some claim they have about 80% of the browser market so it's not a browser you can just ignore. IE was a good browser when it was first released but by today's standards it's certainly not. No other browser caused me more pain while building the design of this page. Its shortcomings get painfully clear when it comes to rendering complex CSS layouts.

How do you handle these bugs then? The easiest (and fastest) way is not solving it yourself but reading up on someone else's solution. "Holly 'n John" have gathered the most frequent bugs on their page Explorer Exposed!. They give you examples of how to detect the bug, how it works and why (sometimes) and most importantly how to solve it. Sometimes the solution is just setting position: relative; or display: inline; on some element and sometimes you have to resort to strange code. The point here is that if your bug is on that page; don't waste time trying to figure it out yourself. Learn that list by heart.

So what do you do if your bug isn't on the list? You start by googling for a solution of course. Googling takes a few minutes compared to the hour you probably need to hunt it down. Don't underestimate this step.

If you don't find it somewhere you need to hunt it down yourself. Do this by making a copy of your page and then removing as much code as you can while keeping the bug. Then find out exactly what line (or lines) of code that causes it and finally try to find another way of doing what triggers it. This is much better than just throwing in hacks, you keep your code maintainable and you learn a lot more useful stuff than if you were throwing in nonsense code from the beginning.

If you for some reason do not manage to solve the bug with the above technique you either rethink what you are doing (not likely) or you go get your arsenal of hacks. Make sure the hacks are valid code. The one I use for IE when nothing else works is the "* html" hack. You use it but writing like this: * html #element. That selector selects all tags that have the child html that have the child #element. But "html" is the topmost element in the hierarchy so nothing is selected, unless IE can choose of course. The code gets applied in IE only. Note that it is perfectly valid CSS, it just doesn't select anything. Remember: hacks are your last resort when nothing else works.

Update 18 Jan: Richard in the comments point out that you can also use conditional comments to serve a certain <style> or <link> to different versions of IE. The "* html"-hack will not work in the comming IE7. Thanks Richard.

I hope you found something useful in this article that you can use when you get cross-browser CSS problems. I have now told you what steps I use, did I miss something? Do you do something differently?

Simple CSS templates

2006-01-07T16:25:48+01:00

The most frequent question in the #CSS channel I'm in is about how you make a 2 column layout. Most beginners seems to have problems understanding how floats work since they are quite different from tables. So I sat down and made some simple layout templates for you. These layouts will all be made with floats since that's the easiest way to do things. I could have set out to use absolute positioning but that can get tricky when it comes to placing the footer. Let's stay with floats.

I'll recap how a floats work. A float is applied by simply setting float: left or float: right on an element in your CSS-file. The element then gets pushed as far to the left or right as possible and the next element will follow to the right (if floated left) or left (if floated right). The closest HTML comparision is the effect you get when setting align="left" on an image. In the beginning it helped me to think of floats like that.

There are basically two ways to make 2 column layouts with floats. Either you float all the columns (float-float) or you float all but the last one (float-margin). The former method makes it easier to work with clearing inside of the second columns though, so if you're going for a complex layout float-float might be better. The latter has the advantage that you don't have to set a width on the last column. It will fill whatever space is availiable. My favourite is still float-margin though, the automatically expanding second column makes sure the the full width is used no matter what.

For the examples below I will use the HTML I outlined in my previous article about CSS basics.

The float-margin method#

Let's start by looking at some examples:

Ok, so how does this work? The first example: The navigation is floated left which means that the next element will follow to the right of it. This sounds right but we are forgetting one thing, what happens if the navigation is very short? Then the text in the right column will continue below the float, probably not what we wanted. So, to fix this we add a margin-left to our content division. Voilà!

The 3 column example is based on the same idea. Here we start by floating the navigation left, floating the first content block right and finally add margins to the second content block. The last block needs to have both a margin-left and a margin-right to stop the text from continuing below the left and right columns. Makes sense? Take a look at the code and I hope it will.

The float-float method#

Another method of doing the same is floating each of the columns left. This means that the columns will show up on the webpage in the same order as you put them in the HTML (that was not the case in the previous example, content1 was to the right and content2 in the middle). Some examples for you:

There isn't much explaination needed here, only thing different from the float-margin method is that you need to set a width on all your columns. You should easily be able to expand this method to kazillion columns :)

That's all, be sure to poke around with the different layouts to get a feel of how they work for you. In my next post I will go through some less static layouts, namely elastic and fluid layout. Comments are availiable for questions.

Update: Added an article on Common questions beginners ask

Beginner’s guide to CSS

2006-01-05T18:11:00+01:00

In the chat channel I'm in, I get to talk to people on a daily basis that have never used CSS before, or are at the very beginning of learning it.. This article teaches all the basics you need to make your first CSS powered website. It is aimed at people that know a little HTML, and maybe have made a few websites themselves. Let's get started.

What is CSS?#

CSS is a language that adds style (colors, images, borders, margins…) to your site. It's really that simple. CSS is not used to put any content on your site, it's just there to take the content you have and make it pretty. First thing you do is link a CSS-file to your HTML document. Do this by adding this line:

<link rel="stylesheet" href="style.css" type="text/css">

The line should be placed in between your <head> tags. If you have several pages you could add the exact same line to all of them and they will all use the same stylesheet, but more about that later. Let's look inside the file "style.css" we just linked to.

h1 {
   font-size: 40px;
   height: 200px;
}
.warning {
   color: red;
   font-weight: bold;
}
#footer {
   background-color: gray;
}

You have three selectors up there, h1, .warning and #footer. A selector simply points to somewhere in your HTML document. It can be built in many ways and can be a combination of the following building blocks:

Element
Class
Id

I'm going to go through all three of them and explain what they do.

An element points at a HTML-tag somewhere on your page. In the example above we want to style the <h1>-tag. Note that using an element like that affects all tags with that name, so using p gives all p-tags a left-margin.

Using a class is just as simple. When writing .your_class you style all tags with a class with the name "your_class". In the example above we have .warning which will style e.g. <div class="warning"> and <em class="warning">, that is, any element with the class warning. Classes are used when you want to style just a few of your tags in a way, perhaps you want some of your links red? Add a class to all those links.

You need one more building block: the id. This time you style an element with the attribute "id" set to the id you have chosen. Ids work exactly like classes except for one thing; you can only have one id with a certain name in each of your HTML documents. In the example above we style <div id="footer">. If you look at the example it does make sense: a HTML document may contain several warnings but only one footer. Ids should be used when you want to style just one specific tag.

Using those three building blocks will take you far but when you get to more advanced layouts you might want to combine the building blocks into more advanced selectors. Just to give you two examples of what you can do: em.warning to style only those <em>-tags with the class .warning set. You can also use #footer a to style only the links that are nested inside the tag with id "footer". Pretty nice, isn't it?

I could go on forever about the advanced uses of selectors but this is a beginner tutorial so I won't. If you want all the finer details, go have a look at the excellent Maxdesigns Selectutorial.

Let's go on explaining the code above. Each of the selectors has a set of declarations tied to them. Each declaration has a property, describing what we want to change and a value, what we should change it to. Too many terms there? Are you still with me? Let me explain with an example: a. You have the selector a there, so all links in your document will be styled. We have two declarations: color: Blue and font-size: 3em;. Lastly each declaration consists of two parts: the property color and the value Blue. Phew! Well done for making it this far. The terms above are good to know since it gives you a way to talk about your CSS. If you join a CSS-channel asking for help with your code and they tell you "You have an error in your a-selector in the second declaration" you know exactly where! Right? :)

Now you will probably ask what properties there are. You have seen font-size and color but what else is there? The answer is that there are a LOT of things you can style and play with. Additionally (close to) all tags are equal in CSS, so you can set e.g. borders and colors of any element just like you could with a table if you used only HTML. Starting to see the possibilities?

I won't go through all the properties here, it would just bore you to death. Instead I'll point you to another great resource: w3schools section about CSS. Just select one of the menu options to the left to start exploring what CSS can do.

But don't you leave me all alone here, there is more to learn! Next we will talk about good and bad coding and there will be a lot of colorful examples for you. Sounds good?

CSS is all about separation#

One of the least followed parts of CSS is the very idea behind it, the idea of separation of content and design. The idea here is that all sites contain two major parts, the content: all your articles, text and photos and the design: rounded corners, colors and effects. Usually those two are made in different parts of a webpage's lifetime. The design is determined at the beginning and then you start filling it with content and keep the design fixed. So if you just want to add content to your site you don't want to be forced to mess around with the design, do you? The same thing is true the other way around, if you decide on a redesign, why should you have to mess around with the content, making sure it fits in the new layout?

In CSS you just add the nifty <link>-tag I've told you about to the head of your HTML document and you have created a link to your design. In the HTML document you put content only, and that link of yours makes sure it looks right. You can also use the exact same link on many of your pages, giving them all of them the same design. You want to add content? Just write a plain HTML document and think about marking things up like "header" instead of "big blue header" and use CSS to make all headers look the way you want!

This is a different way of thinking about webpages, and it's something that took a while for me to understand. To help you I have written some examples of good and bad coding. What's wrong with this?

<font size="3">Welcome to my page</font>

Comment: The font-tag is design and design shouldn't be in the HTML document. All design should be in the CSS-file! Instead do this:

In the HTML:

<h1>Welcome to my page</h1>

In the CSS:

h1 { font-size: 2em; }

One more example:

<b>An error occurred</b>

Comment: This looks right doesn't it? But if you look up what <b> stands for you quickly find bold. But bold is certainly design, so it still doesn't belong in the HTML document. A better choice is <em> that stands for emphasis or simply "this piece of text is important". So instead of saying "this text looks like this" you are saying "this text is important" and you let the looks be decided by the CSS. Seems like a minor change, but it illustrates how to select your tags. Use this instead:

In the HTML:

<em>An error occured</em>

In the CSS:

em {
   font-weight: bold;
   color: Red;
}

One last example:

<table>
  <tr>
    <td><a href="">first link</a></td>
  </tr>
  <tr>
    <td><a href="">second link</a></td>
  </tr>
  ...
</table>

Comment: Lots of people format their navigation menu like the above example. But is a navigation menu really a table? If you look up the definition of a table you see that it's made for tabular data, the same kind of data you would put in an Excel sheet. The example has only one column of data, and no headers… Some people state that they use tables because that means that they can get borders and a background color on their navigation, but that's exactly what your CSS file is for (not the HTML document). So what should we do? Look deep in the list of HTML elements at w3schools and you'll find something called an unordered list, <ul>. Have a look at this:

In the HTML:

<ul>
  <li><a href="">first link</a></li>
  <li><a href="">second link</a></li>
  ...
</ul>

In the CSS:

li {
   border: 1px solid;
}

This is probably a different way of thinking about HTML than you're used to but trust me, when you've worked with it for a while you'll see the power of it. Not only does this way of coding give you a more logical structure, there is also proof that this improves your ranking in search engines and makes it easier for accessibility devices to read your site. This way of designing is great.

Next we will build a simple HTML template to use as a start when building a new page. Like to see it?

Building a standards based HTML template#

We have talked a lot about the theory behind CSS and HTML working together to form a site with good structure that is separated from the design. But the first parts of building pages are always the same, you type

<!doctype html>
<html>
  <body>
    <div id="header">
       <!-- Header here! -->
    </div>
    <div id="navigation">
      <!-- Navigaiton here! -->
    </div>
    <div id="content">
      <!-- Content here -->
    </div>
  </body>
</html>

Ok, there might be some new stuff there so let's go through the lines one by one. First we state this document's doctype: what language we use. You might have heard of XHTML, another similar web language, but for a first page we don't need the features that gives us access to, keep it simple, just go with HTML. Also, the <!doctype html> above sets the document to use Strict HTML. To understand that you need to know that there are two kinds of rendering in a browser. One that follows the standards set up by the W3C, "standards mode", and one for older pages, called "quirks mode". Standards mode is what we want to use. It makes the pages render (almost) the same in modern browsers and it frees us from being dependent on a specific browser, we'll just follow the standard. Quirks mode is something of a bug mode. It's there to keep old pages looking the same as they did before browsers started trying to follow the standards and is therefore intentionally filled with strange bugs. A browser determines which rendering mode to use based on what doctype we use, so make sure you use the right one!

Ok. That's a lot of explaining for a single line of code, I'll be swifter now, next line. You have probably written <html> before in the beginning of your documents. My line is almost like that except that I have added lang="en" there. That line tells the browser which language we will use. Why does it matter what language we use? you ask… Well, there is assistive technology that read webpages to people out loud called screen readers. Those have to know what language it is to be able to pronounce the words. It's so easy for you to add those few characters so why not do it? If you don't plan on making an English page you can find your own language code by visiting WAIs Language Codes and check out the two-letter names there (Note: language codes are in lowercase).

Next we have the head of the document. The head contains a some of meta-information about the page, like character encoding, title and what stylesheet (CSS file) to use. The charset there is the trickiest one so let's take that first. There are a lot of different letters in a language. When computers where first constructed the engineers only thought about the American/English language, they didn't even think about the swedish letters å, ä, ö or the deutsch umlaut ü or what about the &-sign? There are a lot of characters and at first there was no general consensus on how to handle them. Then someone came up with the smart idea of grouping them into sets, groups of characters that are used in certain parts of the world. So, what the meta-tag does is simply to state: "This person wants to input western characters (latin-1 characters)", and this tells the browser what character set to use. A more genaral approach is to use the utf-8 character set but that quickly gets tricky. Finally we have a text/html there that simply tells the server to send the document as a HTML, not like an image or something like that. The <title> and <link> you should be familiar with, if not, google it :)

That was a lot of info on just a few lines of code, I hope I didn't give the impression that this stuff is hard, because it's not. To use the stuff above you just copy and paste it and start filling it with content.

The body of the document consists of a bunch of divisions, let's add some content to them:

...
<div id="header">
  <h1>The name of this page</h1>
</div>
<div id="navigation">
  <h2>Navigation</h2>
  <ul>
  <li><a href="first.html">First</a></li>
  <li><a href="second.html">Second</a></li>
  <li><a href="third.html">Third</a></li>
  </ul>
</div>
<div id="content">
  <h2>Content</h2>
  Some sample content, add your own here
</div>
<div id="footer">
  This page is written by [Your name] and builds on a <a href="http://friendlybit.com">Friendlybit template</a>.
</div>
...

What have we done here? First you should note that a quick overview of the document tells you quite much about the content. You can easily see that some stuff are headers (h1, h2) and some are just a list of links (ul, li, a). Let's go through the code quickly:

First we have a header. A header is something that's most often a big image and some text. Some pages don't have the header in the HTML at all, they just link to an image and have the text in that image. Problem with that is that neither search engines nor screen readers can get the title text. With the title text being the most important piece of description a visitor has to what page they have come to, you do have a problem. So trust me, keep that text there.

Next up we have the navigation. Navigation should almost always be marked up as an unordered list of links. I've seen the strangest variants of this with tables, nested tables, ``-tags after each line and so on but the only content there is a list of links, why make it something it isn't? Using a list doesn't mean it will have to look a certain way, remember that all design is handled in the CSS later on, this is just HTML we are dealing with here. Note: you can easily remove the bullet marks with list-style: none;, that's not a reason to use some other HTML.

The most important part of your HTML document is the content. This is the reason people will visit your page and this is where you should put most of your effort. Mark your headers with appropriate header-tags and make sure they look different from the ordinary text, this makes it easier quickly get a grip of what you're are trying to say. Use paragraph tags around your paragraphs to make is easier to style your text. The CSS text-indent: 2em; adds some space before only the first word in each paragraph, just to name one simple thing you can do with CSS when you've used good markup.

Lastly, it could be a good idea to add a footer to your page. Make sure you have some kind of contact information here or somewhere else on your site, who knows what people will want to ask you? If you want to help me you could add a link to this site somewhere on your site too. If you do, thanks alot!

On the next (and last) page of this short beginners guide we will wrap everything up and add some sample CSS to the mix. All is free for you to copy and use on your page. Ready?

Full HTML template and sample CSS#

Let's start by putting the two pieces of HTML I showed you together and combine it with some sample CSS: Sample HTML + CSS. You can find all code that makes that page below. Feel free to copy the code below and experiment on your own.

<!doctype html>
<html lang="en">
  <body>
    <div id="header">
      <h1>The name of this page</h1>
    </div>
    <div id="navigation">
      <h2>Navigation</h2>
      <ul>
        <li><a href="first.html">First</a></li>
        <li><a href="second.html">Second</a></li>
        <li><a href="third.html">Third</a></li>
      </ul>
    </div>
    <div id="content">
      <h2>Content</h2>
      Some sample content, add your own here
    </div>
    <div id="footer">
      This page is written by [Your name] and builds on a <a href="http://friendlybit.com">Friendlybit template</a>.
    </div>
  </body>
</html>

You should be able to tell what each part of the HTML does by now. Let's instead have a look at some sample CSS for the structure we have above. If you want to experiment with this code you can copy it to a file named style.css (or any other filename you reference in the <link>-tag in the HTML) and place it in the same directory as the HTML document.

body {
	background-color: Green;
}
div {
	border: 3px solid Black;
	padding: 7px;
	width: 600px;
}
h1, h2, h3, h4, h5, h6 {
	margin: 0;
}
#navigation {
	float: left;
	width: 150px;
}
#content {
	float: left;
	width: 430px;
}
#footer {
	clear: both;
}

Let's go through the six rules above. First we set the background-color of body, and body is the background of everything, so this will do the same as bgcolor did in HTML.

Next we set some styles on all divisions on the page. We have four of them and with this single rule we affect them all. First we set a black border to be 3 pixels wide (note that there is no space between number and unit in CSS). We then set a padding (the space between the border and content) to be 7 pixels and lastly we set the width of all divs to 600 pixels (note that margins, borders and padding are not included in the width).

The third rule selects all headers on the page and removes the margins (the space between the border and other nearby elements) from them. The commas are used between the elements to apply the same CSS to all of them.

Next we have some specific rules for three of the divisions. We position the navigation to the left of the content. This is done by using floats, a way to put things side by side. If you have used the align-attribute on images in HTML you will know how floats work, they move the element as far to the left as possible and then let the next element follow right next to it. If you want to put something below a float you need to clear it. Clearing moves the element down until it's below any floats, exactly where we want the footer. So both navigation and content are floated and given a width to match the 600 pixels wide header, and the footer is cleared.

Update: I have added some simple layouts for you to look at, and a list of tools I use when developing. Hope they help all of you out there that learn by examples.

Now it's your turn, you will learn CSS by using it and trying out how things work. So go ahead and play with the sample above. Thanks for reading, and good luck!

Any ideas of how this guide could be improved? Just leave a comment to the right.

Friendly Bit - Web development blog

Follow the 10 ground rules, or fail on the web

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

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

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

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

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

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

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

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

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

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

Where to now?#

Templated User Controls in ASP.NET

Install MySQL-python on Mac OS X (leopard)

How to install MySQL-python on Mac OS X#

Ten commandments of update services

Adobe Update#

Google Update#

Microsoft update#

Ten Commandments of Update Services#

Quick Accessibility Testing

Automatic testing#

Semi-automatic testing#

Manual testing#

What is Web 2.0? Really.

The hunt for a definition#

Ideas that are part of Web 2.0#

User generated Content#

Radical trust#

Syndication of content and services#

Long tail#

Collective intelligence#

Techniques involved in Web 2.0#

AJAX (and other javascript)#

Feeds (RSS, Atom)#

Tags#

Summary#

Click here to read this article

Judging the technical quality of a site

Tricks to make your site easier to use

Separate the interaction layer#

Split up your content#

Use <label> for form elements#

Make it interesting#

Conclusion#

Correcting the 20 pro tips (.NET magazine)

Stylesheets: importing vs linking (point 3)#

Smarter gradient backgrounds (point 4)#

IE Box Model Hack (point 8)#

Space saver (point 9)#

Format fundamentals (point 11)#

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

Wrapping text around images (point 17)#

Why you should date a front-end developer

Concept: Four layers of web development

Data layer#

Structural layer#

Design layer#

Behavioral layer#

Putting it all together: four tier web development#

Improving the web; Blogging, Google and Web standards

We need more information#

We need relevant information#

Making information accessible#

In summary#

What beginners ask for (and what I tell them)

Separation of content and design#

Clearing floats#

Validation is a timesaver#

Accessibility is not about blind users#

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

Equal height columns#

Building a poker template

About the niche#

Plan what features you want#

Play poker button#

Advertisement#

Beginners guide#

News#

Use `<label>` for form elements#