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! :)

24 comments :

  1. This blog is a very good tutorial for me book marked for future use....

    ReplyDelete
  2. I'm glad that you find it useful, thanks!

    btw, I'm glad that you use your real name now.. :)

    ReplyDelete
  3. Thanks... I already re-post it! 

    ReplyDelete
  4. sorry for the late reply, I've been out for a week.. :p

    sure.. it would be my honor to be re-posted on your blog. :)

    ReplyDelete
  5. wow...aj banda, another top 10 post. Would you mind if I re-post it to my blog?

    ReplyDelete
  6. Usually naman iisa lang sila.. pero pag-team mas magandang magkaiba ang designer sa developer, 

    Tulad ko, naiinis ako pagandahin ang site kasi ang hirap na nga ng back-end, tapos ako pa mamomroblema sa front-end di ba.. :p

    ReplyDelete
  7. Julius King Chua9/12/11, 10:44 AM

    minsan napaisip din ako nung binasa ko yung post mo.
    actually, wala pa nga ako sa level ng developer.... kumbaga, designer palang ako...
    marunong ako ng HTML and CSS pero yung beyond those, hmm... outdated ako dyan... :((
    siguro nasa college level pa lang kasi ako...

    ReplyDelete
  8. wow.. I never knew that term.. hahaha.. Thanks for the info Harrison. :)

    ReplyDelete
  9. Hey AJ, these are some great tips from your web designing experience! I have no clue what codes are all about, man seriously, it looks really complicated to me, oh and that top screen without scrolling is called "Above The Fold", hehe I know the term :D

    ReplyDelete
  10. Good luck with studying JQuery. I personally like that JS library, because it is way to cool and nice to use. :)

    I'm having the same dilemma too about my template.. hahaha.. too bad I can't find time to do one for myself :p

    ReplyDelete
  11. I currently studying jQuery and found out that there is a downside in using this scripting like what you mention. I'm really disappointed because I can't apply my PL skills in designing my blog. Nice post!

    ReplyDelete
  12. nyayks! gnyan din ako.nauubusan ng freetime kaya wlang focus.hahahha.

    ReplyDelete
  13. hahaha.. try ko minsan pag nagkaroon ako ng free time.. :)

    ReplyDelete
  14. yup,that's cool AJ.For the script marami sa dynamicdrive pwde mong pag-aralang yun....:)

    ReplyDelete
  15. Glad to know that I'm not the only person who's collecting cool buttons and images.. hahaha 

    I'm actually planning to create my own blogger template soon but I'm still studying the tags that blogger supports... :)

    ReplyDelete
  16. actually, meron ngang script na ginagamit from microsoft (ata) to resolve this. Pero di ko pa na-try since I'm avoiding scripts nga as much as possible lalo na kung di ako ang gumawa.. :)

    ReplyDelete
  17. Actually, na-experience ko rin yan dati sir Jehz. May nagbigay lang sa akin ng script yun nilagay ko sa header part ng blog ko then, ayos na. Madalas  blog header image ang apektado.

    I agree para sa akin mas maganda pag PNG kasi mas flexible...:)

    ReplyDelete
  18. Thanks AJ, I love web designing but I am not really good with CSS and Jquery thing. I want to engage with blog template designing and as of now I begin collecting some cool buttons, scripts, images and useful templates.lol.

    great tips AJ!

    ReplyDelete
  19. I agree that once you are caught up on the programming loop.. it is really hard to sleep.. hahaha.. and right now, I'm on the loop with a bug... and last night I just couldn't sleep again... :))

    ReplyDelete
  20. I only have banged up with programming during my college days but when I started working I just have to look up the codes to test and evaluate them. I am not doing web designing and programming anymore as my work also deal with quality assurance and usability standards. 

    This is such a good refresher, Oh I was once been addicted to programming that led me to insomnia lol. It was really true that once you get into the loop you can't stop thinking till you reach the end code.. haha

    Anyway, this post is such a personalized and full with realistic tips. Thanks for sharing AJ. Absorbed!

    ReplyDelete
  21. agree po ako jan.. kalaban ng mga web developers and designers ang mga lumang IE.. marami pa rin kasing gumagamit ng default browsers ng windows na usually lumang IE version.. :p

    ReplyDelete
  22. Wooot! Nice tips! :D Yeah.. yung PNG talaga sa lumang explorer hindi transparent. :D Pero with IE9, solve na ang prob! ^_^ Anyway, most of the modern sites now use PNG, pangit kasi yung effect pag GIF lng.. ^_^

    ReplyDelete
  23. Very helpful tips on web developing and designing espclly for a beginners like me.. thanks dude! ^_^

    ReplyDelete
  24. i'm glad that it somehow helps not just you but everyone :) 

    Thanks for dropping by too

    ReplyDelete