Now let’s explore the subject further. We will look at how we can recycle existing work (done by ourselves or others) in order to be more efficient. By doing so, we can finish projects more quickly and generate a better profit margin. The great thing about recycling is that we can all do it, whether we are a developer, designer or website owner. Let’s begin our journey with the masters of recycling: developers.

Developers: The Kings Of Recycling

I was once told that all good developers are lazy. Having a design background, I thought this bizarre. And yet, good development involves discovering the most efficient way to do something. Of course, finding the most efficient way is not always easy. It largely comes down to constantly searching for new approaches and taking the time to try new ideas. The key is to never be satisfied with your current approach, but rather to always strive for and experiment with new approaches.

At the core of this “lazy’” approach to development lies the principle of “coding only once.”

Classes and Functions

Mid-project, it is easy to focus on the immediate challenge and fail to think long term. But a good developer writes code that is reusable in future projects.

Functions that can be used in multiple projects can save developers a lot of time.

To recycle, write reusable functions and classes, not project-specific code. This involves ensuring that code is modular and self-contained, not dependent on project-specific elements.

The principle of a reusable code library isn’t limited to classes and functions. It also applies to other aspects of your code.

Starting Points

Whether simple HTML websites or .NET applications, most projects begin with the same set of files. For example, on a simple HTML website, you would have a CSS reset, a jQuery include and maybe some basic print and IE6 style sheets.

2Eric Meyer’s CSS reset should be included in the default code set of almost every Web project.

Setting up this default code for every project is time-consuming and unnecessary. Instead, create a generic set of code to use in every new project. This not only enables you to recycle code between projects, but it helps to keep your coding workflow organized3.

Better still, you don’t even have to create these starting points from scratch. Projects such as HTML5 Starter Pack4 and HTML5 Boilerplate5 take all of the hard work out of getting started. They enable you to recycle the hard work of others.

This leads us right into libraries and frameworks.

Libraries and Frameworks

Many developers start learning how to code by adapting the code of others to their needs. But this just scratches the surface of what is possible. Today, Web developers have a big choice of libraries and frameworks that significantly reduce coding time, from JavaScript libraries such as jQuery6 to PHP Web application frameworks such as CodeIgniter7.

8CodeIgniter is one of many frameworks that enable you to reuse the development work of others.

Some would caution developers against using libraries and frameworks unless they understand their inner workings. Certainly, debugging a library that you don’t fully understand can waste hours. However, the time-saving benefits of these libraries and frameworks is so great that they outweigh the drawbacks in most cases.

Even if you use a library or framework, wasting time by repetitively entering the same code is still possible. In such cases, snippets are a real-time saver.

Using Snippets

Snippets are commonly used pieces of code that you can insert quickly with a keyboard shortcut. For instance, a WordPress loop can be entered simply by typing wloop or by pressing Command + W. Many coding tools, including Coda9 and Espresso10, support snippets. But even if your coding environment of choice does not, you can use a text expander11 to add this functionality.

Also, there is no reason to create snippets yourself. Instead, you can reuse the snippets of others by using an online library. Two are WP-Snippets12 and CSS-Tricks Code Snippets13, but there are many more.

Like many HTML coding tools, Espresso lets you save snippets of reusable code.

In addition to traditional snippets, plug-ins such as Zen Coding14 create a lot of code in a few keystrokes.

Of course, knowing about snippets is not enough. You have to take the time to learn them and then make a habit of using them. Many developers are aware of all of the options above and yet are always “too busy” to use them. That said, many developers are the kings of recycling, and you can learn a lot from them, whether you are a coder or even a designer.

Designers Can Recycle, Too

Most Web designers also code and so can use the tips suggested here. But they can recycle in other areas, too. Endlessly repeating the same action, whatever it is, wastes a lot of time.

Recycling Actions

Designers waste many hours laboriously resizing and reformatting images. And what about the time wasted saving titles as images? In fact, automating many of these tasks is entirely possible and can save the designer a huge amount of time and reduce the risk of repetitive strain injury.

Adobe Photoshop has some excellent tools for handling repetitive tasks. These “actions” are easy to build and can save hours in the long run.

