Powerful Workflow Tips, Tools And Tricks For Web Designers

Advertisement

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 tools1, tips and tricks2 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.

Ready? Here we go!

Tips And Tricks

Design Workflow

My Secret for Color Schemes3
Erica Schoonmaker shares her trick for matching up colors and creating a nice color scheme. Read more…4

colors5

Useful Aligning and Spacing6
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. Read more…7

Creating squares for various spacings between elements8

The Ultimate Photoshop Web Design Workspace9
Jacob Cass shares his set-up for the ultimate Web design workspace in Photoshop. Read more…10

The Ultimate Photoshop Web Design Workspace11

Coding Workflow

Perfect Workflow in Sublime Text 212
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! Read more…13

Perfect workflow in Sublime Text 214

Development Workflow for 201315
Learn what a modern development workflow looks like, from editors and plugins to authoring abstractions, testing and DVCS integration. Read more…16

Development workflow for 201317

Vertical Editing18” (with TextMate)
Learn how to vertically edit in general and with TextMate in particular. It pairs best practices with vendor-specific redundant properties. Read more…19

Vertical editing (with textmate)20

Prevent background-color Bleed on Touch Screens21
Add outline: 1px solid #fff to your code to stop background-color bleeding on touchscreens. Read more…22

Prevent background-color bleed on touch screens23

Quick Tip: Rounded Corners Done Right24
Improperly nested corners are a detail that can ruin a brilliant design. Learn how to do it the right way. Read more…25

Quick Tip: Rounded Corners Done Right | Webdesigntuts 26

The //* /*/ //*/ Comment Toggle Trick27
This is a little trick to make development faster. Not suitable for production code. Read more…28

The //* /*/ //*/ comment toggle trick29

Outdenting Properties for Debugging CSS30
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. Read more…31

Outdenting properties for debug CSS32

Favicons Next to External Links33
A little trick to display an external favicon and next to the corresponding link, using simple lightweight jQuery. Read more…34

Favicons Next To External Links35

DevTools Tips and Tricks36
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.) Read more…37

DevTools Tips and Tricks38

Sublime Text Workflow That Beats Coda and Espresso39
Andrey Tarantsov talks about jumping into Sublime Text 2 and and setting up a workflow that beats traditional tools such as Coda and Espresso. Watch the video or read more…40

Sublime Text Workflow That Beats Coda and Espresso41

Speed Up CSS Prototyping42
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. Read more…43

Speed Up CSS Prototyping44

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

Git: Twelve Curated Tips And Workflows From the Trenches47

The JavaScript “Ah ha!” Moment48
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. Read more…49

The JavaScript Ah-ha! Moment50

Here are more articles and thoughts to help you improve your coding workflow:

OS Productivity

Alfred workflow tips and tricks63
David Ferguson shares tips and tricks for working with Alfred. Read more…64

Alfred Workflow Tips & Tricks65

SSH: More Than Secure Shell66
This article covers less common SSH use cases, such as using password-less, key-based login, setting up local per-host configurations, exporting a local service through a firewall, accessing a remote service through a firewall and more. Read more…67

SSH: More Than Secure Shell68

Lifehacks

Tools

Collaboration

TimeZoneSlider87
Time-syncing around the globe can be tricky. This tool lets you add the names and locations of people involved to find the best meeting time. Send the synced time to others and don’t risk hard feelings about time-conversion mistakes. Read more…88

Timezoneslider: time syncing app89

World Time Buddy90
World Time Buddy is a cross between a time-zone converter, a world clock converter and an online meeting scheduler. It an online productivity tools for those who often finding themselves traveling, in flight, in online meetings or just calling friends and family abroad. Read more…91

WorldTimeBuddy: A sync tool for scheduling meetings 92

Doodle93
Doodle can’t be recommended enough. It is a easy and uncomplicated tool for finding and scheduling a date that suits everyone — with only one email. Read more…94

Doodle: easy scheduling95

How to Solve the ‘Sharing Huge Design Files Amongst Teams’ Problem96
This article is about how BitTorrent can be used to sync large files between team members. Key problems to overcome were how to share files between designers and between designers and developers and how to resolve points of failure. Read more…97

How to solve the ‘sharing huge design files amongst teams’ problem98

Screenhero99
Screenhero is another tool for collaborative screen-sharing. The great things is that each user gets their own mouse, and both users are always in control. Read more…100

Screenhero101

Productivity

SoFresh: Automatically Refreshing Your Browser102
SoFresh is a CSS refresh bookmarklet. It allows you to select which files to refresh. The files are refreshed every time you save them, so that you don’t need to refresh your browser. Read more…103

SoFresh!: Automatically refreshing your browser104

Divvy105
Divvy is a new way to manage your workspace. It enables you to quickly and efficiently “divvy up” your screen into precise portions. Read more…106

Divvy107

Shortcat: Keyboard Productivity App for Mac OS X108
It takes an average of three seconds to move your hand from the keyboard to mouse, click once, and then return to the keyboard. Shortcat is a keyboard tool for Mac OS X that allows you to keep your hands on the keyboard, saving time and energy. Read more…109

Shortcat: Keyboard productivity app for Mac OS X110

The Thinkerbot111
Logic is the enemy of creativity. By grabbing a steady stream of pure Internet randomness, this app injects non-linear inspiration into any brainstorming session. Read more…112

The Thinkerbot: a brainstorming app113

SizeUp114
SizeUp allows you to quickly resize and position windows with keyboard shortcuts or a handy menu-bar icon. Read more…115

