Official website for Web Designer - defining the internet through beautiful design
FOLLOW US ON:
Author: Steve Jenkins
24th December 2012

50 web design tools for 2013

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

50 web design tools for 2013

Basecamp

www.basecamp.com
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

www.html5boilerplate.com
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

www.wetransfer.com
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

www.evernote.com
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

www.dropbox.com
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

www.recaptcha.net
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.

CakePHP

www.cakephp.org
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.

bit.ly API

dev.bitly.com
The bit.ly 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

www.adobe.com/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

www.jquery.com
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

jsbin.com
A live-rendered code sharing and testing tool, recently updated.

JS Hotline

javascript.pockethotline.com
A completely free telephone hotline to help struggling JavaScript developers

Zen Coding

code.google.com/p/zen-coding
A plug-in for text editors for high-speed coding.

Git

git-scm.com
A free distributed version control system for projects

DocHub

dochub.io/
Instant access to documentation for CSS, HTML, JavaScript and more

HTML5 – Edition for Web Developers

developers.whatwg.org
The HTML5 spec, rewritten specifically for developers

CSS3 Generator

css3generator.com
A tool that generates code for tonnes of CSS3 features

Animate.css

daneden.me/animate
A library of ready-to-use CSS3 animations

Microjs

microjs.com
Search engine that works for single-purpose JavaScript frameworks

CSS3 Click Chart

css3clickchart.com
Code, links, and examples for loads of CSS3 features

CodePen

codepen.io
A code sharing tool with extensive library and preprocessor support

VideoSWS

praegnanz.de/html5video
A feature comparison of about two dozen HTML5 video players

Skeleton

www.getskeleton.com
A boilerplate for responsive, mobile-friendly development of sites

Responsive Images Chart

bit.ly/QMjKCy
A chart with feature breakdown for many responsive image solutions

LABjs

labjs.com
Script loader to enhance page performance and reduce resource blocking

RequireJS

requirejs.org
Script and module loader designed to improve speed and code

jQuery Mobile

jquerymobile.com
Touch-optimised web framework

Ajaxload

www.ajaxload.info
A tool for generating Ajax loading animated GIFs

Web Developer Toolbar

www.chrispederick.com/work/web-developer
The popular developer tools for Firefox and Chrome

Parallax.js

stolksdorf.github.com/Parallaxjs
A JavaScript framework for creating parallax scrolling

Google Webmaster Tools

www.google.com/webmasters/tools
Webmaster tools for optimising websites for search

Layer Styles

www.layerstyles.org
A Photoshop-like layer styles interface that produces CSS code

WPtouch Pro

www.bravenewcode.com/product/wptouch-pro
WordPress plug-in that instantly adds a mobile version of site

Patternizer

patternizer.com
An online CSS3 stripe generator tool

Kendo UI

www.kendoui.com
A framework to help build HTML5 apps

Coffescript

coffeescript.org
Lightweight language that compiles into JavaScript

Codesniffer

pear.php.net/package/PHP_CodeSniffer
This tool checks PHP code to a defined standard

Moodboard Lite

itunes.apple.com/us/app/moodboard-lite/id369796813?mt=8
iPad app for creating mood and inspiration boards

Codosaurus

itunes.apple.com/us/app/codosaurus/id382500932?mt=8
FTP Client which allows you to edit your code directly on the server

Coda

www.panic.com/coda
The popular Mac-based text editor from Panic

Divvy

www.mizage.com/divvy
A screen workspace management tool

Fitvids

www.fitvidsjs.com
A jQuery plug-in for fluid-width embedded videos

HTML-Ipsum

www.html-ipsum.com
Quick and easy Lorem Ipsum placeholder text in various HTML contexts

Sublime Text 2

www.sublimetext.com
The feature-rich text editor for web app developers

Markdown

daringfireball.net/projects/markdown
Automatically expand marked-up text to full HTML using markdown

Video.js

www.videojs.com
Video player with the same API for HTML5 and Flash

AnythingSlider

www.css-tricks.com/examples/AnythingSlider
A multi-purpose content slider jQuery plug-in

BuySellAds

www.buysellads.com
An ad network that’s popular among web designers

Notepad++

www.notepad-plus-plus.org
The popular and powerful text editor

BBEdit

barebones.com
Browser/Inspector Combo

  • Tell a Friend
  • Follow our Twitter to find out about all the latest web development, news, reviews, previews, interviews, features and a whole more.
    • http://wwwit.webconsultancy.com web designer in uk

      Thanks alot for your great post , very useful for me….

    • Pingback: 50 web design tools for 2013 | Features | Web Designer | Beachdrop

    • Pingback: 50 web design tools for 2013 | Features | Web Designer | inLine Media RSS Blog

    • http://www.51degrees.com Joe

      Very interesting read, showed off a ton of cool, new technologies that are going to explode in the new year. I would mention however that there was a distinct lack of non-responsive web tools such as our device detection solution at 51degrees.mobi. I would be interested in hearing your opinions on responsive vs non-responsive design solutions.

    • http://www.konetserv.com KoNetServ

      Great list of tools and other stuff. But what about SASS & LESS ?? I think this should have be mentioned in this article too! Greets from Germany.

    • http://www.cstech.net.au Mark Sanford

      Great to know these tools. I will definitely check these things out to help me in improving my web design skills.

    • Pingback: Tips and Tools For Effective Web Design | PCM Client Boost

    • Pingback: pinky5.com

    • http://www.webimpdata.com Robin
    • Maria Rabbani

      great post, found it useful :)

    • http://planowebdesign.net/ Plano Web Designer

      Many great tools, which will improve the speed of designing websites. You’ll never have to dig deep with Google for finding a great list such as this. Definitely a must have bookmark!

    • http://veolay.com David

      http://veolay.com is also a great free cms for web designers like us.

    • http://redfatherland2823.webs.com/apps/blog/apps/blog/show/28062189-get-your-business-know search engine optimization

      Generally I don’t read post on blogs, but I would like to say that this write-up very forced me to take a look at and do so! Your writing taste has been surprised me. Thanks, quite great article.

    • Arlen Mark

      Thanks for compiling this list!
      I’ve been working with proofhub.com on some projects and with Wikis (Confluence/Jira) on others. We’re also trying Yammer for corporate market monitoring.

    • WebDesigning CompanyinChennai

      Wow Really very useful information.

      Thanks a lot for sharing it with us. I will look forward to read more from you.

      Could I share this information on my site.

      http://webdesigningcompanyinchennai.in

      Web Designing company in Chennai

      Website designing company in chennai comes under arts. The web development not only developing the website,

      It also providing more services like Broucher design, logo design, Internet applications like Classified sites,

      Social networking sites, e-commerce development etc.

    • IT Hub Guru

      Really very useful information.

      Thanks a lot for sharing it with us. I will look forward to read more from you.

      Could I share this information on my site.
      http://www.ithubguru.com/