BlogmyQuery – BMQ

This is not a normal Smashing Magazine post. I’m not going to teach you something new or inspire you with examples of great work. Instead, I want to encourage you to complete a Web design challenge. I believe this will help to address a weakness that exists in many of our design processes.

If you complete this challenge, it will make it easier for clients to sign off on your designs, and it will improve the quality of your work.

So, what are we waiting for? Let’s get started.

The Challenge

If you’re like me, you did some form of higher education in art and design and will know about “the crit.� These meetings involve the class coming together with tutors to analyze and provide constructive criticism on each other’s work.

These were terrifying meetings in which I justified my design approach and defended it against criticism. Although I hated every minute of them, I believe they nurtured one of the most useful skills I have as a Web designer.

The ability to logically justify our designs is a skill many of us lack. This is the heart of the challenge I wish to lay down.

My challenges is this:

Write a blog post justifying the design approach you took to one of your websites. Then, encourage other Web designers to provide feedback and ask questions.

Admittedly, this might sound like a lot of effort, so let me explain why it is worth your while.

Why This Challenge Is Worth Undertaking

As I said in a previous article, being a great designer is not enough. You can produce outstanding work and be the envy of your peers, and yet struggle to convince clients of your approach. The reason is that clients do not understand design the way your colleagues do. Therefore, you need to be able to articulate what makes your design right.

Our ability to justify our choices is crucial to our relationship with clients. Without it, clients will lack confidence in our abilities or, worse, feel excluded from the process. A lack of confidence leads to micro-management, and exclusion leads to frustration and resentment. Therefore, explaining our approach is vital.

However, it isn’t just about the client. It’s also about your personal development. If you don’t have a clear idea of what works, then improving will be difficult. Design critiques are as much about improving the quality of your work as justifying it to others.

Unfortunately, this requires that we overcome two barriers.

First, many of us don’t fully understand why we have designed a website a certain way. We design at a subconscious level, based on years of experience. When you have been driving for a while, you cease to think about the process of driving. Likewise, design decisions are often handled at a deeper level than the conscious mind.

Secondly, many designers haven’t had to justify their approach in the past. Either they haven’t gone through the rigorous critiques that I experienced in university or they don’t have the experience required to articulate their decisions.

It is for these reasons that this challenge is so valuable. By writing a blog post about a particular design and encouraging feedback, you move your decisions from the subconscious to the conscious level and gain valuable experience in articulating them.

Of course, knowing where to start such a challenge can be a challenge in itself.

Where To Start

If you are not used to thinking about design at a conscious level, then you might struggle to begin. While there is no right way to do this, I can share the approach that I use.

When discussing my design with others, I tend to look at the various components that make up the product. These usually are:

• Grid,
• Layout,
• Color,
• Typography,
• Imagery,
• Styling.

Ask yourself, why did you approach each of these elements the way that you did? Let’s consider each in turn.

Grid

Why did you use that particular grid structure on the website you are reviewing? Can you articulate your reasons for using a 12-column grid instead of a 16-column one? What about the margins and padding? If a client complained that there was too much white space between columns, would you have a response?

Another common issue is when you purposely break out of a grid. Was the choice intentional, with good reasoning, or just an impulsive decision? What would you say if the client asked about it?

The choice of grid might be based on the content or on the constraints of the style guide. It could have to do with making the website work on mobile devices or with allowing flexibility for future changes. Whatever the reason, you need to be able to clearly articulate them to yourself and the client.

Are we selecting a particular grid because it is right for the website or just because we have fallen into the habit? We need to be able to justify our approach to our clients and ourselves.

Layout

Layout and grid might sound the same, but they’re not. By layout, I am referring to white space and the placement of elements on the page. These are often points of conflict between the designer and client, so being able to explain your approach is important. For example, how would you justify all of the white space that Google has chosen to use on its home page?

Why did you leave so much white space on the page? Was it to draw the user’s eye to a particular element, or perhaps to improve readability?

What about the positioning of elements? Why is the search box in the top-right corner? Is it because this is the convention and people look for it there, or perhaps because you wanted to associate it with other elements that are in proximity?

Color

Color is probably the most controversial of subjects, and so we need to understand our motivation. I tend to approach color selection in one of four ways:

1. Corporate branding guidelines
   The palette has been defined by the guidelines, and I work within these constraints.
2. Theory
   I use a tool such as Kuler, which produces a palette based on established theory.
3. Emotional response
   The extensive research done on people’s responses to colors informs my palette.
4. Main image
   If the website has a dominant image that has already been approved by the client, I use it as the basis for the color palette. There are great tools for extracting color palettes from images.

Adobe Kuler is just one of many tools that help you apply color theory to your palette selection.

By explaining your choices in these objective terms, you prevent color from becoming a matter of personal preference and thus avoid conflict.

Typography

Something as seemingly simple as typography consists of many different decisions. These decisions extend far beyond the selection of typeface and encompass line height, size, weight, kerning and much more.

With services like Fontdeck making so many fonts available to us, the need to understand and justify our choices is more important than ever.

You need to be able to speak confidently about your choices if you are to demonstrate your expertise and convey that what you do is a lot more complex than it might appear. Taking the time to explain the complexity behind your typographic decisions might sound boring, but it will impress. It will also force you to put more consideration into your choices.

Imagery

To many clients, imagery is merely about subject matter. But we know it is about much more. We select imagery based on the mood it sets, the colors it contains and even things such as the eye line of the person in the photograph.

We need to be able to articulate these decisions so that others recognize that you cannot easily substitute one image for another without significantly affecting the design.

Do you know why you selected one image over the thousands of others in your library? What made that image special? Can you explain this to yourself and the client? Was it really more than a “That’ll do� decision?

Styling

For me, styling refers to screen elements that are not directly content-related: buttons, links, call-out boxes and the plethora of other elements that need to be decided on.

How you style these elements can dramatically shape the feel of the website. From the chrome buttons on Apple’s website to the sketched buttons of Moredays, styling can make a huge difference.

Styling dramatically shapes the feel of your website. But can you justify why one approach is better than another?

Can you explain why your styling creates the right feel? Have you shown the client alternative approaches? Did the client sign off on moodboards, which set the style? If so, refer back to them when justifying your design.

Reference Material

In fact, whenever justifying a design, always refer to the material that has already been agreed upon. For example, if the client has signed off on moodboards, we should use these to justify our choice of typography (“I used the same typeface that we agreed on in the moodboarding stage�). We can also refer to the target audience, business objectives, branding guidelines and even previous comments by the client.

Reference material can be taken from farther afield, too. For example, when justifying your decision to ignore the fold, you can refer to research done by ClickTale. Citing research and experts is a great way to justify an approach.

But remember, being able to explain your design is only half of the objective in this challenge. The other half is about improving the quality of your work.

Improving Our Work

Getting into the habit of justifying your decisions will inevitably improve the quality of your designs. Instead of leaving it to the subconscious, the act of considering imagery, layout, typography and so on becomes a part of your conscious decision-making process.

The act of discussing your process refines it and makes you more efficient as a designer. For example, in carrying out the challenge, you will probably struggle to justify some of your design elements, elements that in hindsight would have been better left out or presented differently. This will inform your next website, and over time you will find that your designs become more refined, simpler and more effective.

So, What Are You Waiting For?

Smashing Magazine has a quite large readership and a remarkable community. We have an amazing opportunity to start talking about our work and providing each other with constructive criticism. Write a blog post on one of your designs, justifying your approach. Then link to it in the comments below. Encourage other people to provide feedback on your design, and take their criticism to heart. Finally, don’t forget to make comments and ask questions of other people who have posted their own work.

My hope is that this post will not only help us speak confidently about our designs and improve the quality of our work, but encourage a dialogue about the design process. We are good at showing off our products but bad at explaining how we came up with them. As a community, we could benefit from more discussion about the process itself, rather than endless inspiration galleries.

(al) (il)

© Paul Boag for Smashing Magazine, 2011.

Have you ever wanted to take a client by the collar, shake them around vigorously and demand that they take you seriously because you are the expert? If so, you are not alone. Whether you consider yourself an expert and want recognition or are looking to one day become one, you need to step back and ask why being perceived in that way is important.

Why We All Want To Be Seen As An Expert