SizeUp116

DragonDrop117
DragonDrop lets you set down what you’re dragging, leaving you free to find the destination without having to worry about holding down the mouse button. Read more…118

DragonDrop119

  • Slate120
    Slate is a window-management application similar to Divvy and SizeUp (covered below), but free and less limited. It attempts to overcome their limitations by simply being extremely configurable. Read more…121

Making Use of the Cloud

SortMyBox122
SortMyBox works like email filters, but for your Dropbox files. It magically moves files to folders based on your rules. Read more…123

Organize your Dropbox with SortMyBox124

Servus: For Mac and Dropbox125
Give your files some meaning and a nice layout when your share them with others. Servus for Mac easily turns any file on your computer into a branded download page, hosted on Dropbox. Read more…126

Create a branded download page with Dropbox127

Send to Dropbox128
Ever wish you could email files to your Dropbox? With this tool, you can. All you have to do is log into Dropbox, get your unique email address, and start sending files. Read more…129

Send to Dropbox130

Versioning Your Graphics Files With Dropbox131
This quick tutorial explains how you can version graphic files via Dropbox. Read more…132

Versioning Your Graphics Files With Dropbox133

DropTunes134
Create your own music-streaming service with this little app. DropTunes lets you stream music from Dropbox. Add tracks to your playlist, and browse while song is playing. Read more…135

DropTunes: Stream music from the Dropbox136

sideCLOUDload137
This tool lets you send files from a URL directly to the cloud (currently, Dropbox and email) without the need to download them. This is perfect to save on bandwidth when you discover great stuff with your phone on the go. Read more…138

sideCLOUDload: Send files from an url to the cloud139

Design, Color and Image Tools

Hex Color Tool144
Hex is a color tool that automatically displays any hex color in darker and lighter shades. Read more…145

Hex Color Tool146

GuideGuide147
GuideGuide make dealing with grids in Photoshop easy. Pixel-accurate columns, rows, midpoints and baselines can be created based on a document or selection with the click of a button. Guide sets can be saved for repeated use. Read more…148

GuideGuide149

ColorBlendy150
Ever fire up Photoshop just to multiply a couple of colors? ColorBlendy can do this easily in your browser. Read more…151

ColorBlendy - Blend colors with different modes like multiply, overlay, dodge.152

CMYK to Pantone153
Input a CMYK color code, and this tool will work out which Pantone colors are close. Read more…154

CMYK to Pantone155

ImageMagick156
ImageMagick is a command-line program that can do many operations on images quickly and with high quality. It’s especially useful for resizing and sharpening images, generating thumbnails, etc. Read more…157

ImageMagick158

Development and Testing

Reconciling SVG and Icon Fonts159
This is the first in a series of three articles on SVG. Romain over at Hull explains how to set up a powerful design workflow, going from Sketch all the way to icon fonts, all automated. Part two shows how to dissect the fonts and go crazy with their components. Part three shows how to do the same with sprites and Photoshop. Read more…160

Reconciling SVG and Icon Fonts161

Emmet Documentation162
Emmet (previously known as Zen Coding) is a Web developer’s toolkit that could greatly improve your HTML and CSS workflow. Read more…163

Emmet Documentation164

Alias165
Alias enables you to manage all of your aliases online and to browse a list of cool aliases submitted by others. From there, you can run a single command to copy your aliases back into your profile should you require them. Read more…166

Alias: Manage your aliases in the cloud167

Anvil168
Anvil is a menu-bar application for managing local websites. It takes your website and serves it up locally with a .dev URL, without requiring you to change system-level configuration files or hack around in the Terminal. Read more…169

Anvil for Mac - Run your sites locally170

DOM Monster171
DOM Monster is a cross-platform, cross-browser bookmarklet that will analyze the DOM and other features of the page you’re on, and give you its bill of health. Read more…172

DOM Monster Bookmarklet173

prettyPrint.js174
prettyPrint.js is an in-browser JavaScript variable dumper, similar in functionality to ColdFusion’s cfdump tag. Read more…175

padolsey/prettyPrint.js · GitHub176

Resemble.js177
Resemble.js analyzes and compares images with HTML5 canvas and JavaScript. It can be used for any image analysis and comparison need you might have in the browser. Read more…178

Resemble.js : Image analysis179

Review180
Updating large and possibly responsively designed websites can be a hassle. You never know whether a change will break anything. This tool gets screenshots of all of your running websites in different resolutions, so that you can spot any issues. Read more…181

Review: Screenshots in different resolutions182

BrowserStack183
BrowserStack gives you instant access to all desktop and mobile browsers, which is great for testing your designs, especially if you cannot afford to buy many devices. Read more…184

BrowserStack: Live, Web-Based Brower Testing185

Zippopotamus186
Zippopotamus makes working with postal codes and ZIP codes easy. It delivers a free API in JSON response format, supports over 60 countries, is perfect for autocompletion and open for crowdsourcing and contribution. Read more…187

Zippopotamus- Zip Code Galore188

Here are more development and testing tools you can check out:

Little Helpers

Style Manual207
Is English not really your thing, or not your first language? This reference document by Andy Taylor will help you find the right answer to style-related issues. Read more…208

stylemanual209

13 Bills210
This is a great tool for complicated bill-splitting. It’s especially handy when you have to split a bill according to the amount of time people have been around. Read more…211

The easy peasy bill splitter212

The Universal Packing List213
Feed in the details of your next trip (timeframe, climate, gender, accommodation, kids, type of trip, activities, transportation and bag size), and this dynamic tool will work out what you should pack. Read more…214

