New to web design? In this article, we look at some of the must-have tools for web designers and developers in 2015. If you’re an intermediate designer, hopefully you’ll still find something on this list that will help you to work better. If you’re an expert, and already know everything, well, congratulations and good for you. Don’t forget to tell us in the comments where we went wrong.
A skilled person with CSS and HTML know-how could, of course, design and develop a website with little more than Windows Notepad and a web browser. But that’s no longer necessary, and time is money. The purpose of the tools on this list is to make your life easier. Each will help you in building the best modern websites you can build, with cutting-edge techniques, in the fastest, most efficient way possible.
1. A Web Stack: WAMP, MAMP
If you’re an experienced designer and web developer, and you’re rolling your eyes while reaching for the back button, remember that not everyone followed the same path into web development. Many of us are self-taught; many of us have gaps in our knowledge.
Back when I designed and sold premium Drupal themes, it wasn’t at all unusual for clients to upload a theme to their website and customize it from there, using an FTP client like FileZilla to download, edit, and re-upload each file. There’s nothing inherently wrong with doing it that way but, for anything other than minor customizations, it’s a tedious way to work.
If you’re new to web design, set up a development environment on your home computer and leave the production server alone until you’re ready to deploy. Thanks to web stacks like WAMP (Windows) and MAMP (OSX), this couldn’t be easier to do.
2. Sublime Text
You’re going to need some way to edit HTML, CSS, Javascript, PHP and more. We think Sublime Text is the best option out there (and has been for some time). You might have a preference already – I used Dreamweaver for years before finally making the switch – but after a few days coding with Sublime Text I never looked back.
New designers should forget about the WYSIWYG editors and jump right into writing their own markup and stylesheets. It’s knowledge you’ll be glad to have later on, and HTML5 and CSS3 are easier to learn than you might think.
3. A framework or boilerplate of some kind
There’s no longer any point in building every project from the ground up. Get a head start by using a basic boilerplate like the excellent HTML5 Boilerplate, or use a more complex framework like the insanely popular Bootstrap 3 from Twitter. Which is better? The right choice depends largely on the task at hand, and both are widely supported.
Technically you can do without either, but anything that will streamline and speed up development is worth integrating into your workflow.
4. CSS Preprocessor (SASS, LESS)
Thanks to the magic of CSS preprocessors SASS and LESS, in recent years, I’ve almost eliminated Abobe Photopshop from my design and development process. If I do use it, it’s near the end, and usually to create a gradient or drop shadow for IE7 and IE8.
Beginning web designers might want to hold off until they have a firm grasp of CSS, but we think that CSS intermediates and experts are missing out if they’re not taking advantage of a preprocessor.
Why use a preprocessor? That could be an entire article itself, but, long story short, it’s primarily a matter of speeding up development and improving workflow. With SASS and LESS, designers can code CSS in a way that’s reminiscent of programming languages. Designers can create reusable functions called mixins that can be used again and again. Preprocessors are also handy for ensuring cross-browser compatibility, since many CSS3 property names still vary by browser.
We will note that there are purists who’d never touch ’em. Some people like their code styled in a particular way, and to be intimately familiar with every written character (there’s other arguments against them, but we’ll leave the pros and cons for another time).
Which preprocessor is best? We favor SASS, primarily for the extensions available. But it ultimately comes down to personal taste.
5. SASS and LESS Mixin Libraries (Compass, Susy, Breakpoint)
If you use either SASS or LESS for a preprocessor, you’d have to be crazy, drunk or on terrible drugs to not also use some of the excellent extensions and mixin libraries available. Compass for SASS is wonderful, a framework in and off itself, and Susy can’t be beat for building robust, responsive layouts. And the popular Breakpoint extension for SASS will help you write and manage tedious media queries.
6. Codekit, Koala, Prepos
You wouldn’t get very far with CSS preprocessors if you couldn’t compile their code. Codekit, Koala, and Prepos are applications for compiling SASS, LESS, Coffeescript, Javascript and more.
Codekit is our favorite, but only available for Mac. Koala, also for Mac, is a solid free alternative to Codekit. And we’ve heard only good things about Prepos for Windows.
7. jQuery Plugins
For the foreseeable future, it’s likely that almost every website you build will end up using jQuery for one thing or another. Most boilerplates and frameworks, including Bootstrap and HTML5 Boilerplate, include jQuery.
Beyond jQuery’s core, there’s a seemingly endless supply of jQuery plugins and libraries available that can help you along the way, with more being created every day. Superfish, one of the oldest, is a classic that will help you to create slick, lightweight and animated drop down menus. The ubiquitous Flexslider, for building slide shows, is powered by jQuery, and CodeCayon offers a ton of commercial plugins.
8. Photoshop
I used Photoshop for the first time in 1997. It was the industry standard then, and it’s the industry standard now. It once cost hundreds of dollars for a commercial license. Now, thanks to Creative Cloud pricing, it costs $10 a month.
Thanks SASS and the power of HTM5 and CSS3, I don’t use it during the early stages of my design process as much as I used to, but once in a while it still proves invaluable. Sure, there are free options, but if you ask me – and a lot of other people – none of them quite compare. Photoshop does it best. It’s a pleasure to work with.
9. IEtester, Parallels, VMWare
As web designers, the bane of our existence is, and shall always be, Microsoft’s hell-forged browser Internet Explorer. All versions have something profoundly wrong with them. But what can you do? It’s just not practical to ignore it. If you’re a Windows user, IETester will help you to quickly identify all the weird, unholy bugs the browser is likely to vomit up.
Unfortunately, IETester is not available for OSX. We recommend installing Windows on your Mac using Parallels or Bootcamp, and then installing IETester from there. Microsoft provides virtual machines for testing (compatible with Parallels, VMWare and VirtualBox), but they’re a bit more tedious to work with.
10. Browser Add-Ons (Firebug, ySlow, Web Developer Toolbar)
I might have offed myself by now without the lifesaver called Firebug. This browser add-on is the number one reason I still use Firefox today. Lite versions are available for other browsers, but they don’t compare to the real deal.
There’s some other pretty useful browser add-ons too, many not limited to Firefox. ySlow is a must have for grading the speed of your site and improving it. Web Developer Toolbar includes has some handy tools, and shortcuts for checking that your code passes W3C validation.
And, hey: what about Live Reload? It refreshes your browser window every time you make a change to a project file. Are you that lazy? I know I am. I’m not even going to write a closing paragraph on this article.