Many of us desire to be seen as experts because we would like our opinions to be taken seriously. Others want to be respected and valued, partly to satisfy our own ego, but largely due to a belief that we know best and that things should be done our way.

However, as we will see later, being an expert is more than about getting people to listen. If that is all you can manage, then they will see through this shallow desire and not give you the status that you believe you deserve.

Respect is not the only thing we expect from being regarded as an expert. Many of us also think that we would be able to charge more and that people will line up to hire us. Unfortunately, that is not always the case. Many experts are largely unknown, even within their field, and do not demand high salaries. Being an unheard-of expert is of little value to your career.

In spite of all this, being perceived as an expert can be helpful when working with clients, and it does create the potential to attract better-quality work.

What, then, does it take to become an expert?

What Does It Take To Become An Expert?

In his book Outliers, Malcolm Gladwell suggests that becoming an expert in any particular field takes approximately 10,000 hours of practice. For most full-time Web designers, this equates to almost four years’ worth of work.

I find this figure of 10,000 hours dubious. While I can see how this would apply to something like playing a musical instrument or a sport, I am not sure it applies to a field as diverse as Web design. 10,000 hours of Photoshop experience, for example, would not make you an expert in Web design. At most, you would be a Photoshop expert.

That said, Gladwell’s claim is right in one respect. To become an expert, you need time and experience.

Many people claim to be experts, but only few invest thousands of hours of work to become one. Image by Brett Jordan.

Time and Experience

There can be no doubt that expertise only comes with time and perseverance. It does not happen overnight, and there are no shortcuts to achieving a high level of expertise. The longer you do the job, the more you’ll see and the less likely you’ll be surprised by new scenarios.

One could argue that things move so quickly in Web design that lessons learned four years ago do not apply today. But I’m not convinced that is the case. In my experience, although technology changes, people do not. The majority of unexpected issues that arise when developing a website relates either to human error or to some element of user experience. Also, years of experience will improve your ability to solve problems. Even if the challenges are new, the fact that you have tackled so many before makes you more proficient at overcoming problems. Your methodologies and processes make you better equipped. Therefore, lessons learned years ago still stand today.

Obsessive Passion

I’m not suggesting that only experience matters. For instance, I don’t believe you should require a certain number of years of experience when employing somebody. Instead, look for a desire to learn, an ability to work in your company’s culture and, most of all, passion.

I began my career working at IBM and can attest that years served is not a reflection of expertise. Too many of the people I worked with coasted through the years with no passion for their work. Without passion, they had no desire to learn new things or push boundaries.

I believe that an almost obsessive passion for Web design is required to be a true expert.

In addition, my colleagues at IBM never took risks. Experimenting and making mistakes are crucial if experts are to establish their credibility.

The Importance Of Making Mistakes

At the heart of being a true expert lies one universal truth: you need to be willing to make mistakes, and a lot of them.

Unfortunately, we don’t live in a culture that celebrates failure. We want winners, people who succeed. But success comes down not to inspiration, but perspiration. Winston Churchill put it best:

Success is going from failure to failure with no loss of enthusiasm.

Succeeding in your chosen career and becoming a true expert requires that you fail not just once or twice, but again and again.

Failure is a crucial part of the journey to becoming an expert. As Charles Willson once said:

The definition of an expert is someone who knows what not to do.

Without failure, we cannot hope to learn the best way to do things. Although learning from the failures of others is possible, nothing beats experiencing failure first-hand.

We need to overcome our aversion of failure. We should go as far as celebrating it. Being willing to fail is a sign of maturity, bravery and a desire to do better.

Most importantly, we need to learn to face our failures. When a project goes wrong, people tend to react in one of two ways. Some of us carry on regardless, denying the issue. We pour good money and effort after bad. Knowing when to let go is so important. The others get rid of the problem as quickly as possible and pretend it never happened. But this route means that you will never learn from your mistakes. We need to take time at the end of a disastrous project to review where things went wrong and learn from it. This path can be a hard, especially when you have to deal with an unhappy client.

Those who are never seen to fail are either too timid to try, for fear of public ridicule, or simply do not desire success enough to endure the sting of failure.

You may be concerned that public failure undermines the perception of you as an expert. Although this is certainly a possibility, the public’s perception of you is shaped by more than whether you succeed or fail at a particular endeavour.

