• Redesign the Cardiff Racing Team website for IET Best Website Award.

• Redesign the interface for my website. Check it out!

• Redesign and fixing this blog.
• Some commitment for ISAC Studio.

• Managing tutorial @ iLuvIslam.com and writing tutorial on graphic and web design. (Malay language)

I’m going to Swiss next month and it’s going to be long. However, I will try to keep posting few articles to share with you. Thank you and I really appreciate your loyalty and passion with this blog.

Link is very important that it isn’t just the simple <a></a> coded by a web designer or developer. To link is to respect, appreciate and give credit and to be linked is to be trusted, referred, and inspired. In this entry I will share few links (or simply websites) which very useful to me in terms of applications, information and design wise.

Internet/Web Applications

• Google - Search engine, Gmail, Calendar, Adsense, Reader and Analytics.
• Feedburner - RSS Feed organizer
• Wordpress - Web platform

Design Inspiration websites

• David Airey
• Jacob Cass (JustCreativeDesign)
• Smashing Magazine

Design discipline websites

• Freelance Folder
• Freelance Switch
• NO!SPEC

Most of these links provide not just free informations but also essentials knowledge and understanding of the whole process of design, be it web or graphic. For the web applications, I have no comment about them as they are truly brilliant. What’s yours?

I’ve just finished two website design project with Cardiff Racing (for IET Best Website Award 2008) and Tutorial@iLuvIslam.com - Pssstt… I hope to win the award (results will be announced in July). Last but not least, I’m still available for hiring. Tell me about your project and we’ll talk over the phone about it later. Cheers

Last but not least

This September, I will move to a new house with bigger room and space. It is time to be creative my own room and a set of Mac is on the way!

Since I’ve started my summer break, thus I’m now available for hiring. Check out my portfolio and contact me if you have any inquiries. Thank you

Dedications from friends

1. Picture from dee. View »

2. Poem from drj4zz. Read »

I believe in speed and precision. A good web designer and developer will not only particular about the design but also the page loading time. Let’s jump into reality check before I tell you how to make your website run instead of crawl. In Google Analytics , there are 6 basic connections which are T1 , DSL , Cable , Dial Up , OS3 and ISDN. For each of these, they load this website according to the engineered connection speed. Powered by WebSiteOptimization, this blog will take about 3.18 seconds with T1 1.44Mbps and 19.77 seconds with ISDN 128 K connection. See there difference?

» Question : Why should I bother about it?

Well, if your page doesn’t load in 4 seconds, the user will just skip over it. Agree? So, you don’t want this thing to happen do you? So, bear with me for few minutes and I hope this might help you. So here it goes…

There are 3 main elements that you should tackle to optimize your web. There are…

» Graphic/Images

If your website uses images, the best practice is to know what you are doing. It’s pointless to use black and white image that saved as .jpeg (which load true colour image). Instead, you can use .gif where it loads 256 colour system. Remember this, JPEG is suitable for photographs and high colour composition images. Other option is PNG which is quite useful because it can be used with 24-bit colours and transparent (but not all browser support this). 

» CSS & Coding

To make it simple…

Rule 1: Use Shorthand CSS. {colour:#fc0 instead of #ffcc00}

Rule 2: Combine CSSes into one (header.css+body.css+footer.css = style.css)

Rule 3: Link properly. http://www.google.com/ instead of http://www.google.com 

Rule 4: Put <img height=”value” width=”value”> in your image tag in your markup language.

Other option: Tidy up your CSS with Clean CSS.

» DON’Ts

1. DON’T use 5.0MB picture on your website AND resize it too 400px times 300px. Crop it using any graphic editor such as Photoshop or GIMP (free).

2. DON’T use background sound/music, unless IMPORTANT. If crucial, use loop sounds.

3. DON’T use heavy flash without download bar. (They hate to wait for uncertain things).

4. DON’T use table based design because hundreds of <td> might upset the browser and bad in terms of SEO as well.

I hope you find this helpful. I don’t actually cover most of it but this list is enough to tell something. Happy editing and see you at the finishing line.

References

1. Google Webmaster blog

2. DailyBlogTips - 50 Tips to speed up your website

3. Website Optimization

Despite preparing myself for final exams, I could say that the design process was quite rapid. Research brief and data collection were done within a meeting due to time constrain from both parties. However, the aesthetic and client values should not be neglected as I promise to deliver the best possible solution for all my clients.

It took me few sketches to arrive at the final logo. First few were rejected due to informality. After some discussion and mutual agreement, both of us agreed to use the water lily plant as reference while the pink and purple colour is one the most favourite colours for girls.

Finally, I put up their organization tagline Bersatu Di Bawah Satu Simpulan Ukhwah (United under one ties) as well as the name of the organization just after the logo. For the exclusive personal touch, I added the dotted lines to stress the brand image which the organization would like to bring - togetherness.

What do you think of the logo? Comment »

Download (800 x 600 pixels)

» Web designer/developer

A job of a designer of a website it totally different, I agree. However, they are working on the same thing - the website. Let’s focus on the coding of the website for the sake of explanation. A web designer will code the Cascading Style Sheets (CSS) while a web developer will work on the databases such as (PHP, XHTML, or etc). During these process, each of them will try to run and make sure the codes that they have written appeared as desired and also working at the same time. If there is a slight error, amendment is needed. Next step is to hit the F5 button for Refresh.

In most cases, it will work if you have a dummy server in your machine (Pc or Mac). There is no problem with that but if it is on the web, if you can’t see any changes. It is either the code is still wrong or the cache itself has blindfolded your eyes to see the actual results. Most designers and developers tend to forget that the internet browser is capable of storing the website for a moment - usually known as web cache. Thus, any adjustments might not be visible at that particular moment. A wise designer/developer will clear his browser cache before viewing the result. Else, you might want to try with different browser to see if the changes made is as desired.

» Client

In terms of client, it is the designer/developer’s responsibility to educate them. Once, my told me, “I couldn’t see any changes that you’ve made to the website. Please make a necessary changes.” Lucky me I was there at that moment, I then politely asked his permission to use the computer as I believe that I’ve made those changes a day before the meeting. With few simple steps, I clear the web cache in his computer and the web is working well as expected. The same case happened to me yesterday when I was helping out the iLuvIslam.com team to setup their miniblog. I’ve made necessary changes to the codes and nothing seems to work out. Suddenly I remembered what had happened to me. Next, I viewed the website with Safari and it is working as aspected.

In conclusion, think twice before you do something. Be wise and clean your cache when necessary. Cache can cause frustration but this can be overcome by taking precaution (clearing your cache) because even gamers need to clear their cache. Thank you for reading. Leave your comments or share your personal experience.

» References

1. Xbox 360: Remember To Clear Your Cache - January 5th, 2008

2. Study: Consumer Delete Cookies at Suprising Rate - March 14th, 2005

3. Deleting web browser cookies & cache - August 31, 2006

Subscribe via RSS • Subscribe via Email • Stumble it!