premiumpacks

Web design software: 250 fresh and useful tools

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.

Editors

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

HTML Instant is a simple and easy to use real-time code editor. The interface is unobtrusive as it simply features a left section where you type down the code and a right section where you get instant results. This tool is definitely great for working on your HTML skills, it allows you to embed pictures from Photobucket and Imageshack, the editor also includes undo/redo/reset and select buttons, supports HTML, CSS and JavaScript. webtools01

Blue Griffon

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. webtools02 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.

JS Bin

JS BIN is an user-friendly web editor developed by Remy Sharp, the editor is specially designed for working with JavaScript and CSS 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. webtools03

Rendera

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. webtools04 The editor also includes some neat HTML5 and CSS examples that you can play with, these examples can be accessed from the examples tab and can be rendered immediately. Regarding JavaScript, the tool gives you the chance of working with jQuery, 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.

Modernizr

One of the most popular tools among web designers and developers, Modernizr is an Open Source JavaScript library that harnesses the power of HTML5 and CSS3 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. webtools05 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

Aloha Editor

A great HTML5 tool, Aloha is a WYSIWYG rich text editor powered by JavaScript and with the support of xHTML5. Aloha can be integrated within your CMS, blog, wiki software and just any kind of project where you need to edit content using a web based tool. Aloha also lets you edit most DOM elements using a supersonic text area, though you must be careful with the configuration and storage. webtools06 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

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. webtools07 Most HTML pages created using Maqetta work perfectly in all modern browsers (IE included), though it’s important to state that this feature depends on your current JavaScript toolkit and coding details, anyhow, Maqetta works perfectly as long as you have the latest version of your browser to support all the HTML5 features.

Initializr

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. webtools08 Initializr lets you determine several aspects before creating your template, including activate / deactivate JavaScript, adjust jQuery power, set compatibility mode, server configuration and more.

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 Framework

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. webtools09 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

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. webtools10 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.

YAML

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. webtools11

Gridless

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. webtools12 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.

Grid Navigation Effects

043-grid-nav-effect 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

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. webtools13 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

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 GUI. webtools14

Forms

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

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 exporting format. webtools15 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

041-autocomplete 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.

Formly

067-form-glamorizer 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.
CSS tools
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 developing skills.

CSS generators

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.

CSS3 Maker

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. webtools16 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 chart.

CSS3 Generator

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. webtools17

Spiffy Box

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. webtools18

Awesome Pure CSS3 frame boxes

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). webtools19 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.

CSS shadow generator

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. webtools20 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.

CSS3 Generator by Eric Hoffman

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. webtools21

Layer Styles

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. webtools22 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.

3D Ribbon Generator

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. webtools23 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.

Ultimate CSS Gradient Generator

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. webtools24 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

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. webtools25 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.

CSS Gradient Editor

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. webtools26

CSS Animation

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.

Ceaser

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. webtools27

Sencha Animator

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. webtools28

CSS Buttons

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.

Da Button Factory

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. webtools29

Pure CSS3 Download Button

051--boxtuffs 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.

DryIcons CSS3 Gradient Button Generator

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. webtools30

CSS3 Buttonize Framework

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. webtools31

CSS Sprites

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.

CSS Sprit.es

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. webtools32

Spritemapper

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. webtools33

CSS Sprite Generator

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. webtools34 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

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!. webtools35

Sprite Cow

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. webtools36

CSS patterns

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.

CSS3 Patterns Gallery

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. webtools37 The patterns themselves should work on Firefox 3.6+, Chrome, Safari 5.1, Opera 11.10+ and IE10+. 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).

Patternify

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. webtools38

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.

CSS Menu Builder

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. webtools39

CSS format

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.

CSS Lint

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. webtools40

CSS Compressor

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. webtools41

ProCSSor

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. webtools42

Easy CSS Styler

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. webtools43

Styleneat

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. webtools44

PCSS

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. webtools45

Normalize

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. webtools46

CSS Pivot

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 webtools47

PrefixMyCSS

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. webtools48

CSS Prefixer

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à. webtools49
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

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. webtools50

Gridulator

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. webtools51 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.

YUI CSS Grid Builder

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. webtools52

1140 CSS Grid

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. webtools53

960 Grid System

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. webtools54

Columnal

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. webtools55

Flexie

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. webtools56

DiagonalFade

044--diagonal-fade 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.

