Windows web design apps I can’t live without

I’m honestly a bit wary of making a simple, flat declaration that “x is the best program for y”; real life is usually trickier than that.

As a guy who tries out new software for fun (I’m a riot at parties), I can tell you from painful and often disappointing experience that finding the right tools for your trade is a very personal journey. Tools that look great on paper will so often lack that one crucial element that would make them an effective part of your workflow. Your workflow you see, is everything.

So, before I list the “best” design and development tools for Windows, permit me a moment to quantify what I need from the software that I use:

  • Cross-platform compatibility — Sometimes I switch to Linux for a while.
  • Specialization — I prefer tools that do one thing well, rather than one-size fits all suites that do everything half-baked.
  • Speed — Nothing more annoying than a slow, bloated program. This is especially true when you need to switch between programs quickly, and often.
  • Customization — There are times when I’m not happy unless I’m able to extensively configure and tweak my process. Constant improvement is essential in our field and our tools should accommodate this need.
  • Fast changes to live sites.

There. Now we can start…

 

Writing my code

I design websites in the browser. When you think about it, this means that from the moment I stop wireframing, I begin to express my visual intentions with code. From that moment on, my most important tool in the whole process, besides the browser itself, is my code editor.

By now, most everyone has heard of Sublime Text. Do I really need to go into all of the details? Suffice it to say that the customizable interface, blinding speed, cross-platform versions, and myriad extensions make my life easier. It was, without a doubt, the best seventy dollars that I ever spent.

sublime

There is an up-and-comer that has my interest, however. Adobe’s Brackets may still be in the Alpha stages, but it is quickly becoming a powerful text editor in its own right. It already has a decent feature-set, a growing library of extensions, and a thriving community.

brackets

Once the Live Preview feature works with local WordPress installs, and once the whole program is a bit less crash-prone, it may be a powerful contender to the throne. As things stand, I’m happy to watch the program grow. It’s come a long way in a short time.

 

I still need an image editor

My choice in image editors is brought to you by small budgets! And the need for a cross-platform solution! And sometimes slow hardware!

That’s right ladies and gentlemen, I use the unfortunately-named GIMP for raster graphics, and Inkscape for my vector editing needs. I’m not going to turn this article into a GIMP vs. Photoshop debate. They are two very different beasts.

gimp
 inkscape

Because I design in the browser, I have no need to create high fidelity image mockups. I use image editors to make individual graphic elements only. I create them separately from each other, as I need them. Thus, GIMP and Inkscape do the job, and they do it well.

One definite “pro”, besides the price tag: GIMP has, in my experience, always worked well on low to medium grade hardware. This is perfect for me, because I sometimes don’t have access to my nice, powerful desktop; and my slightly older laptop must sometimes suffice.

 

 

Putting files on the server

The number of FTP programs out there is… staggering. For basic uploads, I stick with the tried-and-true, cross-platform FileZilla. It’s free. It works. I’m used to it.

filezilla

 

Making changes on the fly

One common Windows-based task of mine is quickly editing live sites that need very small changes. I mean, who wants to reboot and switch to a different OS for a five-minute change?

For the smallest changes, I’ll use Komodo Edit. It’s a bit slower than the previous text editors I mentioned, but you can install an FTP browser extension which enables quick live changes. It’s perfect for fixing typos, basically.

komodo

Oh, don’t get me wrong. It’s a powerful IDE in its own right. I’ve used it to build full projects before. But, it is slow, and Sublime Text’s command-based workflow suits me better.

Now, if you need to make somewhat more extensive edits, and/or want to work with something like LESS or SASS while working on a live site, Fling might just be the miracle you were looking for.

fling

Basically, Fling allows you to set up synchronised folders over FTP. Just edit the files in your local folder. Fling will scan the directory for changes every time you save, and upload only the relevant files. It’s such a simple concept, and yet so useful.

It’s free for non-commercial use, but if you need to do a lot of live edits, the paid version is worth it, I think.

 

Bonus tool: WinLESS

If you’ve read many of my previous articles, you’ll know that I love LESS CSS. I’ve tried just about every LESS compiling app I could get my hands on, and I’ve liked quite a few of them, such as SimpLESS and Koala, for example.

But SimpLESS has stopped working on my desktop for reasons unknown (it still seems to work for others, though). Koala simply couldn’t compile one of my stylesheets, once. The only Windows-based LESS compiler that has not failed me so far is WinLESS. Give it a try, if you haven’t already.

winless

