CSS Standard Fonts for Websites

With Vista released Microsoft replaced the “Standard Web Fonts” with the so cold “C fonts” – Cambria, Calibri, Candara, Consolas, Constantia, and Corbel. To take advantage of them (if available on the user’s computer) you can use the following font-family CSS definitions.

1
2
3
4
5
6
7
8
9
10
11
font-family: Helvetica, Calibri, Arial, sans-serif; /* or */
 
font-family: Corbel, Verdana, "Bitstream Vera Sans", sans-serif; /* or */
 
font-family: Candara, "Trebuchet MS", Trebuchet, sans-serif; /* or */
 
font-family: Cambria, "Times New Roman", Times, serif; /* or */
 
font-family: Constantia, "Palatino Linotype", Palatino, Georgia, serif; /* or */
 
font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace;

If you don’t have the “C” fonts you can download and install Microsoft’s Powerpoint Viewer 2007 which contains them.

For visual comparison check this pdf

WAI / XHTML Valid Input Watermarks for Mootools

Just refactored the input watermarking script, of course it is still XHTML 1.0 transitional and WCAG priority 1,2 valid.

JavaScript:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
 
// This Javascript is written by Peter Velichkov (http://www.creonfx.com)
// and is distributed under the following license : http://creativecommons.org/licenses/by-sa/3.0/
// Use and modify all you want just keep this comment. Thanks
 
var values = new Array();
var inputs = new Array();
 
function addWaterMark(el){
	try {
		values.push(el.value);
		el.addEvent('focus',function(){
			if (el.value === values[inputs.indexOf(el)]){el.value = ''};
		});
		el.addEvent('blur',function(){
			if(this.value === ''){el.value = values[inputs.indexOf(el)]};
		});
	} catch(e) {dbug.log('addWaterMark: ', e)}
};
window.addEvent('domready', function(){
	inputs = $$('input.watermark');
	inputs.each(addWaterMark);
});
//-->

Usage: Just put value on you inputs and use class=”watermark”

As usual example

Optimizing Page Load Time – Images

For a work in progress in my spare time (a WordPress Theme) I decided to implement one quite useful technique for images merging that has the following pros:

  • reduces HTTP requests
  • usually leads to better compression
  • no flickering with onmouseover events

I suggest using it when you have many looking-alike graphical elements (buttons, icons, panels) that you are setting as not-repeating CSS background.

Having prepared your image (merging couple buttons) in this case:

Optimizing HTTP requests

use CSS definitions like the following (notice the background vertical position 0,31,62 )

1
2
3
4
5
6
7
8
9
10
11
12
#button1 a{
 
    background:transparent url(image-optimization.gif) no-repeat 0 0;
 
}#button2 a{
 
    background:transparent url(image-optimization.gif) no-repeat 0 -31px;
 
}#button3 a{
 
    background:transparent url(image-optimization.gif)  no-repeat 0 -62px;
}

And as usual everything wrapped in simple example

Optimizing Page Load Time – A. Hopkins (Google)

While investigating some performance issue on a project I’m working on I stumbled upon this very useful article by a Google system engineer. It is basic but still covers most of the major speed issues on today’s Web 2.0 rich websites and is worth reading:

It is widely accepted that fast-loading pages improve the user experience. In recent years, many sites have started using AJAX techniques to reduce latency. Rather than round-trip through the server retrieving a completely new page with every click, often the browser can either alter the layout of the page instantly or fetch a small amount of HTML, XML, or javascript from the server and alter the existing age. In either case, this significantly decreases the amount of time between a user click and the browser finishing rendering the new content.


However, for many sites that reference dozens of external objects, the majority of the page load time is spent in separate HTTP requests for images, javascript, and stylesheets. AJAX probably could help, but speeding up or eliminating these separate HTTP requests might help more, yet there isn’t a common body of knowledge about how to do so.


While working on optimizing page load times for a high-profile AJAX application, I had a chance to investigate how much I could reduce latency due to external objects. Specifically, I looked into how the HTTP client implementation in common browsers and characteristics of common Internet connections affect page load time for pages with many small objects…

more

Custom Dropdown (Styled Select)

Update: A far more better approach is to dynamically replace <select>’s in the HTML. Here is my post on the topic – Customizable Form Select / Dropdown Replacement with Mootools

Got tired of not able to style (colors, padding, background image, etc) dropdowns under various browsers (Internet Explorer and Safari are proven worst). Using my very favorite javascript framework mootools I created some simple dropdown simulating the select and option html tags usage.

Picture == thousand words
Custom Dropdown

and example of custom styled dropdown