stories on how a website is being built

Building a web application is a simple enough job. There are many frameworks and tools that make your job easy. At the same time, truth to be told, building a website the right way is hard too.

There are some nice things to know before you build a public website so when you build it, it is good enough to be public and well, you will spend less time working around browser compatibility issues.

I learned some of these lessons the hard way, and hope you can learn from my experiences rather than make these mistakes yourself. So here we go…

1. Make the website work correctly in FireFox/chrome and then make it work in IE.

Whenever I read articles related to web development, I see that people are very much pissed off at Internet Explorer (and rightfully so). Apparently in IE it is so hard to get things right. But my experience was the exact opposite. I had trouble in making stuff work in other browsers! The problem was that I was testing on IE rather than in FireFox. When I make a website look and work correctly in IE, it won’t work in other browsers, the main reason being IE not adhering to the standards.

So my development cycle went like:

1. Build the site for IE.
2. Make it work in other browsers (thereby breaking it in IE).
3. Go back and fix the site to work in IE again!
4. Repeat as necessary.

To get around the problem, first develop for FireFox/chrome and then go for making it compatible with IE.  I wasted many weeks before I learned this lesson.

2. Use the proper doctype declaration.

A proper doctype declaration is the first piece of code that ought to be present in your web pages. A lot of browser quirks can be avoided if you are using proper doctype declaration. The doctype declaration tells the browser:

“This is how I expect how you behave. Please render stuff according to this specification”

Browsers usually behave in completely different ways when you give it a document which does not have a proper doctype attached to it. When you attach a proper doctype, browsers start rendering the pages almost the same!

Novice (and frequently even experienced) web developers have a misconception that doctype declarations are just for some cool w3c conformance and that does not affect them in any way. They think that they can get the website done without these difficult to use doctype stuff. Of course you can get the website done without doctype declarations, but then you will be wasting weeks or months correcting your website to work in different browsers and a big part of that time could have been saved if you just cared enough to use proper doctypes in your pages.

OK. So what doctype declaration should I use in my website?

Including a doctype in your website is super easy! Read this article from A List Apart to get an idea about what doctypes you can use. If you are using some templating system or common header for your website, you can declare the doctype in the header once and forget it!

3. Use JQuery

In the programming QA website StackOverflow it is a running joke that the answer to any JavaScript related question is: “Use JQuery”.

Why should I use JQuery?

…because the creators of JQuery have done the hard work for you so that you can concentrate on writing the code specific to your application logic rather than writing code specific to each web browser and then testing it.

I am a JavaScript Ninja! I can write my own code.

Of course you can, but your brilliance is not to be shown in writing some JavaScript code to get around browser incompatibilities. Save your skills for writing the actual app rather than solving problems somebody else already solved for you.

4. Test the website in a wide variety of displays

“It looks awesome in my laptop!”

Yeah. But view in some other displays with varying colour profiles and screen resolutions.

Does it work on every display configuration? Is the text readable? What happens when the website is viewed in very large screens?

You will start noticing a whole lot of ways in which your website is broken. If you don’t test it this way, a large portion of your potential visitors will just go away from your hands, without you even noticing it.

5. Plan for pretty URLS

To put it simply, instead of a URL like:

www.voidy.com/profile.php?user_id=3123

it is always better to use something like:

http://www.voidy.com/profile/niyazpk/

It is not that difficult to set up. Configuring pretty URLs can be done in your .htaccess file if you are using Apache and usually it will just run above 10 lines of URL rewrite rules.

Planning to use pretty URLs upfront, before you actually start designing the web app will help you from rewriting the parts of the application later.

6. Bonus Tip – Bookmark the following page:

What should a developer know before building a public web site?

It is the single most important page a web developer should ever visit.

That’s all for now. Keep rocking!