Boilerplates & Other Tools

Designer´s Toolbox : 15+ Time Saving Tools- What´s your Secret?

September 3rd, 2008

Every Designer has his favorite tools and add-ons that definitely comes in handy when needed. What is more useful than simple, time-saving and handy tools you can use in the development process? Here is a roundup of 15 tools, services and add-ons that is worth your time.

Let us know your experience with the tools listed here or and others that you use to keep you going.

I would like to create a gallery here on Noupe to showcase the best Tools, Services and Add-ons that will definitely save time and effort for designers and developers.

Let us know your favorite tool, just add its link and why do you like it.


You might be interested to check other related posts for more useful tools:

Online Service and Tools

- Postable

services and add-ons


We all hate switching all the %u201C< " and ">%u201D signs in our code to %u201C&lt;%u201D and %u201C&gt;%u201D, respectively. This makes including code snippets on any blog very annoying. Postable manages to handle this issue easily, just paste your code in there, hit the button and get your post-friendly code.


- Amazon Simple Storage Service (Amazon S3)

Amazon S3 provides a simple web services to store your files, images and database. S3 is fast, super cheap (you only pay for what you use) and reliable.


- Vectormagic

services and add-ons


Convert bitmap images to vector images with a few simple clicks


- DNSpinger

services and add-ons


Everytime you move to a new host, you will need to change the DNS info to point your domain to the new host, you just don’t know when exactly the DNS is propagated. DNSPinger is a web-based tool that pings the website you mentioned every 3 minutes for 24 hours and e-mails you when the Ip is updated (new DNS is activated).


- Typetester

services and add-ons


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.


- Copyscape

services and add-ons


Copyscape service makes it easy to find copies of your content on the Web. Copyscape finds sites that have copied your content without permission, as well as those that have quoted you.
Every time i use copyscape, i get disappointed with the number of sites that copy our content without even adding a link to our source article. Defending your content should be the primary object after publishing it, so you should start to use this service soon.


Cross Browser Compatibility

- Browsershots

services and add-ons


Browsershots makes screenshots of your web design in various browsers across all different OS platforms. Browsershots is so popular that you will need to wait a few minutes for this service to render screenshots of your website.


- Browsercam

services and add-ons


Offer a free trial for 24 hours where you can test your website in all browsers and OS.


15-IETester

services and add-ons


A free web browser allowing you to browse websites with the JavaScript & rendering engines of IE8 beta 1, IE7 IE 6 and IE5.5 on Vista and XP


- IE NetRenderer

services and add-ons


IE NetRenderer allows you to check how a website is rendered by Internet Explorer 7, 6 or 5.5. Just type in a URL in the field and try it out – it’s free!


Website Performance

- Websitegrader

services and add-ons


Website Grader is a free seo tool that measures the marketing effectiveness of a website. It provides a score that incorporates things like website traffic, SEO, social popularity and other technical factors.


- Feed Compare

services and add-ons


A free web application that you can use for comparing FeedBurner feeds. This tool is great for checking out your competition and noticing trends in growth.


- Web Page Analyzer

services and add-ons


Web site speed test to improve website performance. Calculates page size, composition, and download time. The script calculates the size of individual elements and sums up each type of web page component. Based on these page characteristics the script then offers advice on how to improve page load time.


Firefox Add-Ons

- MeasureIt

services and add-ons


Draw out a ruler to get the pixel width and height of any elements on a webpage. Makes your life much easier when you’re developing and trying to fit pieces together.


- View formatted source

services and add-ons


Ever wanted to know the style of every element of the page without having to view the .css file, here is the best add-on to let you view the style on the fly. You can see exactly which CSS rules match for an element. The rules are displayed including file name and line number. The topmost element is that with the highest priority.


- Firebug

services and add-ons


One of the best add-ons. I can’t recommend this plugin enough!
You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page. You will even learn CSS if you use it.


The jungle is alive: Be it a collaboration between two or more authors or an article by an author not contributing regularly. In these cases you find the Noupe Editorial Team as the ones who made it. Guest authors get their own little bio boxes below the article, so watch out for these.

Tags: ,

