Web Friendly Tools
By Steph Skardal
February 7, 2011
Over the past few weeks, I found a few nice tools that I wanted to share:
Spritebox
The first tool I found came across and wanted to share is Spritebox. Spritebox is a WYSIWIG tool to create CSS sprite rules from an image on the web or an uploaded image. Once a sprite image is loaded, regions can be selected, assigned classes or ids, display settings, and background repeat settings. The preview region shows you which part of the sprited image will display in your DOM element. After all sprite regions are defined, CSS is automagically generated, ready for copy and paste into a stylesheet. This is a user-friendly visual tool that’s likely to replace my tool of choice (Firebug) for generating CSS sprite rules.
I select the twitter region and assign several CSS properties.
|
I select the header background region and assign several CSS properties.
|
Typekit
Another tool / service I’ve come across on the design side of web development is Typekit. Typekit is a font hosting service that allows you to retrieve web fonts and render text with those fonts instead of using Flash or images. I recently noticed severe lag time on font rendering for one of our Spree clients. I was curious about font hosting services, specifically regarding the accessibility, usage, and payment options. Typekit offers four different plans. The lowest plan is free, allows 2 fonts to be used on one site, and the font selection is limited. The highest price-point plan gives you full font library access and can use an unlimited number of fonts on an unlimited number of sites in addition to a few other features.
A “kit” I created for use on a personal site.
I signed up for a free Typekit account and created a “kit” with 2 fonts to be used on my personal site. After publishing my kit, I implement the kit by including some Javascript (shown below), and adding my typekit classes (tk-fertigo-script and tk-ff-enzo-web) to the regions where the kit fonts should apply.
<script type="text/javascript" src="http://use.typekit.com/kitid.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
I was impressed by typekit’s font rendering speed. There are several other font hosting services out there that offer similar paid plans. Regardless of which service is chosen, a hosted font service is an affordable way to use “pretty” fonts, have fast rendering speeds, and have a site with SEO-friendly text.
An example of Typekit in action.
Awesome Screenshot
The final tool I’ve been using tons is Awesome Screenshot, a Chrome plugin (also available on Safari). It allows you to grab a screenshot, a screenshot region, or the entire page and annotate it with rectangles, circles, arrows, lines and text. You can download the image or upload to provide a shareable link. All the screenshots in this article were created with Awesome Screenshot. This free tool has replaced my screenshot and editing [via Gimp] work flow. I recommend trying this one out!
Awesome Screenshot in action.
Comments