35 Extremely Useful Free Online Tools for Web Developers and Designer

Creating Web Sites is not a simple task at all and the value of getting some help from useful online tools should not be underestimated. Creating web applications requires deep knowledge and experience with many different tools, techniques, standards etc. and it is hard for developers and designers to keep track.

The purpose of this article is to provide a one stop resource introducing Web Developers and Designer to the most important tools found online. The article provides a large collection if Extremely Useful Free Online Tools that for sure will make their work a bit easier. It is important as it will allow me to add it to the article making it even more complete. So far you will find color scheme inspiration, tools for working with icons, css, fonts, domains, even tools testing compliance with standards, testing load, browser support etc. Also you will find various code and Lorem Ipsum text generators etc. Another useful and popular type of tools for building websites are WordPress themes and plugins. It is possible to set up a WordPress e-commerce website or an online portfolio in a snap.

What tools are you using to finish your work faster and with higher quality – please share your experience and favorites! If something important is missing I hope you will post it as a comment.[exec]$filestr = file_get_contents(‘http://www.tripwiremagazine.com/googleadsensebelowmoretag.inc’);
echo $filestr;[/exec]

Color Inspiration

When designing a website, one of the firsts (and most important) steps of the process is to choose a color scheme. Get some help an inspiration here!

Colour Lovers

COLOURlovers™ is a resource that monitors and influences color trends. COLOURlovers gives the people who use color – whether for ad campaigns, product design, or in architectural specification – a place to check out a world of color, compare color palettes, submit news and comments, and read color related articles and interviews. It is a color and design community for creative inspiration and sharing the love of color. Here you will find over one million color names, hundreds of thousands of color palettes and patterns, comments and ratings. Interviews with top creative professionals regarding color and articles covering current color trends and news are uploaded daily.

ColorCombos

Color Combos allow you to browse thousand of different colors combinations for getting inspired for your upcomming design. Color schemes can be browsed by colors.

Icon and Favicon Tools

Icon are key to web design and can be used to communicate messages clearly to visitors.

Favicons are a must have for any website, mostly because on modern browsers as such as Firefox, it is displayed along with the site name in tabs. It is also used in bookmarks. Creating your own favicon is simple with some online tools.

Icon Finder

Iconfinder provides high quality icons for web designers and developers in an easy and efficient way. You simply type in a keyword into the search box and Iconfinder brings you back icons beautiful icons which you can freely use.

ConvertIcon

ConvertIcon is a free online service that allow you to upload an image and get a .ico file, for maintaining compatibility with Microsoft’s browser.

FavIcon Generator (dynamicdrive.com)

Encode/Decode Tools

HTML Encoder | HTML Decoder

Type or paste in the text you want to HTML encode, then press the ‘Encode’ button, or read a brief explanation of the process of HTML encoding.

Online base64 encoder / decoder

The term Base64 refers to a specific MIME content transfer encoding. It is also used as a generic term for any similar encoding scheme that encodes binary data by treating it numerically and translating it into a base 64 representation.

Binary File to Base64 Encoder / Translator

Use this tool to create data streams for embedding images (or any type of file) in (X)HTML, CSS and XML.

Font Tools

Font Burner

Font Burner lets you search for fonts that you can embed in your site. You can embed the font you’ve chosen on your web pages by copying-and-pasting the code they provide (which uses sIFR).

My Fonts – What The Font?!

Ever wanted to find a font just like the one used by certain publications, corporations, or ad campaigns? Well now you can, using our WhatTheFont font recognition system. Upload a scanned image of the font and instantly find the closest matches in our database. If WhatTheFont can’t figure it out, you can submit your image to the WhatTheFont Forum where cloak-draped font enthusiasts around the world will help you out!

Font Struct

FontStruct is a free font-building tool brought to you by the world’s leading retailer of digital type, FontShop. FontStruct lets you quickly and easily create fonts constructed out of geometrical shapes, which are arranged in a grid pattern, like tiles or bricks. You create ‘FontStructions’ using the ‘FontStructor’ font editor. Once you’re done building, FontStruct generates high-quality TrueType fonts, ready to use in any Mac or Windows application. You can keep your creations to yourself, but we encourage users to share their “FontStructions”. Explore the Gallery of fonts made by other FontStruct users and download them or even copy them and make your own variations.

Typechart

Typechart lets you quickly evaluate an assortment of web typography. Once you’ve discovered the font you like, you can use the Get CSS button to obtain the style rules for it.

Typetester

The Typetester is an online application for comparison of the fonts for the screen. Its primary role is to make web designer’s life easier. As the new fonts are bundled into operating systems, the list of the common fonts will be updated. Typetester’s code structure is XHTML, styled with the finest CSS and driven by the JavaScript for manipulating DOM structures. Typetester will not work without JavaScript enabled.

Code Cleaners

Pretty Printer for PHP, Java, C++, C, Perl, JavaScript, CSS

CSS Tidy

Even advanced developers often needs to optimize their CSS code. CSS Tidy is a free, online application that will fix errors and optimize your CSS code. For example, it can automatically detect redundant styles, a very common problem of CSS codes.

Code Generation

webformfactory

Web Form Factory is an open source web form generator which automatically generates the necessary backend code to tie your form to a database. By generating the backend code for you, WFF saves you time… time you could spend doing more interesting stuff.

pForm

Create a php form in seconds with this free and easy to use tool. If you need a little more power you can check out its parent program MachForm or great alternatives wufoo and formspring (both of which offer limited free versions and paid premium versions).

Text Generators

We have all seen it and probably also used it… Lorem Ipsum text? This text is used by webdesigners worldwide to simulate the render of real text on a design. Lipsum.com allow you to create th desired number of paragraphs of Lorem Ipsum, quickly and simply.

LIpsum

HTML Ipsum

A useful little website created by Chris Coyier. It provides you with the standard Latin text already in HTML tags. Clicking on any of the blocks automatically copies the text to your clipboard!

blindtextgenerator

Browser Tests: Online-Services & Tools

Xenocode browsers

Tool for checking your website in different browsers. Xenocode Browsers allow you to lauch IE6, IE7, IE8, Firefox 2, Firefox 3, Google Chrome and Opera directly from the web. The only weak point: The service isn’t available for Macs and GNU/Linux powered PCs.

BrowserShots

BrowserShots is a free open source service that allows you to make screenshots of any web page available on the Internet (be aware that robots.txt can prevent this service). Most browser types (Firefox, Opera, IE and Safari, Dillo, Epiphany, Flock, Galeon, Konqueror, Seamonkey etc.) in relevant versions is available and you can also choose between the following Operating System: Linux, Windows, Mac OS and BSD.

You can adjust the width of the screen size (640 – 1600), color depth (8 – 32 bits per pixel) as well as the JavaScript-, Java- and Flash-support. BrowserShots rely on distributed computers that are run by volunteers and the most popular Browsers may be quite busy and it this means that getting your screenshot may take some time. As screenshots become ready they will be available for viewing individually or for download of the full package.

Crossbrowsertesting (free/commerical)

CrossBrowserTesting.com allows website designers to test the cross browser compatibility of their website across different browsers and operating systems. CrossBrowserTesting.com is a commercial service where users buy credits giveng 5 min usage each. Anyone can register and use the service for for free but the free service has a 5 min max length.

CrossBrowserTesting.com lets you log on to a remote session and take control of a operating system with a range of Browsers installed. This gives you the option to test your AJAX and Javascript as well as the layout.

Load Impact

Load Impact is a free tool which tests your site at different load levels and then displays your results in an easy to understand graph. Careful not to put your own site out of business!

Pingdom

Pingdom loads a complete HTML page including all objects (images, CSS, JavaScripts, RSS, Flash and frames/iframes). It mimics the way a page is loaded in a web browser and then displays how long each of those elements took to load using nice visual time bars. This can be very useful when you are trying to improve the efficiency of your site.

Test Everything

More than 100 online tools on one page.

JSUnit

JSUnit is a unit testing framework for JavaScript. Testing JavaScript manually is time-consuming and prone to errors, but JSUnit provides the developer a simpler, automated way of doing unit tests to ensure thorough testing at a fraction of the time it would take to test manually. JSUnit allows for the execution of automated tests for multiple browsers and operating systems. Test online

W3C Link Checker

Really handy tool for checking if all links on you web pages are valid.

Markup Validation Service

Markup that is not well formed may give your site serious presentation issues in some Browsers while they are barely visible on others. It is always recommended to validate your site with the W3C Markup Validator and fix all the errors it reports.

CSS Validation Service

Check Cascading Style Sheets (CSS) and (X)HTML documents with style sheets

Character Lookup

HTML Entity Character Lookup

Need to know how to display the trademark symbol on one of your pages, this tool if just for you. The HTML Entity Lookup searches the html entities for matches to the searched character based on how the character looks. For instance, the letter “c” would match © and ¢ entity, because of the way they look. This is really a tool that you need to try to understand how useful it is (also available as a dashboard widget for you Mac users).

Domain Tools

Domainr

There are plenty of tools available that tell you whether a domain is taken or not. What sets Domainr apart is that it takes your query and then tries to create a more memorable name. Domainr helps you explore the entire domain name space beyond the ubiquitous and crowded .com, .net and .org.

Firefox addons

Firebug

Firebug integrates with Firefox to put a wealth of web development tools at your fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page. This is probably one of the most widely used web developer tools out there. If you don’t have it, get it now!

MeasureIt

A great Firefox plugin that lets you draw out a ruler to get the pixel width and height of any elements on a webpage.

Web Developer Toolbar

An extremely useful Firefox plugin which provides many tools which web developers use on a daily basis. Great for quickly validating your XHTML or inspecting HTTP header information.

Lars

Lars started tripwire magazine back in January 2009. He is really passionate about web design, web development and loves to look into new technologies, techniques, tools etc. and to write articles for his readers.