Utilizing The Power Of Recycling In Web Design

Advertisement

Truth be told, I am a philistine. When people talk about recycling, I don’t think of saving the planet.

In my earlier post, “Lessons Learned: Productivity Tips For Running A Web Design Business1,” I wrote about how we can reuse and recycle what we do in the Web industry to save time and money.

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.

An photograph of an example function
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.

Eric Meyer’s CSS reset2
Eric 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.

The Codeigniter homepage8
CodeIgniter 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.

Espresso snippets
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.

An example of creating a new Photoshop Action
Veerle’s blog15 offers a great introduction to creating Photoshop actions.

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.

Examples of 960 grid being used to produce very different designs
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.

My inspiration gallery in Evernote
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.

A better solution is to discuss these concerns before they become major stumbling blocks. By sharing documents such as “10 Tips for Ensuring Better Site Design19” and “Where Are My Rounded Corners?20” I’ve been able to bypass many such laborious conversations.

Where are my rounded corners document21
Producing 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?

A library of images tagged for easy searching
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.

An example of a presentation I gave that originated as a blog post22
Many 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.

TextExpander website23
TextExpander 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.

(al) (il)

Footnotes

  1. 1 http://www.smashingmagazine.com/2011/07/20/lessons-learned-productivity-tips-for-running-a-web-design-business/
  2. 2 http://meyerweb.com/eric/tools/css/reset/
  3. 3 http://coding.smashingmagazine.com/2011/01/19/cleaning-up-the-mess-how-to-keep-your-coding-workflow-organized/
  4. 4 http://sickdesigner.com/resources/HTML5-starter-pack/
  5. 5 http://html5boilerplate.com/
  6. 6 http://jquery.com/
  7. 7 http://codeigniter.com/
  8. 8 http://codeigniter.com/
  9. 9 http://www.panic.com/coda/
  10. 10 http://macrabbit.com/espresso/
  11. 11 http://www.smilesoftware.com/TextExpander/
  12. 12 http://wp-snippets.com/
  13. 13 http://css-tricks.com/snippets/
  14. 14 http://code.google.com/p/zen-coding/
  15. 15 http://veerle-v2.duoh.com/blog/comments/creating_a_photoshop_action/
  16. 16 http://960.gs/
  17. 17 http://journal.drawar.com/d/stop-now-go-create/
  18. 18 http://www.evernote.com/
  19. 19 http://boagworld.com/business-strategy/10-tips-for-ensuring-a-better-site-design/
  20. 20 http://boagworld.com/design/where-are-my-rounded-corners/
  21. 21 http://boagworld.com/design/where-are-my-rounded-corners/
  22. 22 http://boagworld.com/talks/fight-the-system/
  23. 23 http://www.smilesoftware.com/TextExpander/

↑ Back to topShare on Twitter

Paul Boag has been working with the web since 1994. He is now co-founder of the web design agency Headscape, where he works closely with clients to establish their web strategy. Paul is a prolific writer having written the Website Owners Manual, Building Websites for Return on Investment, Client Centric Web Design, Digital Adaptation and numerous articles for publications such as .net magazine, Smashing Magazine and the Web Designers Depot. Paul also speaks extensively on various aspects of web design both at conferences across the world and on his award winning Web design podcast boagworld.

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

    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.

  2. 2

    Bradford Sherrill

    August 3, 2011 5:17 am

    aka templatizing

  3. 3

    More designers should start to use grids (960x preferable), I really don’t love to re-measure everything in every project.

    • 4

      Agreed, I am always surprised by the number of fellow designers that reject 960. It makes work easier and more structural for both as designers and the programmer.

  4. 5

    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.

  5. 6

    Pretty helpful post. There are a few dozen production design tools/techniques that I feel you should cover in your next post. A couple of links to get the ball rolling:

    http://help.adobe.com/en_US/Photoshop/11.0/WSA1E7602F-1D34-4ecf-B2FE-2BB344D6937Ca.html

    http://help.adobe.com/en_US/photoshop/cs/using/WSfd1234e1c4b69f30ea53e41001031ab64-7870a.html

    http://download.cnet.com/NameChanger/3000-2248_4-126364.html

  6. 7

    Christine Golden

    August 3, 2011 8:13 am

    Thanks. I hadn’t thought of content re-cycling. I will now.

  7. 8

    What a unique take on things. Building reusable classes is important. I prefer mooTools to jquery personally, but same idea. CodeIgniter is awesome too.

  8. 9

    Love it! It’s not that I’m lazy, i’m efficient.

    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…

  9. 10

    “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.

    • 11

      That’s quite a selfish way to look at doing your job.
      A good web developer should aim to give everyone the best online experience, otherwise you are only hurting yourself and your customers.

    • 12

      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.

    • 13

      I think all Paul is saying is that if you already have an IE6 stylesheet lying around that will make the website work in IE6, you might as well use it. It’s not requiring any extra effort.

      That is not to say that you should be spending significant time getting websites to work in IE6, I don’t think anybody needs to do that any more, since it now only has a 1/2% browser share.

      • 14

        Talking about IE 6, sometimes one solution is just show to the user that this browser is old and have security issues.

        Sometimes internet isnt the focus of that user and we can teach something and save time and money without thinking a lot about old browsers.

    • 15

      Unless there is no commercial aspect to the website then you simply cannot ignore IE6. A broken or even just a below par experience for users can cost you a lot of business.

  10. 16

    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.

  11. 17

    I have this my so called webdesign framework of mine, so I can save more time

    where I have folders of
    icons, fonts, scripts , snippets (via evernote) , vectors ,logo templates ,photoshop presets (brushes ,actions ,gradients, pattern, swatches, and layer styles) , stock images

    the only problem right now is I dont have time to organize it well ,specially when it comes to the stock images that I have

  12. 18

    That’s a great idea. It reminds me of inheritance. lol

  13. 19

    All great designers recycle design. It’s only recently that I’ve started to try and do the same.

  14. 20

    This is a great article with great content! I always thought that we could reuse some stuff and I recycle as much as I can, at home and at work :D

  15. 21

    Brilliant piece, i have always thought that each design should look unique, its a mantra, but the idea of reusing design just hit home.

  16. 22

    Here in Brazil we use an expression for this kind of programming: Kludge-oriented programming

  17. 23

    nice tool to open images fast in photoshop:
    https://addons.mozilla.org/en-US/firefox/addon/open-with-photoshop/

    Guide Guide for creating collums fast:
    http://www.cameronmcefee.com/guideguide/

  18. 24

    superb post
    that comes out of experience

    for me time savers

    NOTEPAD++ (and zen coding)
    http://notepad-plus-plus.org/
    http://code.google.com/p/zen-coding/

    SNIPPET BIN
    inserting my own snippets, blocks of code
    http://codecanyon.net/item/snippet-bin/409445

    BLUE PRINTER
    for automatic fast creation of web folder, file structure
    http://codecanyon.net/item/blueprinter/304021

    • 25

      Great post ,
      And i’m also using Snippet Bin, I like that there is finally a cheap program that can compete with textexpander but for windows. Zen coding also works great.

  19. 26

    Vladislav Melnik

    August 5, 2011 12:25 am

    Hey Paul,

    thank you, nice article!

    I love recycling in design!

  20. 27

    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?

  21. 28

    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.

  22. 29

    Good write-up Paul,
    I always urge my juniors to use reuse your work and make a startup kit of yourself to quickly kick start a new project. It may save you about 70% of routine work.

  23. 30

    Love this!!!

↑ Back to top