Tools & Tips
Richard Wong
28 August, 2008
Since I just updated the design of the site, I start thinking whether this new design is better. But realising there so many different aspect of site that we need to look at in order to measure the quality.
Then I found 50 Questions to Evaluate the Quality of Your Website by Carsten Cumbrowski from my starred item in google reader. It covers a wide range of areas including accessibility, design, navigation and more.
A sample of questions includes:
- Is content structurally separate from navigational elements?
- Are links labeled with anchor text that provides a clear indication of where they lead?
- Do clickable items stylistically indicate that they are clickable?
- How intuitive is it to navigate? Are signs obvious or obscured? Buttons/Links Like Text, that are not clickable and vice versa, links/buttons that cannot be identified as such
- Clear statement of PURPOSE of the site? Purpose must become clear within a few seconds without reading much or no text copy at all.
- Are the colors used harmonious and logically related?
- The fonts should be easily readable, and degrade gracefully.- Should look OK on various screen resolutions.
- Does the copywriting style suit the website’s purpose and ’speak’ to its target audience?
Although the list isn’t particularly targeting developers / designer, I think it is still a very useful list to reference if you are running your own site. If you can answer YES on most of the questions, you have done a great job. For me there are still a lot of work to do here…
Richard Wong
19 August, 2008
If you are a busy web developer that also need to work on the interface, here is a handy list of online tools to help you save time and effort creating nice graphics for your sites or apps.
Buttons
- As Button Generator – Fully featured button creator allowing you to customize colour, gradation type, stripe, filter, image, and of course text.
- Buttonator.com – Another Button generator with a big range of different style buttons
- My Cool Button – Simple and easy to use button generator
Richard Wong
15 July, 2008
Feedly is “a more social and magazine-like start page for Firefox”. It is a very well made and design application that really take the concept of homepage and RSS aggregation to the next level. They have social features like sharing, annotation and even twitter integration for each post.
But what interest me the most is the ability to do real-time summary of the most relevant content available on the web based on your interests, your reading patterns, and recommendations from your friends. In other words, you can see straightaway the hottest, latest post from your feeds.
After using it for a couple of weeks, I really enjoyed its clean design and functionality. I found myself using it more to do feed reading than Google Reader. The way Feedly organizes the post are far more natural to scan read a large amount of headlines and lead me to discover more interesting posts than before.
The coolest part of Feedly is that it doesn’t replace your beloved Google Reader. It actually integrate very well with it. All your read or star items are always synced that means you can use both to suite your needs.
So go ahead and give it a go at http://www.feedly.com/
Richard Wong
8 July, 2008
I have recently came across this interesting and useful Javascript tool called JSLint. You feed in your javascript code and JSLint will scan through and looks for problems in your code.
You might ask what is the different between this and debugging using Firebug? Well, although it is only a syntax checker and validator, it is much more stricter and follows proper Code Conventions. In other word, it will tell you errors you normally won’t get.
As you know, Javascript sometimes allows code to be implemented in a sloppy way which could be very troublesome for large complex projects. So I have been using this tool as a reference point to tighten up my javascript code.
So go and paste your code at JSLint and see how your code is doing. But I must warning you, it might hurt your feeling!
Source: JSLint
Richard Wong
28 June, 2008
Anyone developing for the web will have at least used or heard of Firebug. It is very powerful tool for debugging and testing any web pages on Firefox. You can live edit, debug, and monitor CSS, HTML, and JavaScript.
Although Firebug is already packed with features, there are always rooms for extras. Since the creation of Firebug, plugins are being developed to extend the power of Firebug even further. Here is a list of useful plugins for Firebug.
Jiffy provides a very detail and visual view of the Javascript time measurements captured by Jiffy-Web. It allows you to get information of AJAX requests and other Javascript functions.
YSlow developed by Yahoo! is probably one of most famous Firebug extension out there. It analyzes web page performance and tells you why performance is slow. It gives you information on all the requests, load time, sizes and even give you tips to improve your site speed.
Instead of using other Firefox extensions to view cookies. This Firebug plugin allows developers like you to keep using the firebug interface to debug with cookies. FireCookie gives you the ability to view and manage cookies. It also has a console where you can see when cookies are created, changed or deleted.
For those PHP developers out there, FirePHP is enable you to print to the Firebug Console using simple PHP function call. The main benifit is that all the debugging data are hidden from normal user and you can review in a nicely format within Firebug console.
Updates:
So still want more plugins? You can always build your own. Jan Odvarko of Software is hard has a series of tutorial on creating a Firebug plugin.
