/ best free open source web resources /

15 Best Free Online Tools for Web Design & Development

You can find a tool for just about anything online, there’s only one problem: they cost money, and in some cases, lots of it! Many online tools offer a free basic package for anyone to use, but these packages are often strictly limited, rendering these tools practically useless until you stump up the cash. In most cases, however, there are free alternatives available, many of which are very, very good indeed.

No two tools listed below perform the same function; we’ve chosen our favorite tool for doing each job. You’ll find the best free online tool for project management, one for invoicing, one for screen sharing, one for instant messaging, one for mocking up layouts, and much more besides.

1. Redmine

Redmine is a great, free alternative to other pricey project management apps available online. It does pretty much everything you could possibly desire, albeit in a less polished way than some of its more expensive rivals. With Redmine, you can manage a large number of projects simultaneously, defining personal roles and assigning tasks to specific team members if necessary. You can track time and issues, create Gannt charts and calendars, create project wikis and forums, and manage documents and files.

2. Billing Boss

Billing Boss is a fantastic, free invoicing tool, designed especially for small businesses and freelancers, which lets you send an unlimited number of invoices to an unlimited number of clients, quickly and easily. All of your invoices are saved automatically and catalogued in a logical, understandable way. Billing Boss supports multiple currencies, is integrated with PayPal and is mobile friendly. You can even share your account with your bookkeeper or accountant.

3. Yuuguu

Yuuguu is a multi-platform screen-sharing tool, which allows Windows, Mac and Linux users to collaborate. You can quickly initiate an instant messaging session with a client or team member, sharing each others’ screens at the touch of a button. It’s perfect for working together on document presentations or for writing and editing documents in a group.

With Yuuguu, there’s nothing to download at either end, which means you can start sharing and communicating in seconds. The free Yuuguu package includes unlimited use with other Yuuguu users and 100mins/month use with non-Yuuguu users, as well as up to 5 participants in a single session.

4. FavIcon Generator

Looking for a quick and easy way to create favicons for your website, then look no further than Dynamic Drive’s excellent FavIcon Generator. It’s effortless to use, just select any image (provided it’s a gif, jpg, png, or bmp) you want to turn into a favicon and press Create Icon. Follow the simple instructions generated to create an eye-catching favicon that will help your website stand out in your users’ favourite lists.

5. Dropbox

For online storage, look no further than Dropbox, an ingenious tool for storing and sharing files between all of your computers and with other team members. Once installed, a Dropbox folder appears on your computer’s desktop. Drag files into the folder and they will automatically appear in the Dropbox folder on each one of your computers, laptops and smartphones. What’s more, every file is automatically added to another Dropbox folder on the Dropbox website, which is accessible from any computer in the world. Invite associates to access your Dropbox folder, for quick and easy file sharing.

6. BrowserShots

BrowserShots is a straightforward, free tool for checking what your website looks like in a wide range of different browsers. It really couldn’t be simpler to use. All you have to do is enter your website’s URL into the address bar at the top, check or uncheck to select which browsers you would like to get a screenshot from, and press Submit. You can fine-tune your search by screen size and color depth, as well as enabling or disabling JavaScript, Java and Flash.

7. toggl

toggl is the perfect time tracking tool for freelance web developers and designers who tend to get paid by the hour. As an online tool, it’s available from anywhere, which is great for those of us who frequently work away from the office. As well allowing you to create projects and start timing in a few clicks, toggl produces performance charts and other reports for you and your whole team to analyze. Toggl can be embedded in iGoogle, Netvibes and Gmail so that you can share your performance with others. It’s free for up to 5 users.

8. Google Docs

Google Docs is an online word processor and spreadsheet tool that’s free to everyone with a Google account. It works in much the same way as Microsoft Word, offering similar features in the form of multiple fonts, font sizes and colors, page numbering, bullet points, alignment, tables and spacing etc. It does not, however, offer headers and footers, footnotes or a powerful find and replace feature, which some people simply can’t live without.

The best thing about Google Docs is that it works seamlessly with Word, so you won’t have to worry about compatibility issues when working as part of a team. Google Docs really comes into its own when it comes to collaboration, however. Press the Collaborate tab to work on a document with several people at once.

9. mockingbird

mockingbird is a wonderfully useful tool, which lets you create mockups of websites in minutes. Simply drag and drop user interface elements into mockingbird, rearranging and resizing as you go to create a perfectly balanced page. You can add as many pages as you like, linking them all together to show clients or associates how users might navigate through your site.