Stack Layout

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. webtools132 Another relevant aspect is that the default StackLayout is a fluid-based layout on percentage widths so you can mockup your design quickly, this guarantees that you will always be able to work for different screen resolutions.
Cross browsing
One of the terms that has become more popular in the past couple of years is cross browsing, which is a term that makes reference to the ability of any website, application or similar to support all web browsers, a website that has cross browsing capabilities can be properly rendered by all browsers, guarantee a quality experience for all users. On this section we’re going to list some really helpful tools that will help you check the cross browsing properties of an element and learn how to properly build cross browsing sites and applications.

Screen size tools

One of the aspects concerning cross browsing is making your site / app able to readapt its structure at different screen sizes without losing any content, here’s a short list of some useful tools that can help you out with this goal.

ResizeMyBrowser

Developed by Chen Luo, ResizeMyBrowser is an online application that lets you test different screen resolutions with ease, the tool is able to set the browser size by both Inner window and Outer window. When resizing the browser manually, the tool will automatically display the current size in real time, the tool works best on Safari and Firefox because Chrome and Opera have poor support for the ResizeTo event. webtools57

TestSize

TestSize is a nice and simple website that lets you explore different screen sizes to see how a specific website looks like. You can go from small mobile to large desktop sizes to see how your website behaves on different screen resolutions. webtools58

ViewLikeUs

Useful online application that allows you to check how your website looks in the most popular screen resolution formats. ViewLikeUs is powered by Ajax and PHP so you don’t need to download anything!, just type your URL in the box and start checking how your site looks. webtools59

Mobilizer

Mobilizer is a nice mobile/desktop app that allows you to check mobile websites, design mockups and local HTML on your Mac and/or PC devices, the application also supports previewing on iPhone 4, Palm Pre, HTC Evo and Blackberry Storm. Some other features include drag and drop support and check a single site on multiple devices, finally, you can export PNG versions of the different views to use in your portfolio or presentations. webtools60

Browize

Simple and effective, Browize is an online browser resizer that lets you experience different screen resolutions without even closing your browser, the program is currently supported by all modern browsers except for Google Chrome. webtools61

Website analysis

Checking how well your website is doing in terms of compatibility and support is something that you should check every once in a while. On this section we like to share an useful tool that will let you assess your site’s performance.

The HTML5 Test

The HTML5 test score is a nice website that parses how well your browser supports the upcoming HTML5 standard and related specifications. Even though these specifications are currently in a developing phase, all major browser manufacturers are making sure their browsers are ready for the future. With this great tool you’ll be able to find out which parts of HTML5 are already supported by your browser today and compare the results with other browsers. webtools62

Compatibility check and enhance

This section gathers a few helpful tools that can help you check how well is your site being rendered on different browsers and how to make this better by updating the code or adding some additional features and functionalities to your site.

Browsera

The first tool we find is Browsera, an automated browser compatibility tester. To use Browsera, first you have to select the browsers to be tested and the URLs that will be examined, once this is done, Browsera will be able to check multiple pages with ease and render them on the browsers that you have specified previously. Once this part is done, Browsera will collect all the errors that should be fixed and it will show them to you, another great thing about this tool is that it takes screenshots of every page that has been rendered, allowing you to compare results after the test has been completed. webtools63

CSS3 Selectors Test

From CSS3 Info we got this great CSS3 Selectors Test. To use this tool, first you need to run the test suite, which will automatically run a large number of small tests that will help the tool to determine if your browser is compliant with most CSS selectors, once the test has been completed, the tool will show you the results for each selector along with a small example and explanation for every test. webtools64 Because it’s technically not possible to simulate certain user interactions, the test is limited to selectors that don’t depend of user interactions, therefore this test does not include tests for the following selectors: :hover, :active, :focus and :selection.

Augment

Augment enables the use of modern JavaScript by augmenting built in objects with the latest JavaScript methods. The tool never overrides any native implementations, it only adds what is missing. To use Augment, first you need to include the augment.js source file before any JavaScript in which you wish to use modern JavaScript methods, then you just have to make sure that everything stays in order and you’re done. webtools133

Browsershots

Browsershots is an online (free Open Source) testing tool that makes screenshots of your web page in different operating systems and browsers. This tool is a great complement that provide developers a convenient way to test their website’s browser compatibility from a single place. When you submit your web address, it will be added to the job queue to later be rendered on different websites, then the application will make screenshots and upload them for you to check them. webtools65

