Web Design is 95% Typography

Came across this post on Information Architects Japan, and how typography should be viewed as an interface element, no matter how limiting web fonts may be.

Key Points:

  • A printed work which cannot be read becomes a product without purpose.
  • Optimizing typography is optimizing readability, accessibility, usability(!), overall graphic balance.
  • Information design is not about the use of good typefaces, it is about the use of good typography. Which is a huge difference. Anyone can use typefaces, some can choose good typefaces, but only few master typography.
  • It is annoying how different browsers and platforms render fonts, But, well, it is part of a web designer’s job to make sure that texts are easy and nice to read on all major browsers and platforms. Correct leading, word and letter spacing, active white space, and dosed use of color help readability.
  • text as a user interface”. Have a look at Khoi Vinh’s website,

Read the full article

Posted in Information Design, Web Design, typography | Tagged , , | Leave a comment

Loading chart data into Open Flash Charts using query string

This method uses object/embed tags to insert open-flash-chart.swf on the page.

This is a simple setup using a query string to let the Flash player know where the data is. It only works if the url to the page has this appended to the end, for example: some-page.html?ofc=data-files/bar-2.txt If it’s not included, it won’t load the data. The open-flash-chart.swf automatically looks for certain things, in order to load the data. In this case, it’s “ofc” and the path to the data. No attributes needs to be specified, like an id or name, within the embeded player for it to know what “ofc” is. If you don’t want to the page to have the query string visible, then you would have to set up a separate page with the chart, and use an iFrame to insert it into the designated page. With the object/embed method, no javascript libraries are needed.


<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
   codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/
			swflash.cab#version=8,0,0,0"
   width="500" height="250" id="graph-2" align="middle">
 	<param name="allowScriptAccess" value="sameDomain" />
	<param name="movie" value="open-flash-chart.swf" />
	<param name="quality" value="high" />
	<embed src="open-flash-chart.swf"
	   quality="high"
	   bgcolor="#FFFFFF"
	   width="500"
	   height="250"
	   name="open-flash-chart"
	   align="middle"
	   allowscriptaccess="sameDomain"
	   type="application/x-shockwave-flash"
	   pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
This method uses SWFobject to insert the open-flash-chart.swf on the page

Using a query string and SWFobject works the same way as using the object//embed method. SWFobject is a light weight unobtrusive javascript file that simplifies the insertion of the file onto the page. It allows you to use alternate content in the case that the user doesn’t have javascript or flash installed. In this case, using a screenshot of the chart would be the simplest. It depends on the data being presented. If you want to go the long route for accessibility and SEO purposes, having the equivalent data in an html table would work.

CODE:


<script type="text/javascript" src="scripts/swfobject2.js"></script>
<script type="text/javascript">
	var flashvars = {};
	var params = {allowScriptAccess:"sameDomain"};
	var attributes = {name:"open-flash-chart"};
	attributes.id = "my-graph";
	swfobject.embedSWF("open-flash-chart.swf", "my-chart",
				"500", "250", "8.0.0", "/expressinstall.swf",
				flashvars, params, attributes);
	</script>
   <div id="my-chart">
	<p>Alternate data or chart image goes here if flash not found, 	or if javascript turned off</p>
	</div>
Posted in Charting, Flash, Open Source, SWF Object | Tagged , , , | Leave a comment

Getting started with Mootools

Mootools is a fabulous little unobtrusive AJAX library that will help you improve the user experience on your site. Its got a small footprint, under a 100k if you use the entire library.  The best part is that you don’t have to use the whole thing, you can customize it, make it even smaller by selecting the options you  specifically need with their Core Builder and More Builder. Basically, you can select the option you want, like the Accordion, and it will select the required files that are needed for it to work. Plus, you can also select options for compressing the library, once you make your selections. With the help of these 3 tutorials, you’ll have a good grasp of how it works.

Posted in AJAX, Javascript, Mootools | Tagged , , | Leave a comment