Once you’ve created and saved a mockup, mockingbird issues you with a link which you can share with other people, or an embed code so that you can embed a mockup in your own website. It’s a lightweight tool with few features (there are, for instance, no templates to follow), but this makes it really quick and easy to use.

10. kuler

If you find choosing colors tricky, then take a look at kuler, a fully database driven Flash site created by Adobe Labs. With kuler, you can choose, create, modify, mix and match colors to your heart’s content, for free of course, until you happen upon the perfect color scheme for your website. Not only can you create your own color swatches, complete with RGB and HEX codes, you can save them and download other peoples’ swatches too. You can even extract color palettes from illustrations and photographs, uploading them or selecting them on Flickr. Once you’ve chosen the ideal color pallet, you can download it for use in Adobe Creative Suite.

11. Bespin

Bespin is a browser based code editor which attempts and succeeds to match the quality of traditional desktop editors. It offers standard editing features, as well as syntax highlighting, support for large files, undo/redo, preview files in browser and import/export projects. Bespin not only gives you access to your entire coding environment from any computer, it lets you collaborate in an effortless way, without the need for firewall configuration. Tweak away to your hearts content by using various plugins until youve created the perfect editor for you.

12. Pingdom Tools

Pingdoms Full Page Test imitates the way a web page is loaded in a browser, showing you exactly how long it takes for each object, including images, CSS, JavaScript, RSS, Flash and frames, to appear. The load time of each object is shown as a series of colored bars for quick and easy visual comparison. Order each object into a hierarchy to identify any problem areas. The Test also uncovers useful, general stats, such as total number of objects and total load time.

13. W3C Markup Validation Service

The Markup Validator is a free tool and service that validates markup: in other words, it checks the syntax of Web documents, written in formats such as (X)HTML. The Validator is sort of like lint for C. It compares your HTML document to the defined syntax of HTML and reports any discrepancies.

14. net2ftp

If youre stuck on a computer without an FTP client, try net2ftp. Its a free, web based FTP client which features all the standard FTP functions youd expect as well as various other features, including the ability to extract files and directories and download a selected group of files or directories as an archive. There are numerous plugins available to enhance your net2ftp experience and its integrated with Drupal, Joomla, Mambo, XOOPS and other Content Management Systems.

15.Pixlr

Looking for a solid image editor that doesnt cost an arm and a leg? Available in 13 languages, Pixlr provides a great, free alternative to Adobe Photoshop. Of course, it offers nowhere near the same level of functionality or performance, but you wouldnt expect it to. It can, however, handle most editing that designers do on a day-to-day basis. You can use layers and an array of filters and effects.

About the Author

Tom Walker is a writer and designer from Great Britain where he works for a Manchester based supplier of printing supplies including HP laser cartridges, inks and paper. His other creative writing is available on their blog, CreativeCloud.

