50 best web design tools for web designers and developers

An essential selection of web design tools chosen by industry experts including Eric Meyer, Hampton Caitlin and Jeffrey Way


Basecamp is an online project management system that allows you to collaborate with colleagues, assign tasks and track progress with ease. The system provides to-do lists, discussion areas, an asset repository and shared calendar. Part of a suite of applications offered by 37Signals including Highrise, Backpack and Campfire, which together provide a complete suite of management tools.

HTML5 Boilerplate
HTML5 boilerplate provides a basic structural framework into which an HTML5 website or webapp can be deployed. The system is set up to be compatible with all major browsers, including older versions of Internet Explorer, while still allowing use of the modern HTML5 tags such as < article>, < aside> and < header>. The system also features mobile device optimisation, allowing for rapid deployment across different platforms including the modern breed of smartphones and tablets.
Other useful features include deliberate support for progressive enhancement, limited cross-dependencies (allowing you to remove whole sections of code without worrying about breaking other parts of the system) and it even provides a boilerplate .htaccess file to set up best-practice gzipping and caching on your server.

WeTransfer is one of a host of free services that allow you to easily send a file that’s too big for regular email. What makes this particular service stand out is the excellent 2GB file limit, and the ability to send multiple files simultaneously without having to register for an account, making it an ideal way to get your larger files around the web.

Evernote allows you to create a virtual scrapbook of webpages, photos, text and audio that you come across while browsing and access them on any of your devices including your desktop computers, phone and tablet. The database allows you to create keywords and tags to quickly categorise and search for items in your notebook, and even uses OCR to digitise text in photos and images.

Dropbox is a free service that allows you to store files on the web (in the cloud) and automatically synchronise them between your different computers and devices. It works on Android, iPhone and iPad, as well as your desktop computer, and supports collaboration through sharing of folders with your contacts.

reCaptcha is a free service that helps prevent spam by presenting a pair of words scanned from books, newspapers and radio show scripts that are being digitised. The system works by matching known words with unknown words, allowing users to prove they’re not spam bots, and the Google-sponsored digitising project to get free translation at the same time.

Prototype PHP-based web applications rapidly using boilerplate code and scaffolding. CakePHP is MIT licenced, and comes with a lot of the common plumbing already taken care of including authentication, database access, caching and security. CakePHP has a loyal following so support is good too. API
The API allows to you programmatically create shortened links in the same way that twitter does when you paste a link into its website. You can also track and monitor usage with some analytics support. It’s a pretty simple service, but incredibly useful in the modern era of character-limited social media communication.

Adobe Air
Adobe AIR allows you to deploy native applications across different operating systems while using standard web development tools such as HTML, CSS, JavaScript and Flash. Apps can be compiled into the AIR format, which is then installed directly to the host operating system via the web, making it ideal for developing desktop widgets.

jQuery arrived at the same time as the explosion in front-end client-side rich user interface development, and helped to herald the arrival of HTML5 into everyday conversation as a result of its ubiquity. Before jQuery, creating cross-browser user interactions was tricky to achieve and often extremely time-consuming. jQuery solved this by abstracting the browser differences through a series of common methods, allowing developers and designers to spend time worrying about how to provide the best user experience rather than worrying about the nuts and bolts of supporting different DOM models and JavaScript engines. It also brought the idea of chaining commands together to the masses, making for dramatically more succinct code!
Today, jQuery can be found on more websites than any other JavaScript library, and it has an almost unlimited number of tutorials, plug-ins and extensions available to further enhance the core functionality.

JS Bin
A live-rendered code sharing and testing tool, recently updated.

JS Hotline
A completely free telephone hotline to help struggling JavaScript developers

Zen Coding
A plug-in for text editors for high-speed coding.

A free distributed version control system for projects

Instant access to documentation for CSS, HTML, JavaScript and more

HTML5 – Edition for Web Developers
The HTML5 spec, rewritten specifically for developers

CSS3 Generator
A tool that generates code for tonnes of CSS3 features

A library of ready-to-use CSS3 animations

Search engine that works for single-purpose JavaScript frameworks

CSS3 Click Chart
Code, links, and examples for loads of CSS3 features

A code sharing tool with extensive library and preprocessor support

A feature comparison of about two dozen HTML5 video players

A boilerplate for responsive, mobile-friendly development of sites

Responsive Images Chart
A chart with feature breakdown for many responsive image solutions

Script loader to enhance page performance and reduce resource blocking

Script and module loader designed to improve speed and code

jQuery Mobile
Touch-optimised web framework

A tool for generating Ajax loading animated GIFs

Web Developer Toolbar
The popular developer tools for Firefox and Chrome

A JavaScript framework for creating parallax scrolling

Google Webmaster Tools
Webmaster tools for optimising websites for search

Layer Styles
A Photoshop-like layer styles interface that produces CSS code

WPtouch Pro
WordPress plug-in that instantly adds a mobile version of site

An online CSS3 stripe generator tool

Kendo UI
A framework to help build HTML5 apps

Lightweight language that compiles into JavaScript

This tool checks PHP code to a defined standard

Moodboard Lite
iPad app for creating mood and inspiration boards

FTP Client which allows you to edit your code directly on the server

The popular Mac-based text editor from Panic

A screen workspace management tool

A jQuery plug-in for fluid-width embedded videos

Quick and easy Lorem Ipsum placeholder text in various HTML contexts

Sublime Text 2
The feature-rich text editor for web app developers

Automatically expand marked-up text to full HTML using markdown

Video player with the same API for HTML5 and Flash

A multi-purpose content slider jQuery plug-in

An ad network that’s popular among web designers

The popular and powerful text editor

Browser/Inspector Combo