Do you design on Windows, which are your go-to tools? What are your priorities for design software? Let us know in the comments.

  • lostinnovation

    As far as preproccessors go, I found http://alphapixels.com/prepros/ to be pretty awesome.

    • http://www.cubelabmedia.com/ T.E. Mencer

      I was just about to suggest this same one. I use it religiously for Less and Sass pre-processing and really has all the features and then some.

    • Nicklas

      I’ve tried Prepros, Simpless and Winless. All of them have their own pros and cons, but Prepros is definitely the winner. It works so well, when it decides to work. I find it having huge issues with memory (the latest release helped with that now that you can enable/disable watching per-project, but it’s still not quite where it should be), and being the poor student i am i can’t afford the premium version, which leaves me without config files and a lot more.

      Eventually i ditched it completely and moved onto Grunt, which has since worked flawlessly. It’s just so simple, and i love the fact that i just have one config file that contains everything. Need to work with this with a buddy? No problem, here’s the complete project including the config file. It’s awesome. If you just need to compile a single file or two, e.g. not a complete project, Prepros is my go-to program. But when it comes to extensive development, i now lean towards Grunt for the most of it. Config files are a dealbreaker for me.

      • lostinnovation

        Grunt is something I feel I should definately learn more about, it’s so hyped up these days. It’s just GUI’s are so much prettier… You provided a compelling case though, I may put that on today’s todo list :)

        #laterepliesftw

  • Pete D

    Why use Komodo Edit for quick FTP? You already use sublime text, why not install the Sublime FTP package http://wbond.net/sublime_packages/sftp

    Alternatively I find this a good solution for quick edits – in Firefox install an addon called FireFTP. Set it up to recognise your editing program, in my case I have it set to open all files in Sublime Text. Then when you’re in you folder in Fire FTP right click (Windows of course) on the file you want to to edit and select ‘Open with’ and choose your program. Then any changes you make will automatically update on the server on save. I’ve been doing it this way for a while now and it works a charm.

    If you are reliant on source control then this method is not for you unless you have GIT installed in Sublime Text to update on save also.

    • EzequielBruni

      Excellent tip about FireFTP. Now I just wish someone would make something like it for Chrome.

  • Abdelhadi Touil

    Very nice collection. Me too I’m Gimp and Inkscape user :) As for editor I use Notepad++, as you see I’m for freebies :) btw you should try notepad++ for making quick changes, it has a very nice built in FTP! I think it’s much quicker than Komodo Edit.
    Thanks :)

  • Tom

    Hi! I am using PHPdesigner8 for developing. It’s great for HTML, CSS and PHP developing. Unfortunetly there is no support for LESS yet. The best feature is coding on FTP folders, which works pretty cool. I can truly recommend for you guys.

  • Henning Fischer

    - sublime text is the boss.
    – “brackets” looks very promising, too.
    – inkscape is a very good software, i even like it better than illustrator :).

    – gimp just sucks. it’s slow, ugly and i miss a TON of features compared to PS.

    – for live editing on ftp i use WinSCP (freeware).

  • Ardillán

    Good post!

  • http://wipstr.com/ Will Dady

    Nice round-up. There’s a ($20) plugin for sublime which does sftp syncing not like Komodo edit and Fling.

  • http://vryhof.net/ Amos Vryhof

    Not a bad article. It’s nice to see a lot of cross-platform goodies on here since most of these also work on Linux just fine and dandy.

    I still don’t see why I would want three text editors. Brackets can do all of the stuff, and runs on Win/Linux/Mac…. As for cross-platform script/css/less/sass/etc compilation and optimization, I use Koala (http://koala-app.com/)

    With your text editor, FileZilla is very apt for live editing as well.

  • Joost Brommert

    FTP for uploading to a server? How about Git or even SVN for deployment?

    • http://thermosilla.info Tomás Hermosilla

      Nothing worst than those little quick changes

    • EzequielBruni

      Good question. I’m not really a developer, as such, so although I’ve tried to integrate git and mercurial into my workflow before… I’m not that good at it.

      Besides, although I’m pretty sure I could manage it for static sites, I have yet to find a good way to launch WordPress sites from version control. All of the solutions that I have found are beyond my skill level.

      If you have a solution for that, please let me know. I’d love to try it out, maybe even write about it.

    • http://nodws.com/ Nodws

      Git is NOT for deployment, binary files have no place on a git

  • Danny Jones

    Just wanted to say thanks for mentioning brackets – iv just downloaded it as well as its awesome FTP and theme extensions and I am blown away

    I do love sublime text but think ill carry on with brakets for a bit as it seems excellent for zero cost

  • jniden

    I gave up GIMP for Paint.net (http://www.getpaint.net/). For ftp I would recommend (as everyone else is doing) using your IDE. You have 3 tools for ftp, that’s not very effective in a production environment.

  • http://dandigangi.me/ Dan DiGangi

    Why does everyone need a GUI?! Learn to use the command line! It’s your friend. :)

  • http://nodws.com/ Nodws

    Filezilla sucks, go winscp or go home

  • shivabeach

    Less Parser works very well for me, creates the CSS file and never falters. I use Sublime Text 2 and 3, as well as Brackets. I have ftp on Sublime, but also use Filezilla for other tasks
    Brackets has some awesome extensions

  • 1076

    This is kind of a weird recommendation, but I wanted to extol the virtues of FireFTP.
    It’s the only reason I still have Firefox (other than compatibility testing).

    The main thing I like about it is the instant upload feature. If you open a file from the site, when you save changes, it instantly uploads them. With Filezilla, I always get prompted, but FireFTP does it automatically.
    It matches Filezilla in ease of use and price, so it’s currently my favorite.

  • HemanthMalli

    That’s an informative share and got good info from comments too. Thank you !!

  • senbolly

    Hi this is an amazing site! I love how you categorize the design styles with the descriptions. Very analytical observation!