I think you really have to consider Verb (http://verbapp.com) among the best free apps for web designers and developers. I’ve been using it to manage all my projects and share them with other people I work with. Unlike Redmine you don’t have to host it yourself too!

http://www.comindwork.com Arturas Kvederis

I would definitely include a tool for communication like e.g. Skype to your list

Dorac

That BillingBoss is amazing, tested and it is really top notch! Very simple to use. Handles emails, reoccurring invoices and online paypal payments.

Other apps I think will also be awesome (haven’t tried them yet, just registered :P to some)

Pixlr
net2ftp
Pingdom
MockingBird
RedMine

Hope everyone else feels the same way I do :D

Thanks WebAppers, this was a great addition to your website! Just hope those apps stay free :D

Seb

Hi, I think you have to consider Krokee (http://www.krokee.com) among the best free apps for web designers and developers. Krokee is the best tool ever when you want to share and note your mock-ups with you client.

We are using it on ours projects day after day and share our job with it. Sharing is made easy with other people, also you don’t have to host this service on you service.

My two cents,

BR

S

http://www.nissiinfotech.com Website Design India

Thanks for sharing post.

http://www.lecteur-blu-ray-3d.com/ LBR3D

Nice tools !!! i known most of them…but thanks ;)

http://startups.com/ Jonny Lucas

Hi everybody,

Thanks to the author for the great tools provided. Web design is not a minor task when we decide to go about our new web based business or hobbie and the chances to fail on these attempts are huge when you don´t know what your audience would like to see! I invite you all to join the conversations about web design, web development and more on Startups.com, where you can ask and gest quick answers from the community experts about all kind of business related doubts you may have in the course of your business.

Nice List! The only one I would change wuold be browsershots. It is incredibly slowwwwww. A great alternative is https://browserlab.adobe.com. You can test browsers side by side and they have a feature were you can overlay browsers on top of each other. Great to find out the differences in browsers.

http://www.elementdesignllc.com Chad Huntley

For a free project management tool I highly recommend Feng Office (http://www.fengoffice.com). I used to use ActiveCollab, but found Feng Office to be much more streamlined for the way I use it. It’s also nice to have it installed on your own server.

Feng Office uses a lot of AJAX so its quick to add tasks/complete them (great for a lot of small tasks). And you can track time on as many tasks as you want at once, which helps when multitasking.

Cledy Ulate

Thanks for usefull tools!!!

Gracias!

http://www.linkup.com/ Eric Caron

I’d throw http://www.webpagetest.org/ (WebPageTest, if you couldn’t guess from the URL) in as a contender for a Best Free Online Tool. Pagetest allows you to provide the URL of a webpage to be tested, you’re then quickly given a waterfall of your page load performance as well as a comparison against an optimization checklist.

http://www.jennamolby.com Jenna Molby

Helpful list, thanks for sharing!

http://www.profeval.com Derrick

Thanks for sharing. A few of these I hadn’t heard of!

http://freedcamp.com Angel Grablev

Not sure why the list starts with a software as under developed as Redmine :( but im sure you had your reasons. Coming out soon is freedcamp.com which is an actual replacement for the pricey project management systems out there, not an “Issue Tracking” app with very limited features and a rather plain design.

The rest of the applications are great, thanks for sharing.

http://ianpurton.com Ian Purton

I’ve seen a lot of blogs mention BeSpin but I can’t find anyone that’s actually using it. I tried to install it and couldn’t

http://turnkeye.com/ Turnkeye

thanks for sharing! I also use different SEO tools, like exactfactor.com etc

http://sadblogger.com Damian

Thanks – I was not aware of a few of these and a cursory look at them on the web looks promising. Appreciate your time assembling this list.

Mockingbird is an incredible app, especially for people into information architecture. I like Harvest (free) for invoicing and Highrise (free) for maintaining contacts. I also use the online software GoalsOnTrack (not free) for keeping myself righted.

http://www.sagespark.com/users/richardzhou Richard Zhou

Hi Tom,

Thank you for the review for Billing Boss. If you have any question, please let us know.

Richard Zhou
Development lead for Billing Boss.

http://tutorijali.hdonweb.com Tutorijali HDonWEB

Nice collection :-)

http://jessewright.posterous.com jesse wright

great list – thanks!

http://www.deskaway.com Priyanka D

I am surprised you have not mentioned DeskAway to this list! We have a basic free plan which should be good for a freelncer or small team! The upgrades can be tried out for free for a month.

http://designluv.com/ Jon Bergan

I think I’d probably use the W3C Validator, Kuler, Dropbox and Google Docs the most out of these. Bespin looks interesting though. I haven’t given this a try yet. I think I might have to pay that link a visit!

Nice little roundup! Well done!

JB

http://www.mlsites.com Small Business Website Design

Great roundup of tools! Spotted a few I use already but also discovered some really promising looking ones that I’ll have to check out. Thanks for sharing

http://freedcamp.com Angel Grablev

Oh instead of bespin there is a new app that uses bespin but has a much more intuitive interface its called kodingen.com

Armando Flores Ibarra

Thank you very much for this great list !!!

http://www.google.com/webmasters Torrey Hoffman

Any webmaster should be familiar with the wealth of information available from Google at google.com/webmasters. Verify ownership of your site(s) and find out how they look to Google’s crawler — what are your keywords, have you been hacked, what queries on Google does your site come up for, and how does it rank? Crawl errors, 404s, lots more.

http://night-fairy-tales.com/ SM

Great tools. Thanks

http://www.webtasarimsitesi.com wts

Very nice collection. I’m using dropbox but I don’t know some tools. Thank you for sharing.

http://www.JRTshow.com Magrippinho

Useful list!
You might want to check out Color Scheme Designer 3 as an alternative to number 10, kuler.
It lacks themes, comments and submissions, but it does have nice palette-matching capabilities and can provide basic mock-ups based on the scheme you’ve chosen. Instantly seeing if your palette works in an actual website is a real time-saver.
You can try it over at http://colorschemedesigner.com/

I would change dropbox to SugarSync which does the same thing but adds the option to sync multiple folders.

Also I have a problem with BillingBoss – I’ve emailed at least 3 times about this. You cannot bill more than 1,000,000 at a time. I bill in Korean Won and 1,000,000 is less than us$1,000. If they would finally fix this, then I’d have no complaints.

http://www.ustitaniumjewelry.com/ kaylee

Thanks to the author for the great tools provided. Thanks for sharing post.

http://www.ultimate-design.com Ultimate Design

So many great tools all here in one place. I’ve used a number of these. You reminded me of some I had forgotten about! Definitely some here I’ve not seen before, so I am interested to check them out.

http://www.3bweb.com Jack Bremer

We use Pivotal Tracker in our design agency to manage project using Agile Methodologies, it’s ace, so easy to use and get used to!

You can use it to manage and prioritize your goals, projects and tasks, set next actions and contexts, use checklists, schedules and a calendar.
Comes with a mobile version too, and with an Android app.

http://www.mymailmarket.be Geert

Browsershots is a very interesting service (I think it works with LitmusApp, which we did an integration with our email marketing tool). Anyway, great (free) apps!

Nobody was nice enough to mention it – or they just didn’t read the descriptions. :D

Ray Cheung

@ Alex

Thanks for reporting the issue. It has been fixed now! :)

http://essayshelp.org/prices.php essay low price

you can be a real Web designer, having got all of this, pretty useful staff.

http://www.betterbagthailand.com/passport SB

Very big thanks for the great tool lists.

http://www.yourpracticewebsite.co.uk Tom

Bookmarked.

I was already using DropBox, DynDrive Favicon Gen and the W3C Validator (obviously) but Kuler and Mocking Bird sound terrific.

Thanks for sharing this list.

http://www.linkedin.com/in/pearsestreet social network web development

This is an excellent and ingenious Bravo and thank you very much for sharing!

http://www.net4sale.net/ Web Solutions UK

thanks for sharing great tool list.

http://www.pixmac.com/ Cathy Mason

Great resources here. Going to check out yuuguu right now!
Thank you!

http://www.billingboss.com Liz

Thanks again for the mention! I’m part of the Billing Boss team.

We’ve recently launched our mobile payment solution in which users can collect payments while they’re on the road using a smartphone. Invoices are automatically created when you collect payments, and are emailed to your clients. And while you’re doing all of this, you’re also creating a database of your customer information which you can export from the invoicing tool. Useful for marketing campaigns, or whenever you need to reference a customer’s contact while you’re on the road.

Don’t under estimate the power of color schemes. One of the biggest trouble a web designer encounters is how to deal the mixtures of their website’s color. I have been using KULER ever since I heard of the tool. It’s highly recommended for beginners out there. Thanks for this post and keep it up!

http://artur.ejsmont.org/blog/ Artur Ejsmont

Hi there thanks for a cool set of web tools. You might like an online base64 / json / serialize / url encoder – decoder i have created

Hey, great post! There are so many amazing tools described here, big thanks!

http://www.webunique.in.th Supachet

Very Usefull Thank a lot.

http://www.scratchcats.com/ cat scratch fever symptoms

Really very useful post, Thanks for telling us about these great tools

http://www.anitaswebdesign.com AWD

I’ve been using http://www.paymo.biz for about 4 years now and I love it. You can time your projects as you work, create invoices based on the time used and send them and keep track of clients and their info.

http://www.code-pal.com Sumeet Chawla

Great list.. I would like to add this small online tool to covert raw text to select or li list elements. :) Its simple but is useful during xhtml development..

