- October 19th, 2010
- 100 Comments
There are tools that make our lives much easier. However, finding those obscure time-savers which would save time in every single project isn’t easy and requires a lot of time. At Smashing Magazine, we are regularly looking for such useful tools, gather them, review them and eventually prepare for a truly smashing round-up. Such posts are quite lengthy and extensive, but they are always worth checking out.
In this post, you’ll find an overview of useful and handy tools that can help you increase your productivity and improve your workflow. Some tools are more general, the others are more technical, yet we hope that this round-up has something to offer to every one of our readers. Please feel free to leave your comments and share with us which one of the tools you’ve found most useful and interesting.
Useful Time-Savers For Web Designers
The Browser UI is an action that creates a browser window around any size Photoshop document you can throw at it. The Browser UI is easily installed and helps you get around with your Photoshop documents. A quick screencast is available on the site for a quick understanding of how Browser UI works.
A/B Split Testing Calculator7
A/B Test Calculator shows you a comparison of several versions of a particular web page. In order to discover which one is most effective for your audience, you have to enter ‘statistically significant’ numbers.
What deux yeux have teux deux teuxday?9
TeuxDeux is a simple, design to-do app that can be used for your iPhone. If you like making to-do lists, you will love TeuxDeux. This free browser-based app can be used everywhere; this way you have your to-dos ready to hand all the time. Check out the various TeuxDeux features included in this iPhone App shown in the left column.
Inline Code Finder13
Share your ideas – Mark (them) Up15!
MarkUp works in any browser without the need of being downloaded nor installed. Simply add the MarkUp icon to your bookmarks bar and share your ideas and thoughts swiftly!
This site helps you adjust your browser automatically, starting with a simple iPhone-sized browser (320×480) to a MacBook Pro (1440×900).
XRefresh for web developers22
A browser plug-in which refreshes the current web page due to file change in selected folders and communicates with browser extension using TCP/IP. This makes it possible to do live page editing with your favorite HTML/CSS editor, especially when working with two monitors at the same time.
The so-called ‘Cloud Development Environment’ which lets you connect to your own FTPs. Web-based access to file-system & svn integration. Also includes an Online Code Editor and Cloud Hosting.
Notes for Later29
This bookmarklet is a web service for remembering websites. It creates a unique bookmarklet30 for your personal browser in which you can simply receive the content you need via email. If you select nothing, you still get the current page’s URL and a time stamp. Registration is quick and painless. No login is required – just an email address.
Slammer – Designer’s Geometry Box34
Overlays any grid you want, anywhere you want. A variety of themes and overlays are presented: Typographic Grids, Golden Sections, Fibonacci series, Rule of Thirds and more! Slammer also includes Rulers, Crosshair, Magnifier, Measurements and Screenshots; watching the movie on the Slammer main page will help you learn more. However, Snow Leopard is required.
By dragging the bookmarklet to your browser’s bookmark bar, you will instantly save time in browsing the web and have a preview of the collected links that have been grouped previously. By clicking on the bookmarklet, you can always add a link. URlist not only enables you to create and save link lists easily, but also lets you access those links from anywhere. And creating lists is dead easy. Try it!
A new bookmarking service which allows you to mark relevant content without losing focus. Using a bookmarklet such as this one, enables you to add web pages and clippings to Licorize without leaving nor interrupting the web page you are currently focusing on.
Readability – An Arc90 Lab Experiment40
Readability™ is developed to make reading on the Web more enjoyable and remove any clutter around what you’re reading at the moment. A preview of a given text is available to give you an idea of how the style, size and margin can be adjusted. Installing Readability™ into your Web browser is quite easy…and makes it easier on your eyes!
Joli: Print to PDF in Google Reader42
Joliprint bookmark provides you an easy and quick way to print a Google Reader post as a PDF. First, you have to create a bookmarklet onto your browser’s bookmark bar, then select a post in Google reader and finally, click on the Joliprint bookmarklet to convert the activated post into a PDF document. Ta-dah! You can check Clipr Bookmarklet43 as well.
Spoon lets you run desktop applications with no installs, conflicts or dependencies such as .NET, Java nor AIR. By virtualizing your existing apps, you can turn them in standalone EXEs, MSIs or flash drives. This tool is also very useful for cross-browser testing right within your browser and is provided in two versions: Spoon for Business or for Developers.
Web Development Project Estimator47
A simple tool for web designers and site developers to quickly and thoroughly estimate the time and materials required for a proposed web project. A personal task list can be created, leaving you to decide which ones to include or even exclude. Most importantly, hours and rates of the particular project allow you to calculate the estimated final fee.
Golden Ratio Calculator49
This online tool helps you calculate the width of your containers to achieve the golden ratio. You can have a column with a certain width (perhaps to achieve a nice word:line ratio) and you wish to find a matching column. Type in the width and use the left side, which gives you both a smaller and larger column. Or if you have a container and wish to divide it in two, type in the container width and use the right side measurements.
Cleaning up text for the Web can be very time-consuming and prone to error. In case your client ever ends up delivering content in Microsoft Word or a similar format, cleaning it up is definitely a necessary task to do — if you don’t want to end up with characters that don’t display properly online. By entering a HTML or simple text into the given text box and clicking on the ‘entitify’ button, you instantly have discovered a new tool which helps you escape any nasty characters that should be entities!
Redmark: the easiest way to mark up a design and track revisions59
Communication is very important and helps designers and their clients come to clear terms with each other. This site offers visual communication in just three simple steps between designers and clients. It is also possible for a client to find a particular designer they need to match their business. A Demo Project is portrayed for a quick view about how the site actually works.
Fonts have always carried an important meaning to web typography. As we all know, a lot of work is required to match and adjust a satisfactory web font for a website. This site helps you create a font stack bundle and also gives you a preview into CSS coding inclusive.
Framebox: a wireframing tool63
With Framebox, you can sketch your wirframes or just visualize your ideas using UI units such as boxes, headers, buttons, inputs, links, text, text links etc. You can then save it and get a link to created frame, and then send a link to your colleagues.
Drag, drop, share! Droplr is the best way to share files from your Mac OS X on the internet, aiming for simplicity, ease of use and flexibility. This application is also completely free to use with ad supported content. Once the selected file is uploaded, Droplr returns a URL in which a user can share with anyone.
CodeBurner: Reference Tool for Web Developers69
CodeBurner is a suite of tools for web developers that provides reference material for HTML and CSS, integrated with a range of popular development environments.
Is email a distraction? SelfControl is an OS X application which blocks access to incoming and/or outgoing mail servers and websites for a predetermined period of time. For example, you could block access to your e-mail, Facebook, and Twitter for 90 minutes, but still have access to the rest of the Web. Once started, it can not be undone by the application, by deleting the application, or by restarting the computer — you must wait for the timer to run out.
MinutesPlease.com – Manage your web time75
This is an extraordinary website that you can have to help you control the time you spend on a particular site. Just type in the URL and the time you are willing to spend on this site – you will notice how fast time flies by!
Check My Colours: analyze the color contrast of your web pages81
This tool checks foreground and background color combinations of all DOM elements and determine if they provide sufficient contrast when viewed by someone having color deficits. All the tests are based on the algorithms suggested by the W3C.
Useful Firefox Extensions
SenSEO Firefox Extension – Official Website86
SenSEO analyzes web pages and tells you how good they fulfill on-page Search Engine Optimization criteria. SenSEO is a Firefox add-on integrated with the popular Firebug web development tool. The code is based on the YSlow extension.
Firefinder is an extension to Firebug (in Firefox) and offers the functionality to, in a quick way, find HTML elements matching chosen CSS selector(s) or XPath expression. It allows you to instantly test your CSS selectors in the page while seeing the content at the same time, and matching elements will be highlighted.
Firediff is a Firebug extension that tracks changes to a page’s DOM and CSS and implements a change monitor that records all of the changes made by Firebug and the application itself to CSS and the DOM.
When it comes to SEO, there are certain elements that need to be in place for any newly-designed or updated website. Have 301 redirects been put into place? Is the robots.txt file authored to allow adequate crawling? This infographic depicts a handy checklist that will help get you through any new site launch or transition.
Typographic Sins (also available as PDF) by James Godfrey and Patrick Wilkey covers 35 mistakes commonly made by novice designers. The website puts them in a neat orderly list, but the PDF showcases them visually. It’s a great reference guide and learning tool if you want to learn better typography design.
Entity Code: a Clear and Quick Reference to HTML Entities Codes96
A website that eliminates the frustration and the wasted time caused by constant need to add those hard to remember HTML entity codes, such as the copyright symbol © or em-dash —, every time you’re developing a new website or writing a new article.
Thirty Conversations on Design98
The site creators asked 30 of the world’s most creative professionals two questions: “What single example of design inspires you most?” and “What problem should design solve next?” Their answers might surprise you. And, hopefully they’ll inspire you.
Further Useful Tools
PDF Split and Merge103
PDFsam is a free open source tool (GPL License) designed to split and merge PDF documents. Whether it be only extracting sections into a single document or changing the order of the pages. The basic version can be downloaded and simply used on every platform with a Java support.
What terrible business jargon do you need unsucked? Unsuck It translates management speak to normal language, making your day to day on- and offline slogs through corporate jargon a little easier to bear. You can even tweet your results as they often turn out to be quite funny.
Temperature Conversion, Weight Conversion and Length Conversion106
This simple online tool doesn’t do much, but it’s truly beautiful and it’s a pleasure to use. The tools lets you convert length values, temperature values and weight values.
Coffee Drinks Illustrated108
With the vast number of ordering options and new words with accented characters to pronounce the coffee shop ordering experience can be intimidating. Lokesh Dhakar created a few small illustrations to help himself and others wrap their head around some of the small differences.
- 1 http://houseofbuttons.tumblr.com
- 2 http://houseofbuttons.tumblr.com
- 3 http://historio.us/
- 4 http://historio.us/
- 5 http://www.browserui.com/
- 6 http://www.browserui.com/
- 7 http://www.performable.com/calculator/
- 8 http://www.performable.com/calculator/
- 9 http://teuxdeux.com/
- 10 http://teuxdeux.com/
- 11 http://www.fillerati.com/
- 12 http://www.fillerati.com/
- 13 http://robertnyman.com/inline-code-finder/
- 14 http://robertnyman.com/inline-code-finder/
- 15 http://markup.io/
- 16 http://markup.io/
- 17 http://placehold.it/
- 18 http://dummyimage.com/
- 19 http://placehold.it/
- 20 http://resizemybrowser.com/
- 21 http://resizemybrowser.com/
- 22 http://xrefresh.binaryage.com/
- 23 http://xrefresh.binaryage.com/
- 24 http://kodingen.com/
- 25 http://kodingen.com/
- 26 http://www.liberkey.com/en/
- 27 http://portableapps.com/
- 28 http://www.liberkey.com/en/
- 29 http://www.notesforlater.com
- 30 http://en.wikipedia.org/wiki/Bookmarklet
- 31 http://www.notesforlater.com/
- 32 http://www.timy.be/
- 33 http://www.timy.be/
- 34 http://ringce.com/slammer
- 35 http://ringce.com/slammer
- 36 http://urli.st/
- 37 http://urli.st/
- 38 http://licorize.com
- 39 http://licorize.com
- 40 http://lab.arc90.com/experiments/readability/
- 41 http://lab.arc90.com/experiments/readability/
- 42 http://joliprint.com/2010/10/07/print-to-pdf-google-reader/
- 43 http://code.google.com/p/clipr/
- 44 http://joliprint.com/2010/10/07/print-to-pdf-google-reader/
- 45 http://spoon.net/
- 46 http://spoon.net/
- 47 http://estimator.astuteo.com/
- 48 http://estimator.astuteo.com/
- 49 http://goldenratiocalculator.com/
- 50 http://goldenratiocalculator.com/
- 51 http://www.my-debugbar.com/wiki/CompanionJS/HomePage
- 52 http://www.my-debugbar.com/wiki/CompanionJS/HomePage
- 53 http://entitifier.sambowler.com/
- 54 http://entitifier.sambowler.com/
- 55 http://everytimezone.com/
- 56 http://everytimezone.com/
- 57 http://www.instapaper.com/
- 58 http://www.instapaper.com/
- 59 http://www.redmark.com/
- 60 http://www.redmark.com/
- 61 http://awesome-fontstacks.com/
- 62 http://awesome-fontstacks.com/
- 63 http://framebox.org
- 64 http://framebox.org
- 65 http://d.pr/hello
- 66 http://d.pr/hello
- 67 https://gomockingbird.com/
- 68 https://gomockingbird.com/
- 69 http://tools.sitepoint.com/codeburner/
- 70 http://tools.sitepoint.com/codeburner/
- 71 http://yellowgreen.de/soft-hyphenation-generator
- 72 http://yellowgreen.de/soft-hyphenation-generator
- 73 http://visitsteve.com/work/selfcontrol/
- 74 http://visitsteve.com/work/selfcontrol/
- 75 http://minutesplease.com/
- 76 http://minutesplease.com/
- 77 http://www.clueapp.com/
- 78 http://www.clueapp.com/
- 79 http://neuskool.com/
- 80 http://neuskool.com/
- 81 http://www.checkmycolours.com/
- 82 http://www.checkmycolours.com/
- 83 http://de-de.colourlovers.com/copaso/ColorPaletteSoftware
- 84 http://de-de.colourlovers.com/copaso/ColorPaletteSoftware
- 85 http://www.pixelperfectplugin.com/
- 86 http://www.sensational-seo.com/
- 87 http://www.sensational-seo.com/
- 88 http://robertnyman.com/firefinder/
- 89 http://robertnyman.com/firefinder/
- 90 http://www.incaseofstairs.com/firediff/
- 91 http://www.incaseofstairs.com/firediff/
- 92 http://www.elliance.com/aha/infographics/SEO-Checklist.aspx
- 93 http://www.elliance.com/aha/infographics/SEO-Checklist.aspx
- 94 http://www.rayelder.com/teaching/typographic-sins/
- 95 http://www.rayelder.com/teaching/typographic-sins/
- 96 http://www.entitycode.com/
- 97 http://www.entitycode.com/
- 98 http://www.thirtyconversationsondesign.com/
- 99 http://www.thirtyconversationsondesign.com/
- 100 http://www.kickerstudio.com/blog/2010/09/essential-interaction-design-essays-and-articles/#
- 101 http://min.us/
- 102 http://www.shancarter.com/data_converter/index.html
- 103 http://www.pdfsam.org/
- 104 http://unsuck-it.com/
- 105 http://unsuck-it.com/
- 106 http://convert.francepropertyshop.com/
- 107 http://convert.francepropertyshop.com/
- 108 http://www.lokeshdhakar.com/2007/08/20/an-illustrated-coffee-guide/
- 109 http://www.lokeshdhakar.com/2007/08/20/an-illustrated-coffee-guide/