The Universal Packing List215

Long Press216
This tool simulates the alternate character choice that you have on Android and iOS keyboards. Read more…217

Long Press218

Sejda219
Sejda is a great online tool for manipulating PDF files when your preferred software is not at hand. It has many advanced features, including merging, splitting and combining. Read more…220

Sejda: Edit PDF files online (for free)221

CreateMyInvoice222
If you need a quick and simple invoice, this tool turns your raw data into a presentable invoice. The tool offers five free invoices per month, which is great if you only need to use it every now and then. Read more…223

CreateMyInvoice - invoice from your inbox224

StatusPage.io225
StatusPage.io is tool that becomes active when your service experiences downtime of any kind. Activity incidents are prominently displayed at the top of your page for visitors to see right when they arrive.Read more…226

StatusPage.io: Hosted Status Pages for Your Company227

Beathound228
Something for music lovers. Feed your iTunes library XML file and get a weekly update of new releases from your favorite artists. Read more…229

Beathound: iTunes new releases for your library230

Syncios231
This tools converts your favorite music or ringtones to MP3, M4A, M4R or CAF format, and converts video to MP4, M4V or MOV format for enjoyment on your iPhone, iPod or iPad. It works both ways. It also includes other handy features that are worth checking out. Read more…232

Syncios: Free iPod Transfer, Free iPod to PC Transfer, Transfer App Music Video Photo Ebook from iPod/iPhone/iPad to PC233

Skrivr234
This is for minimalists who don’t want to deal with cluttered admin interface that makes publishing complicated. Skrivr lets you write, save and publish your writing. Read more…235

Skrivr: writing and publishing process made simpler236

List of All Countries in All Languages and All Data Formats237
This is a great resource that lists all countries in all languages and in all data formats. Read more…238

List of All Countries in All Languages and All Data Formats239

  • TokenPhrase240
    TokenPhrase is a simple gem that generates unique phrases to use in your app as tokens. Read more…241
  • Linkrr242
    Linkrr is a small tool that transforms multiple unclickable links into clickable ones. Once you’ve gathered all of your links, Linkrr can open them with only one click. In some cases, you’ll have to disable your popup blocker. Read more…243
  • LinkChecker244
    This highly rated and popular Firefox add-on tests the validity of links on any Web page. Read more…245

Useful Chrome Extensions

  • Tab Wrangler246
    Tab Wrangler automatically closes inactive tabs but makes it easy to get them back, too. It works similar to AutoClose Tabs for Firefox. Read more…259247
  • Responsive Inspector248
    Responsive Inspector is a simple Chrome extension that allows you to view the media queries of websites you visit. It is very useful when developing responsive layouts because it visually shows what resolutions are defined in style sheets. Read more…249
  • Shortcut Manager250
    With this extension, change the browser’s default shortcut keys, and assign any bookmarklets or JavaScript actions to your hotkeys. It works like Keyconfig on Firefox. Read more…251
  • Auto Login252
    Your browser already fills in your user name and password, so why not have it click “Submit,” too? This tool automatically logs you into websites that Chrome has saved a password for. Read more…253
  • Tincr254
    Tincr lets you edit and save files from Chrome Developer tools. It supports live reloading and saves changes to the right file automatically. Works for Mac, Windows and Linux. Read more…255
  • OneTab256
    OneTab is perfect for anyone who tends to open too many tabs in Chrome. It saves up to 95% of memory and minimizes clutter by reducing all tabs into one. Read more…257

Last Click

Browser Pong258
Here is an attempt to expand how you think of the browser. Browser Pong lives between multiple open windows. During play, the space between windows is transformed into a playing field — the abstracted tennis court of Pong. Browser Pong really is thinking outside the box. Read more…259247

Browser Pong260

Talks to Help You Become a Better Front-End Engineer in 2013261
Addy Osmani has curated talks that he has found helpful this year. The advice shared in them will equip you with the knowledge to become a better front-end engineer. Read more…262

Talks To Help You Become A Better Front-End Engineer In 2013 | Smashing Magazine263

The Setup264
This collection of interviews asks people from all walks of life what they use to get the job done. Read more…265

The Setup266

Learn Something Every Day267
UK-based design studio Young has published a book of 265 facts to help you learn something new every day. Additionally, you can purchase some great fact shirts. There is also a free iPhone app. Read more…268

Learn Something Every Day269

  • eBooks Compiled From Stack Overflow270
    These books contain the top questions from a selection of the top tags on Stack Overflow. The top questions include those with a score of 10 or greater. Read more…271
  • Jourrrnal272
    Jourrrnal is a blog that publishes interviews about the workflows of some of the most active and talented Dribbble members. Read more…273
  • How I Work274
    This page collects little tips on how other people work. Rather than reading blog posts on why one way is better than another, read why one person loves a certain way of working, and judge for yourself whether it’s worth adopting. Read more…275
  • My Radical Productivity Experiment276
    Michael Schechter has experimented with different approaches to find what works for his own productivity. If you haven’t found a decent workflow for yourself, figure one out. Read more…277

Further Reading


There you have it! A collection of great tools, tips and tricks that members of our community have found very useful. Hopefully, some of them will speed up your workflow or solve one of your confounding issues. Maybe they will even inspire you to share some of your hidden secrets of productivity.

If your favorite tool, tip or trick is not in this list, make sure you share it with us in the comments section below. Have any of the above changed you life? If so, let us know more!

(al, il, ea)