Remarkable list!
I’d like to add two more favourite pages:
– pressmo.com for automatic conversion from PDF to online digital ebooks – good for ones providing ebooks, brochures, catalogs on the side, the possibility that sb will read digital edition is much greater than with PDF.
– gmail notepad (google.com/notebook/) – it’s better than google doc’s for small notes that can be grouped into notepads and sections, but i’m not sure if creating new accoutns is still possible

Great finds! Especially browsershots, its like emailonacid but for websites.

http://www.clockmeister.com/ Clockmeister

I agree that a time tracking app needs to be web-based. Nowadays you have to be independent from time and place. You need to track your hours from different locations and preferably at you leisure. Good post!

Some are not free but you can get them at nominal fee. For customer support, I am using Live2Support. Its fast reliable and easy live chat software for website. You can download it from http://www.live2support.com

Online tools are a great resource for web designing or development. However, other good online tools such as Replicon’s cloud based time tracking software are also very much essential for organizations that need good online time management solution for their business needs.

Online tools are a great resource for web designing or development but at the same time other online web based time tracking products such as the one from Replicon Inc. are also quite essential for any business time management requirements.

Emma

I would suggest Replicon’s time tracking software as one of the finest time management tools available. It is pretty hassle free and had lot of good features as well.

http://stefancosma.eu/ Stefan Cosma

