Free web resources for designers and web developers | Free web design resources for designers & web developers | Page 57 of 61

Automatic Area Highlighting to Image Maps – mapper.js

/ 0 Comments / Category: Javascript/

mapper.js 1.0 – allows you to add automatic area highlighting to image maps on your webpages.

It works in all the major browsers – Mozilla Firefox 1.5+, Opera 9+, Safari and IE6+.

Deck the Halls with Unobtrusive JavaScript

/ 0 Comments / Category: News/

A key component in a JavaScript programmer’s arsenal is the methodology of unobtrusive JavaScript – the idea that a web page’s behavior should remain separate from its structure. In this tutorial, Ara overcomes one of the challenges of unobtrusive JavaScript: tricky timing issues.

Block-formatting context and floats

/ 0 Comments / Category: News/Tags: css techniques

Article about containing floats without structural markup. It sheds some light on the different methods commonly used and discusses a new technique.

Check the demo page that compares 4 different methods to contain floats without structural markup.

Free report on accessibility from Jakob Nielsen

/ 0 Comments / Category: News/Tags: Accessibility

148 pages report on online accessibility available for free download.

Beyond ALT Text: Making the Web Easy to Use for Users With Disabilities

The report contains:

Results of usability tests of 19 websites with users with several different types of disabilities who are using a range of assistive technology.
Test data collected mainly in the United States, with some additional studies in Japan to ensure the international applicability of the recommendations.
75 detailed design guidelines

The report is richly illustrated with 46 screenshots of designs that worked well or that caused difficulties for users with disabilities in the usability tests as well as 23 photos of assistive technology devices. The examples and guidelines are directly based on empirical observation of actual user behavior.

Javascript Progress / Percentage Bar

/ 0 Comments / Category: Javascript/

Javascript based Percentage Bar / Progress Bar : jsProgressBarHandler 0.2

Design Bookmarklet

/ 0 Comments / Category: News/

Design is a suite of web-design and development assistive tools which can be utilised on any web-page.

Design features the following components:

Grid – overlays a highly configurable layout grid over a web-page. Grid can be set to match any set of dimensions, allowing easy development of CSS layouts in the web-browser.
Rule – displays rulers on a page, with all the expected features of the rulers found in a desktop design application, including guides which snap to block display elements and origin location control.
Unit – allows measurements to be made between any two points on a web-page, giving basic information about each of the points clicked on, and drawing a line on the page for the measurement.
Crosshair – draws a crosshair cursor on the page to assist in layout alignment. Cursor information is also presented in a tooltip.

Supported browsers:

Internet Explorer 7
Firefox 2+
Safari 2.0.4+
Opera 9.2+

Typetester

/ 0 Comments / Category: Online Tools/Tags: Typography

The Typetester - another alternative to CSS Type and Font Tester – is an online application for comparison of the fonts for the screen.

Its’ primary role is to make web designer’s life easier. As the new fonts are bundled into operating systems, the list of the common fonts will be updated.

Font Tester

/ 0 Comments / Category: Online Tools/Tags: Typography

Font Tester - a free online font comparison tool.

It allows you to easily preview and compare different fonts side by side with various CSS font styles applied to them. It is very useful for web developers who are looking for just the right font/style/color to use in their pages.

To use it all you have to do is simply enter the text you would like to preview, modify the various CSS properties until you find a style you like, and then click on the Get CSS Code button to generate all the necassary CSS code to reproduce those styles in your webpage.

Alternative tools - CSS Type and Typetester