How To Ensure You Are Perceived As An Expert

Being an expert though never being appreciated as such is possible. Being knowledgeable is not enough; one also needs to be recognized for that knowledge.

This is a common problem and one you may be experiencing. You have done your 10,000 hours, made mistakes and learned your lessons. Nevertheless, your clients or boss fail to recognize the knowledge and experience you have accumulated.

How do you convince them that you are an expert and that they should take your opinion seriously?

Show Some Humility

The first step to being recognized as an expert is to stop insisting that you are one. People who are generally regarded as experts are often the last to call themselves one. In fact, they often go to great lengths to point out the limitations of their knowledge and to encourage others not to take their opinion as gospel.

People are suspicious of those who claim to be experts. Allow your knowledge to speak for itself, rather than insisting that people pay attention. But while saying that you are an expert is not wise, you could imply it in a number of ways. One of the most powerful ways is context.

Use Context to Your Advantage

If you took some modern art out of a gallery and hung it in a primary school, it could be mistaken for children’s painting. This is because context influences how it is perceived. The same is true with expertise.

Witness how managers take the opinions of consultants more seriously than their staff, even if both are saying the same thing. Consultants are paid more, and so their opinions are more highly valued.

You might not have much room to change your rate; nonetheless, you can change your context so that people value you more highly.

Like a work of art in a gallery, your expertise will be recognized if it is experienced in the right context. For example, people will give your comments more weight if you are standing on a conference stage than if you are in a pub. Likewise, your expertise will be taken more seriously if it is read in a book than shared around a conference-room table.

I often get mistaken for an expert simply because I stand on stage. Photo by Marc Thiele.

Getting a speaking engagement or a book deal requires that you first convince someone of your expertise. Conference organizers and publishers act as guardians of quality, and if these guardians have approved you, then people will assume you know what you’re talking about.

Not all of us can secure book deals and speaking slots. In this case, self-publishing, podcasting, blogging and participating in open-source projects are just a few alternatives. Standing out as an expert is easier than you think.

Not that context is everything. It’s also about what you say and how you say it.

Style and Substance

Another reason that books, presentations, blogs and podcasts are more effective than mere conversations could be that the arguments in them are better structured and more thoughtful.

How you articulate yourself is critical. While something might seem obvious to you, it is not always clear to others, particularly if the issue is recurring. When a client asks you to make their logo bigger or to fill up white space that you have so carefully crafted, being dismissive and irritable is easy because you have heard the request so many times before. Rather, carefully structure your response so that it is as convincing as possible.

That said, it is not just about substance, but also the style in which you present your arguments. An expert should speak with a quiet confidence. The truly great have little to prove, and so talk with a certain presence and authority. They don’t get flustered when someone disagrees with them. Instead, they seamlessly switch to a different approach.

If you want to be perceived as an expert, know yourself, be relaxed and present with confidence.

Unfortunately, problems will arise if the other party in the relationship already has certain preconceptions.

Overcoming Prejudices

Establishing yourself as an expert with your current boss or client can be a challenge. When you are seen as a junior member of the staff, their opinion won’t change overnight. Fortunately, you can do a couple of things to help shift that perception.

First, present evidence to support your positions. If your boss is worried about content being below the fold, show them a report on scrolling behavior.

Quoting research such as this report on scrolling can increase your credibility.

Secondly, quote established experts who support your case. Jakob Nielsen, for one, has written extensively on the topic of scrolling.

These techniques have benefits beyond just supporting your argument. They also demonstrate how well read you are in your field. Also, by demonstrating that your position is in line with that of other experts, you build your credibility by way of association. Their expertise rubs off on you!

Unfortunately, there is no quick way to overcome biases. This is hard for those who work regularly with the same people. But over time, by consistently demonstrating your expertise and using the techniques mentioned above, you can change their view.

With Great Power Comes Great Responsibility

The focus of this article is on becoming an expert. But before concluding, I want to say a word about what happens when you finally achieve your aim.

Once you gain the respect of your clients, boss or peers, what next? Becoming an expert has to be about more than having an ego trip. Rather, it should always be about serving others. You become an expert so that you can do a better job for your clients, provide more value to your organization and help others establish best practice in your industry. Ultimately, if all you want is to be loved and respected, you will never achieve your aim. People can detect that kind of narcissism a mile away and will dismiss you as vain.

