Designing and developing can be time-consuming, especially when the project involves a new challenge, putting the team or freelancer into unknown territory. Moreover, time is a key factor in productivity. Working efficiently enables us to deliver better value at a competitive price.

However, some steps can be repeated for every project. These are steps we know and should make as quick as possible in order to have more freedom to experiment with new solutions.

This article presents a collection of tools, tips and tricks that will make your standard workflow as fast and practical as possible, so that you have more time for the exciting parts of the project.

Tips And Tricks

Useful Aligning and Spacing
Kris Jolls creates squares for the various spaces he has between elements. This cuts down time and makes sure everything is aligned and spaced properly.

“The Ultimate Photoshop Web Design Workspace”
Jacob Cass shares his set-up for the ultimate Web design workspace in Photoshop.

CODING WORKFLOW
“Perfect Workflow in Sublime Text 2”
This is a must for all Sublime users. Ilya Grigorik has put together a two-hour tour de force to make you a Sublime ninja!

“Development Workflow for 2013”
Learn what a modern development workflow looks like, from editors and plugins to authoring abstractions, testing and DVCS integration

“Vertical Editing” (with TextMate)
Learn how to vertically edit in general and with TextMate in particular. It pairs best practices with vendor-specific redundant properties

“Prevent background-color Bleed on Touch Screens”
Add outline: 1px solid #fff to your code to stop background-color bleeding on touchscreens.

“Quick Tip: Rounded Corners Done Right”
Improperly nested corners are a detail that can ruin a brilliant design. Learn how to do it the right way.

“Out-denting Properties for Debugging CSS”
Martin Sutherland usually ends up adding a ton of properties to figure out how things fit together. Here is a little trick to remove the properties before a project goes live.

“Favicons Next to External Links”
A little trick to display an external favicon and next to the corresponding link, using simple lightweight jQuery.

“Dev Tools Tips and Tricks”
These slides include tips and tricks for performance. You will be surprised what Chrome DevTools can do. (Use the arrow keys to navigate the slides.)

“Sublime Text Workflow That Beats Coda and Espresso”
Andrey Tarantsov talks about jumping into Sublime Text 2 and and setting up a workflow that beats traditional tools such as Coda and Espresso.

“Speed Up CSS Prototyping”
This is a simple trick to overlay a grid or a mock-up over a page that you’re styling. It also allows you to edit content directly in the browser to see how the layout responds to various lines of text.

“Git: Twelve Curated Tips and Workflows From the Trenches”
12 simple tips for using Git, including: make “git diff” wrap long lines, set a global proxy, and clone a specific branch.

“The JavaScript “Ah ha!” Moment”
This article collects comments of people having their “Ah ha!” moment with JavaScript — that is, the moment they learned something that made JavaScript click for them.

Readmore