My tips for web development and web design

After nearly ten years creating web sites and web applications I have learned some lessons. Below are some points I chatted about with friends wondering about going into web development or web design and who asked me for some advice…

1) Be organized

Like any project, you need to be prepared before starting coding or designing anything. For me it is important to know and understand what is the role of a website we are about to build.
a. What are the functionalities expected?
b. Who is going to use this website, what can they do, are there some different role?
c. How will this website be marketed (think SEO)?
Essentially, knowing the functionalities is important to create your OOP modelization and your database structure. Knowing the type of visitors expected allows you to build the credibility of your website and to select the appropriate group to make some usability test. Finally, knowing how the website will be market is clearly a point that needs to be address while thinking about the web structure.

2) User Experiences: Do not reinvent the wheel

There are a few points you must not neglect during a conception, sometimes you will scratch your head to offer the best experience to the users but often a lot of people have scratched their head before… Using ‘Design Pattern’ will help you find nice solution, you do not have necessarily to respect it totally but it gives a good starting point to cogitate 🙂

Here are two links you may want to see about this:
Welie : http://www.welie.com/patterns/index.php
Yahoo!: http://developer.yahoo.com/ypatterns/

Do not forget about usability and accessibility.
Usability is to create the most simple user interface; there are a lot of books and website on that topic. If you do not have a specific budget for usability, simply ask your friends and family to do some tasks on your website model (paper is ok), see how long it takes, if they failed, where frustrated and so one. Solve those points. Also while designing the web site, think about the iconography: what does this icon mean to everybody?
Accessibility is to allow people with handicap to access your web site. For example think about screen reader for people with vision handicap, think about the color, the size of fonts…
Here is a list of resources about usability.

3) Framework and technology

The choice of framework and technology depend on your budget, the type of visitors you focus on and the time you have. There are a lot of frameworks for nearly all languages, selecting yours is really important and you should stick to your choice once done. I would strongly advice to use only one framework for each language you will use but it is not always possible but at least try to keep things separated.
To decide yourself, you might wonder if it has the all the feature you needs, if it will last (not a beta framework, is there community support, what is its size and if it is cross-browser…

Below are my two favorite’s frameworks:
CSS: http://code.google.com/p/blueprintcss/
Javascript: http://jquery.com/

4) Take the time to write clean code

Web browser and HTML allow a lot of errors but you shouldn’t allow yourself to use it.
Ban CSS hack from your mind and use conditional comments instead.

Find some information here : http://www.quirksmode.org/css/condcom.html
Here is a CSS validator: http://jigsaw.w3.org/css-validator/

Also stop using HTML 4.0, please jump over to XHTML and validate your pages.
Validate your pages here: http://validator.w3.org/

If you are using a server side language, try to apply OOP paradigm with it (even if you use php). For example, think that the name of your application will certainly be written more than once, so save it in a variable and call it when necessary. So if the marketing team asks you to modify the name, you just have to modify the variable once. Generally speaking, if you need to write something more than once saves it somewhere (it’s longer at the beginning but at the end you will be happy to be able to spend more time for other project).

5) Do not lose the time of your visitors

The first thing visitors do on your page is waiting the page to be downloaded…
There are a few things you can do to prevent a long loading time. Here are my way of doing things but it is not necessarily the common way of doing things…

For example some people advice to have one CSS file for a website, I prefer to split my CSS to pages. I usually have one CSS for the website structure, one for the general design and finally one for every pages that need a special layout. For Javascript files, I load only one .js at the end of my page, this one will load all the others .js needed.

For images, try multiple compressions, if you works with Photoshop in the Save for web panel you have a preview of the size of your image. Take the time to make some test to offer the better quality with the lowest file size. Do not use images when you can use CSS.

If you are using Firefox, I strongly advise you to use the YSlow plugin, It will display the load time length and gives tons of advices to reduce the size of your pages.

6) Do not lose your time

Maintaining a web site is not funny at all, there is no creativity you have to live with existing bugs without having the time to solve them and you want to redesign completely this web site 🙂
Whenever you build a web site, never forget that you will most certainly have to do some update or bugs solving. Prepare an error management system, prepare a safe server with a safe copy of your web site, keep all you work in a safe (and accessible) place and never write two times the same classes/functions. We got much better things to do 🙂

7) Help visitors finding you, help them coming back

The web is huge, visitors doesn’t come by chance. They are searching for a service or for information. Attracting visitors is a huge work and depending of the marketing strategy you may have to take different path. I’m a strong believer in the use of blog. For example during my studies I used to do some web site to earn some money, declaring myself a freelancer wouldn’t have helped me finding client, building this blog allowed me to drive much more traffic to my website (around 100x more visitors by day) and to position well myself on some keywords (web technologist Geneva).

Making people coming back is easier (sort of), offer interesting content and people will come back. Do not just create interesting content but contact the people that come to your web site. Offering RSS feeds and/or allowing them to subscribe to a newsletter is a good start. You can also jump in the game of buzz it can offer you a great visibility but this visibility is generally very short in time.

8) Security

The closer you are from the database the higher must be your security. There is multiple level of security, you should ensure that the client-side have functions testing the user input, the server-side must also have function avoiding any injections in your code.
There are some basic things to do about security, be sure to know them (depending on the languages you use).

9) Test, test and test …

As you certainly already know each browser behaves in its own manner. Cross-browser issues are easy to test and with the time you will learn what properties tend to bring bug. Keep in mind that JavaScript and CSS are the most common ‘languages’ that are misinterpreted by browser.
All functions and all interactions should be tested. Also you have to ensure to have proper alert in case of bug. Once your website is open to public you need to be able to react to any bugs easily. Know when a bug happen, where it happen, what made it happen and how often it happens.

10) Keep discovering

The world of development is for curious minded person with the will to solve problems and with a touch of creativity. Being curious is going around on the web and bookmarks pages that you find extraordinary cool. Willing to solve problems is applying the technologies behind those cool pages to your own. Being creative is special to everyone, for me it comes from the time I spend with my wife and my daughters walking around beautiful landscape.