20 Must-have web design tools
Web Designer gets a specially selected band of industry experts to hand-pick the tools they use to create pages and sites
01. Adobe Edge Inspect
Adobe Edge Inspect (formerly Shadow) makes it easy to prototype and test on your mobile devices while building on your desktop computer. The concept is very simple – press a button on your computer and your devices wlll automatically navigate to and load the page you’re working on, providing hands-free access to a real-life view of how your work renders on each device.
As well as making it simple to automatically navigate your device to the page you’re currently working on, Inspect allows you to remotely inspect and debug individual devices, making it easier to track down and fix bugs than by traditional methods.
Object-oriented CSS is a CSS coding technique popularized by Nicole Sullivan. Even if you don’t agree with all the principles and suggestions of OOCSS, you should definitely understand the concepts. It’s sure to make your code cleaner, faster, and easier to maintain.
03. Twitter Bootstrap
05. Adobe BrowserLab
BrowserLab is an easy way to get static screenshots of your web projects as they appear in various browsers on different platforms. It’s not a full-function way of testing your interfaces, but it’s definitely an option for getting a peek at browser versions you don’t have immediate access to.
06. CSS Hat
If you’re still designing your layouts almost completely in Photoshop, and you’re using CSS3 heavily, then CSS Hat is a must-try tool. Simply put, this Photoshop add-on will convert your Photoshop layer styles to CSS3 that you can drop right into your text editor.
Prefixr is a great time-saving app that gives you cross-browser CSS3 in just one click. With this online tool (which has an API that integrates into many popular text editors), you can develop your code using a single vendor prefix and then automatically add the remaining code for other browsers.
LiveReload makes your browser’s refresh button obsolete. Instead of making changes, then hitting F5, LiveReload monitors changes in the file system and then it will automatically make the changes live in the browser without a refresh. It will even compile CoffeeScript, Sass, Haml, and more.
10. W3C Markup Validation Service
The W3C’s validator should be part of every developer’s workflow. It’s not going to make your code perfect, but it will help you track down errors and will help you better understand what kind of HTML is now considered best practice, and which elements have been removed from the spec.
Typekit makes it easy to use a full library of fonts on the web for the first time. Rather than limiting you to commonly installed fonts, TypeKit uses a downloadable format that allows fonts to be temporarily installed in the browser. This allows font foundries to license their fonts without the risk of them being pirated, and opens up a world of typographic possibilities for web designers.
Yeoman is a client-side stack that provides a framework for building web applications. The system includes a built-in HTTP server for previewing output, automatic generation of cache manifests for offline HTML5 web app access, image optimisation and unit testing. The system incorporates several other open-source tools and libraries making the most out of other projects.
HotGloo is an easy-to-use prototyping and wireframing system that’s entirely web based. It supports collaboration, allowing multiple users to work together to create interactive projects. Fully-featured tools allow for master pages as well as standard UI elements, and the system makes it simple to collect feedback for iterative improvements
16. jQuery Boilerplate
A jump-start for your jQuery plug-in development
17. OpenCrypt IP Geo-Location API
Get your visitor’s location in the world from their IP address
An easy-to-implement media player to show self-hosted video
Rich Text Editor with extensible platform for additional plug-in functionality
20. Subtle Patterns
A gallery of free elegant background patterns