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

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

20 Must-have web design tools

01. Adobe Edge Inspect

http://html.adobe.com/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.

02. OOCSS

www.github.com/stubbornella/oocss/wiki
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

www.twitter.github.com/bootstrap
Bootstrap is a starting framework for web sites and webapps that includes ready-to-use HTML, CSS, and JavaScript-based modules for common UI components and interactions. Bootstrap helps you avoid reinventing the wheel, and lets you focus on innovation.

04. Backbone.js

www.backbonejs.org
Backbone.js is a web app framework that helps you structure your JavaScript using the well-known Model-View-Controller (MVC) pattern. If you want better structure and maintainability in complex apps, it’s well worth looking into the power of Backbone.

05. Adobe BrowserLab

browserlab.adobe.com
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

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

07. Modernizr

www.modernizr.com
Dealing with cross-browser inconsistencies has been an ongoing battle for developers since the days of the Netscape-IE browser wars. Modernizr makes these inconsistencies elegant to work with. This open-source JavaScript library dynamically adds helper classes to a document’s <html> element, so you can have separate CSS rule sets for non-JavaScript users or users whose browsers don’t support many new CSS3 features. But primarily, Modernizr helps you to easily detect support for new web technologies, including CSS3, HTML5, and miscellaneous DOM features, and then deal with the results (either support or non-support) accordingly.

08. Prefixr

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

09. LiveReload

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

validator.w3.org
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.

11. Typekit

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

12. Yeoman

www.yeoman.io
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.

13. HotGloo

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

14. Firebug

www.getfirebug.com
Firebug is the very popular Firefox add-on that makes CSS and JavaScript debugging and profiling a breeze. Always just a keystroke away, Firebug lets you examine the DOM, change CSS on the fly, and create scripting breakpoints. The console lets you execute JavaScript as you go, and replaces the old-school method of firing alert messages to view values in mid-execution, allowing you instead to log values directly in the console. It also has excellent error logging, search functionality, cookie management, and more. Firebug is continually adding new features and improvements, and is absolutely essential for anyone testing and debugging code in Firefox.

15. Mootools

www.mootools.net
A popular alternative to jQuery, MooTools offers a framework for achieving common tasks such as grabbing a DOM node and assigning a CSS class. As with jQuery, the system is extensible and there is a rich ecosystem of plug-ins and extensions available. While not as well-known now as jQuery, MooTools uses a similar approach and is still very useful for rapid JavaScript development.

16. jQuery Boilerplate

www.jqueryboilerplate.com
A jump-start for your jQuery plug-in development

17. OpenCrypt IP Geo-Location API

www.opencrypt.com/ip-location.php
Get your visitor’s location in the world from their IP address

18. Flowplayer

flowplayer.org
An easy-to-implement media player to show self-hosted video

19. TinyMCE

tinymce.moxiecode.com
Rich Text Editor with extensible platform for additional plug-in functionality

20. Subtle Patterns

subtlepatterns.com
A gallery of free elegant background patterns

  • Tell a Friend
  • Follow our Twitter to find out about all the latest web development, news, reviews, previews, interviews, features and a whole more.