Tables, Charts and Documentation

Although this next section will not provide any practical tools and applications to make your web design processes easier, it will give you a series of key documents and tables that if you always keep in your pocket will save you lots of time when beginning or going through a new web design project. Some of the objects included on this category feature compatibility charts, developing guidelines, HTML5 / CSS3 charts and more.

HTML5 Visual Cheat Sheet

HTML 5 Visual Cheat Sheet is an useful cheat sheet for web designers and developers designed by Antonio Lupetti, the mastermind behind Woork. This cheat sheet is essentially a simple visual grid featuring a list of all the HTML tags and their related attributes supported by HTML versions 4.01 and/or 5. The simple visual style of this sheet allows you to easily find everything you are looking for. webtools134

Scrolling Attention

An excellent article from internet guru Jakob Nielsen where he discusses everything about scrolling attention and how the user interacts when visiting a website. The article exposes tons of complete statistics and graphics that will give you a hint on how to design for the web and guarantee that all the vital information is going to be checked by the user. webtools66

HTML5 Peeks, Pokes and Pointers

On this site you will find one of the most complete tables about HTML5. The pages lists the new elements, forms, multimedia, offline, geolocation and all the aspects that you need to know about this new version of HTML5. webtools67

Punchcut

Punchcut is a complete set of tools that will help you design for different screen resolutions, ranging from small mobile devices to HD monitors and more. The package includes a complete set of Photoshop CS5 presets for the most common screen resolutions, you will also going to find fully layered PSD files for making your design presentations, finally, the package includes a reference chart for resolutions and devices. webtools68

HTML5, Web Developers Edition

This HTML5 specification is an user-friendly guide with all the major HTML specifications that any web developer needs to know about, leaving aside all the blabber that other documentations use to have. webtools69

Alternative jQuery Documentation

Although the official jQuery documentation is already there and has been doing a great job helping designers to understand this amazing framework, it seems that the document itself is quite extended and makes difficult to find specific topics with ease, usually taking several steps before reaching what the person is actually looking for. This documentation offers a complete jQuery documentation that is easy to explore and comprehend. webtools70

HTML5 & CSS3 Support

Probably the most complete HTML5 and CSS3 chart that you can find, the chart features a complete checklist that parses how modern browsers (Firefox 4+ haven’t been included yet) render most HTML5 and CSS3 properties, selectors, web applications and more. This chart is definitely a must-bookmark document that you can always check before starting any web design project. webtools71

CSS3 Click Chart

Little but really helpful CSS3 click chart, just click on the property you want to check and you will be able to read all the aspects about it. This page is constantly being updated while new CSS3 properties are released, you can always send your thoughts and help the site grow. webtools72

Perfect Multi-Column CSS Liquid Layouts

Nice series of website layouts that use percentage widths and relative positioning, these layouts work with all modern browsers including Safari on the iPhone and iPod touch. The layouts are also ‘stackable’, so you can use multiple column types on a single page. This makes the number of possible layouts endless!. webtools73
Typography Tools
Until the last decade, working with typography was something severely limited due the multiple restrictions that all browsers used to have, there was a restricted list of web fonts that designers were allowed to use while keeping certain that the site was going to look perfect in all browsers and devices. With the release of CSS3 and awesome tools such as @font-face, a whole new world has opened for web designers, whom now are able to use almost any font they want and hence create beautiful web designs and applications. On this category you’re going to find some of the most helpful tools that will help you harness all the power of typography for the web, so let’s take a look at them.

CSS3Warp

CSS3Warp is a nice text generator that evokes Illustrator’s warped text, which allows you to generate a text that follows an irregular path, the difference is that this generator works with CSS and HTML only. Currently the tool lets you modify parameters such as rotation, skew, transform-origin and more, you just have to enter the text to edit and the after adjusting all the parameters according to your preferences, the tool will instantly ‘warp’ the text. webtools74 You can modify the path’s angles or utilize a circle instead and once your text is ready, the tool will generate the CSS / HTML ready to be implemented on your site. Regarding fonts, you can utilize any of the Google Web Fonts typefaces or utilize a local font stored in you computer.

CSS3 Text Shadow Generator

