Take a moment and think about creating a multi-column grid in a Photoshop comp. Have your palms started to sweat? Yes, creating grids in Photoshop is a pain indeed. Some designers just estimate and drag guides arbitrarily onto the stage. Others draw vector shapes, duplicate them to represent columns, then stretch them to fit their design. The hardy few who don’t say things like, “I’m a designer, not a mathematician,” generally use a little math and logic to calculate their grid. If you were to boil that math down, it probably ends up looking something like this:

(siteWidth - (gutterWidth × (numberOfColumns - 1) ) ÷ numberOfColumns = columnWidth

I was sitting at my desk one day doing this exact equation when I thought, “Man, this looks just like code. I wish someone would make a plugin that would do this for me.” Several months and many grids later, it occurred to me that I could probably build the plugin myself.

Enter: GuideGuide

I created GuideGuide for the sole purpose of making one of the most time consuming parts of Photoshop based design as easy as possible. Enter in a few numbers and GuideGuide will draw a grid on your document using Photoshop’s guides. You’ll become drunk with power the first time you watch it happen, I promise. Even better, GuideGuide’s real power is Photoshop’s marquee. If you have an active selection in your Photoshop document, GuideGuide creates the grid you specify within the selection’s boundaries. Anything GuideGuide can do, can be done using either the document or a selection.

Columns and Rows

Designing a site that needs multiple columns and gutters? GuideGuide has your back.

Midpoints

GuideGuide makes finding the midpoint of items within your design a breeze. Simply draw a selection or ⌘ + click (ctrl + click on Windows) to create a selection around the item you want to find the midpoint of. To find its midpoint, click one of the midpoint buttons.

GuideGuide places a guide at the midpoint of the selection. Now you can easily center align elements under the original item.

Save It For Later

If you find yourself frequently using the same grid over and over, you can save it as a set for later use.

The Fun Part

Sure, GuideGuide has its basic rows, columns and midpoints, but with a little creativity it can do a whole lot more.

Measure Navigation

I hate figuring out how wide a navigation element needs to be to evenly fit across the width of a site. Instead, I let GuideGuide do the work for me.

1. Make a selection the width of your site
2. Enter your info, thinking of the columns field as the number of navigation items and the gutter field as the space you want between each item (if you want it).

Element Padding

Want to draw a box around an item but don’t feel like measuring it out exactly?

1. ⌘ + click (ctrl + click on Windows) the item to make a selection around it.
2. Enter a negative margin in one of GuideGuide’s margin fields, and click the icon next to it. GuideGuide will fill that value into all the margin fields.
3. Use the newly placed guides to draw your box.

Baseline Grid

Using GuideGuide’s explicit row height, you can easily create a baseline grid for your design.

1. Enter your desired line height in the row height field.
2. Align your type and other elements to your new baseline grid.

Thoughts?

Do you have an unconventional use for GuideGuide? Post it in the comments of this post. I love hearing the clever and unusual ways people use GuideGuide. Found a bug or have a feature request? If you’d like to request a feature or have found something that is broken, please create an issue on GuideGuide’s support repo over on GitHub.

To download GuideGuide and learn more about some of its hidden features, head on over to guideguide.me. OS X Lion users with CS5 will need to download a patch for Adobe Extension Manager before they will be able to install GuideGuide.

(il)

© Cameron McEfee for Smashing Magazine, 2012.

Perhaps we should warn you upfront for the long compilation, but what can we say — there are so many excellent tools out there which deserve attention of the community, yet unfortunately remain obscure way too often. We love all the designers and developers out there for releasing and producing useful, valuable resources for all of us to use! We, for one, surely sincerely appreciate it in the name of the Web design community. Whether you like it or not, here are some of the most useful coding and workflow tools released recently.

Feel free to comment to this post and let us know how exactly you use these tools in your workflow and also share other tools you’ve found with others who may also find them useful and still haven’t run across them. Please do avoid link dropping and share your insights and your experience instead.

Useful Coding and Workflow Tools

Stripe: Easy Credit-Card Processing For Online Stores
A website owner has many options for accepting credit card payments. Most of those options have a verification process that is quite slow; some have APIs and interfaces that are more or less robust than others; and some solutions are much easier to use than others. With Stripe, you can forget the tedious experience of the PayPal API and other mysterious programming environments. Unfortunately, Stripe is currently available only in the US.

The Web Developer’s Wonderland
Web development comes with truly enjoyable, creative tasks and some mundane, boring ones. Probably the most frustrating task is having to reload the browser page during development or debugging every time you make a change to the page. Livereload is a desktop app that monitors changes in your file system. As soon as you save a file, the file is preprocessed as needed, and the browser is refreshed. Also, every time you change a CSS file or image, the browser is updated instantly without you having to reload the page. The tool supports CoffeeScript, SASS/SCSS, LESS, Stylus, HAML and Jade, and it ships with all of them included. Currently available only for Mac.

Ender: The End Of Monolithic JavaScript Libraries
Ender allows you to search, install, manage and compile front-end JavaScript packages and their dependencies. Essentially, it’s a command-line tool that allows you to combine and mix all of the popular and small JavaScript libraries out there to create your own personal development library. If one library you use goes bad or is abandoned, Ender will help you quickly replace it with another. And if you need a particular version of a package, the tool can help you out as well. The release page contains detailed documentation, a user guide and some video tutorials. No more wasted bandwidth!

Open-Source Exchange Rates and Currency Conversion
So, you’d like your customers to be able to purchase your products in various currencies, but how exactly do you build this functionality into your product? Finding a free and reliable API for developers to access the rates data is darn hard. Joss Crowcroft has created an Open Source Exchange Rates API, which provides up-to-date, flexible and portable currency-conversion data that can be used in any application, framework or language (not just JavaScript). It has no access fees, no rate limits, no nasty XML: just free, hourly updated exchange rates in JSON. Even better: Joss has also built money.js, a JavaScript currency conversion library that can be easily integrated in any website. A demo playground and detailed documentation are provided on the website, and the source code is available on GitHub.

Easier Number and Currency Formatting
This simple, tiny JavaScript library will solve your currency and numbers-related formatting hassles, and it even includes optional Excel-style column rendering to line up symbols and decimals. It will make all of your numbers and currencies look much more uniform and professional than they would if left to many content creators.

Tilt Firefox Extension: DOM Inspection In 3-D
How much time do you spend traversing the DOM in Firebug, exploring the relationships between nodes, analyzing the structure of code and trying to manipulate it with nasty (or not so nasty) JavaScript? Well, perhaps you’d like to try a different approach to DOM inspection for a change. Mozilla’s new tool, Tilt Firefox Extension lets you visualize the DOM tree of any Web page in 3-D. Because the DOM is essentially a tree-like representation of a document, the developers of the tool have decided to layer nodes based on the nesting in a tree, creating stacks of elements, each with a corresponding depth, and textured according to the Web page being rendered.

Mou – Markdown editor for web developers, on Mac OS X
When current available Markdown editors are almost all for general writers, Mou is different: It’s for web developers. Syntax highlighting, live preview, fullscreen mode, auto save, powerful actions, auto pair, incremental search, custom themes, HTML export, enhanced CJK characters support. It’s exactly the app you want.

Creating Buzz With Launch Effect
The one-page theme lets visitors sign up using their email. Upon signing up, the page generates a special URL for them to share with their friends, so that you can track your most active promoters and reward them for spreading the word. What more do you need from a pre-launch page? This is a good tool to bookmark for your next creative breakthrough or start-up idea.

A Better Responsive Grid
The Golden Grid System uses the concept of “folding” grid columns into one another, based on the browser’s size. So, a 16-column grid that works great in desktop browsers would fold down to an 8-column grid for tablets, and a 4-column grid for mobile devices. It can handle screen sizes ranging anywhere from 240 pixels wide all the way up to 2560 pixels. The columns themselves are not the only things that are elastic either; while the column’s widths are based on screen size, the gutter widths adjust based on the page’s font size (specified in ems). The Golden Grid System comes with other features that make it perfectly suited to modern responsive Web design.

The Semantic Grid System
CSS grid frameworks can make your life easier, but they’re not without their faults. Fortunately for us, modern techniques offer a new approach to constructing page layouts. But before getting to the solution, we must first understand the three seemingly insurmountable flaws currently affecting CSS grids.

Bootstrap Kick-Start Development Toolkit
Bootstrap is a toolkit that includes the base CSS and HTML for typography, tables, grids, navigation, error messages, modal boxes, buttons and forms. It’s built with the LESS framework. It comes with a standard 940-pixel grid (i.e. 960.gs without the side margins), or you can create your own. Bootstrap allows you to create fixed or fluid layouts, and it comes with many elements that can be used as is or restyled to fit your website. Of course, the toolkit is free to use.

Colour Bookmark
Drag the Colour Bookmark link to your toolbar to find out the colour palette of the website you’re currently on. Then simply: copy, paste and use the colours you choose.

Leaflet: Open-Source Interactive Maps with JavaScript
The library offers a variety of map layers, including tiles, markers, pop-ups, image overlays and GeoJSON. It supports panning on both mobile and desktop browsers, double-tap zoom on mobile browsers (plus multi-touch zoom on iOS) and more. On iOS, hardware acceleration is enabled, and Leaflet has a modular structure that lets you reduce the size of the library to make it even faster. The project is open source and available for further development and forking on GitHub.

Weinre
weinre is a Web Inspector Remote that is essentially a debugger for web pages, like FireBug (for FireFox) and Web Inspector (for WebKit-based browsers), except it’s designed to work remotely, and in particular, to allow you debug web pages on a mobile device such as a phone.

Aardwolf: Remote JavaScript Debugger
Mobile browsers are becoming more powerful day-by-day and you can do almost everything you do on your desktop browser. One of the major concerns for the developers is the lack of developer tools. The reasons are quite obvious — real estate needed to show the debugger, non-developer friendly environment. The solution to this problem is remote debugging. You can use JSConsole for this purpose but when it comes to JavaScript debugging, Aardwolf is a better choice. Aardwolf is a JavaScript debugger for iPhone / Android / WindowsPhone 7 / BlackBerry OS 6+. (via Varun Kumar)

IE Vms
Microsoft provides virtual machine disk images to facilitate website testing in multiple versions of IE, regardless of the host operating system. But setting these virtual machines up without Microsoft’s VirtualPC can be extremely difficult. The ievms scripts aim to facilitate that process using VirtualBox on Linux or OS X. With a single command, you can have IE7, IE8 and IE9 running in separate virtual machines.

WhatFont
The tool allows you to easily get CSS typography details about the text you are hovering on.

WordPress TextMate Bundle
The WordPress TextMate Bundle is a TextMate bundle built with the sole purpose of reducing the amount of time spent digging around the WordPress core to look up the little things that we work with every day. The plugin features auto-completion of WordPress functions, snippets for common sections of code, and templates for WordPress components. We even snuck in function completion for the Carrington template framework functions. We’re always making improvements as we find more that we want covered by the plugin (merged from WordPress MU with the WordPress 3.0 code base consolidation).

cubic-bezier previewer
No matter how much you see someone changing the parameters, if you don’t picture it in a 2D plane, it’s very hard to understand how bouncing animation with cubic-bezier works. Lea Verou searched for a tool could use to show how bezier curves are formed. She found plenty, but all of them restricted the the coordinates to the 0-1 range. Lea then proceded to create her own cubic_bezier() curves generator.

Patternizer – Stripe Pattern Generator Tool
With Patternizer, it’s easy to make something amazing in just a few minutes. It takes all the work out of creating complicated patterns, letting you focus on creativity and play. Patterns can be saved and shared with anyone, allowing for collaboration and remixing. And you can access them from any device worldwide.

Chainvas
A tiny, modular library that can add chaining to any API that isn’t naturally chainable, like the Canvas API, the DOM and more.

Comparison Table Generator
This generator allows you to create beautiful HTML/CSS comparison tables on the fly.

DropKick.js
A custom drop-down jQuery plugin which degrades gracefully. If the user has JavaScript disabled, the drop-down will display normally using regular <select> elements. It works on IE7+.

-prefixfree
-prefix-free lets you use only unprefixed CSS properties everywhere. It works behind the scenes, adding the current browser’s prefix to any CSS code, only when it’s needed.

{less}
An automated folder scanning/parsing tool for LESS. Once you add your project folders to the application, it will automatically start monitoring the less files inside these folders for changes. After you have saved the less file, the application will automatically parse your less file into a regular CSS file. Also, see: SimpLESS, an app for Mac, Linux and PC to compile *.less files into valid CSS.

Recurly.js
This tool allows you to easily embed a PCI compliant order form within your website. The library performs in-line validation, real-time total calculations, and gracefully handles errors. Your customer stays on your website while their billing information is securely sent to Recurly for approval. Because the cardholder data is sent directly to Recurly, your PCI compliance scope is dramatically reduced.

Responsive Overlay Grid for In-Browser Development
The Heads-Up Grid is a recently released grid overlay for in-browser development. It works with fixed-width designs but also works great with responsive grids. Just specify the page units, column units, page width, number of columns, column width, gutter width, top margin and row height, and then paste the Heads-Up Grid code into the head element of your website to generate the grid overlay.

Has.js
The library is similar to Modernizr, but instead of testing for HTML5/CSS3 features, it tests for JavaScript features such as: ES5 array, string, and object featuresNative JSON supportNative console supportActiveXNative XHRSome DOM and event features.

grumble.js
This library allows you to create tooltips that can be rotated around a given element at any angle. Any distance can be specified. Any CSS style can be applied. There’s auto-magic size adjustment for use with localised text. FX queues for animating multiple grumbles. And it works in IE6+, and all modern browsers.

testling: Automated Cross-Browser JavaScript Testing
An automated cross-browser JavaScript testing platform for your quality assurance.

Instant WordPress
A standalone, portable WordPress development environment for Windows that can run from USB.

CSS Stress Testing and Profiling
A bookmarklet for stress testing the CSS on any given webpage. It indexes all the elements and their classes, and then — class by class — it removes one, and times how long it takes to scroll the page. Selectors that save a considerable amount of time when removed indicate problem areas.

Needle: Automated Tests for Your CSS
This tool checks that CSS renders correctly by taking screenshots of portions of a website and comparing them against known good screenshots. It also provides tools for testing calculated CSS values and the position of HTML elements.

Last Click

Cutting-Edge Web Typography Experiments
The website is essentially an ongoing collection of experiments and writings on Web typography and the possibilities of cutting-edge standards-based Web design. Christopher is pushing the boundaries of what is both possible and practical in Web standards in a way that is compelling and exciting to the visually minded creative.

Font-Bot
It is time for your favorite font to stand its ground. The idea of this project is to build robots out of typeface glyphs, showcase them and hope others put together an opponent. Participating is not hard, the rules are clear: all Robots must be built of type alone (A-Z). You may reflect and rotate the letters. Keep it civil. May the best bot win. Let’s see if your type design has what it takes to defend its corner. Fight!

Lights
“Lights” is an interactive music experience which is created with CSS, JavaScript and HTML5. This is why we love the Web.

Stay Tuned!

More posts with useful tools and techniques are coming very soon here, on Smashing Magazine. If you want to be among the first to be informed about the new tools, resources and techniques, please

• follow us on Twitter,
• become a fan on Facebook,
• subscribe to our bi-monthly email newsletter.

You won’t regret it. Thank you.

Thank you to the Smashing Editorial team, especially Christiane Rosenberger, Iris Ljesnjanin and Luca Degasperi for their help in preparing and editing the post.

© Vitaly Friedman for Smashing Magazine, 2011.

But using one of the many existing tools and services for user testing is a lot easier than creating your own. Free, freemium and premium tools are out there, with options for most budgets. The important thing is to find a tool or service that works for your website and then use it to gather real-world data on what works and what doesn’t, rather than relying purely on instinct or abstract theories.

Free And Freemium Tools

A ton of free and freemium tools are out there to test your website’s usability and user experience. Many of them get you to use your existing visitors as a testing base, which can give you a very accurate picture of what users are experiencing when they use you website.

Ethnio
Ethnio enables you to intercept visitors on your website and recruit them to help you with research (you can offer incentives to make participation more enticing). Ethnio acts as a hub for your various UX tools, including Usabilla, Optimal Workshop and UserTesting.com. It even works with GoToMeeting for screen-sharing. You’ll get detailed reports on the people who respond to your recruitment efforts. Ethnio has a free plan that allows for up to 10,000 page views per month and up to 250 responses. Paid packages start at $49 per month (for up to 100,000 page views and 500 responses) and go up to $299 per month (for over 1 million page views per month and unlimited responses plus other features).

Simple Mouse Tracking
Mouse tracking is a great way to see how visitors are actually interacting with your website. This plugin lets you record mouse activity on your Web pages and then replay that activity in real time. It works in virtually all modern and not-so-modern browsers, it works with static and liquid layouts, and it is customizable by the end user.

xSort
xSort is a card-sorting application for Mac OS X. It gives you full control over the exercise, supports sub-groups, gives statistical results in real time, and lets you create, read, print and export reports easily. The visual environment of the app resembles a table with cards (and you also get an outline view).

KISSinsights
KISSinsights lets you embed surveys directly on your website. The free plan offers an unlimited number of surveys, with up to 30 responses for each one. The premium plan, at $29 per month, allows you to customize the surveys and thank-you messages, removes KISSinsights’ branding, and allows for unlimited responses.

FiveSecondTest
FiveSecondTest helps you better design your landing pages and calls to action by analyzing which elements of your design are most prominent. Just upload a screenshot or mockup, set the questions that you want answered, and then wait for users to complete the test. FiveSecondTest collects the responses for you and analyzes them for common keywords, which it then represents visually. The free community plan lets you earn tests by participating in tests run by others. Paid plans start at $20 per month with more features, including private tests.

AddUse
AddUse enables you to conduct user surveys and user tests. You get one of each for free, and then can purchase additional surveys and tests from there. Signing up is quick and easy and doesn’t require a credit card. AddUse offers real-time results and analysis, and also includes ready-to-use usability questions that you can incorporate in your surveys for faster set-up.

UserEcho
UserEcho is a simple widget for collecting customer responses and ideas. Just copy and paste a few lines of code onto your website and then wait for visitors to respond. The free plan offers one forum and one official representative, as well as simple moderation, admin control, rich-content editing and YouTube embedding. Paid plans start at $15 per month and include more forums, more representatives and more features.

Usabilla
Usabilla lets you run micro-usability tests to get a better picture of how well your website performs with visitors. You can collect feedback, discover usability issues, measure how various tasks perform, and then get visual results. The free plan lets you run one public, active test at a time with up to 10 participants. Paid plans start at $49 per month, allowing you to create private tests with up to 50 participants, and go up to $199 a month (allowing up to 10 active tests at a time and up to 250 participants).

Google Website Optimizer
Google’s free Website Optimizer lets you run A/B and multivariate tests on your website. Just sign up with your Google account and create an experiment. You can specify which page you’d like to test and which sections of the page, and then identify your conversion and success targets. Setting up experiments is a straightforward process.

Userfly
Userfly lets you watch videos of users interacting with your website. Just install a single line of code, and it will record every mouse movement and click that users make. The free plan allows up to 10 captures per month and stores recordings for 30 days, while premium plans (ranging in price from $10 to $200 per month) allow for more captures and downloadable recordings.

Clickdensity
Clickdensity is a heat-map analytics tool that installs in under five minutes. It provides heat maps, click maps and hover maps and gives you real-time results. The trial version can be installed on a single page and stores up to 5,000 clicks. Premium plans start at £2.50 per month, and all include an unlimited number of pages.

Navflow
Navflow is a tool for analyzing the conversion paths for your mockups and wireframes. Just upload the designs that you would like to test, run a private or public test, and then view the results. The free plan allows you to earn public tests by participating in tests run by others. Paid plans start at $20 a month and allow you to run unlimited private and public tests.

User Plus
User Plus offers two tools for testing your website’s usability: Tester and Advisor. Tester lets you test the important tasks on your website with real people. Just create a test, invite users and then measure and see what they do. Advisor evaluates your website’s usability based on ISO standards and gives you a usability score. Tester is currently in private beta, and for a limited time you can try it for free. Advisor offers both free and paid plans.

Chalkmark
Chalkmark is for first-click testing, to see what visitors click on first on your website. It’s a simple concept, but vital to ensuring that your website is converting well. A free plan is available for running short surveys on a trial basis before you buy. The free plan lets you survey 10 people, with 3 tasks each. Paid plans include unlimited studies, unlimited tasks, unlimited questionnaires and unlimited participant responses.

4Q
4Q is an online survey tool for evaluating user experience and customer satisfaction. Setting it up takes less than five minutes, and the intuitive suite of online tools gives you valuable insight into how visitors are interacting with your website with only a few mouse clicks. A free plan is available that lets you collect responses from up to 100 participants. Paid plans start at $19 per month and include more features and more responses.

WebSort.net
WebSort.net is a remote card-sorting application. Just create a study, send the link to participants, and wait for the results. You can create a free study with up to 10 participants. Then upgrade whenever you want to include 100 participants or more (starting at $149 per test). You can also buy a three-pack of studies for $299; or buy an enterprise license, with unlimited tests in a 12-month period for $2,499.

Concept Feedback
Concept Feedback lets you get feedback on your website so that you can increase conversion rates. Just post your website, get expert feedback from experienced design, usability and strategy pros, and then share the evaluation with your team or client. You can pay to have experts review your website ($99 per expert), or just get feedback from the community for free.

Premium Tools

Vendors of premium testing tools generally recruit users specifically to offer feedback on your website. Many of the tools come with videos of users interacting with your website, and some offer both remote and local testing.

WhatUsersDo
WhatUsersDo lets you test the user experience of virtually any part of your website. Just set tasks for users to carry out on your website, and then watch and listen to recordings of everything they do and say. Setting up a test takes less than five minutes, and results are available within 48 hours. Pricing is a flat fee of £30 per user, and five users are recommended for each test.

TryMyUI
TryMyUI lets you test your website with real users and watch videos of them using your website. You get to see all of their mouse movements and keystrokes and hear everything they say about your website. Users also provide written answers to your questions. A free trial is available, and the regular price is $35 per test.

Userlytics
Userlytics is a full-featured testing service that guides you through the entire testing process, from designing the study to scheduling tests, managing logistics and incentivizing participation. Pricing starts as low as $59 per participant but goes lower with volume discounts. You’ll also get videos of participants interacting with your website for accurate results.

OpenHallway
With OpenHallway, you create test scenarios, record users either remotely or locally, and then watch video results from your browser. You can share videos with clients or team members, and an unlimited number of projects and test scenarios are allowed within your storage limit. You can try OpenHallway for free, with a test scenario and up to three 10-minute user videos. Regular plans start at $49 per month, which allows for up to 1 GB of storage (3 hours of video), and go up to $199 per month for 9 GB of storage (30 hours of video) and downloadable test results.

GazeHawk
GazeHawk runs eye-tracking studies on any image or website. It offers targeted or general user studies, depending on your needs. The starter plan, which includes a 10-participant study with heat maps and gaze replays, is $495. GazeHawk also offer A/B testing packages ($995 for two 10-participant studies), a professional package with 20 participants for $995, and enterprise solutions for bigger tests.

Silverback
Silverback is downloadable software for your Mac for running user tests. You can capture screen activity, record video of testers’ faces, record their voices, and control recording with the built-in remote. And it’s all exportable to Quicktime. The app is free for the first 30 days, and the full license is $69.95.

Verify
Verify, from Zurb, includes nine different test types: click, memory, mood, preference, annotate, label, multi-page click, and linked. New user tests can be set up in less than three minutes. You can share tests with team members or make them public, and visual reports are included to make decision-making easier. The “Plus” plan is $9 per month and includes unlimited tests, while the “Premium” plan includes demographics reports, linked tests and PDF export. A 30-day free trial is available on all accounts.

Feedback Army
Feedback Army offers cheap and simple usability testing for your website. You can set up a new test in two minutes, submit a question about your website, and get 10 responses from Feedback Army reviewers. And it all costs only $15.

UserTesting.com
For $39, UserTesting.com provides you with video of a visitor as they use your website, speaking their thoughts about their experience. You also get a written summary of the problems they encountered while on the website. Videos are generally about 15 minutes long and can be downloaded for archiving and editing (even embedded on a Web page).

IntuitionHQ
IntuitionHQ lets you sign up and start creating tests for free. Pay only once you start actually running tests (and then it’s only $9 per test). Creating a test simply requires that you upload screenshots and then write tasks for users to complete. Once the test is created and published, you get a URL to share with whoever you want to perform the tests.

Mechanical Turk
While not strictly a usability testing app, Amazon’s Mechanical Turk service can be used to gather usability data or feedback from real users. Just set up a “HIT” (human-intelligence task), and then set how much you’re willing to pay people to perform it. You pay only when you’re satisfied with the results.

UserFeel.com
UserFeel.com performs remote usability tests for you, providing videos of users testing your website. Just specify the website that you want to test, set the scenario and tasks, and then watch the videos. Pricing is $39 or less per test, with a 90-day money-back guarantee.

Loop11
Loop11 offers user testing for up to 1000 participants at a time, with an unlimited number of tasks and questions. There’s no time limit and no limit on the number of websites or wireframes you can test. Try Loop11 for free (with a maximum of five tasks and two questions, with data stored for only seven days); after that, tests are $350 each. Tests don’t require any code to be added to the website being tested, which means you can even test competitors’ websites.

ClickTale
ClickTale offers a number of usability testing services, including visitor recordings, click heat maps, mouse movement heat maps, and conversion funnel visualizations. Premium plans start at $99 per month, with full playback and a choice of three out of the four heat maps offered, while other plans (at $290 and $990 per month) include more features. A limited free plan is available to try out the service, as well as enterprise options.

CrazyEgg
CrazyEgg offers heat maps so that you can see exactly how users interact with your website and so increase your sales or leads. In addition to standard heat maps, CrazyEgg also offers scroll maps, confetti (which allows you to distinguish between all of the clicks your website gets, broken down by referral source, search term and other variables), and overlay reports. The basic plan is only $9 a month and includes 10,000 visits per month, up to 10 active pages, and daily reporting. Starting with the “Plus” plan, which is $49 a month, you get hourly reporting.

Webnographer
Webnographer provides remote usability testing services. You can test websites, Web apps, prototypes and intranets with a large number of users anywhere in the world. The tests are unmoderated, so you get honest feedback. And no downloads or website modifications are required to run tests. Pricing is available on request.

Regardless of which tool you choose, the important thing is to recognize the value of user testing. Getting real feedback is an invaluable way to determine which parts of your design work and which don’t. With that information, creating a more user-friendly website that converts better is possible. Usability and user experience testing should be a part of any website redesign project, to ensure that the changes being made will actually have a positive effect.

To streamline the selection process, below is a chart with the key features of each tool, as well as pricing information.

(al)

© Cameron Chapman for Smashing Magazine, 2011.

So What’s the Problem With Prefixes?

I’m sure we all agree that CSS3 is pretty cool and that it enables us to do things that were previously impossible. But those of us who use CSS3 a lot have surely experienced prefix hell, as seen in the snippet below (from a real style sheet!):

.download {
   position: absolute;
   top: 1em;
   left: -1.5em;
   width: 6em;
   height: 6em;
   padding: 1em 0;
   background: #80A060;
   background-image: -webkit-linear-gradient(transparent, rgba(0,0,0,.3));
   background-image: -moz-linear-gradient(transparent, rgba(0,0,0,.3));
   background-image: -o-linear-gradient(transparent, rgba(0,0,0,.3));
   background-image: -ms-linear-gradient(transparent, rgba(0,0,0,.3));
   background-image: linear-gradient(transparent, rgba(0,0,0,.3));
   color: white;
   line-height: 1;
   font-size: 140%;
   text-align: center;
   text-decoration: none;
   text-shadow: .08em .08em .2em rgba(0,0,0,.6);
   -webkit-border-radius: 50%;
   -moz-border-radius: 50%;
   border-radius: 50%;
   -webkit-box-shadow: .1em .2em .4em -.2em black;
   -moz-box-shadow: .1em .2em .4em -.2em black;
   box-shadow: .1em .2em .4em -.2em black;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
   -ms-transform: rotate(15deg);
   -webkit-transform: rotate(15deg);
   -moz-transform: rotate(15deg);
   -o-transform: rotate(15deg);
   -ms-transform: rotate(15deg);
   transform: rotate(15deg);
   -webkit-animation: none;
   -moz-animation: none;
   animation: none;
}

I’m not saying that prefixes are bad. We need them. But the reality is that, in most cases, they cause maintenance troubles, they bloat CSS files, and they make it harder to tweak values (because you have to do it five times or more).

A Solution: prefixfree

The code I write in my live demo slides and presentations doesn’t have any prefixes, even for things like @keyframes or the transition property, which aren’t yet supported anywhere prefix-less. To be able to do this, I wrote a script that detects the prefix of the current browser and adds it where needed. Recently, I thought, why not adapt the script to process all of the CSS code on a page, so that the CSS in my style sheets is as elegant as the code in my demos? Shortly after, prefixfree was born.

The script essentially does everything in JavaScript’s power to allow you to completely forget about vendor prefixes. It processes linked style sheets (except the ones in @import rules), embedded style sheets, inline styles, even CSS added afterwards (such as in new elements, CSSOM property changes and lookups). And if, in rare cases, you want to use a different definition for a different engine (for example, because one’s implementation is buggy), you can still use prefixed CSS.

The good thing about prefixfree is that once the browser vendors drop their prefixes for CSS3 properties, you can just remove the script and your CSS will still work. Your code will continue to be valid CSS3 (so valid that it will even pass a CSS validator). Your code does not depend on it (unlike CSS preprocessors); rather, it functions more like a polyfill, smoothing out browser differences for the time being.

Another useful feature is that the script auto-detects which properties need prefixing. Its code has no property list. It detects which properties are supported and which of them are supported only with a prefix. Values, selectors and @rules are based on predefined lists, but they are still prefixed only when needed. No browser sniffing is involved; everything is based on feature detection.

Unlike other solutions, prefixfree adds the current prefix at runtime, so the user downloads a much smaller CSS file. Some might argue that pre-processed CSS is faster because no client-side processing is involved. To some extent, this is true, but in my experiments there was no significant lag. With the borderline exception of Opera, it was hardly noticeable.

Also, there are a few server-side solutions, but there are two main issues with those. Firstly, the file size of the CSS file is still huge, as it has to contain all the prefixes (and the unprefixed versions). And secondly, the server-side script has to maintain lists of properties at all times, because they cannot be automatically detected, like with prefixfree.

So, what does the rule above become with prefixfree? It becomes this beauty:

.download {
   position: absolute;
   top: 1em;
   left: -1.5em;
   width: 6em;
   height: 6em;
   padding: 1em 0;
   background: #80A060;
   background-image: linear-gradient(transparent, rgba(0,0,0,.3));
   color: white;
   line-height: 1;
   font-size: 140%;
   text-align: center;
   text-decoration: none;
   text-shadow: .08em .08em .2em rgba(0,0,0,.6);
   border-radius: 50%;
   box-shadow: .1em .2em .4em -.2em black;
   box-sizing: border-box;
   transform: rotate(15deg);
   animation: none;
}

Download the Script on GitHub!

You can download prefixfree from GitHub. The minified version is less than 5 KB, which becomes less than 2 KB after Gzip’ing. Please keep in mind that it’s still a very early beta and might have bugs. You can help fix them, or at least report them in the issues tracker. Have fun!

(al)

© Lea Verou for Smashing Magazine, 2011.

The designers of the crib sheet have spent years designing and testing forms, and they’ve decided to summarize the most common problems and issues that come up in their projects.

As usual, this goodie is absolutely free to use in private and commercial projects. The crib sheet is released under a Creative Commons license.

Form Design Cheat Sheet: Full preview

Features

The crib sheet presents best practices for a variety of Web form issues:

• Variety of fields (simple, optional, etc.);
• Layout and examples;
• Page-level error handling;
• Password strength;
• Currency values;
• Inline validation;
• Buttons.

Download The Crib Sheet For Free

The crib sheet is released under a Creative Commons license. You can use it in all of your projects for free and without any restrictions. Please link to this article if you would like to spread the word. You may modify the theme as you wish. We know you’ll find it useful in your next project!

• Large preview (PNG, 1.9 MB)
• Download the compressed package (ZIP, 0.7 MB)
• The release notes on the developer’s website

Thank you, guys. We appreciate your work and your good intentions!

(al) (fi) (il)

© Joe Leech for Smashing Magazine, 2011.

The old-school way to test code was to load your website on as many computers as you could find, using as many different combinations of browsers and operating systems as possible. That was fine if you had access to a bunch of different computers (and had some time to kill). But there are much more efficient ways to test across browsers, using either free or commercial Web services and software. In this article we review some of the most useful ones.

Free Cross-Browser Testing

Good news: very powerful free testing tools are available for Web designers today. Some are more user-friendly than others, and some have significantly better user interfaces. Don’t expect much (if any) support with these tools. But if you’d rather not spend extra money on testing, some great options are here as well.

Adobe BrowserLab

Adobe BrowserLab is a free cross-browser compatibility tool that lets you test a number of modern and legacy browsers, including various versions of Chrome, Safari, IE and Firefox. It gives you a number of ways to view pages, including a full-page view in a single browser, as well as side-by-side comparisons of browsers and an onion skin view. The service can access dynamic pages across the web, or viewed locally via Firebug or Adobe Dreamweaver CS5. The ability to create pre-defined browser sets is also useful, in case you don’t need to test on older browsers.

Browsershots

Browsershots is probably the most comprehensive free testing tool available. It includes Linux, Windows and BSD browsers. It also includes a number of browsers you’ve probably never heard of (like Galeon, Iceape, Kazehakase and Epiphany). For the most part, Browsershots tests on the most recent version of each browser, as well as on legacy versions.

While Browsershots does support a huge variety of browsers, the more you test, the more slowly it prepares the results. So, you may want to stick to the major browsers.

SuperPreview (Free and Commercial)

SuperPreview is Microsoft’s offering in this space (and it’s compatible only with Windows). It lets you define your own “baseline” (or default) browser, and it works with any browser installed on your system (and comes with the IE6 rendering engine built in). The fact that it only works with your built-in browsers does make it faster (because you’re not uploading anything or waiting for a remote server), but it also limits the number of browsers you can compare.

SuperPreview trial comes with 60 days of cloud services before you have to either buy it or go into reduced, (local browsers and IE 6-9 mode). In an online version, you have support for Chrome, Safari (Mac) 4+5, Firefox 3+4. You can also use an interactive mode to log into sites that require a login before displaying the page you want to test. There are also debugging tools for the DOM and onion skinning available in Adobe Browserlabs. Unfortunately, there is no support for Opera whether installed locally or in the cloud and you do have to have the version included with Expression Web to get the cloud services option but the base version with support for IE 6, IE 7, IE 8 (and IE 8 rendering as IE 7) are included with the free version as well as IE 9 if it is installed locally. (Thanks, Cheryl D Wise)

Lunascape 6

Lunascape is a triple-engine browser for Windows. It runs Trident (IE), Gecko (Firefox) and Webkit (Chrome and Safari), so that you can see how your website looks in all three, side by side. While it’s not a traditional browser compatibility tester, it is nonetheless a useful tool for designers and developers. One major benefit is that you get to view your website instantly in all three major rendering engines. There’s also support for Firefox extensions and plug-ins, so you can use developer tools like Firebug to diagnose compatibility problems.

IETester

IETester is a free (both for personal and professional usage) browser for Windows that allows you to have the rendering and JavaScript engines of IE10 preview, IE9, IE8, IE7, IE6 and IE5.5 on Windows 7, Vista and XP, as well as the installed IE. Only an alpha version of the tool is available. Windows 7, Windows Vista or Windows XP with IE7 minimum are required for the tool to run.

IE NetRenderer

IE NetRenderer lets you check compatibility in Internet Explorer versions 5.5 through 9. You’ll have to check each version individually, but the service is free.

Spoon

Spoon is an application emulation service. It provides free versions of Firefox, Chrome, Opera and Safari for Windows users. A number of versions of each browser are included: Firefox 2–5, Chrome 4–8, Safari 3–5 and Opera 9–10. Bad news: Internet Explorer is supported by Spoon virtualization but is not available by request of Microsoft.

Sauce Labs (free and commercial)

Sauce Labs provides a lot of browser and OS options and sets you up with a browser dedicated VM instance that you operate inside the browser of your choice. It also records a video of your entire testing session. The service offers 200 free minutes of testing per month and allows you to quickly build automated tests from your browser with Selenium.

Browsera (free and commercial)

Browsera provides automated compatibility testing. It automatically highlights differences in the way browsers render your design, thus simplifying the testing process. It also detects JavaScript errors, and the commercial version can test pages behind subscription or log-in walls. It can also test dynamic pages.

The free plan includes a limited number of browsers and low-resolution screenshots. Premium plans start at $39 for a single project and $49 to $99 for monthly subscriptions, and they support more browsers, provide high-resolution screenshots and let you test private pages.

Browserling (free and commercial)

Browserling is a relatively new cross-browser testing app. It supports a limited number of browsers (and not necessarily the newest versions), which makes it of limited use to some developers. It’s still in beta, though, so hopefully more browsers will be supported in the near future.

The free version comes with a five-minute session limit, and the developer version is $20 per month with no time limit.

Commercial Cross-Browser Testing

Commercial tools often have features not found in the free ones, including live interactive browser virtualization and mobile device testing.

Mogotest

Mogotest does complete browser-compatibility testing, including for private pages. There’s an API, so it can be integrated in your current tools and workflow. Mogotest also offers a website health report that tells you about broken links and pages, redirect loops and other issues common to new websites. The service also offer screenshot comparison tools for testing screenshots against each other as well as site-level testing including page consistency testing and individual page tests. HTTP basic and cookie-based login systems are supported as well.

There are two plans for individuals: a personal plan starting at $15 per month that lets you test up to 50 pages on three websites, and a freelancer plan for $45 per month that includes up to 10 websites and 350 pages. The team plans start at $125 per month and go up to $4499+ for unlimited access. The two highest-cost plans include custom reports.

Cloud Testing

Cloud Testing offers functional cross-browser testing. You record the user journey with your browser and Selenium IDE, upload it, and then Cloud Testing will run that script in multiple operating systems and browsers. It then provides screenshots and HTML and component diagnostics. No prices are listed on its website.

BrowserCam

BrowserCam includes testing tools for both desktop and mobile browser compatibility (the latter is still absent in many other tools). It also offers remote access for live testing on Windows, Linux and OS X configurations, and email capture for checking your HTML, RTF and TXT emails.

Pricing for BrowserCam starts at only $19.95 per day for a single service (and $24.95 for the browser, remote access and email capture package), up to an annual subscription price of $399.95 for a single service (and $499.95 for browser capture, remote access, email capture and multi-user access, or $999.95 for all of those features plus device capture).

Multi-Browser Viewer

Multi-Browser Viewer covers both desktop and mobile browsers. It includes 26 virtualized Web browsers, 5 mobile browsers (including the iPhone and iPad) and 61 screenshot browsers (meaning you can see how the website renders but not interact with it). It’s also available in five languages: English, Spanish, German, Russian and French.

Multi-Browser Viewer is $139.95 for a single-user license and includes a year of product usage and updates. Updates after the first year are currently $99.95. A free trial is available through the website.

CrossBrowserTesting

CrossBrowserTesting provides live interactive browser testing with remote VNC sessions. It also generates automated screenshots across multiple browsers for more basic testing. There are more than 100 browser and operating system combinations, including many mobile platforms.

Monthly subscriptions range from $29.95 to $199.95, depending on the number of users and the minutes of testing (minutes can roll over to the next month, but they’re not unlimited). A one-week free trial is available for all plans.

Testing Services Compared

The chart below shows the basic features offered by these cross-browser testing services and applications, making it quick and easy to compare.

Conclusion

Regardless of the tool you choose, testing early and often during the Web development process can save you from a lot of headaches later. Find a tool that fits your workflow (so that you’ll actually want to use it and it won’t be a hassle), and test whenever you make major changes to a design.

What tools do you use for cross-browser testing?

How has your experience been with cross-browser testing tools and services? Which ones do you use? How do you integrate cross-browser testing in your professional workflow? Let us know in the comments!

Related Posts

You might be interested in the following related articles:

• Review of Popular Web Font Embedding Services
• Review of Text Batch Processing Tools
• Useful Resources, Tools and Services for Web Designers
• Time-Saving and Educational Resources for Web Designers

(al)

© Cameron Chapman for Smashing Magazine, 2011.

Please don’t hesitate to comment to this post and let us know how exactly you use these tools in your workflow. Please do avoid link dropping and share your insights and your experience instead. A big thank you to all designers and developers out there for releasing and producing useful, valuable resources for all of us to use. We sincerely appreciate it.

Useful Resources and Websites

Method & Craft
Describing itself as “the DVD extras of design,” this site offers a behind-the-scenes look at different designs, including how they were achieved, the techniques used and how the designers have grown in their professional careers.

DesignersMX
This site is dedicated to finding out which tunes keep designers around the globe rolling and get their creative juices flowing. Just sign up, log in and share your own compilation of fresh beats and bright tunes.

Little Big Details
This site features tiny details that help improve the user experience of websites and mobile apps. You can also share your favorite little things on the website. The collection is very useful — with more design examples submitted regularly.

Shady Characters
This blog, owned by Keith Houston, aims to shed light on the history of both well-known and outlandish marks of punctuation. It’s an interesting study in the stories behind the punctuation we use every day.

An Illustrated Guide
This project reviews some of the notable picture books. Guide’s authors, Catherine and Matthew Buchanan, have collected many of them from the last decade. The books are categorized according to cover art styles and reading level.

CV PARADE
This website celebrates the art of the résumé — a great collection of different and unique CVs that might be useful for you if you are about to polish your own CV.

Comic Sans Criminal
The next time you see someone using Comic Sans inappropriately, consider sharing with them a link to this site which lays out the reasons why Comic Sans is misused and offers some helpful alternatives.

Where Do You Want To Work Today?
A simple way for freelancers, contractors and other nomadic workers to check out some great places where they can work in a different environment for a change.

Node Cloud
NodeCloud is a resource directory gathering sites related to Node.js and ordering them by their Alexa traffic, allowing to evaluate relative popularity of a project.

WeekendHacker
This site provides a mailing list you can issue a cry for help for one of those tiny projects that cross your path — whether you’re a designer, developer, or both.

The Phraseology Project
Here you can submit a letter, word or phrase which is then turned into a beautiful design by the website’s founder, Drew Melton, or his colleagues.

Designers & Books
This projects presents short reviews of books that esteemed members of the design community identify as personally important, meaningful, and formative. Designers introduce one or more books that have influenced their ideas and values. You’ll also find members who have created must-read lists for different disciplines in design.

Quotevadis
Quotevadis is a Tumblog that offers quotes from creative and intelligent individuals from both past and present. An excellent replacement for the dusty old “about:blank” page in your browser.

Let’s Swap
In case you’ve had a particular artistic piece hanging around for a while, you could try swapping it with other artists for prints, books, zines, original artwork, tshirts, sculptures, or any other objects.

ideeeas
This project collects brainwaves from people who have brilliant, fancy ideas on any topic. There are posts with popular or useful social ideas that could make the world just a little better.

A Working Library
A great book cover definitely makes for a graceful entrance, but the thought of it disappears as you start reading the book. This website aims to explore the ways we read — without being overtly conscious of the cover design.

The Godfounder
A blog which showcases details that make Web apps successful, in particuliar little details that show designer’s attention to users’ needs.

FPO: For Print Only
A blog dedicated to both visual stimulus and detailing of the development and production of printed matter such as annual reports, books, business cards, stationery suites, collateral materials, posters, packaging and anything else where ink meets substrate.

What Software and Hardware Do Professionals Use?
A useful resource for people who love to keep discovering new tools. Browse these nerdy interviews and guaranteed, you will come across some new wonders, especially because every interviewee explains why they have chosen a particular tool.

Browser Details for Tech Support
When in doubt, send your customers to the website Support Details. Their data will be automatically read out of the browser and sent directly to you via email or will be saved. The free service uses Flash but can also complete its task without it.

The UX Bookmark
A resource for HCI and human factors professionals, usability engineers, interaction designers as well as information architects. You can submit a link if you feel that it would benefit the UX Design Community.

Web Font Hosting Services Reviewed
A good overview of web font hosting services you can always look up when in doubt:

Android Patterns
Design patterns, which are basically reusable solutions for recurring problems, can be found in many design niches. Recently, they’ve also turned up in user interface designs for Android apps. Android Patterns publishes a comprehensive set of interaction patterns that can help you design Android apps.

Useful Tools, Libraries, Plugins

Rapid Prototyping with flickrBomb
flickrBomb is a jQuery plugin that helps you quickly fill your prototypes with relevant content, and not just dull gray placeholder images when making a website.

Unix Terminal/Console/Curses Tools
A nice list of 28 tools for the UNIX Terminal and Console. Some are little-known, some are just too useful to miss, some are pure obscure. You can use your operating system’s package manager to install most of them.

.htaccess tester
A very simple tool that lets you test your .htaccess rewrite rules. Simply fill in the URL that you’re applying the rules to, place the contents of your .htaccess on the larger input area and analyze if the rules are doing what they are supposed to do.

CSS Lint
CSS Lint is a useful tool to help you detect problems with your CSS code. It does basic syntax checking as well as applying a set of rules to the code that look for problematic patterns or signs of inefficiency. The rules are all pluggable, so you can easily write your own or omit ones you don’t want.

Log.io
Here is a way how to perform real-time log monitoring in your browser. Harvesters watch log files for changes, send new log messages to the server, which broadcasts to Web clients. You can then create stream and history screens to view and search log messages.

Popuload for Adobe Photoshop
Rather than idly waiting for each processing task in Adobe Photoshop to finish, you can spend that time browsing the latest news feeds. Popuload has been programmed to detect when any Photoshop loading bar appears; it then appends to that loading bar window throughout the duration of the processing time.

Asciiflow: ASCII Flow Diagram Tool
A simple Web based ASCII flow diagram drawing tool which allows you to draw boxes, lines, arrows and type and then export it straight to text or HTML.

Microjs: Micro-Frameworks and Micro-Libraries
Microjs helps you discover the most compact-but-powerful microframeworks, and makes it easy for you to pick one that’ll work for you.

Showoff
Demonstrating your ongoing projects could be a huge pain. In general, your best option is to upload the files to a server somewhere. You could prepare a video or send over a huge package of files or just .zip it somewhere on project collaboration website. But what if you just want to quickly show someone a project you’re working on without sending over the large files? This tool aims to solve this problem. If you’re looking for an alternative, you might want to consider LocalTunnel.

Meld
A visual diff and merge tool that lets you compare two or three files and edit them in place (diffs update dynamically). You can also compare two or three folders and launch file comparisons.

Convert Unix Time
A Unix timestamp (or epoch time) is the number of seconds that have elapsed since January 1, 1970 00:00 UTC. The mission of this site is to convert your timestamp into a human readable format and vice versa. You also might want to check out Epoch Converter.

Drush
This Drupal tool lets you install, download and uninstall modules and much more without even opening a Web browser.

Bones
A WordPress development theme that was created after years of editing and reusing the same template to develop custom sites. A nice, well organized boilerplate for developers of WordPress themes or designers using WordPress in their projects.

Fructose
Fructose is a subset of Ruby that’s designed to be compiled into PHP 5.x. The generated code should run on any PHP version above 5.0. Most major Ruby features are supported, including operator overloading and blocks. Eventually, most of the Ruby standard library will be available to Fructose programs via libfructose.

loads.in
By simply entering the URL here, you can test how fast a webpage loads in a real browser from over 50 locations worldwide.

WriteMaps
WriteMaps is a Web application that allows you to create, edit, and share your sitemaps online.

Wirify
Wirify is a bookmarklet that lets you turn any Web page into a wireframe with a single click. The bookmarklet also helps you get rid of all distractions by blocking out copy, images and ads, letting you take a closer look at the website’s building blocks.

Lorempixum
Hand-selecting and inserting placeholder images in a layout can be a hassle. This tool takes care of that task by providing you with placeholder images for every possible usage, whether for Web design or print layout. Using it is simple: visit the website, pick the URL, define dimensions and category, and insert it in the layout. You can use the “Placeholder Generator,” which lets you specify the size, category and color settings of the placeholder image.

f.lux
This tool makes your display adapt to the lighting of the room you are in, all the time. During sunset, your screen mimics room light, and in the morning the tint resembles sunrise and its natural light. Configuring f.lux is easy: simply tell the control panel what kind of lighting your office has and where you live. The rest is taken care of automatically. The free tool is available for Windows, Mac and Linux.

Solarized
Solarized is a free custom palette of sixteen colors (including four background tones, four “content tones” and eight accent tones). The content and accent tones are visible on both the light and dark backgrounds and are based on established color theory principles.

Useful Services

PayPal Fee Calculator
A PayPal ‘percentage fee’ is determined by which country you are registered in and how much you receive every month via PayPal. The PayPal ‘fixed fee’ is determined by which currency the payment is sent in. This calculator helps you keep an overview of fees as well as currency conversions.

courteous.ly
A helpful way of letting people know your real time email load and when sending mails works best for you.

ifttt (if this, then that)
This tool allows you to create simple “if then” actions based on common activities, and lets ifttt automate them. By triggering an email when the weather forecast predicts rain, this can help remind you to take your umbrella with you. The service is currently in private beta, but you can request an invite.

Unsubscribe.com
A fast way of unsubscribing from any mailing list by simply clicking on the emails you no longer wish to receive.

minutes.io: Take Notes Quickly and Easily
minutes.io lets you take notes in your browser even when you’re offline and waits until you’re online again so you can send and share with others right away.

Doodle: Easy Scheduling
A great way to mutually agree when to meet by simply creating a poll, inviting participants and cofirming the date and time. Free of charge and without registration.

Focus Booster
A simple and elegant application designed to help you eliminate the anxiety of time and enhance your focus and concentration.

Typography Insight iPad App
Typography Insight is an iPad application that introduces new methods for learning and teaching typefaces. The project stemmed from my love for typography and evolving mobile platforms

FontDeals
This service is like Groupon, but for fonts. Various font deals from various type foundries are offered at lower prices.

Last Click

Weave Silk
Is your desktop, motivation or even design work in need of something fresh, swirly and remarkable? Just weave some Silk! Yuri Vishnevsky created this experimental, magical interactive gimmick. You can spend minutes playing around with this little technique, based upon HTML5 Canvas: no Flash in use.

Keyboard Shortcut Skins for Macs
For all of you out there who are shortcut lovers, here are some amazing custom-fitted color-coded keyboard skins that will help you fly through Photoshop, Aperture, Final Cut Pro, and many more.

Ro.me: Three Dreams of Black
“3 Dreams of Black” is an interactive film by Chris Milk and some friends at Google that showcases the creative potential of WebGL. WebGL is a context of the HTML5 canvas element that enables hardware-accelerated 3D graphics in the web browser without a plug-in. This is why we &heart; the Web.

(vf) (il)

© Smashing Editorial Team for Smashing Magazine, 2011.

Here at Smashing Magazine, we’re continuously searching for time-saving, useful HTML-, CSS- and JavaScript-resources for our readers, to make the search of these ever-growing tools easier. We hope that these tools will help you improve your skills as well as your professional workflow. A sincere thanks to all designers and developers who are featured in this round-up. We respect and appreciate your contributions to the design community.

HTML and CSS Tools

HTML Email Boilerplate
This website and its sample code creates a template of sorts, absent of design or layout, that will help you avoid some of the major rendering problems with the most common email clients out there. It also provides some helpful examples and snippets that will keep your email design rendering as true-to-form as possible.

Initializr
This tool creates a customizable template based on HTML5 Boilerplate. Decide whether you want sample content, choose between JavaScript and jQuery, and specify your compatibility and server configuration needs. You’ll get a template based on key features of Boilerplate to start your next project. You might want to check out The HTML5 Framework Generator as well.

Layer Styles
A nice simple tool for creating CSS in an intuitive way — very much like you would do with a graphics editor. The tool lets you add drop shadow, inner shadow, background, border and border radius and generates cross-browser CSS code.

Mobile Boilerplate
A template that creates rich and performant mobile Web apps. You can get cross-browser consistency among A-grade smartphones, and fallback support for legacy Blackberry, Symbian, and IE Mobile.

Kotatsu
A simple HTML table generator that helps you create a table and throw in row as well as column classes quickly and easily. And if you want a quick tool to generate lists, you might want to take a look at li maker.

Zen Coding
Zen Coding is an editor plugin for high-speed coding and editing. The core of this plugin is a powerful abbreviation engine which allows you to expand expressions (similar to CSS selectors) into HTML code.

Vogue
This tool reloads the style sheet (not the HTML) of a page in all browsers, and it can even be configured to reload a page automatically in multiple browsers at the same time. The tool doesn’t host your website but rather runs your website’s own local server. To use it, you just need to install NodeJS and npm.

LiveReload
LiveReload applies CSS/JS changes to Safari or Chrome without reloading the page and reloads the page automatically once the HTML changes. Alternatively, take a look at Live.js, a library that makes sure that you’re always looking at the latest version of the page you’re working on, whether you are writing HTML, CSS or JavaScript.

css-x-fire
This tool allows editing CSS properties in the IDE from Firebug CSS editor and also allows the developer to concentrate on CSS styling without having to refresh the browser.

Ffffallback
A bookmarklet that lets you test different font stacks to find the best result. It bascially scans the page’s CSS and creates a clone page where you can test and analyze different fallback fonts.

LESS.app for Mac OS X
LESS extends CSS with variables, nested rules and operators. This app makes it very simple to use {Less} by automatically compiling *.less files into standard CSS.

Less-Boilerplate
Boilerplate CSS is written in Less and includes a CSS reset, CSS3 helpers, centered column blocks, and much more.

Needle v0.1a1
Needle is a handy tool you can use to test whether your CSS renders correctly by taking screenshots of portions of a website and comparing them with other screenshots. It also provides tools for testing calculated CSS values and the position of HTML elements.

inuit.css
A CSS framework that provides you with the best dev tips, tricks and practices in one handy file.

Spritemapper
This application merges multiple images into one and generates CSS positioning for the corresponding slices; by reducing the amount of images and better utilizing the connection, CSS spritemapping can reduce your website’s loading time.

CSSsitemap System
David Leggett shares with us the code for a CSS-based sitemap that Andrew Maier and himself have created and are still working on. A set of tools for project documentation & UX designers is also coming up soon.

CSS Stress Testing and Performance Profiling
Andy Edinborough shares the code he uses for his so-called ‘CSS Stress Test’ for almost all browsers.

Normalize.css
Normalize.css takes a slightly different approach to CSS resets. Rather than eliminating all browser defaults, Jonathan Neal and Nicolas Gallagher have taken the time to research how different browsers handle different bits of code and then kept the defaults that are useful. It saves you time as a designer, while also providing consistent results.

Holmes
The tool is a diagnostic CSS style sheet that highlights possibly invalid or erroneous mark-up. Just add a single class, and it will create a red border around errors, a yellow border around warnings and a gray border around deprecated styles. In addition to the downloadable CSS style sheet, there’s also a Holmes bookmarklet that lets you apply holmes.css to any page within your browser.

CSS Crush
A CSS pre-processor that is familiar, convenient, intuitive, and much more — everything Pete Boere wants a pre-processor to be.

CSSPrefixer
CSSPrefixer helps you improve your workflow and saves you a lot of time while inserting all of the necessary CSS prefixes for various browsers.

iOS Media Query Previewer
A very simple tool to preview how a particular website looks on an iPhone as well as iPad.

CSS Pivot
Here you can add CSS styles to any website and share the result with a short, handy link.

PCSS
A PHP-driven CSS preprocessor that helps you unleash the CSS3 power with much less code and features like class nesting, server-side browser specifics, default unit and variables. The tool requires PHP5.

JavaScript Tools

Modernizr 2
Modernizr is a widely used open-source JavaScript library that helps you build HTML5 and CSS3-powered websites. With the second version of the tool, you can now combine feature detection with media queries and conditional resource loading. That gives you the power and flexibility to optimize for every circumstance. Developed by Paul Irish, Faruk Ateş and Alex Sexton.

yepnope.js
A conditional loader for your polyfills that is very fast and allows you to load only the scripts that your users actually need.

FitText
FitText is a jQuery plug-in for responsive and fluid layouts that resizes display text to fit the parent element. A good solution for creating headlines that look good on everything from a small mobile device to a 30-inch desktop display.

jQuery Waypoints
Waypoints is a small jQuery plugin that makes it easy to execute a function whenever you scroll to an element.

jQuery Plugin Boilerplate
This boilerplate implements public and private methods, as well as public and private properties, making it very easy when building both simple and complex jQuery plugins.

ligature-js
This Java script lets you convert text patterns into common typographic ligatures by going through the text on a web page and inserting ligatures where appropriate.

Placeholder jQuery Plugin/Polyfill
This jQuery plugin provides support for the new placeholder="" HTML5 form attribute in browsers that don’t natively support it (IE et al).

StronglyTyped
A JS library that allows you to specify strongly typed properties of various types (Boolean, Number, String, etc.) and constants (final properties in Java). It uses ES5 getters and setters and falls back to regular, loosely typed properties in non-supporting browsers.

Kaffeine
A set of extensions to the JavaScript syntax that attempts to make it nicer to use. It compiles directly into JavaScript that is very similar, readable and line for line equivalent to the input.

Crossroads.js
A JS routing library inspired by URL Route/Dispatch utilities which are present on frameworks like Rails, Pyramid, Django, CakePHP, CodeIgniter, etc. It parses a string input and decides which action should be executed by matching the string against multiple patterns.

Doctor JS
Doctor JS analyzes your JavaScript code and provides you with a complete analysis in JSON, whether you’re dealing with polymorphism, prototypes, exceptions or callbacks. Tell Doctor JS about it:

HEAD.js
A script that speeds up, simplifies and modernizes your site — a concise solution to universal issues. You can load scripts like images as well as use HTML5 and CSS3 safely.

Hivelogic
Posting your email address on a website is an easy way to get an inbox full of spam. This anti-spam email address enkoder helps protect email addresses by converting them into encrypted JavaScript code so only real people using real browsers will see them. An alternative, more robust solution is Mollom.

JavaScript Garden
A JS project that offers advice on avoiding common mistakes and subtle bugs, and lays down performance issues and bad practices that JavaScript programmers might run into on their journey to the depths of the language.

Syntaclet
By clicking on the Syntaclet bookmarklet, you can automatically see all language specific syntax colored with line numbers to all the code on the page.

Bookmarkleter
This tool creates bookmarklets from JavaScript code. It removes new lines, tabs, and optional spaces, URL-encodes special ASCII characters and places code in a wrapper function (if not done already).

Bookmarklet Crunchinator
This great tool helps you quickly create a bookmarklet from any JavaScript code and will automatically be wrapped in a function to make it bookmarklet-friendly.

Grids

The JavaScript Grid
A JavaScript-based grid overlay — just drag the snipplets into your bookmarks bar, open your URL and click the bookmark.

Grid Calculator
A calculator that helps you easily create your own grid and download it for either Adobe Illustrator or Photoshop.

GridCalc
This easy-to-use grid calculator lets you download a configuration as a CSS file which you can use in your project by simply entering the desired width of your page and an aproximate range for your column and gutter width. The calculator then gives you all the possible combinations within the limits you entered and provides you with a nice visual representation of the results and how the grid can be used.

Modular Grid Pattern
This tool enables you to create a grid template for Photoshop and other image editing applications. Enter the baseline, the module’s width and height, the gutter width, and the number of modules (columns), and it gives you a custom pattern to import into Photoshop. A Photoshop extension is also available, and you can download a PNG or transparency map, too.

Susy
A Rails framework that enables you to create a completely custom grid based on your mark-up and designs. No more compromises because the grid framework you’re working with isn’t quite what you need, and no more spending hours tweaking things to get them just right so that the design works the way you want.

Griddle.it
A clean and simple way to help you align your layouts. All you need to do is put your dimensions after the URL provided to get a background guide image to work with in your browser. Grids are created on the fly, so any combination should work.

Last Click

ASCII Pronunciation Rules for Programmers
Most programmers would recognize ASCII characters on a website and know how to use them in their own work. But how many know what to call all those characters? This article gives a pretty thorough rundown of common and not-so-common names for ASCII characters. It’s a useful guide if you’re ever at a loss when listening to another programmer speak about coding.

Weave Silk
Is your desktop, motivation or even design work in need of something fresh, swirly and remarkable? Just weave some Silk! Yuri Vishnevsky created this experimental, magical interactive gimmick. You can spend minutes playing around with this little technique, based upon HTML5 Canvas: no Flash in use.

From Me To You
No, this has nothing to do with CSS, HTML or JavaScript, but it is just remarkable. On his photography blog, Jamir collects scenes from around the world, memorable events, food, people and small personal universes. The interesting part is that the photos are animated (hence the name); they come to life using good old animated GIFs. Pay a visit to the article Positioning an animated gif over a jpg image. His short tutorial explains how to save on bytes when putting GIFs and JPEGs together, without losing too much quality.

Related Articles

You might want to take a look at our previous related articles:

• Powerful New CSS Techniques and Tools (April 2011)
• Useful JavaScript and jQuery Tools, Libraries, Plugins (April 2011)
• CSS: Innovative Techniques and Practical Solutions (February 2011)
• Time-Saving and Educational Resources for Web Designers (January 2011)

(vf) (il)

© Smashing Editorial Team for Smashing Magazine, 2011.

Here at Smashing Magazine, we’re continuously searching for recent time-saving, useful Photoshop resources for our readers, to make the search of these ever-growing techniques easier. We hope that these techniques will help you improve your design skills as well as your professional workflow when using Adobe Photoshop. A sincere thanks to all designers and developers whose articles are featured in this roundup. We respect and appreciate your contributions to the design community.

Useful Photoshop Tools

Mr. Stacks
A small Photoshop script that can quickly generate storyboards, stacks and PDFs for project CDs, client presentations or anything else — right from the Layers Comps in your Photoshop file. The script would be useful for a series of animations, storytelling elements in a design and advertising.

Photoshop Tych Panel
Every photographer and Web designer who has spent time arranging images and photographs knows that scaling and resizing takes time. But even existing templates are unnecessary when you try out Reimund Trost’s latest little Tych Panel for Photoshop. It completely automates the n-Tych creation process, and it has a lot of layouts to choose from. The tool has been open sourced by Reimund Trost and can be freely used, modified and redistributed in any way.

Pixel Proliferation: A Toolset For Managing Screen Resolutions
This tool will help you to manage screens resolutions more easily. The toolset contains a collection of PS5 marquee-tool presets for common screen resolutions, covering fixed-screen resolution sizes, ratios for less common resolutions and standard ratios. Also, a collection of layered CS5 PSDs provides common devices for computing and design presentations. Finally, there is a reference chart for resolutions and design landscape. Useful.

Generating CSS positions for Sprites
A Photoshop plug-in by Arnau March that generates sprites with your given CSS file. You can then add the sprite locations and also create hover and click effects with the help of jQuery. You might want to check out CSS Sprite: Photoshop Script Combines Two Images for CSS Hover as well: the article presents a simple JSX Photoshop script for creating image sprites, and you can also assign a keyboard shortcut to it.

Golden Crop
Golden Crop is a Photoshop Script making cropping with respect to division rules (golden rule, 1/3 rule) very easy with visual guides. Requires installed Photoshop CS2, CS3, CS4 or CS5 (either x86 or amd64 version). Works on Windows and Mac.

Browser UI
The Browser UI is an action that creates a browser window around any size Photoshop document you can throw at it. The free version includes only Internet Explorer 6 UI. The deluxe edition with current versions of Chrome, Safari and Firefox is not free ($3).

Open With Photoshop 0.6
An add-on for Firefox that is a new companion for Web and graphic designers to open up any Web image with Adobe Photoshop via a single and quick mouse click. A useful time saver.

foxGuide: Photoshop Guides Inside Firefox
A Firefox extension that displays horizontal and vertical guides. You can move or remove the floating guides on a webpage just the way you do it Photoshop with the help of foxGuide. Guides are useful for laying out elements symmetrically, structure a design and improving the overall layout.

Modular Grid Pattern: create a modular grid in Photoshop, Fireworks and GIMP
Modular Grid Pattern is application for web designers, which helps you quickly and easily to create a modular grid in Adobe Photoshop, Adobe Fireworks, GIMP, Microsoft Expression Design and other applications. The extension requires Adobe Photoshop CS5

960gs ExtendScript for Photoshop CS5
The script is very raw and crashes easily with the wrong input or settings. However, it has some nice features such as disabling gutters by putting 0 for gutter width and optionally adding evenly-spaced horizontal guides.

Workspace import/export script for Photoshop
John Nack has written a script to enable simple importing and exporting of Photoshop workspaces. It should work in both CS4 and CS5 (although it is a little more robust in CS5), so you can use it to migrate workspaces from CS4 to CS5 in addition to using it to enable easier sharing of CS5 workspaces between machines or people.

Subpixel Hinted Font-Rendering
This technique is great for your concepts when you want to simulate actual text in your Photoshop file. Thomas Maier has saved his workflow as an action. You can download the subpixel-rendering technique and use it for free.

GuideGuide 1.0
What actually started out as a script that drew guidelines at the middle of the document, turned out to become a quite helpful extension for Photoshop when working with columns, rows and midpoints in CS4 & CS5. You can download Cameron McEfee’s GuideGuide to help you find midpoints, make margins and create rows and columns much easier while working in Photoshop.

Photoshop Animation to Sprite Sheet
This tool enables you to easily export a framed animation in Adobe Photoshop to a packed sprite sheet. The tool is available for Photoshop CS3 or higher. Developed by Peter Jones.

Automatic Tile Cutter
Some images are made of dozens to thousands of tile images, depending on the zoom level. At the distant zoom levels you only need a few images to cover a large area. Creating and then uniquely naming each of these images would be a daunting task if you had to do it by hand. Will James has solved this problem and released a batch processing script to use with Photoshop 7 or CS that will carve all the titles you need and name them exactly as you need them named.

The Image Processor Script
The Image Processor in Photoshop CS4 is a simple way to quickly resize and convert a bunch of images to JPEG, PSD or TIFF format. The modified script allows exporting CMYK JPEGs as CMYK, as well as support for exporting PNG images.

Further Resources

Adobe Photoshop Scripts
Trevor Morris provides more than a dozen of free scripts for Adobe Photoshop. All scripts are commented, making them easy to modify and/or learn from. Among other scripts, you’ll find Layers to Comps, Rename Layers, Sort Layers and Distribute Layers Vertically scripts.

The Photoshop Scripting Community Forum
PS-Scripts is a community for Photoshop scripting and automation. The site contains articles Members of the community release their script on the site’s forum; for instance, you can find the Smart Object links panel, Listing fonts used in PSD files (alternative), Distribute Layers. Unfortunately, the forum’s activity is quite low, although the scripts are being released quite often.

Russel Brown’s Scripts Page
Russel Brown provides a number of free useful Adobe Photoshop Scripts and Panels for CS4 and CS5. Among other things, Adobe Emailer Panel, Image Processor Pro and Edit Layers in ACR scripts are available.

Scriptopedia
Another community that helps to find scripts and scripters for Photoshop and other Adobe applications. The site is frequently updated; you’ll find various scripts as well as tutorials on the site.

Useful References and Articles

The Photoshop Etiquette Manifesto for Web Designers
The recently updated Photoshop Etiquette can be quite useful when wanting to improve the clarity of a PSD when transferred. This site provides you with rules that will show you examples and bonus points ranging from external as well as internal file organization to exporting and design practices.

Photoshop Secret Shortcuts
This old, yet still very useful article by Nick La provides an overview of secret (i.e. not documented) Photoshop shortcuts that the author has learned from years of experience.

Photoshop Tip: Organizing Layers
Daniel Mall has thought of a super handy Photoshop file organization trick that separates layer groups for different stages of a page within the same PSD. You can prefix your layer groups with a bullet to organize your PSDs but also using a hyphen will enable you to create a horizontal divider in the context menu.

Photoshoptimize: Optimize Photoshop Performance
To improve the performance of Photoshop, this list of best tips will help any designer to optimize Adobe Photoshop for Mac as well as PC; from reducing cache levels to disabling export clipboard in Photoshop, and much more.

Super Crisp Font Anti-Aliasing With Sub-Pixel Hinting
David Leggett shares with us the most useful technique in creating concepts in Photoshop, especially when you’re working on a website layout in Photoshop, and want an accurate representation of what a font is going to look like in your content body. This surely helps bring the frustrating times when working with small font using anti-aliasing in Adobe Photoshop to an end.

Freebies, Goodies

100+ Free HTML Email PSD Templates
CampaignMonitor has released a large collection of freely available high quality email templates which have been thoroughly tested in more than 20 of the most popular email clients like Outlook 2010, Gmail, Lotus Notes, Apple Mail and the iPhone. They are completely free. Every template contains a Photoshop document, HTML template and a Campaign Monitor Template. The complete packages with all templates is 320 Mb.

Bottles and Cans Photoshop CS4 Actions
3 exclusive Photoshop CS4 Actions that might save you some time when you are working on the next soda, wine or bottle label design.

Pricing Table PSD Template
A free pricing table template with various button states.

Search and Email Input Text PSD Template
A free template for search field and email input fields. You can find new freebies released every Friday on the site.

Free PSD: Seven Tickets
Seven Tickets inspired by Seven Dribbble Shots.

Free PSD: Simple Download Buttons
Orman Clark has released a set of simple download buttons in three different states: nroaml,normal, hover and active. These download buttons use a subtle icon to suggest the action of downloading. The download includes the editable PSD. You can download even more PSD buttons.

Album Cover Art Carousel (PSD)
The download (PSD) includes styles for the covert art, the hover and/or active state, and the next/previous arrows. Try experimenting with the colour of the album cover hover state, a vivid orange looks great.

Flip-Clock Countdown (PSD)
A groovy little countdown flip-clock design: the perfect event/product launch companion.

Big Green Button (PSD)
This template is perfect for when a regular sized button just isn’t cutting it; this big fat round button should grab a visitors’ attention with ease. The download (PSD) displays a pricing plan as an example.

Free PSD: Tagtastic Tag Cloud
The topic of this article is a nice and simple little tag cloud – tagtastic!

The Ultimate Free Master PSD File
The download features one master .PSD file with folders, assets, grid folders and layer comps ready to be used. The master file is using the best practice featured in Dan Rose’s Photoshop Etiquette.

OS X Leopard GUI Freebie
A freebie including a GUI set for Mac’s OS X Leopard operative system for all Web developers who want to integrate great designs into their applications. This package includes fully editable vector Photoshop sources and a customizable Fireworks PNG file; the original fonts that were utilized for the making of the GUI are also included.

Tabs Icons: Interface Icons for iOS & Designers
You can find free iPhone tab bar icons for Mac OSX Lion and iOS here which are specially designed and optimized for toolbars and tab bars. All these icons have been created for iPhone, iPhone 4 and iPad and are provided as fully editable and scalable Photoshop PSD files.

Designmoo
Designmoo is a community for discovering and sharing free PSDs, vectors, textures, patterns and fonts.

Premum Pixels
Premium Pixels is Orman Clark’s remarkable resource with free design resources and tutorials.

Last Click

PSDcleanup
It’s very difficult for coders to work with someone else’s PSD files if they’re not organized correctly. This online service helps fixes that problem by organizing PSDs and polishing them for you. We aren’t advertising here, but it’s quite sad that services like this one exist at all.

Method & Craft
Method & Craft features the stories behind the work and the techniques professionals have developed throughout their professional career. A very useful resource for designers permanently looking to improve their skills.

Related Articles

Mastering Photoshop: Unknown Tricks and Time-Savers
Keyboard shortcuts can be very useful and are truly essential to our busy, daily workflow. Occasionally, we stumble upon a shortcut we wish we’d learned years ago. Please note that the shortcuts listed in this article are for Photoshop CS4 on OS X and can also be converted apposite to Windows.

Pixel Perfection When Rotating, Pasting And Nudging In Photoshop
When creating Web and app interfaces, most designers slave over every single pixel, making sure it’s got exactly the right color, texture and position. If you’re not careful, though, some common functions like moving, rotating and pasting can undo your hard work, resulting in a blurry mess. But with some small changes to your workflow, you should be able to maintain the highest-quality artwork from the start to the end of the project.

Compositing in Adobe Photoshop: Time-Saving Tips
Daniel Durrans shares his own time-saving tips for compositing in Photoshop with us and emphasizes on adapting a certain technique for each one of us to make our work more efficient and improve our workflow.

Useful Photoshop Tips And Tricks For Photo Retouching
In case you’ve been searching for some insight on the most useful techniques tips and tricks when working in Photoshop, then this is the article you shouldn’t miss out on. Dirk Metzmacher shares with us even more tips and tricks to improve your workflow.

Useful Adobe Photoshop Techniques, Tutorials and Tools
Our recent overview of useful Adobe Photoshop techniques and tutorials that we have found and collected over the last months.

(vf) (ilj)

© Smashing Editorial Team for Smashing Magazine, 2011.

Today we are glad to present one of such posts: an overview of handy new resources for web designers; most of them were released recently, but some of them are a bit older. Still, they were included to supplement the overview, making the post more comprehensive and complete. Please feel free to discuss the featured resources in the comments to this post. And, of course, thank you guys for creating and maintaining all these useful resources. Your efforts are deeply appreciated.

Useful Resources for Web Designers

Fonts in Use
This site presents a catalogue for real-world typography samples and innovations in branding, advertising, signage and publishing. The regularly updated collection of trends and case studies is commented on by typography experts and gurus from around the world. The sharp, interesting comments and discussions will keep you engaged, all backed up by real examples.

Note and Point: Keynote and PowerPoint Gallery
Note and Point highlights the most beautiful Keynote, PDF and PowerPoint work on the Web, which happens to be mostly Web design-related, although various topics are covered. No doubt these presentations — which really do look that much better — might surprise you by the attention given to color, illustrations and typography.

Free High-Quality HTML Email Templates
The page presents 38 free HTML email templates (including PSD and HTML files), created by talented professional designers. Every template has been tested in more that 20 popular email clients, including Outlook 2010, Gmail, Lotus Notes, Apple Mail and the iPhone. All of the Photoshop documents are layered and ready to be tweaked. You can download all of the templates for free (320 MB) and use them for any private or commercial project. In case you use Campaign Monitor to send out newsletters, you’ll also get Campaign Monitor’s templates as an extra goodie. Mailchimp users can choose from the professional templates for Mailchimp.

The Grammar Cheat Sheet
Never mix up your dashes again, learn how to set quotations marks and remind yourself to keep paragraphs short and topical. Overall, this article is a nice little overview of suggestions that would help you improve the quailty of your copy. For a closer examination of what else might go wrong, check out “The Trouble With EM ‘n EN (and Other Shady Characters)” by Peter K Sheerin.

FPO: For Print Only
For Print Only is a blog that is dedicated to everything related to print design. FPO celebrates that print is not dead by showcasing the most compelling printed projects. Print is alive and well as witnessed by this well organized and inspirational resource.

Graphic Atlas: History of Printing
The site is a virtual study collection that showcases printing processes from early woodcuts to modern digital print. The print-identification tool guides you through a number of explorations that replicate the experience of identifying prints using common tools. Among other things, you’ll learn about such printing techniques as relief, letterpress, gravure, silver-dye bleach, dye sublimation and direct thermal. The object explorer allows you to view two images side by side to compare traits across processes. Characteristics such as size, format, color, texture, sheen and layer structure are explained as well.

Smarthistory
Smarthistory.org is a free and open, not-for-profit art history textbook. The website covers a wide variety of the artwork usually found in art history classes, ranging from ancient cultures to post-colonialism. In addition to the audio and video, Smarthistory contains articles and images organized by style and chronology. As a bonus, the user interface itself is worth looking at. The appealing design and intuitive navigation (which allows you to browse by era, style, artist and theme) makes this experience not only educational but enjoyable. A comprehensive overview of the seeds that helped sew the graphic design field.

The Photoshop Etiquette Manifesto for Web Designers
This site lays out a number of guidelines for creating Photoshop files and workflows that are conducive to productivity and team collaboration. By following these guidelines, you make it easier for others to work with your files, and more likely that your project will go smoothly. Some of the things included are common-sense (proofread before exporting), but others aren’t necessarily something you’d think of if you’re not used to collaborating or working on big projects (use folders, keep logos as vector smart objects). It also includes helpful illustrations for each example, so there’s no confusion.

Desks Near Me
This site features places all over the world that designers and developers might like to work in, be they offices or cafés. The website provides detailed information, including hours of operation and reviews. Some places charge a small fee for use, and many throw in a few goodies like food, drink and access to equipment.

Dark Design Patterns
Dark Design Patterns aims to expose these black-hat designs whose sole aim is to misdirect and deceive visitors. Anti-usability design patterns that are currently identified on the website include the “Roach Motel,” “Bait and Switch,” “Privacy Zuckering” and “Forced Information Disclosure,” among others. Examples of each are included, and visitors can add their own in the comments on each page. It’s a great website to show clients when they ask you to implement a questionable “feature” on their website.

The Anatomy of a Perfect Landing Page
Formstack explains how design translates to users and ten key landing page features that draw them in. A useful breakdown of elements to include in your designs and things to keep in mind during your design-work.

100 Principles for Designing Logos and Building Brands
Inspiration can come from anywhere, but sometimes the simpler the better. From Brand Identity Essentials, here are some principals for designing logos and building brands. These cover example shapes, consistency, voice, meaning and flexibility.

Design Is History
A wonderful reference site for all designers and provides brief overviews of a wide range of topics — for us, designers, it is improtant to understand where design originates from.

NounProject
NounProject provides a huge collection of highly recognizable symbols, available for free download and use. The designers are committed to quality in what they do, and so the icons are indeed designed very well.

Ethics for Web Designers
Robot Regime is dedicated to ethics and Web design, and it discusses what our ethical obligations are — to ourselves, our colleagues and our clients. The site already features some nice pieces, including posts about fair pricing, misrepresenting yourself as a designer and giving clients what they want.

Politely Decline Speculative Work
“I won’t do free design work to win your business — here’s why” is a Web page that offers a stock letter you can send to clients explaining why spec work is bad for everyone involved. It’s concise and professional, and it presents clear arguments against spec work, with links to additional information. Plus, you can personalize the letter by adding the recipient’s name to the end of the URL.

Type Tips
A nice short overview of quick useful tips on all things related to Web typography by Harry Roberts from CSS Wizardry.

OnTwik
The website brings together lectures, screencasts and conferences from around the world. Both expert and novice developers and designers should be able to find topics of interest, whether it’s CSS and HTML5 or start-ups and creativity. Ontwik is free, and anyone can suggest content for the website; you can even submit your own lectures.

Design Moo
“Join together and share valuable free Web design resources.” This could be the slogan of this design community, created and curated by front-end developer Chris Wallace. The project is a network of designers and a high-quality collection of free design resources: fonts, icons, illustrations, patterns, textures and Web layouts. All goodies are tagged for easy navigation, and you can follow new releases on Twitter. You might want to check Boxtuffs and Premium Pixels as well, another websites featuring free high-quality resources.

Design Kindle: Free High-Quality Design Files
This site offers a ton of free high-quality design files that you might actually want to use, all without restrictions on personal or commercial use. Everything from design elements to images to full themes is included. Design Kindle doesn’t have a big library of files just yet, but more are sure to be added soon.

365psd: A Free PSD Every Day
Every day, this site offers a free PSD file for you to download. These files are almost all design elements that you can use in Web and application designs, including buttons, progress bars, navigation elements and more, and they are well designed. Currently, there are more than 300 days worth of freebies, all tagged, browsable and searchable.

Guidelines for Mobile Web App Design
This article presents a comprehensive list of links to official user interface and user experience guidelines from various manufacturers. The guidelines include samples, tips and descriptions of common weaknesses for mobile platforms such as iPhone, iPad, Android, BlackBerry, Symbian, webOS and Mee Go. Many of the guidelines focus on native application development, but they can be applied to design of mobile applications in general, too.

List of Freely Available Programming Books
Here is a list of programming books on programming languages or about computers in general with open-source licenses and others. If you’ve been searching for some freely available programming books on the Internet, this list will surely give you some good tips.

Secure Password Generator
The tool lets you enter parameters, including the length of the password, whether to include uppercase and/or lowercase letters or numbers or punctuation and whether to eliminate characters that resemble each other (such as i and l, 1 and I, and o and 0). Then, just select the number of passwords to generate, and it returns a list. It even includes phonetics for each password to make it easier to read out loud (in case you’re giving a password to someone over the phone, for example).

Keyonary
This tool is a nice little application for finding shortcuts in Mac OS X, Photoshop and so on. Currently, more than 300 Photoshop shortcuts are available. Simply type the name of application in the search box, and it spits out a long shortcut list.

Let’s Swap
A place where artists and designers can swap art for free. The site is an experiment: if you are an artist or designer, you probably have something hanging around and you’ll be willing to swap it for something else. The site gives you the opportunity to do exactly that; just put out an open invitation and see what happens. Very interesting idea.

Starting with Git: Cheat Sheet
After freshening up her git skills, Loma Jane Mitchell shares her ‘cheat sheet’ — the commands that she uses on a day-to-day basis when working with git. Also note that GUI tools and IDE plugins are available for Git, so it is worth taking a look at what is available for the development environment you use.

Rails 3 Cheat Sheets
The site provides Rails 3 Cheat Sheets for Activemodel, Actionmailer and Actioncontroller, XSS protection and UJS, Activerelation, Bundler and Routing API.

Bounce Rate Demystified
If you are doing business on the web and have Google Analytics set up for your website, it’s very likely that you know the bounce rate for your website. But, do you know anything about how it’s calculated, what your industry’s average bounce rate is or even what factors affect your bounce rate? Inspired by common questions, KissMetrics created this infographic to give you answers and some tips to help you improve your bounce rate.

InspireUX
User Experience quotes and articles to inspire and connect the UX community.

Quotes on Design
A growing collection of useful quotes by designers for designers and developers.

IA TV
Information Architecture Television features a collection of videos from around the Web that all focus on information architecture. Hundreds of videos dating back to 2008 offer a great wealth of information on everything from design thinking to usability.

The Bazaar
On this site you can create galleries, upload your artworks and specify your products which you would like to sell. Once the buyer has checked out and has made the payment, your artwork is printed, wrapped and delivered.

A Collection of Materials Related to Interaction Design
This IxD library provides you with an ultimate collection of posts, articles, PDFs as well as videos related to interaction design for you to read and gain more knowledge and inspiration.

Pinterest — Catalog the Things You Love
Pinterest is a social catalog service. Think of it as a virtual pinboard — a place where you can post collections of things you love, and “follow” collections created by people with great taste.

WordPress Snippets
WP-Snippets can come in handy when you’re designing a WordPress theme. Rather than start from scratch when building some functionality or another, why not grab a snippet of code that has already been tested? The website includes many useful snippets, from highlighting author comments to listing random posts to filtering the loop. Make sure to read the comments for each snippet because they could contain helpful information on whether the code works in certain WordPress versions.

CSS Terms and Definitions
This article discusses the consistency in the use of terms with reagrds to CSS.

CSS Vocabulary
“I realized quite late that to say something meaningful about CSS, I would have to know exactly what the terms used means. Often, I have asked for help in forums, and have got stuck wondering how exactly to describe my problem. So I thought it would be a good idea to describe all the common terms of CSS.” A nice overview of common CSS terms and definitions and a good addition to the article “CSS Terms and Definitions” described above..

Bagcheck
BagCheck lets you share your personal collections and also lets you browse through other ‘bags’ to find out common hobbies or activities that helps you connect with people and their interests.

ManyBooks: Repository of Free E-Books
This site offers a huge collection of public domain e-books, as well as other newer books that have been released in the public domain or under Creative Commons licenses, in a variety of formats. You can download classics such as Pride and Prejudice, as well as newer books such as The Gospel of the Knife, in formats such as ePub, Mobi, PDB and even PDF and plain text. Books are also browsable by genre, author and title. And of course, there is a search function.

Last Click

Should I Work for Free?
Who’s ready to stop working for free? Hopefully you are! If you have any doubts, consult this handy chart below. Start in the middle and work your way to your answer.

Email Etiquette for the Super-Busy
In a recent blog post, venture capitalist Fred Wilson talked about his ongoing struggle with email management and the various solutions he’s tried, concluding: “Every time I make a productivity gain, the volume eventually overwhelms me.” It’s a familiar problem. We’re all extremely busy, and we all get too much email. So what to do?

The Future of Advertising
An article on advertising; stating that advertising is on the cusp of its first creative revolution since the 1960s brings us to a new prespective. This involves the ad industry that just might get left behind. Click here to read and find out more. Very interesting read.

Why Your Form Buttons Should Never Say ‘Submit’
When you see a ‘Submit’-button on a form, what comes to your mind? One could easily reason that clicking the button submits the user’s information into the system for processing. A ‘Submit’-button describes what the system does well, but it doesn’t describe what the user does at all. The article suggests to stop using the wording ‘Submit’ on buttons and provide more meaningful, task-specific names instead.

© Smashing Editorial Team for Smashing Magazine, 2011.