That said, being taken seriously is important in our line of work. If we are not taken seriously, then good websites can go bad. I am sure you will share in the comments stories of how Web projects have gone wrong because people didn’t listen to you. But hearing some experiences of how you convinced bosses and clients to take you seriously would also be nice.

Cover image credit: Aural Asia

(al)

© Paul Boag for Smashing Magazine, 2011.

Are you fed up with hearing about yet another Silicon Valley Web application built with fairy dust and funded by magic pixies? If so, this post is for you. Most of us will never get to work on a Web application that is funded by venture capital and for which the business aims are a secondary consideration. For us, developing a Web application is about meeting a particular business need as part of our job working with some large organization.

Whether as an in-house developer or as part of an agency, we work under strict business constraints and with limited budget and time. Personally, I thrive on this. But it is challenging, so finding the right approach is crucial. In my time of working on Web applications for businesses, I have identified three secrets that seem to make things go a lot smoother:

1. Focus on user tasks and not features,
2. Don’t try to solve everything and
3. Ask the right questions early on.

Let’s begin by looking at user tasks:

Focus On User Tasks, Not Features

When you’re asked to build a Web application, you do exactly that: build a Web application. You have not been asked to solve a business problem, nor to make it easy for the user group to complete a particular task. Instead (at least in my experience), your job is to add certain features and build a specific type of application.

Unfortunately, this is a dangerous approach. By focusing on the application you are building, the emphasis is firmly on technology and functionality, not the users’ needs or the underlying problem to be solved.

Take a Step Back

A good development team will step back at the beginning of a project and look at the underlying issues that have led to the application being initiated.

• Spend time with those who will use the application. Observing how users complete the tasks you are trying to simplify is more enlightening than any specification document.
• Actually speaking to those who will be interacting with your application on a daily basis will create a much more effective solution than blindly following the directives of whoever commissioned the project.

Make User Testing Part of the Development Process

User testing is key to getting to know the user. Aim to test the application at least once a month throughout the entire development cycle. This does not need to be expensive or time-consuming. Rather, each session needs only three or four users and should be easily completed within a morning. This allows the entire development team to take part in these sessions and be involved in the debriefing, which can happen over lunch.

For more information on this “budget� approach to usability, I recommend Steve Krug’s latest book Rocket Surgery Made Easy.

When it comes to building Web applications for the business, task completion is king. Features merely exist to help users complete tasks.

Which brings me to the next secret…

Don’t Try To Solve Everything

If you fail to stay focused on user needs and business goals, things can get out of hand. These kinds of projects tend to suffer particularly badly from scope creep. Once people in your organization see the potential of the application, they will start suggesting ideas for new functionality. The problem is that with every new feature comes more complexity. This can ultimately undermine the effectiveness of the app. When developing a Web application, I urge our clients to start simple.

• Predicting how users will respond to your application can be hard, and a lot of time and money can be wasted building features that no one actually uses.

Monitor Your Key Performance Indicators

Once the simple application has launched, move into a phase of monitoring key performance indicators. This will help you judge the success of the app.

The indicators will vary between projects. However, establishing at the beginning of the process how the success of the app will be measured is important. Combined with user feedback, this monitoring provides a clearer picture of where you should go next. But be careful with user feedback.

Don’t Overreact to User Feedback

Users often react negatively to change. Learning a new system takes time, even if it ultimately is easier to use. Users will inevitably complain and make a plethora of suggestions.

Don’t react too quickly to these suggestions. Daniel Burka once told me from his time at Digg that they allow at least two weeks before reacting to user feedback. Allow users time to adjust to the application before making changes.

Users don’t like change, as Facebook has discovered.

But that is not an excuse for ignoring the opinions of users. In fact, you should carefully gather as much feedback as you can.

Sometimes Technology Is Not the Answer

Interestingly, many of the suggestions made by project stakeholders (not users) revolve around management issues, such as reporting, workflow and monitoring.

While these suggestions are sometimes valid, I have found that the simplest solution to these problems is usually managerial, not technical. For example, a number of clients have asked me for workflow functionality in their content management systems, so that documents cannot be published without approval from elsewhere in the organization. Of course, this is entirely possible to build. In fact, it comes standard in most content management systems.

