Top 50 Free Online Web Apps For Designers and Developers From 2011

Designing and maintaining a website is not an easy task and it requires a lot of time, that is the reason designers and developers are always lookig for apps that can help make their work easy and quick. Many web apps are present out there, but not all of them are good.

So today we have a list of some web apps, that will definitely prove to be helpful for you. Those web apps include designers and developers toolbox, webmasters tools, developer toolbar and apps to create comprehensively designed charts, diagrams and flowcharts, as charts and graphs are a great way of representing information. We also have a list of awesome apps that will help you know what the error you encountered means and apps that let you test site loading time testers, optimization testers, site comparison tools, and performance tools of any web page. Check them out and pick the one that suits your needs that best.

If you like This Article, You Might be interested on 60 Web Design Tools,  40 online Web Designers and Developers and 40 Excellent Tools for Designers and Developers.

Designers And Developers Toolbox

Logotype Maker

Logotype Maker

Logotype Maker is a simple and free logo maker that allows creating logos in just few easy steps.

BgPatterns

BgPatterns

This one is a great app that lets you make background patterns in just a few clicks.You can use this tool for creating custom background to suit your design need.

FreshGenerator

FreshGenerator

This tool can be used for creating graphic elements used in many web 2.0 sites. It can be used for creating boxes of various styles and colors.

Bannersketch

Bannersketch

This is a great website on which you can create your own advertising material. You are not required to have knowledge of designing. It allows creating banners, headers, footers, business cards or even avatars easily and quickly, without spending any money.

Businesscardland

Businesscardland

As the name suggests, this tool allows makingd printable business cards quickly, easily and for free. You are not required to have any designing knowledge. After designing your cards, you have the ability of creating a PDF file for printing, saving, or taking to a printshop to have duplicated.

Golden Ratio

Golden Ratio

A calculator is designed for two things: First when you have a column with a particular width and you want to find a matching column. Simply type in the width and utilize the left side, that will give you both a smaller and larger column. The second time is when you have got a container and want to divide it in two. Input the container width and use the right side measurements.

SpiderScribe

SpiderScribe

This one is an online mind mapping and brainstorming tool that allows organizing your ideas and thoughts by connecting notes, files, calendar events, etc. in free-form maps. You have the ability of collaborating and sharing those maps online.

Manifested

Manifested

This tool lets you convert your existing web site to work offline using HTML5’s cache manifest. You can cache website for images, stylesheets, and JavaScripts. This tool would then provide you a custom cache manifest file which can be used for upgrading your website to support offline functionality.

repl.it

repl-it

It is an online community for interactively exploring programming languages. It offers a terminal emulator and code editor, powered by interpreter engines for 15 plus languages. All those interpreters are written in JavaScript, and they can run entirely on the user’s device, and it doesn’t matter if it is a desktop, laptop or phone.

Subtle Patterns

Subtle Patterns

Here you can find a great collection of 93 high quality design patterns that you can use freely.

Timeslot

Timeslot

This is a great tool that lets you plan your day easily. You can add items to your day’s tasks, and define how long each task would take. This tool would then automatically create start and end times for each task, so when you alter something, your entire agenda will be updated.

LayerStyles

LayerStyles

LayerStyles is an awesome graphics editor but it is in your browser! It can be used for creating css code of any special effect you want.

The Web Font Combinator

The Web Font Combinator

This tool was designed to let you preview web font combinations. Many printed collections of font examples are available for readers to combine to view how a header and body font look together.

Grid Calculator And Generator

Grid Calculator And Generator

This one is an extremely handy grid calculator. All you have to do is to input the width you wish your page to be an approximate range for your column and gutter width and then calculator will show you all the possible combinations within the limits set by you. You are provided with a really good visual representation of the results. Clicking on it would allow previewing it and you would get a better presentation of how the grid can be used. After choosing your grid configuration, downloading the configuration as a css file for using in your project is possible.

CSS3 Shapes

CSS3 Shapes

CSS3 Shapes is a very cool css3 snippets resource site where you can find css3 code of various shapes.

FontFont Subsetter

FontFont Subsetter

This tool lets you optimize and customize Web FontFonts in 3 easy steps. It is a free tool that allows reducing file sizes of your Web FontFonts to reduce bandwidth costs and for making your websites faster.

WhatFont Tool

WhatFont Tool

As the name suggests, this is a great tool that provides you information about the font you hover over it. WhatFont also discovers services utilized for serving the font. It also supports Typekit and Google Font API.

Cssizer

Cssizer

This one is a handy tool that allows editing the design of an html page. Then you can use the url you are given to share your design with others.

Clickable Mockups

Clickable Mockups

This tool is for communicating your designs in an ameliorated way. It converts your site, mobile and software mockups into clickable prototypes. Annotation and feedback from your clients, friends, and co-workers is also possible. Now you won’t have to email .PDFs, wanting to get feedback via message threads, or fretting about putting Photoshop photos into an HTML container. It places your designs and feedback in context.

CSS Pivot

CSS Pivot

This awesome site allows adding CSS styles to sites, and sharing the result with a short link. You have the ability of inviting others to submit meliorations for your website.

Prefixr

Prefixr

Prefixr update CSS3 properties al by itself with all the necessary browser prefixes.

CoderDeck

CoderDeck

This one would help creating interactive live-coding presentations.

Patternizer