From our friends at Themeshock we receive this awesome CSS3 text shadow generator, a nice tool that helps you insert different shadow effects to your texts, you can use different typefaces and combine them with all the nice shadow effects, including 3D, acid, fire, alpha and more. webtools75

FitTextjs

FitText makes font-sizes flexible. Use this plugin on your fluid or responsive layout to achieve scalable headlines that fill the width of a parent element. In other words, this is a jQuery plugin for inflating web type. 096-fittext

i2Style

i2Style is a nice text style generator with tons of great features. You can adjust the font’s size, set text and background colors, add shadow effects, set border variations (rounded corners included) and even design your own CSS3 buttons and banners, the tool generates CSS / HTML instantly, so you can implement it on your site. webtools76

CSS TXT

CSSTXT is a nice online tool that adds style to a text through a ‘p’ or ‘div’ tag. The idea of this tool is to generate a style sheet with all the options you might need, including font size, borders, line height and more great features that can help you stylize any text or paragraph. You can see a text preview to make sure of the result, then you’re able to copy the CSS / HTML code to implement it on your site. webtools77

Screen Keyboard

This is a pretty cool on-screen keyboard plugin which uses jQuery to display a keyboard on screen when the user clicks an input field. It is fully customisable where you can change the layout of keys and the color scheme. It´s really simple to use, all you have to do is: Download the plugin,, use the demo.js file as a base for creating your keyboard, tweak the settings to your keyboard layout and customise the CSS code to suit your website 097-screen-keyboard

Textify.it

This is a cool and unusual tool It makes a picture out of fonts. All you have to do is select some settings and click the “apply settings” buttons and watch the magi happen. An image will be immediately transform and made out of text. Accordingly to your request, font, color, size, etc. Definitely worth a try. 098-textify-it

Ffffallback

Ffffalback is a lightweight bookmarklet that helps you find the perfect fallback fonts. The bookmarklet performs a complete scan of the CSS in any page you want and identifies the web fonts that are being use, then it clones the page and lets you test and analyze how the site will look using different fallback choices. You can also adjust the font size, line-height and more. webtools78

Typetester

Typetester is an online application that helps designers / developers compare different fonts on a single page, this is specially useful to help you check how a single text is displayed using different fonts and be able to decide the best option for your site / app. To run Typetester you only need to have your JavaScript enabled. webtools79

Typechart

Typechart is an online tool that lets you preview and compare web fonts while changing things like size and style, you can also decide whether to check the fonts using Windows or Mac font render systems. The tool lets you download a CSS that can help you save a determined style to be used later on your designs. webtools80

FontFonter

FontFonter lets you replace a site’s font styles with web FontFonts by using custom CSS and advanced techniques. Although the tool has been designed for previewing only, it can be a really helpful tool for designers, the application is currently not supported in Opera and IE as well as some mobile browsers. webtools81

What Font Is

Definitely a must-bookmark website for any web designer / developer, What Font Is lets you discover a font’s name by checking a sample image of it. Although the tool is not as precise as you might want, it usually right-guesses the actual font, just keep in mind that fonts with special characters cannot be rendered and that the tool grabs the sample from a single line of text. webtools82
Website checking
This is an important section for web developers. When you’re launching or starting to manage a website, is important to have some tools to help you check if things are doing right in terms of speed, usability and performance; although you can perform multiple tests by yourself, having a toolbox next to you is something that can save you time and energy. On this part of the article we’re going to show you a few useful links that can help you keep your site optimized and fully updated.

Website Optimization

On the first subcategory of this post we find web optimization, which is a concept that involves a series of procedures and tests that can guarantee the correct performance and visualization of a website under different circumstances (devices, browsers, etc.). Now, here’s a short list featuring some great links that will help you keep your site on date and optimized.

Adapt

Adapt is a lightweight JavaScript tool that helps you determine which CSS file should be load before the browser renders a page and, in case that the browser tilts or is resized, the tool will check its width and only serves the correct CSS when needed. webtools83 Other methods include building separate sites for mobiles, use media queries to adjust layout and a polyfill for older browser support, the tool is also able to handle multiple image resolutions without adding file size.

Cloudflare

Cloudfare is a powerful web service that increases speed and protection in any website by filtering traffic through an intelligent global network that automatically optimizes and filters the good from the bad, showing an increase on load times and performance, thus Cloudfare will not only speed up your site but also keep spammers away from your sight. webtools84

GTmetrix