29 comments for „Designer´s Toolbox : 15+ Time Saving Tools- What´s your Secret?
  1. Nouman Saleem on September 3rd, 2008 at 6:11 am

    Great list, but have you heard of typechart?

    http://typechart.com/

    for some reason I prefer that over typetester, however both tools are helpful in their own ways.

  2. Webstandard-Team on September 3rd, 2008 at 7:00 am

    Nice collection, but the MeasureIt-Extension is also included into the WebDeveloper-Toolbar (Miscaellaneous/DisplayRuler )

  3. James Paden on September 3rd, 2008 at 7:28 am

    I also use http://www.crossbrowsertesting.com/ – Much more affordable!

  4. The Floating frog on September 3rd, 2008 at 7:39 am

    @Webstandard-team – never knew about Miscaellaneous/DisplayRuler options so thanks a million for that.

    The rest are brilliant, bookmarked for future reference.

    Thanks
    The floating Frog

  5. Rachel on September 3rd, 2008 at 8:14 am

    Great post. I use the Firefox Image Download Add-on all the time (https://addons.mozilla.org/en-US/firefox/addon/2503) – it downloads every image on a page and this helps speed up image downloads.

  6. Jon Aizlewood on September 3rd, 2008 at 9:32 am

    Great list Noupe! but you can’t forget the Web Developer Toolbar for Firefox. I use it religiously, from the Document outline for SEO, to the Ctrl-alt-Y for div outlines, to the easy CSS view of any page. Great, priceless tool for web designers/developers

  7. Mike Smith on September 3rd, 2008 at 10:09 am

    I agree with Jon Aizlewood, the Web Developer Toolbar for firefox is awesome. just got done using it :)

    I also don’t know if this is considered what you’re after, but I have 4 wireframe layouts coded since most of the blog layouts and magazine style layouts I do hold a lot of the same structure (ie: header, nav, content, sidebar, footer, ect). This is a huge time saver (30 miuntes average for each site I code is saved).

  8. Noupe on September 3rd, 2008 at 10:27 am

    @Nouman Saleem,
    Typechart seems to be useful. I will add it to the gallery.

    @Webstandard-Team,

    Nice collection, but the MeasureIt-Extension is also included into the WebDeveloper-Toolbar (Miscaellaneous/DisplayRuler )

    I never noticed this option before, it looks much better than the Measure-It add-on.

    @Jon Aizlewood,
    I use the WebDeveloper-Toolbar as well. Its priceless.
    This should be added to the gallery as well.

  9. Umut on September 3rd, 2008 at 10:46 am

    Thanks very much for mentioning DNSPinger.

    BTW, I loved “view formatted source” plugin, looks very handy.

  10. ptamaro on September 3rd, 2008 at 12:54 pm

    Nice collection and really helpful for trying to squeeze more into the day and be more productive. Thanks…

  11. Jacob Gube on September 3rd, 2008 at 2:09 pm

    Awesome collection here. Web Developer Tool and Firebug are my major “secrets”. Other than that – CSSTidy for standardizing and minifying my CSS automatically and YSlow for making sure everything’s in the most optimized shape I can get them before launching live.

  12. NaldzGraphics on September 3rd, 2008 at 10:18 pm

    thanks for the list.this could my work more easy.

    Ronald

  13. Hillbilly on September 4th, 2008 at 12:30 am

    Yet another resource bookmark.

    Great list and great comments, a couple good suggestions within. I have used a firefox addon from SEO Book,
    http://tools.seobook.com/firefox/seo-for-firefox.html
    It pulls a variety of market research data within Google.
    My first to grab and install from this list is Postables. That is very handy, I have been using text files.

    Cheers and Thanks for the research,

    Jeromy

  14. Katrineholm Uncensored on September 4th, 2008 at 12:40 am

    Excuse me, what is the nature of time if it is to be saved?

  15. tobi on September 4th, 2008 at 1:51 am

    hi there,
    thanks for the nice tips.
    some time ago i also collected a list like this:
    it’s in german, but if you just follow the links you’ll see… http://www.zachl.at/tobi/blog/?p=313

    cheers, tobi

  16. Ray on September 4th, 2008 at 3:03 am

    Nice tools.

    You can also use Feed Analysis to get a much more detailed report about your Feedburner feed too.

  17. Dave Bowker on September 4th, 2008 at 3:32 am

    IETester doesn’t render IE6 correctly. It may look like it’s ok, but check it in Virtual PC running IE6 and you’ll see where IETester falls down.

  18. Stuart Robertson on September 4th, 2008 at 3:35 am

    Good suggestions in this list – I use the WebDev Firefox extension and Browsershots all the time.

    I get a lot of feedback on these two, and many people tell me they’ve become part of their daily tool collection:

    http://www.designmeme.com/xray/ and
    http://www.designmeme.com/professorx/

  19. Tom Ross on September 4th, 2008 at 5:22 am

    What a great list. I’ve been looking for a site to compare feed numbers for a while now and FeedCompare looks perfect. Also the Copyscape website looks very useful.

    Thanks for posting!

  20. Tabris Chen on September 4th, 2008 at 5:25 am

    This is an amazing list! I remember when I last changed my web host, I had to keep checking back my site to see whether the DNS had propagated. If only I had known of DNSpinger

  21. action figure on September 4th, 2008 at 9:19 am

    wow, great list, u know i never missing to read ur great post even once.

    thank for you GREAT job dude! very usefull

  22. Mark Aplet on September 4th, 2008 at 9:45 am

    Great list. I really found Typetester to be really fun and addictive. I also wanted to add to your list an option to Postable called CodePaste that can be found here: http://paste.bradleygill.com

    Thanks Again,

    Mark
    http://www.visual28.com

  23. Shannon Snow on September 4th, 2008 at 1:08 pm

    Great list! I really enjoy IETester and IE NetRender. One of my other favorites is xray, especially when something just isn’t working: http://www.westciv.com/xray/. The MeasureIt and Website Grader have been added to my list, thanks!

  24. Jon on September 5th, 2008 at 8:25 am

    Brilliant list, thanks for taking the time to put that together!

    I’ve been trying out Faststone Capture recently. It’s a nice tool for screenshots, with lots of formatting options built in – http://www.faststone.org/FSCaptureDetail.htm

    Hope that’s useful

    Cheers, Jon

  25. onecss.com on September 8th, 2008 at 11:18 pm

    What about FireBug?

  26. Robert Guitar Player on September 11th, 2008 at 11:43 am

    That is a great list, thanks for sharing it.

    Here’s a CSS generator for making rounded corners without images.
    http://www.spiffycorners.com

  27. Dhane Diesil on September 15th, 2008 at 12:07 pm

    Awesome list!

    I love FireBug! It’s the one plug in I can’t live without. It has taught me so much about CSS. I don’t know where I would be without it

  28. Alberto Logan on September 30th, 2008 at 12:01 am

    Great collection of tools. Thanx… I use myself browsershots and firebug. Helped me to solve a lot of Ajax troubles.

  29. Grup Hepsi on October 25th, 2008 at 4:24 am

    Awesome list.
    I love web site grader. I’ve used it before, but forgot the link. thanks