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.
1. Dabblet
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.
2. CodePen
The brand new CodePen is a “little one-page app for playing around with frontend code”, by Alex Vazquez, Tim Sabat, and Chris Coyier. It has impressive input options, facilitating the use of Jade, Slim or HAML in the HTML tab, LESS, Stylus, SCSS with Compass, or Sass with Compass in the CSS tab, and CoffeeScript in the Javascript tab.
You can add a CSS reset, use prefix-free, include a Javascript library or link to an external CSS or JavaScript file. It also enables you to save Github gists, gives you a full-page result and works in IE+8.
3. Prefixr
takes unprefixed CSS and adds only the required vendor prefixes.
4. Prefix-free
This is a tiny client-side JavaScript library to make the vendor prefix problem go away. Both of these web apps are great places for testing browser support, playing with new CSS and creating test cases for browser bug reports. If you’re building sites out of OOCSS-style objects or abstracted patterns, you can put these tools to use by quickly mocking up and testing a pattern without having to worry about vendor prefixes, making ‘designing in the browser’ a much easier task. Vendor prefix tools
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,
5. enjoycss.com
With this CSS code generator you can easily create numerous graphic styles and immediately get their code or code of separate elements within seconds.
6. Trimage.org
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.
7. Spritepad
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.
8. SpriteCow
Sprite Cow helps you get the background-position, width and height of sprites within a sprite sheet as a nice bit of copyable css
9. Spriteme.org
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.
10. PNGGauntlet
PNG compression app for Windows. Uses PNGOUT, OptiPNG, and DeflOpt to create the smallest PNGs, without sacrificing any image quality.
11. PNGmini.com
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.
12. JPEGmini.com
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
13. Entypo
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.