Tips on Web Developing and Designing

For three years, I have done a lot of web site application and most of them are corporate sites. So I thought of sharing some of the things I have learned from my work. Let's start by differentiating the term web designer and web developer. It should be clear that this two jobs are related to each other but not similar.

Web Designer vs. Web Developers

Web designer usually handles the front-end of the site. They are the ones who are concerned with the user interface (UI) of the website, basically they are the artistic people who knows the tricks and techniques of CSS and scripting that they can use on the browser wars.

On the other hand, web developers are the ones assigned to the back end of the site and doing the logic behind. They are the ones who used their brain cells on making the site work and as well as protect sites from invaders (technically called spams and other bots that tries to harm the site).


Sharing Knowledge

So being a developer (and a designer sometimes) I have learned a lot of important things about web site creation, the basic of web developing and designing, some of this are used to enhance the loading speed of sites, here are some of them:

1) First screen without scrolling is important (aka 'Above the Fold' )

Basically this defines the first impression a visitor sees everytime they see your site. It is a rule of thumb that they should know all the information about your site without scrolling down. The upper part should always explain or at least give a brief description on what to expect on your site. Avoid too large banners that almost occupy half of the screen. Put all menu and navigation on the upper part of the site and make sure it is visible enough for the users to see. Place all non-important things below or on other pages. Do not place them on the top unless you want it to be seen intentionally.

Thanks Harrison for the term 'Above the Fold'. :)

2) External Files

This applies to all your scripts and styles. It is advisable to use external files instead of placing them inside your HTML (or whatever you are using) to customize your site. Why? Usually this is used to boost the speed of the sites. External scripts are saved on cache and so the next time you visit the said site it would be faster than the first time.

Now what if you're using blogger for your site host, well you can use other third party services to generate external scripts that you can call anytime.

3) Know your image well

Portable Network Graphics or PNG are the most common image type being used on web sites. It is because the said type supports transparency and is more convenient to use because it is smaller than using Graphic Interchange Format or GIF.

But upon using this, make sure that you know the consequence of this. There is actually an issue about PNG's transparency on Internet Explorer. Reports said that the previous version of IE doesn't support the filter that fixes this issue. There are lot of tutorials on the net that solve this issue, some of them uses CSS while others use javascript. As a developer, I don't recommend javascript solutions since these can be disabled on browsers. For CSS here is the porperty to add to resolve the issue:

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(...);

See this report on how to properly use it.

4) Flash are good but is not advisable at all times

So you want to add flash on your site? Think twice. It is now very common that you'll receive visitors who are using mobile browsers to surf the net. Most of this mobile browsers doesn't suppport such file types and thus will just ruin your site on the said browsers

Another problem is that flash, which is commonly on SWF format, have issues on web designing. These files always comes to the top part of your site (foreground). So even if you use your z-index property knowledge, it won't go on the background of your other items. To resolve this you can always use the wmode property of flash files when you are trying to embed them.

5) Make sure that your site is readable

Most of the time, this is the issue I'm getting. People are always telling me that the fonts are too small or too big. Actually there are no rules on using font-size. The issue arises depending on the audience you are trying to target. Usually you can use larger fonts for older people, on the other hand, I usually use 12 to 14 px for corporate sites.

Font-styles are also important to consider. Make sure that they are READABLE. Don't use Monotype Corsiva or Wingdings. Most of the time Arial, Times New Roman or Calibri are used for sites, others are just too much for sites and are not advisable. Courier are used for source codes and typewritten type of letters, leave it to those kind of blocks and never use them on your site.

Know how to use bold and italic letters, avoid using them regularly and never (as in never) use them as a default font for your site.

6) Be careful with client-side scripts

Javascripts and JQuery are common on web developing and web designing. But before adding this, make sure that you know the consequence of using this. There are actually some browsers and users that are blocking this scripts for their protection. Make sure you know how to handle this cases especially if these scripts does a lot of important actions on your site.

During this case, noscript tags can be helpful.

7) Anything you post on the web can be stolen

It is a stupid fact that everyone should know. I actually have a client before that wants her files to be protected in a way that no one can download it.. well for me it is stupidity!

As I have said, almost everything you see on your browser are being stored on cache, and how do they do it? the browser downloads it and saves it as temporary files for future use. So that's it! It needs to be downloaded so that it can be shown on the screen. So if there is something you don't want others to see.. Store it on your hard disk, unplugged your computer, place it inside a drum, cover it with cement and bury it. That way no one can steal your files! >:-)

8) Place all scripts below the page

Make sure that the content is always above the unnecessary scripts. The reason why the visitors visit is because they want to see the content of your site. By placing the scripts below, users will be able to see your contents even if the page is still loading.

9) Dress properly

Sites are like a product selling himself or a person attending a party. They need to look good depending on the occassion. Make sure that the colors blend together, unless you're selling "colors" on your site. Usually, 1-3 colors are enough for corporate sites. For kiddy sites, pastel colors work well.

Again, choose your colors right!

10) Make it interactive

It's now the era of Web 2.0, interaction is a must! Visitors needs to interact to your site. Leave reading to books and encyclopedia. Viewers need to be somehow entertained while they are viewing your site. Add things that they can click like social sharing or social bookmarking buttons. If you can't add something like that, at least add some moving objects like animations. Anything that would catch attention so that users can continue reading.


Last and most important of all, though speed is our top priority we always need to make sure that everything works fine, errors are handled well and all unexpected cases are catch nicely (expect the unexpected as they always say). Now, when you are sure that everything works as you want it to be, then it's time to worry for speed. Happy developing! :)