Footnotes

  1. 1 #tools
  2. 2 #tipsandtricks
  3. 3 http://dribbble.com/shots/166246-My-Secret-for-Color-Schemes
  4. 4 http://dribbble.com/shots/166246-My-Secret-for-Color-Schemes
  5. 5 http://dribbble.com/shots/166246-My-Secret-for-Color-Schemes
  6. 6 http://instagram.com/p/baskurorL6/
  7. 7 http://instagram.com/p/baskurorL6/
  8. 8 http://instagram.com/p/baskurorL6/
  9. 9 http://justcreative.com/2012/04/17/web-design-workspace-photoshop/
  10. 10 http://justcreative.com/2012/04/17/web-design-workspace-photoshop/
  11. 11 http://justcreative.com/2012/04/17/web-design-workspace-photoshop/
  12. 12 https://plus.google.com/+IlyaGrigorik/posts/Ub7xpVssBXw
  13. 13 https://plus.google.com/+IlyaGrigorik/posts/Ub7xpVssBXw
  14. 14 https://plus.google.com/+IlyaGrigorik/posts/Ub7xpVssBXw
  15. 15 http://www.youtube.com/watch?v=f7AU2Ozu8eo
  16. 16 http://www.youtube.com/watch?v=f7AU2Ozu8eo
  17. 17 http://www.youtube.com/watch?v=f7AU2Ozu8eo
  18. 18 http://dropshado.ws/post/10111941622/vertical-editing
  19. 19 http://dropshado.ws/post/10111941622/vertical-editing
  20. 20 http://dropshado.ws/post/10111941622/vertical-editing
  21. 21 http://bricss.net/post/23292393396/prevent-background-color-bleed-on-touch-screens
  22. 22 http://bricss.net/post/23292393396/prevent-background-color-bleed-on-touch-screens
  23. 23 http://bricss.net/post/23292393396/prevent-background-color-bleed-on-touch-screens
  24. 24 http://webdesign.tutsplus.com/tutorials/visuals/quick-tip-rounded-corners-done-right/
  25. 25 http://webdesign.tutsplus.com/tutorials/visuals/quick-tip-rounded-corners-done-right/
  26. 26 http://webdesign.tutsplus.com/tutorials/visuals/quick-tip-rounded-corners-done-right/
  27. 27 https://coderwall.com/p/zbc2zw
  28. 28 https://coderwall.com/p/zbc2zw
  29. 29 https://coderwall.com/p/zbc2zw
  30. 30 http://sunpig.com/martin/archives/2012/03/25/outdenting-properties-for-debug-css.html
  31. 31 http://sunpig.com/martin/archives/2012/03/25/outdenting-properties-for-debug-css.html
  32. 32 http://sunpig.com/martin/archives/2012/03/25/outdenting-properties-for-debug-css.html
  33. 33 http://css-tricks.com/favicons-next-to-external-links/
  34. 34 http://css-tricks.com/favicons-next-to-external-links/
  35. 35 http://css-tricks.com/favicons-next-to-external-links/
  36. 36 http://www.igvita.com/slides/2012/devtools-tips-and-tricks/
  37. 37 http://www.igvita.com/slides/2012/devtools-tips-and-tricks/
  38. 38 http://www.igvita.com/slides/2012/devtools-tips-and-tricks/
  39. 39 http://tarantsov.com/blog/2012/02/sublime-text-workflow-that-beats-coda-and-espresso/
  40. 40 http://tarantsov.com/blog/2012/02/sublime-text-workflow-that-beats-coda-and-espresso/
  41. 41 http://tarantsov.com/blog/2012/02/sublime-text-workflow-that-beats-coda-and-espresso/
  42. 42 http://www.css-101.org/articles/trick-for-rapid-prototyping/
  43. 43 http://www.css-101.org/articles/trick-for-rapid-prototyping/
  44. 44 http://www.css-101.org/articles/trick-for-rapid-prototyping/
  45. 45 http://durdn.com/blog/2012/12/05/git-12-curated-git-tips-and-workflows/
  46. 46 http://durdn.com/blog/2012/12/05/git-12-curated-git-tips-and-workflows/
  47. 47 http://durdn.com/blog/2012/12/05/git-12-curated-git-tips-and-workflows/
  48. 48 http://css-tricks.com/the-javascript-ah-ha-moment/
  49. 49 http://css-tricks.com/the-javascript-ah-ha-moment/
  50. 50 http://css-tricks.com/the-javascript-ah-ha-moment/
  51. 51 http://bassam.co//2012/09/21/Sublime-Text-My-workflow-and-useful-resources/
  52. 52 http://bassam.co//2012/09/21/Sublime-Text-My-workflow-and-useful-resources/
  53. 53 http://daverupert.com/2012/04/uncle-daves-ol-padded-box/
  54. 54 http://daverupert.com/2012/04/uncle-daves-ol-padded-box/
  55. 55 http://jeffcroft.com/blog/2012/feb/23/many-ways-to-use-css-preprocessors/
  56. 56 http://jeffcroft.com/blog/2012/feb/23/many-ways-to-use-css-preprocessors/
  57. 57 http://keegan.st/2012/06/03/find-in-files-with-css-selectors/
  58. 58 http://keegan.st/2012/06/03/find-in-files-with-css-selectors/
  59. 59 http://remysharp.com/2012/12/21/my-workflow-never-having-to-leave-devtools/
  60. 60 http://remysharp.com/2012/12/21/my-workflow-never-having-to-leave-devtools/
  61. 61 http://dev.hubspot.com/blog/bulletproof-demos
  62. 62 http://dev.hubspot.com/blog/bulletproof-demos
  63. 63 http://dferg.us/
  64. 64 http://dferg.us/
  65. 65 http://dferg.us/
  66. 66 http://matt.might.net/articles/ssh-hacks/
  67. 67 http://matt.might.net/articles/ssh-hacks/
  68. 68 http://matt.might.net/articles/ssh-hacks/
  69. 69 http://apple.stackexchange.com/questions/400/please-share-your-hidden-os-x-features-or-tips-and-tricks
  70. 70 http://apple.stackexchange.com/questions/400/please-share-your-hidden-os-x-features-or-tips-and-tricks
  71. 71 https://github.com/isometry/alfredworkflows
  72. 72 https://github.com/isometry/alfredworkflows
  73. 73 http://mmb.pcb.ub.es/~carlesfe/unix/tricks.txt
  74. 74 http://mmb.pcb.ub.es/~carlesfe/unix/tricks.txt
  75. 75 https://gist.github.com/vasilisvg/2415901
  76. 76 https://gist.github.com/vasilisvg/2415901
  77. 77 http://hardware.slashdot.org/story/11/05/01/1625208/Ask-Slashdot-How-Do-You-File-Paper-Documents-At-Home
  78. 78 http://hardware.slashdot.org/story/11/05/01/1625208/Ask-Slashdot-How-Do-You-File-Paper-Documents-At-Home
  79. 79 http://www.labnol.org/internet/print-from-mobile-phones/
  80. 80 http://www.labnol.org/internet/print-from-mobile-phones/
  81. 81 http://dlo.me/archives/2010/01/24/when-to-buy-airline-tickets/
  82. 82 http://dlo.me/archives/2010/08/01/flying-on-the-cheap/
  83. 83 http://dlo.me/archives/2010/05/23/flight-ticket-distribution/
  84. 84 http://dlo.me/archives/2010/01/24/when-to-buy-airline-tickets/
  85. 85 http://stackoverflow.com/questions/17527870/how-does-trello-access-the-users-clipboard
  86. 86 http://stackoverflow.com/questions/17527870/how-does-trello-access-the-users-clipboard
  87. 87 http://timezoneslider.com/
  88. 88 http://timezoneslider.com/
  89. 89 http://timezoneslider.com/
  90. 90 http://www.worldtimebuddy.com/
  91. 91 http://www.worldtimebuddy.com/
  92. 92 http://www.worldtimebuddy.com/
  93. 93 http://www.doodle.com/
  94. 94 http://www.doodle.com/
  95. 95 http://www.doodle.com/
  96. 96 https://medium.com/look-what-i-made/5ee6ae2b1dcc
  97. 97 https://medium.com/look-what-i-made/5ee6ae2b1dcc
  98. 98 https://medium.com/look-what-i-made/5ee6ae2b1dcc
  99. 99 http://screenhero.com/
  100. 100 http://screenhero.com/
  101. 101 http://screenhero.com/
  102. 102 http://sofresh.redpik.net/
  103. 103 http://sofresh.redpik.net/
  104. 104 http://sofresh.redpik.net/
  105. 105 http://mizage.com/divvy/
  106. 106 http://mizage.com/divvy/
  107. 107 http://mizage.com/divvy/
  108. 108 http://shortcatapp.com/
  109. 109 http://shortcatapp.com/
  110. 110 http://shortcatapp.com/
  111. 111 http://www.thethinkerbot.com/
  112. 112 http://www.thethinkerbot.com/
  113. 113 http://www.thethinkerbot.com/
  114. 114 http://www.irradiatedsoftware.com/sizeup/
  115. 115 http://www.irradiatedsoftware.com/sizeup/
  116. 116 http://www.irradiatedsoftware.com/sizeup/
  117. 117 https://shinyplasticbag.com/dragondrop/index.html
  118. 118 https://shinyplasticbag.com/dragondrop/index.html
  119. 119 https://shinyplasticbag.com/dragondrop/index.html
  120. 120 https://github.com/jigish/slate
  121. 121 https://github.com/jigish/slate
  122. 122 http://www.sortmybox.com/
  123. 123 http://www.sortmybox.com/
  124. 124 http://www.sortmybox.com/
  125. 125 https://servus.io/
  126. 126 https://servus.io/
  127. 127 https://servus.io/
  128. 128 https://sendtodropbox.com/
  129. 129 https://sendtodropbox.com/
  130. 130 https://sendtodropbox.com/
  131. 131 http://webdesign.tutsplus.com/tutorials/workflow-tutorials/quick-tip-versioning-your-graphics-files-with-dropbox/
  132. 132 http://webdesign.tutsplus.com/tutorials/workflow-tutorials/quick-tip-versioning-your-graphics-files-with-dropbox/
  133. 133 http://webdesign.tutsplus.com/tutorials/workflow-tutorials/quick-tip-versioning-your-graphics-files-with-dropbox/
  134. 134 https://itunes.apple.com/us/app/droptunes/id457961485
  135. 135 https://itunes.apple.com/us/app/droptunes/id457961485
  136. 136 https://itunes.apple.com/us/app/droptunes/id457961485
  137. 137 https://www.sidecloudload.com/
  138. 138 https://www.sidecloudload.com/
  139. 139 https://www.sidecloudload.com/
  140. 140 http://wordpress.org/plugins/post-via-dropbox/
  141. 141 http://wordpress.org/plugins/post-via-dropbox/
  142. 142 https://www.site44.com/
  143. 143 https://www.site44.com/
  144. 144 http://hexcolortool.com/
  145. 145 http://hexcolortool.com/
  146. 146 http://hexcolortool.com/
  147. 147 http://guideguide.me/
  148. 148 http://guideguide.me/
  149. 149 http://guideguide.me/
  150. 150 http://colorblendy.com/
  151. 151 http://colorblendy.com/
  152. 152 http://colorblendy.com/
  153. 153 http://www.ginifab.com/feeds/pms/cmyk_to_pantone.php
  154. 154 http://www.ginifab.com/feeds/pms/cmyk_to_pantone.php
  155. 155 http://www.ginifab.com/feeds/pms/cmyk_to_pantone.php
  156. 156 http://even.li/imagemagick-sharp-web-sized-photographs/
  157. 157 http://even.li/imagemagick-sharp-web-sized-photographs/
  158. 158 http://even.li/imagemagick-sharp-web-sized-photographs/
  159. 159 http://blog.hull.io/post/47939445232/reconciling-svg-and-icon-fonts
  160. 160 http://blog.hull.io/post/47939445232/reconciling-svg-and-icon-fonts
  161. 161 http://blog.hull.io/post/47939445232/reconciling-svg-and-icon-fonts
  162. 162 http://docs.emmet.io/
  163. 163 http://docs.emmet.io/
  164. 164 http://docs.emmet.io/
  165. 165 http://alias.sh/most-popular/usage
  166. 166 http://alias.sh/most-popular/usage
  167. 167 http://alias.sh/most-popular/usage
  168. 168 http://anvilformac.com/
  169. 169 http://anvilformac.com/
  170. 170 http://anvilformac.com/
  171. 171 http://mir.aculo.us/dom-monster/
  172. 172 http://mir.aculo.us/dom-monster/
  173. 173 http://mir.aculo.us/dom-monster/
  174. 174 https://github.com/padolsey/prettyPrint.js
  175. 175 https://github.com/padolsey/prettyPrint.js
  176. 176 https://github.com/padolsey/prettyPrint.js
  177. 177 http://huddle.github.io/Resemble.js/
  178. 178 http://huddle.github.io/Resemble.js/
  179. 179 http://huddle.github.io/Resemble.js/
  180. 180 https://github.com/juliangruber/review
  181. 181 https://github.com/juliangruber/review
  182. 182 https://github.com/juliangruber/review
  183. 183 http://www.browserstack.com/
  184. 184 http://www.browserstack.com/
  185. 185 http://www.browserstack.com/
  186. 186 http://www.zippopotam.us/
  187. 187 http://www.zippopotam.us/
  188. 188 http://www.zippopotam.us/
  189. 189 http://blogs.perl.org/users/smylers/2011/08/ssh-productivity-tips.html
  190. 190 http://blogs.perl.org/users/smylers/2011/08/ssh-productivity-tips.html
  191. 191 http://www.laszlo.nu/post/553591402/how-to-kill-an-unresponsive-ssh-session
  192. 192 http://www.laszlo.nu/post/553591402/how-to-kill-an-unresponsive-ssh-session
  193. 193 http://snoopy.allmarkedup.com/
  194. 194 http://snoopy.allmarkedup.com/
  195. 195 http://catapulty.com
  196. 196 http://catapulty.com
  197. 197 http://gridwax.gs/
  198. 198 http://gridwax.gs/
  199. 199 http://stevesouders.com/mobileperf/mobileperfbkm.php
  200. 200 http://stevesouders.com/mobileperf/mobileperfbkm.php
  201. 201 https://github.com/jstayton/version.js
  202. 202 https://github.com/jstayton/version.js
  203. 203 http://bricss.net/post/22198838298/easily-checking-in-javascript-if-a-css-media-query-has
  204. 204 http://bricss.net/post/22198838298/easily-checking-in-javascript-if-a-css-media-query-has
  205. 205 http://stackoverflow.com/questions/15551287/how-to-test-a-website-for-retina-on-windows-without-an-actual-retina-display/17228135#17228135
  206. 206 http://stackoverflow.com/questions/15551287/how-to-test-a-website-for-retina-on-windows-without-an-actual-retina-display/17228135#17228135
  207. 207 http://stylemanual.org/
  208. 208 http://stylemanual.org/
  209. 209 http://stylemanual.org/
  210. 210 http://13bills.com/
  211. 211 http://13bills.com/
  212. 212 http://13bills.com/
  213. 213 http://upl.codeq.info/
  214. 214 http://upl.codeq.info/
  215. 215 http://upl.codeq.info/
  216. 216 http://toki-woki.net/lab/long-press/
  217. 217 http://toki-woki.net/lab/long-press/
  218. 218 http://toki-woki.net/lab/long-press/
  219. 219 http://sejda.com/
  220. 220 http://sejda.com/
  221. 221 http://sejda.com/
  222. 222 http://createmyinvoice.com/
  223. 223 http://createmyinvoice.com/
  224. 224 http://createmyinvoice.com/
  225. 225 https://www.statuspage.io/
  226. 226 https://www.statuspage.io/
  227. 227 https://www.statuspage.io/
  228. 228 http://beathound.com/
  229. 229 http://beathound.com/
  230. 230 http://beathound.com/
  231. 231 http://www.syncios.com/
  232. 232 http://www.syncios.com/
  233. 233 http://www.syncios.com/
  234. 234 http://skrivr.com/
  235. 235 http://skrivr.com/
  236. 236 http://skrivr.com/
  237. 237 http://dev.umpirsky.com/list-of-all-countries-in-all-languages-and-all-data-formats/
  238. 238 http://dev.umpirsky.com/list-of-all-countries-in-all-languages-and-all-data-formats/
  239. 239 http://dev.umpirsky.com/list-of-all-countries-in-all-languages-and-all-data-formats/
  240. 240 https://github.com/genericsteele/token_phrase
  241. 241 https://github.com/genericsteele/token_phrase
  242. 242 http://www.linkrr.com/
  243. 243 http://www.linkrr.com/
  244. 244 https://addons.mozilla.org/en-us/firefox/addon/linkchecker/
  245. 245 https://addons.mozilla.org/en-us/firefox/addon/linkchecker/
  246. 246 https://chrome.google.com/webstore/detail/tab-wrangler/egnjhciaieeiiohknchakcodbpgjnchh?hl=en
  247. 247 https://chrome.google.com/webstore/detail/tab-wrangler/egnjhciaieeiiohknchakcodbpgjnchh?hl=en
  248. 248 https://chrome.google.com/webstore/detail/responsive-inspector/memcdolmmnmnleeiodllgpibdjlkbpim
  249. 249 https://chrome.google.com/webstore/detail/responsive-inspector/memcdolmmnmnleeiodllgpibdjlkbpim
  250. 250 https://chrome.google.com/webstore/detail/shortcut-manager/mgjjeipcdnnjhgodgjpfkffcejoljijf
  251. 251 https://chrome.google.com/webstore/detail/shortcut-manager/mgjjeipcdnnjhgodgjpfkffcejoljijf
  252. 252 https://chrome.google.com/webstore/detail/auto-login/oeoibdmcpaofjgcdncagknlmlmngkgfm
  253. 253 https://chrome.google.com/webstore/detail/auto-login/oeoibdmcpaofjgcdncagknlmlmngkgfm
  254. 254 http://tin.cr/
  255. 255 http://tin.cr/
  256. 256 http://www.one-tab.com/
  257. 257 http://www.one-tab.com/
  258. 258 https://chrome.google.com/webstore/detail/tab-wrangler/egnjhciaieeiiohknchakcodbpgjnchh?hl=en
  259. 259 https://chrome.google.com/webstore/detail/tab-wrangler/egnjhciaieeiiohknchakcodbpgjnchh?hl=en
  260. 260 https://chrome.google.com/webstore/detail/tab-wrangler/egnjhciaieeiiohknchakcodbpgjnchh?hl=en
  261. 261 http://www.smashingmagazine.com/2012/12/22/talks-to-help-you-become-a-better-front-end-engineer-in-2013/
  262. 262 http://www.smashingmagazine.com/2012/12/22/talks-to-help-you-become-a-better-front-end-engineer-in-2013/
  263. 263 http://www.smashingmagazine.com/2012/12/22/talks-to-help-you-become-a-better-front-end-engineer-in-2013/
  264. 264 http://usesthis.com/
  265. 265 http://usesthis.com/
  266. 266 http://usesthis.com/
  267. 267 http://www.learnsomethingeveryday.co.uk/
  268. 268 http://www.learnsomethingeveryday.co.uk/
  269. 269 http://www.learnsomethingeveryday.co.uk/
  270. 270 http://hewgill.com/~greg/stackoverflow/ebooks/
  271. 271 http://hewgill.com/~greg/stackoverflow/ebooks/
  272. 272 http://jourrrnal.com/about/
  273. 273 http://jourrrnal.com/about/
  274. 274 http://how-i-work.com/
  275. 275 http://how-i-work.com/
  276. 276 http://bettermess.com/my-radical-productivity-experiment/
  277. 277 http://bettermess.com/my-radical-productivity-experiment/
  278. 278 https://github.com/codylindley/frontend-tools
  279. 279 https://gist.github.com/jonkemp/2713513
  280. 280 https://gist.github.com/paulirish/5842309
  281. 281 https://speakerdeck.com/addyosmani/tooling-for-the-modern-webapp-developer
  282. 282 https://speakerdeck.com/addyosmani/the-new-wave-utility-belt-fowa
  283. 283 http://stackoverflow.com/a/16512303/130638
  284. 284 http://www.impressivewebs.com/simple-tools-front-end-developers/
  285. 285 http://webplatformtools.org/