Patternizer

As the name suggests, this one is an extremely handy stripe pattern generator.

alphaPun.ch

alphaPun-ch

This tool will determine the opaque part of your PNG or GIF photo. Then it would punch through the alpha channel (that is the transparent bit), so you would have the ability of clicking on things behind it.

Swiffy

Swiffy

This tool changes Flash SWF files to HTML5, letting you reuse Flash content on devices without a Flash player (like iPhones and iPads). This tool presently supports a subset of SWF 8 and ActionScript 2.0, and the output works in all Webkit browsers like Chrome and Mobile Safari.

Spur

Spur

This one is a very handy critique for web designs. Simply paste a URL (or upload a photo) and and you would be able to utilize 7 amazing tools to help you determine what is working and what is not.

Screenfly

Screenfly

This tool lets you view your site on a various different device screens and resolutions. Using it you would be able to test your online content, mobile designs, and responsive layouts. Select common browsers, screen resolutions, and even mimic mobile phone and tablet devices.

Launch It Now

Launch It Now

This one is a great app for Startups & Enterprise companies that require a launching page at start of their online space. This app would let them create their launching page in 6 easy steps. This saves their time and provides various tools to analyze their launching page performance.

Minify and GZip Compress JavaScript & CSS tool

Minify and GZip Compress JavaScript & CSS tool

This one is a handy tool using which you have the ability of minifying and gziping the compressed CSS & Javascript files in one click.

DropMySite

DropMySite

This tool allows backuping your website automatically and that too, for free. Simply make a free account on DropMySite and get 2GB of space that can be used for as long as you like.

Webmasters Tools

Smartling

Smartling

Want to make your website or app multilingual? If so, then use this easy to use, cloud-based software platform for translation management for your requirements.

SnatchCode

SnatchCode

This one is a great website backup solution. It help webmaster’s to do away with complicated backup solutions, as it is really simple and easy to use.

Duda Mobile

Duda Mobile

This tool allows creating a mobile website that would automatically sync with your website.

Toolspot

Toolspot

Toolspot boasts an amazing collection of free webmasters tools that can be used for research and development.

W3Clove

W3Clove

It is a site-wide markup validation tool that allows checking the validity of the markup of various pages from your site, and provide you a summary of the common errors and warnings, with one click.

Create Charts, Diagrams And Flowcharts

Cacoo

Cacoo

This one is a good and handy online drawing tool that allows creating various diagrams like site maps, wire frames, UML and network charts.

LucidChart

LucidChart

This one allows creating and publishing customized flowcharts. It is really user-friendly and has decent free option that includes 5 MB storage for your documents.

Bubbl

Bubbl

Create vivid mind maps online, and share and work with friends! Embedding your mind map in your blog or website is also possible.

Grapher

Grapher

This one is a chart creater but only bar graph with limited features is available.

Hohli Charts

Hohli Charts

Creating dynamically charts is possible with Hohli Charts.

Developer Toolbar

About.com Find By Error Message

About-com Find By Error Message

This service is from About.com. It lets you browse common errors seen on PCs. It has a huge list of errors, so you would most probably find the information about the error you are looking for.

ErrorHelp

ErrorHelp

This website is a great place for sharing error codes and searching for common errors from a huge error code database. Collaborating with friends and other people who have encountered similar errors in the past is also possible. You can also bookmark errors on the website, so that you can get information about the same error whenever you want in the future!

ErrMsg

ErrMsg

ErrMsg is a desktop tool that allows users to find the information about the errors they encounter. All you are required to do is to launch the tool, input the error code and then the tool will provide you a basic description of the error. This tool works for both 32-bit and 64-bit versions of Windows 7, so you would be able to search for all the latest error codes too.

ErrorKey

ErrorKey

This one is an awesome website that boasts a huge collection of error codes. It has a simple user interface, so searching for error codes is not at all tough. Common error search tags/keywords have also been listed on the main page, so you can find most common error messages and categories there.

Error Goblin

Error Goblin

This one is similar to Error Key but it also boasts Mac OS errors. Both Windows and Mac error code searches are possible. It also has an iPhone app. Quite good!

Page Speed Online

Page Speed Online

This tool analyzes the content of a web page, then offers suggestions to make that page faster. It can prove to be really useful as reducing page load times can reduce bounce rates and make your website desirable for visitors.

Pingdom Tools Full page Test

Pingdom Tools Full page Test

It loads an entire HTML page with all its objects (photos, CSS, JavaScripts, RSS, Flash and frames/iframes). It mimics the way a page is loaded in a web browser. You can see the load time of all objects with time bars.

BrowserMob’s Free Instant Test

BrowserMob’s Free Instant Test

This one provides you a performance data on any site without having to create a test script.

GTmetrix

GTmetrix

This tool will let you provide a faster, more efficient, and ameliorated website experience for your users.

Slowcop

Slowcop

Slowcop allows determining what thing is making your page slow. You can then make simple simple changes accordingly to cut hundreds of kilobytes from the page size.


About the author

With a passion for Knowledge, Smashinghub has been created to explore things like Free Resources For Designers, Photographers, Web Developers and Inspiration.

Twitter Visit author website

Subscribe to Smashing Hub


3 Comments

  1. Ashish says:

    Good job. really useful tools. thanks!!

  2. levan says:

    No adobe browser labs in the list? Hhhm interesting picks