Category: Frontend Design

CSS Sprite 是将网页中多个小图片拼成一个大的图片,在显示的时候利用子图片定位的方式显示某个小图片。
这样做可以通过减少DNS查询,减少WEB服务器请求次数,优化页面整体的加载速度。

免费在线网页图片聚合工具:
CSS Sprite Generator

http://spritegen.website-performance.org/

One big problem i thought recently relates on the user experience and user usability. User interface is very important in online business. Your client is kept out of your door just because of you did not pay more effects on the usability. Poor usability leads poor ROI. That is the key element why your business grows slow. But it always not too late to improve the usability of your web site.
So i added a category on my blog. Keep an eye on user interface design.

Key points to improve the usability:

* Keep clean and simple

* Less colors, but more contrast

* Bigger font

* Split different area by edge or space

Good usability examples:

Tools: Firefox & Firebug or Safari
Library:
function ConsoleLogger(level)
{
this.level=level||4;
this.start=function(){};
this.log=function(msg,level){
level=level||0;
if(level>this.level)return;
if(typeof(console)==’undefined’)return;
try{
switch(level){case 0:console.warn(msg);break;
case 1:console.error(msg);break;
case 2:console.info(msg);break;
case 4:console.debug(msg);break;
default:console.log(msg);break;
}
}catch(e){
try{console.log(msg)}catch(e){}
}
};
this.setLevel=function(level){
this.level=level;return this;
};
this.getLevel=function(){
return this.level;
};
}
Example:
oDbg = new ConsoleLogger(2);
oDbg.log(“warn info: ….”, 0);
oDbg.log(“error info: ….”, 1);
oDbg.log(“info info: ….”, 2);
oDbg.log(“debug info: ….”, 4);

You can get the debug information in the console of Firebug.