↑ Back to topShare on Twitter

Former trainee Melanie, completed her degree in Philosophy, Politics and Economics at Otago University, and is now back working in the Smashing Editorial Team while freelancing and being a part-time politician. She's interested in many things like writing, web design, politics, travelling and underwater rugby, and tweets as @mel_in_media.

Advertising

Note: Our rating-system has caused errors, so it's disabled at the moment. It will be back the moment the problem has been resolved. We're very sorry. Happy Holidays!

  1. 1

    SoFresh is simply SoAwesome … not just because one of my very best friends co-wrote it, but because, not being a ultra-great frontend designer, I kinda need such a sidekick to help me out, instead of F5’ing continuously… A great compliment with Firebug, and just a bookmark away !

    (Beware, SoFresh checks the css files headers from the server, if date changed, it reloads the file, not the whole page… therefore: the network tab in FireBug fills up very quickly, just so you know)

  2. 3

    Wow, lots of great stuff here. Thanks for including one of my links, too.

    FYI, for those further interested in getting weekly updates on tools, plugins, workflow apps, etc., I’ve recently launched a new newsletter:

    http://webtoolsweekly.com/

    </end shameless plug>

  3. 4

    That’s one long and useful list of stuff. Thanks for making the effort.

  4. 5

    wooww amazing tools there is also best tool in this blog :

    http://www.ituto.org

  5. 6

    I read every article in this magazine and every article is brilliant and so relaxing to read. So saturated with good ideas and tips. So well written and profesionally composed. I could go on…

    • 7

      Iris Lj. (@smash_it_on)

      October 4, 2013 12:35 pm

      Hi Rex,

      Thank you for your kind words! The Smashing team sincerely appreciates your thoughts and feedback :o)

  6. 8

    Awesome tools, I’m already using some of them. A lot of this tools end up being really, really helpful on your daily workflow. It’s worth to mention http://www.retrospectus.com a really cool app. We use this app a lot, it helps us to gather feedback for our projects.

  7. 9

    Very useful, thanks! One of the many I liked was the “Speed Up CSS Prototyping” article. However, I was suprised to see that the author used an image for his grid. I use SASS for my css and, inspired the article, created a mixin with a grid overlay that only uses CSS: http://codepen.io/anon/pen/peIjy

    This way I can generate a grid from my SASS-config :)

  8. 10

    The first Sublime video doesn’t work… damn.

    Other than that, awesome! My bookmark list just overflowed.

  9. 13

    Awesome article.

    Can you fix the link for “Sublime Text: My Workflow and Useful Resources”
    to http://bassam.co//2012/09/21/Sublime-Text-My-workflow-and-useful-resources/

  10. 16

    Wow, thank you so much. Amazing stuff.

  11. 17

    Our designers at Global WebForce are using these tools and they are very helpful. They can save time, easy to use and there is no need to spend more time learning the HTML and any programming language to make a website.

  12. 18

    Sweet. Brilliant list of awesome stuff! Definitely worth bookmarking!

  13. 19

    So maybe this is why this instagram post is still getting likes. I appreciate you sharing my simple tip. I’m still using it ;) Anyways no big deal but any links help. Maybe a link to my site in my name. http://www.krisjolls.com. If can Thanks.
    I use Fireworks for my web designs if anyone is interested follow me on the social networks on my site. Aloha

  14. 20

    kizmet Tech Solutions

    November 29, 2013 1:23 pm

    wooww amazing tools

  15. 21

    It is so useful list. Wondering it got only 20 comments! :)
    I got so many things to explore.

  16. 22

    Creative Graphics

    December 20, 2013 3:22 pm

    Awesome article, thanks!

  17. 23

    Awesome post!!

  18. 24

    Nicholas Carvera

    January 7, 2014 1:57 pm

    Great article Melanie!
    I’ve used some of these tools and tricks, all of those were awesome.

    Every article of your magazine is well written and knowledge booster.
    As a web developer at http://www.seosemanticxhtml.com, I use your tips and tricks to make my development life easier.

    Thanks a lot for your efforts.

  19. 25

    I like the information shared. Your efforts in researching such a good content is really appreciated. I like everything written in the post. I am a web designer and love reading blogs. Keep sharing latest news about market.

  20. 26

    Great article Melanie!
    I’ve used some of these tools and tricks, all of those were awesome.
    Every article of your magazine is well written and knowledge booster.
    As a web developer, I use your tips and tricks to make my development life easier.
    Thanks a lot for your efforts.

  21. 27

    Honestly I never thought I could do some webdesign in Photoshop and, since I’m not an expert in html,css, etc, I was kind of stuck with building the e-commerce template that I need (for a newsletter). I write a post on same topic recently here : http://www.webdeveloperjuice.com/2014/03/31/most-vital-photoshop-tips-for-web-developers/. But after reading the post I have to say that this is very helpful to me.

    Thanks a lot & Keep Sharing!!

  22. 28

    You could always try a great workflow management system like http://www.streamtime.net

  23. 29

    Thank you for your kind words. I appreciates your thoughts and feedback . Anyone can use your tips and tricks to make there development life easier.

  24. 30

    Some really great tricks to make development not only easier, but in some cases way faster. Great Job!

  25. 31

    Awsome article, I’ve used some of these tools and tricks, all of those were awesome.

    Every article of your magazine is well written and knowledge booster.

    As a web developer, I use your tips and tricks to make my development life easier.

    Thanks a lot for your efforts.

  26. 32

    Superb article. So many useful tips. I have to agree with using Sublime. Such a great tool very powerful and has a lot of potential. Some great plugins are Bower, Emmett and Live Reload.

  27. 33

    Some really good and useful tips there! Thanks for the article.

  28. 34

    Wow so many cool things to look at, think I just lost half the day…..

  29. 35

    This was a great post! Thanks for sharing these helpful tools and tips, I could really use them! The work space for Photoshop was really inspiring and helpful, the Fontshop is an awesome thing to have when doing typography or logos. I really will take all these tools in consideration and try them out! It is always inspiring to come on here, it really gets me going for my work day.

    Rankmyweb.com
    Brandi

  30. 36

    Great collection of useful tools, tricks and methods for improving workflow! Thanks for sharing. :)

  31. 37

    Always be a web designer, not a graphic designer while designing a website. It is a general misconception that graphic designer, owning to their computer graphic skills, can also be web designer and vice versa.

Leave a Comment

Yay! You've decided to leave a comment. That's fantastic! Please keep in mind that comments are moderated and rel="nofollow" is in use. So, please do not use a spammy keyword or a domain as your name, or else it will be deleted. Let's have a personal and meaningful conversation instead. Thanks for dropping by!

↑ Back to top