The last year has seen a wealth of new tools emerge for web designers. Here we introduce the best of the bunch.. It’s been an interesting time recently for web design, thanks to things such as the release of the Retina display the new iPad, responsive web design taking off, a renewed emphasis on mobile-first design – and a lot of discussion over vendor prefixes. Hand in hand with all of this, a lot of new tools have come along. So let’s have a look at some of them and how you can incorporate them into your workflow. In browser coding tools We’ve had JSBin, jsFiddle, jsdo.it and friends for a while, but there are a couple of new entrants. Dabblet by Lea Verou is an ‘interactive playground for quickly testing snippets of CSS and HTML’ that saves out of Github gists. I find it extremely handy for mocking up a small piece of functionality, particularly interactive CSS things such as animations because it has keyboard shortcuts and awesome previews for CSS values, and vendor prefixes are handled automatically via Verou’s prefix-free library.
Dabblet‘s layout is also highly customizable, enabling you to mix code and result, or even overlay the code on the result. You can also get each Dabblet as a full-page result only, and embed a Dabblet using an iframe. As it relies on CORS, Dabblet doesn’t support older browsers, but it works just fine in Firefox, Safari, Chrome and the most recent IE 10 beta.
takes unprefixed CSS and adds only the required vendor prefixes.
Vendor prefix has proved somewhat divisive, with many strongly worded articles recently taking sides on whether they’re essential or killing the web. Assuming that you’re taking a pragmatic view and using vendor prefixes responsibly, you’re already resigned to adding them for all supporting browsers and updating them as other browsers come online. There are several ways we can make this process less painful. If you’ve been using Dabblet or CodePen then you probably already have unprefixed CSS, and you could use a service such as Nettuts+ Prefixr or CSSPrefixer. These enable you to paste in your CSS, then get it back with all the correct vendor prefixes. If you’re writing CSS by hand, your text editor may have a way of adding vendor prefixes to your code automatically. CSS pre-processors A CSS pre-processor is both the combination of a language that extends CSS with fun things such as variables, mixinis, nesting and math, and a way to monitor and convert this ‘extended’ CSS back into normal CSS. As part of this conversion, the pre-processor also adds vendor prefixes automatically and can compress and concatenate your CSS and alert you to errors and so on too. CSS pre-processors are becoming more popular, no doubt in part due to the vendor prefix issue, plus a gradually lowering barrier to entry. While historically using one has involved some command line chops, recently apps have emerged that will handle this for you,
With this CSS code generator you can easily create numerous graphic styles and immediately get their code or code of separate elements within seconds.
This is a cross-platform GUI and command-line interface to optimize image files via optipng, pngcrush, advpng and jpegoptim, depending on the filetype (currently, PNG and JPG files are supported). It was inspired by imageoptim. All image files are losslessy compressed on the highest available compression levels. Trimage gives you various input functions to fit your own workflow: A regular file dialog, dragging and dropping and various command-line options.
With SpritePad you can create your CSS sprites within minutes seconds. Simply drag & drop your images and have them immediately available as one PNG sprite + CSS code. No fiddling in Photoshop, no manual assignment of CSS styles.
Sprite Cow helps you get the background-position, width and height of sprites within a sprite sheet as a nice bit of copyable css
Background images make pages look good, but also make them slower. Each background image is an extra HTTP request. There’s a fix: combine background images into a CSS sprite. But creating sprites is hard, requiring arcane knowledge and lots of trial and error. SpriteMe removes the hassles with the click of a button.
PNG compression app for Windows. Uses PNGOUT, OptiPNG, and DeflOpt to create the smallest PNGs, without sacrificing any image quality.
ImageAlpha converts 24-bit PNG to paletted 8-bit with full alpha channel. This greatly reduces file sizes with only a minor loss of quality. Such images are compatible with all browsers and even degrade well in IE6.
Your photos on a diet! Reduce the file size of your photos by up to 5x, while keeping their original quality and JPEG format! Icon Fonts
This is a set of 100+ carefully crafted pictograms available as an OpenType font, vector EPS and web font. All released for free under the Creative Commons license CC BY-SA. 17. Iconic is an open-source icon set consisting of 171 marks in raster, vector and font formats.