10 Ways to Be a More Productive Web Developer

We could all be more productive. There are many things we can do — some big, some small — that will enhance the way we work and improve the outcomes of our activities.

Although I can’t promise that I’ll be able to help you cure all your productivity ailments, I do hope that I can provide you with a few useful, solid tips on streamlining your web development workflow and making every part of the development cycle move quickly and smoothly.

Follow each one of these tips and I can almost guarantee you that you’ll save time, be able to create more and/or better work and be a more productive developer, ready to tackle that next task in half the time it would’ve taken you before.

1. Use a Web Development Framework

I used to refuse frameworks for web development because they can be bloated with excess stuff. But ever since I’ve adopted one, I’ve loved it.

Good web development frameworks:

1.      Have features that provide solutions to common web development problems (e.g. standard web page layouts, functions for dealing with web forms, and browser compatibility fixes).

2.      Are tested by many other web developers for bugs, security and performance.

3.      Make code reuse easier because of a consistent API.

1. Have community-developed extensions and tools that further enhance development (for example, jQuery has plenty of plugins that deal with things like UI, images and web typography).
2. Often force you to follow coding best practices and great programming design patterns without even thinking about it.
3. Have a development community of supporters and users you can reach out to for help and collaboration.
4. Typically are easier for beginners to start using.

All these benefits save you time and improve the quality of your deliverables.

There are many types of web development frameworks you can adopt.

1. There are full web application frameworks like Ruby on Rails or CakePHP.
2. You can use a JavaScript framework like jQuery, MooTools and many other lesser-known but excellent JavaScript frameworks to deal with UI, client-side logic and Ajax.
3. If you want to speed up designing the presentational/visual layer, you can use a CSS framework (I’m using Toast and I highly recommend it) or just a web page layout framework like the 960 Grid System.
4. There are specialized frameworks, such as WordPress theme frameworks that speed up production and deployment of content management systems.
5. More recently, we now have frameworks for mobile web apps.

An often-cited downside to using web development frameworks is that they will invariably come with extra things that you won’t use. This extra stuff can slow down website speed and performance due to code bloat, so you have to make sure that the benefits of using them outweigh the potential performance hit.

More often than not — and this applies especially to those just starting out — the code of frameworks are written using the best coding practices and design patterns and are reviewed by many brilliant and passionate developers, which often translates to better, faster and more secure code compared to what an average web developer can produce by himself.

2. Create a Library of Code Snippets

There’s no reason to reinvent the wheel. Recycle your code! Create a collection of your favorite and often-used snippets and make sure that it’s easily searchable and well organized.

At the simplest level, you can have a folder/directory of source code and text files in your hard drive. However, this may not be the most efficient technique.

A step up to that is using a source code editor or IDE that allows you to save snippets. For example, Notepad++ has a plugin called SnippetPlus and Dreamweaver has the built-in Snippets Panel that even has prepackaged code snippets ready to use.

Adobe Dreamweaver’s Snippets Panel.

Another solution is to use a dedicated snippet tool like Snippet or Snipplr.

Here’s an idea: You can even use a private code repository/version control system like Git for finer control over your source code. This additionally allows you to revert to older versions of your snippets and see how they’ve evolved over your career.

My collection of code snippets spans several different languages and is employed all the time for repetitive tasks like inserting new CSS3 rules with browser prefixes. It’s also handy for oft-used functions that are easily forgotten, like how to display Custom Fields in a WordPress loop.

When choosing a tool or method for collecting snippets, consider making sure that it has these time-saving features:

1. Search
2. Hierarchical organization so you can easily categorize snippets
3. Syntax highlighting for enhanced readability
4. In a perfect world, it’s integrated (or can be integrated) with your source code editor to reduce application-switching

Remember to regularly review, improve and update your existing snippets.

3. Use the Right Tools

This should be a no-brainer: Make sure you’re equipped with good tools and that you know how to use them effectively.

If you’re a web designer, you probably need Photoshop and Illustrator. If you’re a developer, you need a good set of web development apps to help you get the job done.

Of course, toolsets differ between professions and between people. Not everyone will need the Coda web development suite to build their websites — some just need a terminal.

What matters is that your tools should help you get the job done as efficiently as possible.

4. Collect and Organize Free Design Resources