Even if you do not use Adobe Photoshop, there are other ways to create macros to handle repetitive tasks in most applications. Once again, the problem is not the tools we use, but rather in taking the time to set them up properly.

Grid systems are another area where a little effort in recycling returns significant time savings.

Using the Same Grid

Anybody who understands basic design principles knows how important a solid grid is. It also makes building a website a lot easier. Unfortunately, many designers approach the grid afresh every time they begin a project. Instead, look for ways to reuse a grid structure from website to website. This is not to say that we should use the same number of columns on every website, but rather that we should have an underlying system with which to work.

Having a consistent starting point will help you overcome the “blank canvas” problem and will also speed up the build process.

The 960 Grid System (960.gs) is a perfect example of a grid structure that is reusable from one project to the next. It works well because it can be divided into a variety of column configurations, suiting most projects.

960.gs16 demonstrates how the same grid can produce very different designs.

Designers also have opportunities to recycle the work of others and even themselves.

Recycling Is Not Stealing

There is a myth among designers that every new design should be fundamentally unique. In reality, nothing is truly original. All great designers know that their work is inspired and informed by design principles and by their own work or that of their peers. Think for a moment how many designs have been either cast aside as being inappropriate for the project or rejected by the client. This is an enormous waste of effort.

When appropriate, nothing is wrong with reusing old elements in new projects. Moreover, we should not feel ashamed for drawing inspiration from designs we have seen elsewhere.

I would urge every designer to keep a library of inspiration, including both their own work and the work of people they admire. Of course, we must be careful not to spend too much time obsessing over our inspirational libraries. Eventually, we need to stop thinking about our designs and just start producing them17.

I find Evernote18 an excellent tool for collecting bits of inspiration.

Speaking of clients who reject designs, there is also an opportunity to recycle the arguments that we put forth to justify our work.

Recycling Our Arguments

As Web designers, we all know that the same comments come up time and again when speaking with our clients, everything from “Make my logo bigger” to “Why is there so much white space?”

Despite knowing that these issues will come up repeatedly, we do nothing to pre-empt them and so waste time covering the same ground.

21Producing documents that tackle recurring issues (such as progressive enhancement, covered here) saves time in the long run.

The last area in which designers can recycle is with design assets.

Reusing Your Design Assets

We have already talked about reusing grid structures. But reusing other design assets is also possible. Images, icons, color palettes and typography are a few examples. All we need to do is organize them so that we can find the relevant asset for a particular project.

Do you tag your library of images according to mood, color and other keywords to make it easy to see whether anything can be used in a given project? Do you have a library of images that you’ve purchased?

By tagging your assets, finding ones to reuse becomes easier.

Also, is there any reason you cannot use the same icon set in multiple projects? This can save the time wasted searching for new icons and the money for purchasing them.

If you are reading this post, chances are you are either a designer or developer. But you’re probably also a website owner. There are significant recycling opportunities for this group, too.

Not Forgetting The Website Owners

Those of us who own websites are some of the worst recyclers. But we have two superb opportunities to simplify our lives. Whether you run a personal blog or a large corporate website, a bit of recycling goes a long way.

The area that offers the most possibilities is content.

Recycling Content

Whether you’re a humble freelancer or part of a large corporation, you produce content all the time, whether it’s an email about your latest work or a corporate announcement. There is potential to recycle every piece of content we produce.

There are interesting nuggets of information in what we produce that others may find useful and could be recycled on our websites.

Let’s say you respond to an emailed question about mobile websites. Instead of leaving the answer trapped in the email, with a little recycling, you can repurpose it into a blog post that everyone would find useful. The same is true for presentations, internal papers and even informal chats with colleagues.

22Many of the presentations I give began life in another format, such as a blog post or even a tweet.

We should also consider content that has already been published online. Try updating and reposting old articles. Text on your website that explains your unique selling points might be better represented in video. Repurpose Twitter conversations with customers into frequently asked questions.

The opportunities to recycle content are endless if we only open our eyes to the possibilities. And nowhere is this clearer than with email.

Email and Answering User Queries

Whether your website is big or small, you will find yourself answering the same types of inquiries. This repetition is not only time-consuming, but frustrating.

I for one get asked the same questions again and again:

Can I advertise on your website?

How do I start in Web design?

What books do you recommend?

Can I book a consultancy clinic?

The list goes on, and despite blogging on these issues and even having offered an FAQ section at one point, I still get the same questions.

You can save time by having stock answers to these questions ready to copy and paste. Taking a few seconds to store the answers will save you time later on.

23TextExpander is one of many tools that enable you to easily reuse answers to common questions.

Make your life easier by storing your answers in a text expander, such as the one above. Simply typing a few characters will give you a comprehensive answer that addresses all of the key points.

Recycling Does More Than Save The Planet

As I said at the beginning of this post, recycling is not just about saving the planet. It’s about saving time, money and, most of all, your sanity. By taking the time to find shortcuts and work smarter, you make your job more enjoyable and end up working less.

I like to think of myself as a bit of a recycling ninja, but I know there is always more to learn. I am sure you guys have identified some great recycling tips that enable you — in the words of my developer friend — to be lazy. I would love to learn them, too, so please share them in the comments below.

Related Articles

Jason Gross

I have always valued processes that can save me time without sacrificing quality in my work. It’s not surprising that most of Paul’s suggestions fit this bill quite comfortably.

Of course there are more things we can do to save time in our every day processes.

Designers can use the Styles palette in Photoshop very much in the same way developers use classes or variables in code.

When adding some character to a layer in Photoshop think of how you might be able to execute the look you want with layer effects. This way you can quickly copy and paste this look anywhere you need it in your design.

Do you have your invoices, proposals and estimates all set up as easy-to-edit templates? We can spend a lot of time doing paperwork for our current or prospective clients.

Treatment of specific elements can be carried from one design to another without creating the feel of repetition or being cheap. For example the style of a well designed input or search field will carry weight in a lot of designs.

Sarah

Snippets are a great time saver. Although would only recommend them when you know the code otherwise you will never learn. Anyone know anywhere you can download snippet packs for Dreamweaver? I use to use Coda and you could get all sorts.

Ethan Hackett

After having spent many years as a web developer and working with a lot of students out of school as interns, fellow employes and friends I’ve noticed they don’t have a good system for appropriating code.

They should have a class called “how to learn” which teaches you how to google new technology or terms, investigate code and ripping live sites etc.

I took 1 basic html class and everything else I’ve learned has been from investigation and utilizing existing code. It’s a coding is a conversation so why repeat yourself…

1

10

mike ilz

“For example, on a simple HTML website, you would have a CSS reset, a jQuery include and maybe some basic print and IE6 style sheets.”

yes..yes..yes..WHAT? We still care about IE6? Boo. Throw the IE6 stylesheet away and hope it looks horrible in that browser. If Google only supports the latest 3 versions of IE I think that should be the web standard.

Paul Boag

Personally I disagree with this. I believe the website should be usable in all browsers no matter how old. With most browsers pre-IE6 that is a matter of just delivering the underlying HTML. For Internet Explorer 6 it is easy enough to throw a basic stylesheet at it along the lines of the one proposed by Andy Clarke.

Wayn Hall

Great article Paul! I’m glad to see the mention of CodeIgniter. I agree with you 100%! You basically captured the reason that I combined HTML5 Boilerplate and CodeIgniter into IgniterPlate: the baseplate that I use to create websites.

Vladislav Melnik

lica

Hey Whooaa, wait up. How do you tag design assets? I like the interface in the screenshot, is that for internet only and what are you using? What are the ways that you can organize and tag the asset libraries I have on my computer?

I love the article, it’s just that the most interesting part for me, that of tagging and reusing design assets got brushed over too quick. I’d love to hear how ‘design recyclers’ are organizing their assets.

Anyone?

1

28

Marcus Lewis

I’m definitely a category 5 recycler. Every change i get I’m copying a pasting some code I’ve use before and tweaking it to fit my lately project. Definitely a time saver and every time you can find a better way to structure and code it. So it’s a plus on both ends.

SmashingConf isn't the eighth wonder of the world, but we are pretty close. Join us at SmashingConf Oxford on March 16–19 or meet us at the shores of Santa Monica for SmashingConf LA on April 27–30. You won't be disappointed.