Kodingen is no more. It’s now called Koding http://koding.com and it’s a whole lot more awesome than the old Kodingen.

Jennifer Mark

What ever tools may be the designer or developer deploys, the time tracking and management is a must in every aspects of the project they work on. If that is not done in a proper basis there will be a mess up at the time of billing and invoicing part which I know that no one wanted to come across with.

Our company is also a service based company and we too are into designing and development. We have deployed the advanced technology based time tracking software which helps us manage the billing and invoicing more generically with the proper time frame. Currently we are using the cloud based time tracking software from Replicon – http://www.replicon.com/time-tracking-softwares.aspx whose access is being given to the client as well who helps manage the time from their end as well. It works virtually for both the end. I would like you to consider adding this particular tool too as this can be also more importantly the best tool ever so far that we have used.

Robert Macklyn

A web designer always has to be productive at times and to get that happen its recommendable to use tools specifically to have the work done up with in a ore specific manner. By profession I am a freelancer and I prefer having the time to be managed well enough in terms of my work and to get that, I have been using the most advanced cloud based time tracking software from Replicon ( http://www.replicon.com/time-tracking-softwares.aspx ) that operates in a hassle free manner with manageability for a better work management delivering success in terms of the work.

mokarrom hossain

We have a latest website where are huge information about web design Apps.
come check out our website, http://www.taoteapps.com, we have a lot information to help making your mobile deployment a success.

Mike

Tom, I agree most of these offer a free trial or a free account for users to try and then buy them. However, there are some more who offer both along with a lot many features.
One such tool that I would recommend for other users to try is proofhub. A super simple, easy to use yet fully featured tool. It comes with a month free trial on all paid accounts and also with a lifetime free account. So it is equally beneficial for paid as well as free users. Once we are clear on what we want, we can take a call, rather than the other way around.

Carla Frett

Good list of tools that manage the web designing and development. By profession I am a web developer and I work as a freelancer managing a team of 10 members under me. The hardest part comes onto action with the mismanagement of time when it represents the time format in a specific manner. And for that same reason the tool that I have been using for the sort of keeping tack of the time and managing the same is the cloud based hours tracking software from Replicon – http://www.replicon.com/olp/hours-tracking-software.aspx which is an intuitive tool to help achieve the success in terms of the designing and development and also gets the deadline achieved without any hassle. You can consider adding this tool as well in the list.

Contribution matters. I love the list mentioned here. One more tool I would like to contribute that has personally contributed to my freelancing work as a web designer and developer, the hours tracking software from Replicon. As with time I have to focus on billing the clients, this tool is pretty useful in the approach to maximize the effort to show up proper billing amount with respect to the working hours.

richard

Thanks for sharing all these nice list of online tools and I personally like Replicon cloud based app above all other similar apps. This hassle free cloud based time management software is quite easy to access from anywhere, using a web browser.

It has calendar view interface and all reports can be exported to excel all under one configurable hood. Loved using this app even from its mobile version, that made things pretty easier and hassle free!!

Nancy

I found Yaware few months ago. It tracks internet and software usage.The app evaluates productivity and provides detailed reports online.http://yaware.com/

Raymond James

Great list of apps. Though I would also suggest another online app that could help into easy online time management from Replicon.

It is definitely pretty simple yet hassle free online tool that is easily accessible from any location using a web browser. At the same time, it has nice intuitive features as well that makes it the best option amongst all other similar applications such as Harvest & Freshbooks that had got some disadvantages like downtime and speed. So, Replicon time management software is the perfect solution for all our time management needs.

Thank you for sharing excellent information. Your website is so cool. I am impressed by the details that you have on this blog. for invoicing i am use The Invoice Master is used to store Client Information and to Show Sales information generated the Invoice. Free Online Invoice Creator

https://www.web5.in/cloud-windows-reseller.html Reseller Web Space

Thank you for the information. I enjoyed reading it. You have a very well-designed site.