There are many sites on the Web that give away free design resources. Add these sites to your RSS reader, and every time they post a freebie you can potentially use, grab it.

I’ve been doing this for months and now have a massive library of icons, PSD templates, vector illustrations, Creative Commons-licensed images and artwork, buttons, GUI elements, Photoshop brushes, @font-face kits, and all kinds of miscellaneous design elements.

Having such a huge library makes it incredibly easy to put together mockups in Photoshop, or get a quick sketch ready to show a client.

My icon and button library has been integral to putting finishing touches on websites I’ve nearly finished. This collection of little details is super handy — instantly sprucing up a design.

Here are some links to check out:

• Find posts that have culled the immense Internet for top-quality free design resources in the Six Revisions Resources category
• Read this list of excellent sources of design freebies
• Check out the Freebies section here on this website as well as the free resources on Design Instruct (a partner site)

5. Work in Sprints

Working in sprints can greatly improve productivity. For example, I wrote this article in short sprints, writing two or three bullet points at a time, taking a very long break from it to work on something else, and then returning later in the day.

Working in 10- to 20-minute blocks allows your brain time to generate new ideas and keeps it from burning out.

Don’t work for hours at a time — your pace will slowly decrease and your work will decline in quality over time.

Working on a project in short bursts means you’re always coming back fresh.

6. Take Breaks

The most important part of sprint-based working is the break. It’s crucial to let your mind rest. Use these breaks to separate yourself from your workspace — go outside and stretch, or if you’re lucky enough to be a freelancer working from home, go to the kitchen and fix a little snack.

Again, don’t bother with tracking your time if you don’t have to. Your sprints don’t have to be exactly 15 minutes, and your breaks don’t have to be exactly 5 minutes. Work until you’re at a good stopping point, then take a comfortably timed break. Micromanaging time, in my experience, has only led to further procrastination.

However, some developers may be better served with more structure. If this is you, check out the Pomodoro Technique.

7. Invest Time in Learning

In the short term, constantly learning, keeping up with industry news and staying ahead of the curve is time-consuming.

However, the idea is that by investing your time in self-improvement, you can save time in the long run, increase your output and improve the quality of your work.

8. Don’t Over-Plan

There was a time in my life when I used to schedule out my day. I planned out everything in little 30- or 60-minute increments, stacking them up neatly in iCal.

I thought I was being productive, but I was only really setting myself up for failure.

You shouldn’t make your day any more rigid than it has to be — your mind needs to have some flexibility, some time to breathe and fully think.

Make sure to keep your schedule open to changes. I found that by over-planning my day, I only procrastinated more, and despaired watching those neat little chunks of productivity pass by.

9. Don’t Just Jump In Head First

This is the opposite extreme of over-planning. Although you shouldn’t over-plan, you can’t under-plan either.

Jumping in without knowing what you’re supposed to do can lead to disastrous website projects.

Whenever you begin work on a project, make sure you know what’s expected of you. In a web design project, this can be anything from knowing what the site is supposed to do, having the content of the landing page, having a set of colors from your client to work with, etc.

Before I start work on a client’s site, I always have the following:

1. Color scheme
2. Goal of the website
3. Any content they can provide
4. Any design ideas they already have

Knowing certain things about your project can lead you in the right direction without requiring you to take shots in the dark about what your customer wants.

10. Don’t Make Things Complicated

This is probably the most important one of them all: Don’t overcomplicate your job. Don’t do more than you have to, and don’t set yourself up for too much work in a given time period.

I’m not advocating delivering to your customer the minimum deliverable every time, but you certainly don’t need to deliver the maximum.

There aren’t any clear guidelines here, so you’ll have to judge it on a case-by-case basis. Give the client what they need. No more, no less.

Also, don’t overcomplicated your productivity strategy. Keep things simple. I tried using a "Getting Things Done" application to organize my life for a while, and it didn’t work.

I moved on to using sticky notes and finally TeuxDeux, a loveably minimal to-do list.

Wrapping Up

I don’t advise you to follow exactly in my footsteps when figuring out how to be most productive; everyone is different and requires their own processes for getting things done.

But keep the above tips in mind, and hopefully your workflow will be a little more streamlined than it was before.

If you have any productivity tips, share them in the comments below!