With GTmetrix you can improve your site’s speed and performance to provide a better experience to your users. GTmetrix makes use of Google Page Speed and Yahoo! YSlow to calculate your site’s performance and give you a complete analysis and recommendations on how to improve things like speed and performance within your site. webtools85

Mint

Mint is a popular web service that helps you keep your site update and as fast as possible. The tool itself is an extensible, self-hosted web site analytics program with a simplistic interface that any user can use. You can organize visits, referrers, popular pages and searches in a single page by using Mint’s flexible dashboard. webtools86 In terms of visits, Mint breaks down your site’s activity from the past day, week, month and year as total page views and unique visitors, regarding referrers, these are broken down by newest, unique, most recent and repeated referrers as well as grouped by domain. These and more great features make of Mint a valuable tool for anyone.

Speed tests

Another important aspect that can affect your site’s reputation is speed, so on the next list we have gathered a few links that can help you check your site’s velocity and see if your customers are having a good or bad experience when visiting your webpage.

ScanmySpeed

The first toll we have is ScanmySpeed, an Internet connection tester that checks the actual browsing speed of your browser and internet connection. Your internet speed is tested by sending small packets of data across the network, which is something similar to the way data is browsed in a website. ScanmySpeed does not use any additional programs/add-ons to run these speed tests besides JavaScript. webtools87

Test de Velocidad

For Spanish-speakers, this site helps you perform a quick speed test over your site to check if your bandwidth is being properly distributed and if not, then how can you fix this problem. webtools88

Speed.io

This speed test tool lets you examine different aspects, including service provider, IP address, current browser, download /upload speed, connections per minute and ping. webtools89

SpeedMeter (German)

In case that your native language is German, we have this simple and yet great site where you can easily test your site’s speed and check if your bandwidth is doing well. webtools90

Bandwidth Meter Online Speed Test

Another speed test tool, this one has an extra feature that adjust the analysis based on your location (home, work, other or public), it also gives you a brief introduction to the main concepts to keep in mind when checking a site’s speed. webtools91

Which Loads Faster?

A fun tool conceived and written by Ryan Witt that lets you compare different sites in terms of speed and performance. Which Loads Faster is an Open Source tool based on HTML and JavaScript, the tool runs 100 % on client-side, so you can host your own site’s files and teak them according to your needs. webtools92

Speedtest

Speedtest.net is a complete speed and performance tester that helps you verify permanently if your Internet service provider is delivering the connection speed they promised. You can sign up for a free account to test multiple computers, create Speed Waves, manage your test history and more. webtools93

Ping / Server Monitoring

According to Wikipedia, Ping is a computer network administration utility used to test the reachability of a host on an Internet Protocol (IP) network and to measure the round-trip time for messages sent from the originating host to a destination computer, these next links will give you a hand when trying to perform a ping test as well as checking your server’s state.

Ping Server

This site allows you to ping a server to find out if it’s online or not. This ping utility sends ICMP packets to the destination address and gives an outside view of your server’s response time, which allows you to track down any possible issues. webtools94

Server Monitoring

Server Monitoring offers a complete test and analysis service that scans CPU, load, memory, bandwidth, disks and any aspect that might affect your site’s performance. The site runs via SSH, which means that you won’t have to install any additional software. webtools95

Validators (broken links, forms, etc.)

A validator is a small but powerful program used to check the validity or syntactical correctness of a fragment of code or document. The term is commonly used in the context of validating HTML, CSS, XML documents or RSS feeds, though it can be used for any defined format or language.

Fractal

Fractal is a simple HTML and CSS Validator for email designers and marketers that lets you check exactly which lines of code are not supported in over 24 email clients. webtools96

Validity

jQuery.validity is an elegant and powerful jQuery plug-in you can use to setup client-side form validation. Instead of writing validation manually or balancing some unwieldy server-side framework, validity allows you to design client-side validation in a manner that feels natural and straightforward. It takes advantage of jQuery’s selector engine to perform validation on logical groupings of inputs, making it declarative and clean. 070-validity

Holmes

Holmes is stand-alone diagnostic CSS stylesheet that helps you highlight potentially invalid, inaccessible or erroneous HTML markups by adding one class. To use Holmes you just have to download a version of the CSS and include a stylesheet link to it on your page, then add the class ‘holmes-debug’ to either your BODY or HTML tag and you’re s