A part of every web designer’s functions is to find new methods for improving the way things are made, this includes finding ways of reducing file sizes, cleaning messy code, optimizing images and testing the site’s performance
As web designers, we’re always looking for new tools and gadgets to make our lives easier and be able to work faster and more effectively.
These tools can be helpful in many different ways, including image editors, code formatters, SEO analyzers and more; we have gathered more than 250 web design tools that will help you save time and concentrate in the most relevant aspects in web design instead of figuring out how to optimize a CSS, boost your site’s traffic or reduce a JPEG size.
Web Editors and Generators
For the first category we have web editors and generators. These tools fulfill a role similar to the one provided by programs such as Dreamweaver with the advantage of being usually free and lightweight.
We have divided this category in three essential subcategories, the first one showcases exclusive web editors that can help you design and develop websites and/or applications with ease, the second category is frameworks, essential tools designed for very specifical purposes and, finally, the third section of this category is destined to useful web form tools.
Web editors are software or online applications designed for help people create web pages. Although it’s true that you can use any text editor (e.g. Notepad) for creating a website, specialized web editors give you additional functions
and easier ways of previewing sites. On this section we cover all those web editors that have no focus in CSS but on general web design instead.
HTML Instant is a simple and easy to use real-time code editor. The interface is unobtrusive
BlueGriffon is a great WYSIWYG
web content editor powered by Gecko, the same rendering engine of Firefox 4. The editor is a modern and robust solution to edit web pages while playing along with the latest web standards.
You can download BlueGriffon for free in several languages, including English, German, Spanish and more.
The program offers support for the latest programming languages, including HTML5 and CSS3. BlueGriffon can be utilized for optimizing sites that have not been created with it.
and it helps developers to perform tests and debug the code collaboratively, which means that any changes can be shared through an URL with your peers so they can give you feedback and help you improve your work.
Rendera is a very helpful web editor designed to ease the learning process of new programmers and web developers. For start, you can enter your HTML and/or CSS code and see how it gets instantly rendered every time you hit the Enter key, this results can be saved from the export tab.
jQuery tools and jQuery UI. One of the key features of Rendera is the fact that you can work with HAML and SASS
languages and easily convert them into HTML and CSS.
to help people build powerful sites with ease. The great thing about Modernizr is that it uses these languages to help you create amazing sites that no matter the browser or device that the user is using will always render well.
Another interesting aspect of Modernizr is that it lets you combine feature detection with media queries
and conditional resource loading, giving you all the essential tools for powering up and add flexibility to your websites. The tool has improved all the major flaws of the original version, making Modernizr 2 a truly powerful tool for start making awesome websites and applications
A great HTML5 tool, Aloha is a WYSIWYG
elements using a supersonic text area, though you must be careful with the configuration and storage.
Aloha works perfectly in all modern browsers thanks to HTML4!,
the HTML5 editor that implements all functionality without compromising any of the HTML5 specifications. The final goal of Aloha is to generate highly compliant xHTML5 content without having to use specific HTML5 methods.
Maqetta is an Open Source tool that lets you edit HTML5 interfaces
over a WYSIWYG editor. The tool itself is build upon HTML, which allows Maqetta to run in your browser without requiring additional plugins or extensions.
Most HTML pages created using Maqetta work perfectly in all modern browsers
Another great tool for web designers / developers, Initializr is an HTML5 template generator
that helps you begin any HTML5 project. The tool is built on HTML5 Boilerplate, the popular template developed by Paul Irish and Divya Manian, Initializr helps you instantly generate a clean and customizable template based on Boilerplate with everything you might need for begin your project.
Frameworks / Grid Systems
For this next section we have frameworks, which are special tools designed to support the development
of dynamic sites, applications and services. Frameworks are created to ease the heavy load that many web development processes often carry by providing useful libraries such as database access, template development frameworks and session managers. We’ve found some very useful frameworks that as web designer, we consider that can be really helpful for you.
G5 is a powerful framework created with the objective of accelerating workflows,
support good coding practices and work as a starter file for new web pages. The framework has been constantly updated, resulting in a lightweight tool with non useless elements included.
You can utilize G5 Framework for personal and commercial use as long as you keep the humans.txt file unaltered and in the index head. G5 comes in a single package that includes Modernizr 1.6, jQuery 1.5.2 with fallback, CSS3 Pie, IE6 PNG fix and more.
Blueprint is a CSS framework that helps developers increase their productivity
by providing a strong base to start any project from, the base includes an easy to use grid, sensible typography, helpful plugins and even a printing stylesheet.
Some other features include a CSS reset, form styles for creating highly compelling user interfaces, print styles for setting any web page in print mode, useful plugins for tabs, sprites and buttons, Blueprint is definitely a great framework that you should check.
Yet Another Multicolumn Layout, or simply YALM, is an xHTML / CSS framework developed for creating modern and flexible floated layouts
through a versatile structure and easily accessible for end users. The framework includes multiple extensions, design patterns for typography, forms, micro formats and a complete multilingual documentation.
An awesome HTML5 / CSS3 framework designed for making responsive, cross browser
websites using beautiful typography. Gridless utilizes media queries to serve a progressively-enhanced responsive layout that ranges from small mobile devices to large desktop and tablets.
Some of the Gridless’ features include CSS normalization instead of CSS reset, optimized print styles, HTML5 and CSS3 ready, safe CSS hacks in replace of conditional class names / stylesheets and a well organized folder structure.
This neat grid navigation effects using jQuery shows you ten ways to navigate through a set of thumbnails. Take a look at some of the possibilities and how to apply the effect. You can use the mousewheel to navigate through the thumbnails.
Not Just a Grid is a flexible and modular CSS framework designed with the only purpose of helping designers / developers construct and develop websites with ease. The framework has been designed considering larger screen
sizes and the use of CSS3
for progressive enhancement and richer user experiences.
The framework also includes separate stylesheets covering multi column layouts, typography, web forms, tables and user experience improvement. Not Just a Grid also includes a wide range of common images that can be used for both visual styling and user interface enhancement, these images can be changed to suit your needs with ease.
SDT is a powerful frameworks for web developers with many useful features, including cross browser editable, shareable data grids, it also includes filterable, searchable and paged tables, fully customizable PHP output and CSS and the awesome feature of drag and drop
As most of you already know, a web form is a section of a document that contains regular content, markup, controls (check boxes, menus and more) and labels on top of those controls. Forms are usually placed to be filled by the user
by modifying its controls (typing down text, choosing menu items, etc.), before submitting the form for being processed.
HTML form is one of the easiest ways of building web forms, it allows you to create your own HTML form and download it as a ZIP file that can be easily installed in your website. These forms can be embedded in any web page, they also include a simple yet powerful database, an online data checking tool and a CSV / Excel
You can install these forms with no further configuration nor additional programming, which means that you don’t have to worry about setting up databases. The site offers a free plan
that works for most users and a premium package for those who want an even more powerful system. Another feature included lets you assign your forms the function of sending you and your visitors an email every time a new record is entered.
Ajax Autocomplete for jQuery allows you to easily create autocomplete/autosuggest boxes for text input fields. It is built with focus on performance. Results for every query are cached and pulled from local cache for the same repeating query.
An unbelievably easy way to add style and validation to your forms. Forms are everywhere and, usually, suck. Formly makes adding forms to your site a bit more exciting. Easily add style, validation, and a more impressive user interaction with a single function.
As every web designer knows, style sheets are build after a series of style rules
that dictate the browser how to showcase a document. These rules can be linked to HTML in multiple ways, though the ‘style’ element is the most used. Although you can develop a site without paying attention to CSS, the truth is that mastering CSS will give you the weapons to turn a plain web page into a brilliant piece of design and interactivity. On this section we will show you some pretty cool tools that will help you improve your CSS
This section covers all the tools that can help you reduce programming times by automating several processes that often take lots of time that should be spend in more pragmatic things, these next tools can definitely help you out with this and become a more efficient designer / developer.
The first CSS generator of the list is CSS3 Maker. As you know, CSS3 is the latest version of CSS and one of the major booms in web development of the present time, with CSS3 you’re now able to do things that were previously hard to achieve such as animations, designs and more!. The CSS3 Maker lets you create your own designs and styles
without having to start from zero.
Among some of the elements that you can generate with CSS3 Maker we find Border Radius, gradients, CSS animations, RGBA, text shadows, box shadows and @font-face. Every design is displayed in a preview version, a code preview and a compatibility
The CSS3 Generator is another awesome tool created by Randy Jensen
for designers and developers. The tool lets you create your own CSS3 designs and grab the code instantly while previewing how your design is going to look like. Some of the aspects that you can work with are Border Radius, Text Shadow, RGBA, @font-face, multiple columns, gradients and more.
The Spiffy Box is an automated system to generate nice CSS designs
with ease. First you adjust the controllers until you get the desired result, then you can save the result, copy the CSS / XHTML and enjoy your creation. The aspects that you can work with whilst using Spiffy Box are height, width, corner radius, foreground color, background and border color.
Although this is not a generator itself, it does provide some wonderful CSS boxes ready to be used, which is something that just like generators can help you save tons of time. Inspired on old school photo frames and web forms, our friends at ThemeShock
designed this set of beautiful boxes using CSS3 only (no images).
The boxes work well in modern browsers, though a more compliant version is coming soon. To utilize these boxes you just have to paste a short line of code and you’re set. You can find a helpful tutorial explaining all the process behind the creation of this boxes in TutorialShock
Another great addition from ThemeShock
, this CSS shadow generator lets you experiment with most of CSS shadow properties, play with opacity, add blur and change position,
all being updated in real-time inside the preview box.
As well as the image preview, the CSS code is also updated in real time, assuring that every time you make new changes, the code is updated to the last version. The tool gives you the chance to experiment with several shadow styles, including default, bottom, sideways and more.
Simple and elegant, this user-friendly CSS3 generator developed by Eric Hoffman and Peter Punk is helpful for those who want to generate simple designs
using CSS, while exploring some of the basics. The aspects that you can change are: Border radius, box shadow, background gradient and opacity, all of these adjustments are displayed in real time and you can get the code at no cost, the tool also includes an option for IE users that helps you generate compliant designs.
If you are a Photoshop fan, then you’re definitely going to love this tool. Layer Styles uses the same Photoshop Layer Styles’
window as interface to let the user play with different color and light properties, with the difference that this tool is entirely based on CSS.
The similarity with the real Photoshop panel is amazing, considering the fact that this is entirely built on CSS. You can adjust different parameters such as spread, distance, size and even set the light source checking the global light box. Although you cannot find all the options that the original Layer Styles window has, you can adjust things such as Drop Shadow, Inner Shadow, Background, Border and Border Radius.
An astounding CSS ribbon generator,
not even Photoshop or Illustrator can pull together a more effective way of generating multiple ribbons by just changing a few numbers. Among some of the aspects that you can set in order to generate your ribbon we find front width, ribbon height, back left and back right width, overlap distance, bottom overlap height and more.
The results can be updated once you have the ribbon you want, the tool displays both a graphical version of the ribbon and the HTML / CSS code that you need to use on your site.
CSS color tools
Although CSS have always been able to work with color, it was a rough and basic feature. Now with the arrival of CSS3, wonderful things can be achieved regarding color using CSS only, we have found some helpful tools that will help you skip the whole Photoshop process.
As the first item of this section we find a nice color tool from Colorzilla. This CSS gradient generator takes advantage of CSS3 to generate beautiful gradients without using images, the tool requires for you to have the latest version of your browser in order to support all the features.
The CSS gradients generated by the tool are cross browser,
which makes them suitable for all modern browsers and in case that you’re using Internet Explorer (IE), the tool will reduce the gradient to a simpler one. To generate your own gradients you can adjust the position, stop color, add color stops and more, also you have the chance of previewing the resulting gradient before copying the resulting CSS into your site.
Grad Color is an easy to use tool that helps you generate several gradients using CSS only. The generated gradients are not supported in older browsers, though some of them are able to adapt the gradients and showcase a simpler version of them.
By default, the tool adds a background color in case that the browser does not support CSS3 gradients
, this problem happens more often in older Internet Explorer versions.
A tiny CSS-powered gradient editor, this tool developed by Bart Kelsey makes use of jQuery, jQuery UI and Farbtastic to deliver nice and simple gradients. You can generate as much color stops
as you want and adjust their position only while opacity and other adjustment values become available, once you have the ideal gradient, just hit the ‘Show CSS’ button to copy the code on your site.
The main reason behind the popular fight between Adobe Flash and CSS.
Since the CSS3 release, web designers and developers are able to generate simple but yet attractive animations without having to appeal to codes like ActionScript, this turns out in a simplification of the whole web design process that has improved the performance of most web developers.
In case that you’ve worked with Mc. Tween, the popular Flash extension, then you’re going to love Ceaser. Using the power of CSS, this tool lets you choose between different easing types
and test them out, but this isn’t just a testing tool, it actually lets you grab the resulting CSS code and use it on your site. Ceaser was created based on some of the most popular animations from Flash and jQuery.
Sencha is a nice desktop
application designed to help you produce astonishing CSS3 animations
for webkit browsers and touchscreen mobile devices. Using Sencha can help you make beautiful lightweight animations that can easily be implemented on any site, the tool gives you the chance to generate smooth transitions, animate text, images, buttons, generate gradients and even embed analytics tracking code.
In the past, making great web buttons was something that only skilled designers were able to do, but since CSS3 hit the scene, everything changed. Now you can create some amazing button designs without a single pixel involved, just CSS.
The Da Button Factory API
lets you dynamically generate buttons,
you can adjust several parameters, including typeface, font size, text shadow, style, rounded corners, background, size and even the output format. This tool is definitely something really helpful for those who prefer to stay away from graphic programs.
This is a simple, yet beautiful Sliding download button. First look like a Download Me buttons, but once you hover over it, the butto n slide a side and shows a new message under.
One of the most complete
CSS3 button generators around, this tool lets you modify almost everything. First you have a gradient box where you can adjust the colors, set the position and add more stop colors, then you have the border box, here you can change the color, size and position. On the box section you can determine the color, alpha, blur and position, finally, on the text area, you can determine the font size, change the button text, the typeface and the color.
Definitely an user-friendly
tool with some really cool features, Buttonize is a lightweight, flexible and instant button framework. Although the framework must be downloaded and implemented on your stylesheet, we really recommended it; one of the nicest things of the site is that every time you click over a button, the site gives you the name of that specific button as well as the fittest usage that you can give to it.
Using sprites is one of the most effective ways of reducing transfer times and optimizing
websites. With sprites, you can combine as much images as you want into one, making easier for the website to load just specific parts of the image instead of having to parse multiple images.
Because dealing with sprites can be sometimes a little difficult, you can use this tool to make this process way easier than usual. First you need to choose the image files you want to use in your CSS sprite, then upload them and select ‘create CSS sprite’, then the tool will automatically join all the images into a single file
and deliver the CSS / HTML along with a rollover effect in case you chose one.
Spritemapper is an application that combines multiple images into one and generates CSS positioning for the corresponding slices. With Spritemapper you can improve loading times by reducing the amount of times used on the site, the tool is really easy to use as it does not require any additional syntax to work, you just have to define the images you want to use and set the CSS background declaration.
As we said previously, CSS sprites help you reduce the number of requests that your site needs to perform to load several images by merging several images into a larger one, then you can manipulate the background position to display only the part you want.
On this site you’re going to find an useful tool that can help you generate CSS sprites with ease, just upload the pictures and adjust the settings (size, output, color, format, etc.) to obtain your own CSS sprite.
Spritebox is a WYSIWYG tool that helps you create CSS classes and ID’s
from a single sprite image with ease. The tool utilizes the background position property to align areas of a sprite image into block elements of a web page. Spritebox has been developed using HTML5, CSS3 and jQuery, besides that, the tool can be used for free!.
Sprite Cow is a nice tool that helps you adjust the background position element along with height and width values of sprites, all this through a slight portion of CSS. The great thing about Sprite Cow is that it grants you complete control over the optimization and compression, which is something you cannot do manually.
Now with CSS, you can even create your own patterns (without having to open Photoshop) and use it on your website, regarding this, we’ve found a couple of nice CSS pattern generators that may come handy for you.
An astounding collection of pure CSS3 patterns ready for be implemented on your site. Most patterns only work in modern browsers (older ones might render them inappropriately), the gallery itself is also viewable by modern browsers only. In case that you want your pattern to be included, make sure that you’re sharing a new design and not just an adaptation of another design.
The patterns themselves should work on Firefox 3.6+
, Safari 5.1
, Opera 11.10+
. However, implementation limitations might cause some of them to not be displayed correctly even on those browsers (for example at the time of writing, Opera doesn’t support radial gradients and Gecko is quite buggy with them).
This is definitely one of the most awesome tools of the article. Creating patterns was something that only Photoshop and similar programs were able to do in the past, now with the latest version of CSS this can be done without a single pixel involved in the process. Patternify helps you generate your own patterns or modify preset designs and then download them as PNG files or embed them in your page,
though these patterns are not properly made in CSS, the interface is easy to use and indeed faster than going through the whole designing process in PS.
CSS menu generators
Building goo looking menus is something that without the proper tools could easily take a while. On this section we like to share a really helpful tool that will make the whole process of creating CSS menus a piece of cake.
The CSS Menu Builder is a nice tool that lets you select between 300+ different horizontal and 700+ vertical menu combinations to create the best menu for your site. The site also features more than 200 combinations for creating breadcrumb menus, giving this a total that goes beyond 1000 combinations.
Thanks to the user-friendly interface, you can easily customize your own menu and export it to your site.
When you’re starting to learn CSS, it usually happens that you’re coding structure is not the best,
maybe you’re overusing some classes, adding more spaces than necessary or just typing lots of lines to solve something that can be easily fixed in a couple of lines. On this section you will find some neat tools that can help you format your CSS and make it look appropriately.
The first tool we have is CSS Lint, an online tool built to help you detect problems in your CSS coding. The tool does basic syntax assessing
as well as applying a set of rules to the code that look for problematic patterns or signs of inefficiency. These rules can be manually deactivated so you can easily write your own rules or omit the ones you don’t want to be applied during the overhaul.
From CSS Drive we have CSS Compressor, a helpful utility that helps you compress your CSS to increase loading speed and optimize
your site. The tool allows you to choose between three compression levels, depending on the legibility / compression relation, you can also switch to advanced mode to set even more parameters.
ProCSSor is a great free tool that helps you add format to your CSS code in the way you want, while enhancing your CSS to make it more lightweight and easier to read. The tool is easy to use, just adjust the different parameters and the tool will automatically process your CSS.
An awesome tool that helps you generate CSS coder with great easiness and without having to be an expert in CSS or programming because the tool was built to do things for you. The tool updates every change you make in real time,
these changes include color, shape and measures. You can download the resulting easy and implement it on your site.
Styleneat is a CSS processor that organizes and standardizes all your CSS selectors, sub-selectors and properties in a single structure that makes easier to establish page areas and see how they relate to each other. The tool has been tested in several sites with excellent results, though you can always reach them if you find any bugs or malfunctions.
PCSS is a PHP 5-driven CSS formatter
that helps developers to write better CSS code. Some of the tool features include class nesting, server-side browser specifics, default units and variables. PCSS also detects specific server-side shortcuts such as “-moz”, you can also work with @font-face and let the formatter help you adjust all the resulting code.
Normalize is a customizable CSS file that makes browsers render all elements more consistently while playing along with modern standards.
The tool evaluates the main differences between the main browsers in order to detect the exact elements that need to be normalized.
With CSS Pivot you can add CSS styles to any website and share the result with a short link so others can se the improvements of your website
To continue our research of useful CSS formatters we have PrefixMyCSS. This nice tool is easy to use and will save you lots of writing time; first you’ll need to write the code, then paste the CSS and prefix!. It’s important to clarify that the tool is currently in alpha version, so minor bugs might eventually show up.
There’s no much to say about CSS Prefixer besides the fact that it can help you add format to your CSS with ease, just paste the code you want to enhance and voilà.
Grid and layout systems
This is one of the most important sections in case that you’re a web designer or you’re considering becoming one. Grids are two-dimensional structures
usually made by intersecting vertical and horizontal lines, the purpose of grids is help designers place the content, in web design this term has been getting more popular recently due the diversification of browsing devices (smartphones, tablets, etc.).
Along with grids we find the concept of layouts. These elements are preset versions
of a web page, a magazine or any graphic piece that can be used by the designer to build his design on top of that structure. Unlike grids, layouts have already determined the position of most elements, which is something very useful in case that you don’t want to start diagramming from zero.
Tiny Fluid Grid is a simple and useful webpage build by the Girlfriend
team. You can generate basic grids and download them so you can use them in your sites, this can be specially useful for cases when you’ll be using the same grid over and over again.
Gridulator is one of the nicest grid generators around. Created by David Sleight after seeing that most grid generators are usually created for printing purposes only and that Adobe Photoshop has a very basic grid manipulation system, Gridulator is definitely a great solution
for any web designer.
To start using Gridulator you need to start by determining the number of columns you want and the tool will instantly tell you all the possible grids you can use that have round integers. The tool also features inline previews by taking advantage of the canvas element; once you have your grid ready, the tool will give you full size PNG files ready for download and utilize in your CSS, Photoshop docs
and just everything you might need.
This tool arrives by the hand of the Yahoo team, the YUI grid builder is a nice and simple grid generator that can help you create your own CSS grids with ease, you can assign the number of columns, total width, sidebars and even check the reading order. Once you have the grid set, all you have to do is copy the code and paste it on your website.
Specially designed for those who own humongous monitors,
the 1140 grids helps you fit your content in a 1280 monitor with ease, while becoming fluid and readapting
in case that you’re using smaller screen resolutions. In case that you’re using a mobile device, the grid makes use of media queries to support this resolution, which means that it stacks all columns on top of each other to keep the information logical and easy to read.
Probably the most popular
grid system among web designers and developers, the 960 Grid System is an attempt to set a standard for most web pages by establishing a width value of 960 pixels with two possible variants, 12 and/or 16 columns. The 12 column system divides the grid into 60 pixels wide sections, while the 16 column system reduces this width down to 40 pixels, it’s important to state that every column has a 10 pixel margin from the left and the right, which means a total of 20 pixels destined to margins only.
Columnal is a CSS grid system based on some previous grid generators and with some extra features added. With this tool you can make responsive web designs with ease, the system goes up to 1140 pixels wide
but thanks to its fluid property, it can easily readapt to small resolutions and even display a mobile-friendly layout.
Flexie offers cross browser support for the Flexible Box Mode
. For those who are not familiarized with the term, the Flexible Box Mode describes a CSS box model optimized for interface design.
It provides an additional layout system alongside the ones already in CSS. In this new box model, the children of a box are laid out either horizontally or vertically, and unused space can be assigned to a particular child or distributed among the children by assignment of “flex” to the children that should expand.
Is a jQuery plugin allowing you to easily specify direction, fade-in, fade-out, and a host of other options to a grouping of elements, is great for inventory or anything with a large amount of items ordered in a grid.
StackLayout is a flexible width, component based
CSS layout system. Using StackLayout can help your mockup process get easier thanks to its default class names and shifting to semantic class names when you deploy, that way you’ll never have to leave your markup messed up with non-semantic class names.
Another relevant aspect is that the default StackLayout is a fluid-based layout on percentage widths so you can mockup your design quickly