But I usually wonder whether it would be easier just to tell content providers not to publish a document before it’s checked by someone else. Does this really need a technical solution when a simple policy would do the job?

If more features add more complexity, perhaps we should not solve every problem with a new feature. We could always add that functionality later if it really is required. Of course, that depends on whether the application is easy to expand.

Make It Expandable

Because our feature set is likely to change based on user feedback and business aims, building the application in anything but the most flexible way would be unwise, especially if we purposely haven’t added all of the intended functionality for launch.

Making an application flexible is obviously not easy. But if the application has a plug-in infrastructure from the beginning, then adapting it over time becomes easier. The trick is to recognize from the outset of the project that you do need flexibility. Which brings us to the next point:

Ask the Right Questions Early On

When building a Web application, nothing is worse than surprises. Make sure you have all the facts before beginning. Of course, you cannot know what you don’t know. But the trick is to know the right questions to ask before building. Too often, we focus on the wrong types of questions, such as:

• Will this application get internal approval?
• How will person X respond if we take this approach?
• Does this conform to our branding guidelines?
• How will this content be managed internally?

Focusing on these kinds of internal-facing questions may get the project approved faster, but it will lead to a far less effective application. In my experience, four particular questions, if neglected, will cause most problems in the development process:

1. What is the hosting environment?
   When dealing with complex Web applications, knowing the hosting environment is important. Without knowing the environment, you cannot replicate it exactly on your development server, which increases the risk of incompatibilities down the line.
2. How will users be authenticated?
   Most Web applications require users to identify themselves. Realizing late in the game that this authentication has to happen a particular way or be integrated with some legacy system creates all kinds of headaches. Many companies have a central user-authentication system, and your application will probably have to use it.
3. How will data be backed up?
   Web applications often hold valuable data, some of which is confidential. This means that having a solid back-up plan is both business-critical and potentially complicated. By considering from the outset how to handle back-ups, you keep this from becoming a serious problem later in the development process.
4. Is there any legacy data?
   Many new applications will replace existing systems that contain a lot of legacy data. Knowing exactly what this data is and having a plan in place to migrate it to the new system is important.

Learn From Your Mistakes

Every Web application presents unique challenges. Over time, though, you learn from your mistakes and discover the key issues. Whether it is focusing on users’ needs, keeping things simple or asking the right questions, these lessons will be invaluable going forward.

However, there is also an opportunity to learn from one another. Unfortunately, many development teams toil away in isolation within large organizations. Articles like this should stimulate discussion and encourage us to share our experiences — both good and bad — of working on these little-heard-of Web apps.

I hope you will take the time to share your experiences in the comments, so that we can come up with new best practice for developing Web applications in our businesses.

(al) (il)

© Paul Boag for Smashing Magazine, 2011.

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 Business,� 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.

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

Better still, you don’t even have to create these starting points from scratch. Projects such as HTML5 Starter Pack and HTML5 Boilerplate 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 jQuery to PHP Web application frameworks such as CodeIgniter.

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 Coda and Espresso, support snippets. But even if your coding environment of choice does not, you can use a text expander 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-Snippets and CSS-Tricks Code Snippets, 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 Coding 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.

Veerle’s blog 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.

960.gs 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 them.

I find Evernote 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 Design� and “Where Are My Rounded Corners?� I’ve been able to bypass many such laborious conversations.

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?

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.

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 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)

© Paul Boag for Smashing Magazine, 2011.

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 Business,� 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.

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

Better still, you don’t even have to create these starting points from scratch. Projects such as HTML5 Starter Pack and HTML5 Boilerplate 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 jQuery to PHP Web application frameworks such as CodeIgniter.

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 Coda and Espresso, support snippets. But even if your coding environment of choice does not, you can use a text expander 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-Snippets and CSS-Tricks Code Snippets, 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 Coding 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.

Veerle’s blog 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.

960.gs 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 them.

I find Evernote 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 Design� and “Where Are My Rounded Corners?� I’ve been able to bypass many such laborious conversations.

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?

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.

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 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)

© Paul Boag for Smashing Magazine, 2011.