A bookmarklet which 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.


Also a bookmarklet, 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.


Completing my design suite, Crosshair draws a crosshair cursor on the page to assist in layout alignment. Cursor information is also presented in a tooltip.


The above four design assistive tools are all available in a handy single package called Design, which can be exceptionally useful for web-developers working in the browser. Each component part works well with the other parts.


If you have ever been frustrated by CSS bugs in the various browsers and thought "if I could just send this CSS parameter to this browser, and this one to that browser" then Conditional-CSS is perfect for you. Allowing you to work around browser bugs, Conditional-CSS allows IE style conditional comment inline with your stylesheets.

Visual Event

Even though Javascript (in the browser at least) is an event driven programming paradigm, it can often be really quite difficult to identify which elements will trigger an action. Visual Event is a bookmarklet designed to address exactly this problem.


Integrity is a tool which check that all links and media on your web-site are valid and responding okay. If a particular link is found to give an error, then this is highlighted in the generated map of your site.


It can often be difficult when discussing with clients to show them exactly what you mean on the telephone. With print drafts we could have stuck post-its on the hard-copy, Label now provides this option digitally!


Built from the ground up with progressive enhancement in mind, DataTables is a jQuery plugin which provides extensive support for interactive HTML tables. With features such as pagination, filtering, sorting and internationalisation (among many others!) this plug-in is extremely flexible.


KeyTable provides Excel style keyboard navigation for any HTML table. With event binding and DataTables integration, this little library can seriously improve accessibility for dynamic tables.


Spelling mistakes on a web-site can make your site (or worse your firm) look unreliable and careless, but they can creep through the net so easily! SprySpell will parse your web-page for spelling mistakes and display correction suggestions inline with the page.


Secret is a Javascript library which can pick out letters from any rendered HTML page and display them on screen in a 'magical' way. While mainly developed as experimentation, there are a number of interesting use cases.


The confirm() and alert() functions in Javascript are very convenient, but in many cases simply don't make sense (Okay/Cancel might not suit a posed question). Alert allows you to build custom alert controls in the style of desktop applications.


SpryMedia is a web user-interface development studio based in Bonnie Scotland.

On this site you will find some of our software, as well as musings on UI development and the state of the web. This site also hosts various projects such as DataTables, Design, Visual Event and SprySpell.

If you would like to work with SpryMedia on a development project, please get in touch!

Elsewhere on the web