10 Ways to Save Time While Building a Website

August 4th, 2008 Posted in Shortcuts, Tools, Web Design

As a freelance web developer, time is money. I use many different tricks to increase my productivity and these are my top selections for saving time. Please make you own suggestions for other time savers in the comments.

Drop Down Menus :: All Web Menus (http://www.likno.com/allwebmenusinfo.html )
Whenever I need to add a complex drop-down menu to a site, I turn to All Web Menus. This program styles a complex multi level menu in less time then it takes to type the text. All websites need menus and for detailed menus, you should try All Web Menus.

Time saved: 1 Hour per menu.

Image Capture :: Gadwin Printscreen (http://www.gadwin.com/printscreen/)
Gadwin Printscreen utility replaces windows standard printscreen keyboard button with more options and flexibility. It loads on windows startup and runs silently in the background without consuming system resources but it’s always there when you need it. Instead of just capturing the entire screen view, Gadwin allows you to select a rectangular area very precisely with the help of a built in magnifying window. This tool is invaluable to my work. I often use it to grab different pieces to mock up a design.

Time saved: 2 Minutes per screen capture.

Batch Image Resizing :: Multiple Image Resizer .NET (http://www.multipleimageresizer.net/ )
I tried 10-15 different batch resizing programs before setting on Multiple Image Resizer .NET. This program’s ease of use in unparalleled and it has absolutely any function you could desire. Simply select a folder of images you want resized, determine whether to resize, add border, add text, overlay images, crop, rotate or flip them as a whole and save time editing the images one by one. I often use it to add small watermarks to a group of images I’m uploading to a clients website.

Time saved: 20 Minutes for a group of 20 images to an hour or more for a group of 100+.

Web Forms :: My Contact Form (http://www.mycontactform.com)
Web forms take time to build, time to style and time to test. I use My Contact Form because it offers all of these steps in one plus more options then I can easily code. The forms are highly customizable including things like adding attachments, multiple recipients, selecting a recipient and complete control over the look of the form.

Time saved: 30 Minutes to 1 hour per form.

CSS Text Boxes :: Rounded Cornr (http://www.roundedcornr.com/)
Once you have your rough draft laid out in CSS, and you need to start adding style, Rounded Cornr can save you a lot of time. Rounded Cornr quickly and easily creates images and CSS code for different box styles in an easy to use interface. It also offers an option to code it using only one image for all four corners, saving a minimal amount of bandwidth.

Time Saved: 10 Minutes per style.

Vectorizing Images :: Vector Magic (http://vectormagic.com/)
A lot of the time, I’m designing images using Photoshop. I do all of my logo work in Illustrator but I often find the need to convert another one of my designs to a vector so I can resize it without a reduction in quality. Vector Magic is a free online service that does this amazingly well. I was skeptical at first, but after answering a few short questions about my image, they were able to create a high quality vector image from my jpeg. Doing it by hand for complex images would take a lot of time and not turn out quite as precise.

Time Saved: 1-3 Hours per complex vector.

Selecting Color Schemes :: Adobe Kuler (http://kuler.adobe.com/)
This is one site you’ve probably heard of before, but I find it easier to use and with more advanced features then the other color scheme utilities available online. Add Adobe Air and use this tool even when you’re not connect to the internet. Kuler offers many premade color schemes as well that are an excellent source of inspiration for your website.

Time Saved: 5-10 Minutes per scheme over self-selection.

Creating a Patterned Background :: Stripe Generator (http://www.stripegenerator.com/)
A simple patterned background can add a much needed professional finish to your websites. Sometimes, if a site of mine is looking amateur despite clean design, all I need to add is a touch of design to the background. Stripe Generator, as it’s name implies, auto generates a striped background based on your input criteria. You can change all the colors and create a wide variety of non-distracting backgrounds.

Time Saved: 15 Minutes over creating it manually.

Building a Quick Photo Gallery :: Flickr Slidr (http://flickrslidr.com/)
First off, I’m partial to Thickbox, but it isn’t always the easiest to configure exactly as you like and can require use of other programs like the Multiple Image Resizer. Flickr Slidr creates a user controlled photo slideshow that pulls the pictures directly from your Flickr account. You can create a separate account for each project and spend much less time editing the look of the already well-designed gallery.

Time Saved: 25 Minutes over Thickbox.

Testing Your Website in Multiple Browsers :: Browser Shots (http://browsershots.org/)
It’s extremely important that your websites look good on all browsers (or at a minimum, all widely used ones). Most people don’t have very many browsers installed on their computer and even if they did, the time it would take to open your site in each browser would be huge. That’s where Browser Shots comes in. Put in your URL and choose all the browsers you liked to test for. Over 50 browsers are currently supported and you can even specify different screen sizes. Browser Shots then shows you a screenshot of what your website looks like in each browser.

Time Saved: 1-2 Hours if you choose all the browsers.

Want a free website?

Free unique, custom drag and drop flash site

Make sure to check out Ander’s latest article, 10 Ways to Save Time Building a Website: Improved

Author -

who has written 16 posts on [Re]Encoded.com.


Contact the author


58 Responses to “10 Ways to Save Time While Building a Website”

  1. Vijay Dev Says:

    Hi,
    The link for mycontactform.com points to Gadwin Printscreen. Pls change it. Thanks for the collection !


  2. Em Posts Says:

    Hey,
    A very helpful list of websites. I am developing a CMS in PHP (cmsphp.org). All these will be very useful while making the designs for it. Thanks for sharing.


  3. Conner Says:

    Decent list, vectormagic.com looks very cool.


  4. Fubiz Says:

    Thanks for the tips.


  5. Jason Says:

    I feel bad that Windows users have to use an 3rd party app to be able to do selected screenshots when OS X does that and more natively with keyboard shortcuts. I use that feature constantly actually for photos for my own website. Will look into that batch re-sizer though…..


  6. Matt Says:

    A few of the links in this article are messed up… (All Web Menus, Multiple Image Resizer .NET, My Contact Form)


  7. Kevin Says:

    Absolutely great article. some of them i already know, some are new. Nice work. Thx


  8. Rahul Says:

    Thanks for this article for helping to save my time to developing a website. I will definitely try this technique and will let you know of any developments too. Cheers.


  9. William Says:

    Thanks for compiling this list of extremely useful and time-saving tips for web developers. Browsershots will be very helpful!


  10. Joseph Mok Says:

    Your choice of tools used are very unique, not the most popular and well-known options. Thanks for sharing and I will give them a try!


  11. adelaide web design Says:

    this is great for speedy web design.
    THanks guys


  12. Tyler Says:

    Very nice list, I think CMS like WordPress can also save a lot of time as well, there are so many different great plugins out there. Some of these tools are definitely worth checking out though, thanks.


  13. Dan Says:

    What the, that was the worst advice ever. Do the websites you build serve any functionality or do they just display a bunch of pictures….

    Number 1 Tip would be learn Ruby on Rails, because programing in a framework saves you tons of time. If your actually developing websites that do something.


  14. Brisbane Web Design Says:

    Thank you


  15. andz Says:

    “Time Saved: 25 Minutes over Thickbox.” – it looks me max 5min
    Btw, for printscreen I use FF plugin Screengrab


  16. Nils Says:

    In my opinion Browsershots is a waste of time. I need to actually see what I’m working with. Trying to fix stylesheets with Browsershots is just impossible.


  17. Thomas Wright Says:

    Hey,
    Great idea for a list.
    May I suggest some FOSS alternatives to a couple?
    First – someone pointed out that you can do batch jobs in photoshop, but if you don’t fancy shelling out for that you could try the Gimp (gimp.org).
    Second – KDE (window manager for Linux) comes with a really useful screenshot grabber by default. When you press the keyboard button it pops up and lets you grab either the entire screen, a region you define with a rectangle or a window you select. Plus you can save the images directly, as well as copying them to the clipboard like normal.
    Just my 2c.


  18. tabris Says:

    Thank you for this extremely useful list. I once spent almost 2 hours doing a drop down menu, will definitely trying many of the items on the list out


  19. Snowflke Says:

    That s really cool…thanx a lot


  20. 800HighTech Says:

    Anything to cut down the mundane hours spent writing code, uploading and resizing…….good job


  21. Lukevdp Says:

    Great article and lots of useful tools. I’ve written a similar article that also deals with saving time, but looks at the process of building site rather than specific tools to use. Can read it here if anyone is interested: http://www.devcelerator.com/blog/?p=11


  22. Jonathan Says:

    I’m not convinced about Kuler. What a great idea and miserable execution. Why aren’t the HTML codes displayed at least? Why the hell is it Flash? Why no Adobe AIR 64bit?

    Otherwise some interesting links, good to see your perspective.


  23. Greg Johnson Says:

    For screen captures you’re much better off with the free and open source greenshot.


  24. Gerasimos Says:

    Allwebmenus? but Suckerfish menu is so simple to deploy and keep it simple (and valid).


  25. Yokum Says:

    No wonder that there are so many crappy websites out there. People are too lazy to check their sites in a few of the different browsers? Browsershots is a nice service, but for some serious QA you need to click around.


  26. Arley Says:

    Nice article.

    I don’t usually leave comments, but I had to ask; what’s up with the jerk convention swooping in with all the negativity? I liked your article, but if I didn’t, or I found my self so profoundly self-absorbed and super intelligent that I already knew everything you could ever have to share and/or why you were wrong I would have done us all the courtesy of keeping my smarmy thoughts to myself, or tried to constructively share my thoughts in a polite helpful way.

    Can’t we all just get along?


  27. Favicon Says:

    You forgot the favicon generator at favicon.cc. Great time saver!


  28. KEPZ Says:

    неплохой обзор. однозначно в закладки!


  29. liz Says:

    the stripe one i hadnt heard about. But for testing, i recommend virtual machine over just relying on browser shots.

    also – a great thing to save time is a well crafted reset.css document, i think it was NETTUT’s that just published a good quick tip on writing one.


  30. paperboy Says:

    Indispensable list … got a great new menu building tool out of this. Didn’t know about browsershots either. You really opened my eyes


  31. Kris Says:

    Big time saver 1: Learn Ruby on Rails [ even a little can get more done ]
    Big time saver 2: Use Radiant CMS (www.radiantcms.org)
    Big time saver 3: Switch to mac, install VMWare… run multiple instances of windows to test in ie6, ie7 and whatever else
    Big time saver 4: Switch to mac


  32. Jim Says:

    I haven’t read all the comments, but I thought I would chime in to let you know that VectorMagic is no longer free. In fact, it hasn’t been free since mid-2007 I believe.


  33. Hillel Says:

    People can save time by not developing websites that take for ever to open up!


  34. Sam Says:

    excellent time savers. we used some of these to create our sites. If you want some free code to hear your web traffic in realtime…please come visit http://www.populatetheweb.com


  35. PureDezigner Says:

    Very useful list, thanks for sharing!


  36. AzAkers Says:

    Great list! Thanks for sharing it! VectorMagic is awesome and I love Kuler!


  37. Glen Says:

    58th


  38. Craig Fowler Says:

    Watch out for that Web Menus thing – it totally breaks if the web browser doesn’t support javascript (and I see that NoScript is becoming more and more popular in Firefox). Coding pure CSS dropdown menus is easy anyway, and if the client doesn’t support CSS then no problem, they degrade gracefully.


  39. Rahul Says:

    Impressive… Thanks a lot for this… I’ve been looking for something just similar to this. I’ve had this saved. Cheers.


  40. Web Buckets Says:

    This post make sense actually, but if you are about to make a cool and very nice site… you shouldn’t limit your time.. you should give enough time for it…


  41. Sushil Pradhananga Says:

    This post i found it useful.. but own creativity is important too. But any ways, thanks for the great links.


  42. Nate at Plasticprinters Says:

    Awesome! I will check some of these out.


  43. Amanda S Says:

    Do you guys have a recommendation section, i’d like to suggest some stuff


  44. admin Says:

    We don’t have a recommendation section…yet but feel free to email me at antranetworks@gmail.com I would love to hear your recommendations.


  45. Flickr Alternative Says:

    Very well written post however, I would recommend that you turn the No Follow off in your comment section.

    Keep up the good work.


  46. Gostixel Says:

    Хм,согласен с предыдущими высказываниями
    Споки Bye


  47. Рубен Сычев Says:

    Спасибо за ответы на все вопросы :) На самом деле узнал много нового. Вот только до конца так и не разобрался что и откуда.


  48. blog traffic Says:

    I was searching for website traffic related blogs. Good to read interesting posts on your blog. Thanks.


  49. TuraByday Says:

    Молодца,согласен с предыдущими ораторами
    Споки Bye


  50. Cheap Websites - Josh Says:

    This is by far one of the most informative posts I’ve found. I will be getting use out of the adobe color scheme site. Fireworks can also batch optimize images.


  51. Nick Says:

    Thank you for the mention of myContactForm.com. I am the owner of the service and appreciate the blog mention!

    If there are any other WordPress users reading this forum, I might direct you to the tutorial we’ve written specifically for WordPress users looking to add myContactForm.com to their blogs:

    http://www.email-forms.com/blogs/wordpress/


  52. Alexis Brille Says:

    Great stuff!

    I’m also planning to do a list of tools that help me work faster, :).


  53. whmcs templates Says:

    Awesome collection of all the things I love to read lolz.


  54. Sajid Holy Says:

    Really cool tips… worth implementing..!


  55. efoxy Says:

    sendfont.com saves my time to used any font I want on clients site design, without having to download the font to my computer. Finally someone figured it out! Custom buttons, title tags are a snap.


  56. Beauchamp Web design Says:

    Nice set of tips, will definitely try and use some of these while designing future websites


  57. paula Says:

    Very interesting with alot of educational items. Love the art (photos). Really like the black, background it makes seeing much easier.


  58. Musta Says:

    I like your list of tricks to save time while designing a website. Very cool stuff! I will definitly try some of them. Thanks for sharing.


Leave a Reply