Newer posts are loading.
You are at the newest post.
Click here to check if anything new just came in.

January 27 2014


Getting The Most Out Of Your Web Conference Experience


To be a Web professional is to be a lifelong learner. The ever-changing landscape of our industry requires us to continually update and expand our knowledge so that our skills do not become outdated. One of the ways we can continue learning is by attending professional Web conferences. But with so many seemingly excellent events to choose from, how do you decide which is right for you?

During the course of my career, I have had the good fortune to attend a number of conferences, workshops and professional events. I am often asked by Web professionals who are preparing to attend their first conference how they can select the right one for their needs.

In this article, I will share the methods that I have found helpful in choosing high-quality conferences, as well as some tips to help you get the most out of the events you decide to attend.

What Are You Looking For?

The first step to finding a high-quality conference is to decide what you are looking for. Every conference is different. Some focus more on the technical aspects of our profession, while others offer a diverse set of presentations, some that are inspirational or even business-focused that complement ones about code and other technical topics.

Check out a list of Web design events taking place from January to June 2014.
Check out a list of Web design events taking place from January to June 2014. (Image credit:

Personally, I have always enjoyed conferences that feature a varied set of topics and speakers, but your needs may be different than mine. Furthermore, your needs may change throughout your career. If you have to learn a new technology, perhaps for a project you are working on, then an event focused on that particular topic might be exactly what you need at that point.

Once you have a general sense of what you are looking for in subject matter, the next step is to do some research.

Research The Sessions And Speakers

Start your research by visiting a conference’s website and reading about the sessions. I typically look for topics that I am already knowledgeable about, as well as areas that I know little to nothing about but would like to be introduced to.

In my experience, finding a conference that reinforces and expands skills that you already have while exposing you to aspects of the industry that you are not as familiar with will give you a more well-rounded experience than simply revisiting topics that you already count among your strengths.

If session titles and descriptions have yet to be posted, then you can get a feel for the topics to be covered by looking at the speakers listed for the event. Most speakers specialize in a particular area, such as CSS, usability or content strategy. A recognized expert in content strategy will likely speak about content strategy in some form, so by reviewing their individual website and learning more about their work and expertise, you will generally get a sense of what their session will be about.

This is important for small events, whose available spots are limited. These events often sell out quickly, before the exact nature of the sessions is even announced, so getting a feel for the content by researching the speakers might be the best way to come to a decision before tickets are all gone.

Conference notes
In addition to sessions, many conferences offer optional full- or half-day workshops, which typically focus on particular topics in much more detail than normal sessions. So, if you are looking to learn more about a topic, consider adding a workshop to your plans.


The sessions are an important factor in choosing the right conference, but they are not all you must consider. Cost is another critical aspect.

The cost of attending a professional conference can be significant. I have seen tickets range anywhere from a few hundred dollars for a one-day event to a few thousand for a week-long conference. Before you look for an event, determine a budget. Whether you are paying or your company is picking up the bill, knowing what you can afford will help to immediately narrow your options.

If your company is paying, you will likely need to explain the event’s value and justify the expense. Resources such as Smashing Magazine’s “8 Reasons Why You Should Send Your Incredibly Hard-Working, Deserving Employee to the Smashing Conference” can help you make your case. Other conferences offer similar resources to provide to the decision-makers in your organization from whom you will be seeking approval.


Timing is also important. Finding a conference that works with your schedule, including the timelines of your clients, projects and other obligations, is sometimes tricky. I typically try to book a conference well in advance, when my schedule for that period has yet to be filled. I then work my future appointments and project work around it. I find this easier than booking an event late and then squeezing it into what little free time I have left. Booking in advance also allows you to take advantage of early-bird pricing, as well as to avoid being disappointed by sold-out tickets.

Get Away If You Can

The last consideration is location. Ticket prices can be high, and travel expenses (including transportation, accommodation and meals), if the conference is outside of your area, adds significantly to the cost. Still, getting away can really improve the experience.

Traveling makes a conference more of a special occasion. It’s not a vacation, but it is a break from your normal routine. If you commute from home, then you’re more likely to treat the end of the day as the end of any other work day, skipping after-conference gatherings and activities (more on these shortly) which are the most valuable asset of every conference experience. Being away from home helps you to avoid falling into your normal routine and immerses you more fully in the event.

When figuring out your budget, factor in travel costs so that you can consider events away from home. This is not always practical, and you might be restricted to conferences in your city or nearby (if you are lucky enough to live next to a city that hosts professional Web conferences). But if you can find the budget to travel, seize the opportunity!

Prepare To Be Social

Web conferences open you to fresh ideas and approaches, while energizing and exciting you for work. Education and inspiration are not the only benefits, though. Socializing with your colleagues in the industry is an important part of the experience, too. And to truly realize this benefit, you must put yourself out there and be social.

Most events that I have attended over the years included meals for attendees — typically, breakfast and lunch. I always get to the venue early on the first day to grab some breakfast. As I enter the eating room, I look for people to join and introduce myself to. After introductions and some conversation, I’ll know a bit about them and have begun to make connections.

I repeat this process at lunch and every day of the event, finding new people to meet each time. Over the years, I have met some incredibly cool people, and I maintain contact with many of them — typically, through email and Twitter. These relationships have become extremely valuable to me, giving me peers to bounce ideas off, share new work with and turn to for help.

I remember a project from a few years ago in which a tricky bit of CSS was giving me problems. I tweeted the issue, asking for help. Within minutes, two fellow front-end developers whom I had met at separate conferences each replied to me with workable solutions. That is powerful, and it was the result of putting myself out there and being willing to meet new people.

In addition to meals, some conferences hold “jam sessions,” which encourage attendees to interact and present their findings to each other. This is another opportunity to be social, so don’t be shy! Get out there, meet new people, ask questions, share your experiences, and begin forming lasting, worthwhile relationships with others in the industry.

Party Time

Every conference I have been to included some kind of after-party. Absolutely take advantage of these opportunities. Sadly, many attendees decide to skip them.

As mentioned, if you are close to home, you’ll be tempted to blow off the after-parties and get back to your normal routine. Doing so, however, will rob you of another chance to meet interesting people and form worthwhile relationships. While I have certainly met great people at mealtime, upbeat after-parties have an even better atmosphere in which to connect with other professionals.

Some people I have met at parties have become not just professional contacts, but friends. I would not have made those connections had I decided to go back home or to my hotel room.

When going to a conference, be ready to socialize.
When going to a conference, be ready to socialize. (Image credit: Kris Krug)

Adjust your schedule to arrive early enough to enjoy breakfast and late enough to attend the after-parties. Have business cards on hand, and do not be afraid to ask others for their card or contact information.

This doesn’t mean turning the event into a pure networking session, where all you do is gather cards and email addresses. But if you meet someone whom you enjoy speaking with, ask for their card and reach out to them after the event. Remember, socializing and networking are as important as learning and being inspired, so put yourself out there and make some connections!

Leave Work At Work

To get the most out of a conference, focus on the event itself and put work aside for a bit. This can be challenging, especially if you are a freelancer with no one back at the office to cover for you. But focusing on a presentation or conversation is hard when your attention is on the current work project open on your laptop.

For years, I would bring projects with me to conferences to stay on top of the workload. Even if I wasn’t working on a project, I would have my laptop or tablet ready to reply to all emails and would remain constantly available to clients and colleagues. After a while, I realized that I often focused more on my device than on the presenters. That is a problem, and I realized that I needed to make a change.

For the last few conferences I have attended, I have left my computer in my bag during sessions. No working on projects. No checking email. I just focus on the presentation. I instead use breaks between sessions or time after lunch to quickly respond to any critical emails, leaving less important communication for when I return to the office.

Even doing so, I am careful not to cut into the conference’s social time, and I restrict myself to a few minutes to handle issues that simply cannot wait. In fact, very few emails I get fall into this category, so there really is no need to rush to reply at the expense of the conference experience.

Actually some of the best conferences my colleagues have attended are the ones that have no Wi-Fi at all, using it as a feature rather than a shortcoming. This way attendees are encouraged to be more active at the event and engage into conversations happening during the conference days. The only issue is that if you travel from abroad, you can’t follow conversations on Twitter. But quite often you’ll find out that you’ll need a SIM-card with some data anyway (for the party or finding directions), and that’s perfectly enough for minor tasks anyway.

You decided to attend the conference for a reason, and it was not to catch up on work. Break away from that job for a while, as hard as it is. Even if you think you can juggle work and the conference, put away the computer and concentrate on the presenters. You will find, as I did, that you get so much more out of the presentations and conversations between presentations (which are at least as important).

Take Notes

Taking notes seems obvious, but how you take notes makes a big difference. I used to use my tablet, but now that it’s tucked away during presentations, I can no longer use it to take notes. Instead, I’ve gone low tech and started using good old fashioned paper and pen.

Once I began using a notepad, I found that my notes make more sense to me and that I retain much more. The combination of focusing on the session and writing down notes and my thoughts really help the content sink in. I also find myself taking more notes than before (likely because I’m paying closer attention) and getting more out of each presentation as a whole.

The notes will help you absorb the content and regroup once the conference is finished.
The notes will help you absorb the content and regroup once the conference is finished. (Image credit: chungholeung)

Similarly, I have spoken with a number of fellow designers who enjoy “sketchnoting” at events and who report similar results. By taking down notes on paper — in their case, very creatively — they absorb and retain more from the sessions. So, pack a notepad and pen, and prepare to go old school with your note-taking!

Regroup, Reflect And Share

Feeling overwhelmed by work when you return to the office is normal, especially if you have taken my advice and left work at work during the conference. Getting back in the swing of things can quickly push the conference to the back of your mind, so you need a process to bring it to the forefront.

As soon as I get back to the office, before even checking my backlog of email, I download any session materials that conference presenters have made available. I also schedule a few hours, no later than a week after having returned, to sit down with other members of my team to discuss what I took away from the event.

With the slides and my notes on hand, I teach others in my organization what I learned. Explaining the content to others reinforces what I have learned and ensures that it sticks with me long after.

Be sure to schedule some time to review what you have learned. Even if you do not have colleagues to share with, download the session material and review your notes to make sure that the lessons are not soon forgotten. You could also organize or attend a local meeting with other Web professionals in your area to share what you’ve learned. You can use tools like Meetup to find or initiate meetings in your area.

Take A Break

Look at a handful of Web conferences and you will likely see the same presenters at many of them. Some might even give the same presentation at multiple events. This makes sense. Different events have different audiences, so to reach the most people and get the most mileage from their heavy preparation, speakers will often take their presentation on the road to multiple events.

The problem is that if you attend several events in a short span of time, you will begin to see talks repeated or, at least, sessions that are very similar to ones you have attended. I went through a period of attending four or five conferences a year for about three years. Towards the end of that time, I found that the sessions were getting repetitive. I was seeing the same speakers year after year, and their presentations felt like little more than updates to what I had heard the year prior.

I spoke with other attendees at these conferences and noticed how excited they were by the material, as excited as I was when first introduced to it. The problem was that it was not new to me any longer. I was not getting much out of the conferences because there was too little new information to justify the expense, of both time and money. It was time for a break.

Bringing this back to where we began, first determine what you want to learn at an event. If the sessions offer mere updates to content you already know well, then skip the event, even if you have the time and budget.

Also, consider events that are very different from what you normally look for. Instead of a Web conference, look for something totally different, something that will expand your skill set or knowledge. That really is what it’s all about after all.

In Summary

Attending a professional Web conference can be a wonderful experience. To get the most out of it, remember these points:

  • Determine what you want to learn and your budget. This will narrow your options.
  • Research sessions and speakers to get a feel for what will be covered.
  • If you have the budget, consider traveling to get the most out of the event.
  • Prepare to be social and to meet others in your industry. Attend all meetups and after-parties and exchange contact information to form lasting relationships.
  • Concentrate on the presenters, not your computer. Leave work at work, and focus on what you came for.
  • By taking notes with pen and paper, you will absorb and retain more and get more from your notes.
  • Afterwards, schedule time to review what you have learned, and, if possible, share it with others in your organization or area.
  • Take a break from conferences if you find them becoming too repetitive. There is no point in attending a conference that you will get little out of.
  • Have fun. Conferences are a good time! Get ready to be educated and inspired, but also enjoy yourself!

(al, ea, vf, il)

© Jeremy Girard for Smashing Magazine, 2014.

January 14 2014


Editing Tips For Business Web Content


The Web is awash in content. A recent Moz article reports that 92,000 new articles are posted online every day. Companies are spending billions on content marketing to enhance credibility, build brand awareness and, especially of late, improve SEO.

Here is what Google has to say about content in its quality guidelines:

  • Make pages primarily for users, not for search engines.
  • Don’t deceive your users.
  • Avoid tricks intended to improve search engine rankings. A good rule of thumb is whether you’d feel comfortable explaining what you’ve done to a website that competes with you, or to a Google employee. Another useful test is to ask, “Does this help my users? Would I do this if search engines didn’t exist?
  • Think about what makes your website unique, valuable, or engaging. Make your website stand out from others in your field.

Google has always tried to reward great content with high rankings, but today, thanks to vast improvements in its algorithm, Google is better able to actually do it. Its content quality guidelines are perfectly aligned with what every writer and marketer should aspire to.

As A Designer, Why Should You Care About Content Quality?

  • Your brilliant designs will be wasted if they are filled with inferior content.
  • By developing the ability to evaluate content quality, you are able to provide constructive, difference-making input to other members of the creative team, increasing your value as a designer.
  • If you are in a project management role, you must know what needs to be fixed, improved and enhanced in the deliverable’s content.
  • Unless the content meets a high standard of quality, the finished product will undermine rather than enhance credibility, diminish rather than build brand awareness, and damage rather than improve search engine visibility.

Defining “quality content” is difficult. A useful approach is to look at the editing process, because editing is where content theory is translated into cold hard facts. You could argue forever with clients about what constitutes quality content on a theoretical level. But when you break down quality into its specific editorial components, theoretical arguments evaporate.

A sound editing process forces quality into content, no matter how ill-conceived or weakly written the content was in the beginning, assuming it was properly conceived and at least decently written to begin with.

The editing process is more important than most think. (Image credit: opensourceway)

This article examines several aspects of content editing. By reading it, you will learn:

  • how the editing process works for most forms of online business content, including website pages, infographics, landing pages, brochures, white papers and slide presentations;
  • what “big picture” issues and technical editing details to get right before publishing;
  • the different types of editing help you need, and where to find authoritative online resources for DIY editing.

Five Types Of Content Editing

There are various formulas for breaking down editing tasks. For business content, it helps to think about editing as having five specialties.

1. Substantive Editing

Substantive editors are mainly concerned with overall cohesion, clarity, accuracy and effectiveness. They look for incomplete or faulty arguments, unsupported assertions, inconsistencies or gaps in the logical flow of the content, and faithfulness to the assignment’s strategic goals.

2. Copyediting

Copyeditors are mainly concerned with style. Are sentences clear and concise? Is the tone consistent? Are the right words being used? Is the text free of jargon and obscure references? Does the copy adhere to rules of grammar, punctuation and style?

3. Fact-Checking

Fact-checkers are mainly concerned with informational accuracy. They make sure statistics and other quantitative information are stated fully and correctly. Fact-checking is often a research task, but in business writing, it also comes into play at the editing stage — with vitally important impact, as we will see in a moment.

4. SEO

SEO editing ensures that on-page content conforms to SEO best practices and follows the campaign’s on-page guidelines. SEO editing is typically done by a client’s internal or external SEO resource. The more the SEO resource is plugged into the creative process, the less artificial and stilted the optimized content will be.

5. Proofreading

Proofreaders are mainly concerned with technical precision. Different standards apply to different types of content; a list of authoritative editing resources appears at the end of this article.

Editing done here by Johanna Shapiro (View larger version)

If all of these editing tasks are done well, the final product will have the level of quality that readers and search engines desire. In terms of workflow, the editing process follows the order noted above, starting with substantive editing and ending with proofreading. However, as you might imagine, editing is not always linear; documents usually go back and forth between editors and writers as issues are fixed.

Editing Process FAQs

Effective editing is not only a matter of knowing what to do; it also requires an understanding of how to manage workflow and communication. Addressing these FAQs at the outset of your next project will help lay the groundwork for not only a better editing process, but a more enjoyable one.

Do I Need to Hire Five Editors?

No. A talented editor can cover a lot of the work at an acceptable level for most business content. That being said, the substantive editor must be familiar with the product, industry and audience in question, since the effectiveness of the content hinges on understanding the audience’s mindset and needs. The SEO editor must, of course, know SEO inside and out.

How Can I Get Copy Approved More Quickly?

Too much editing can be just as bad as not enough — some firms review and tweak for so long that the content is outdated by the time they approve it. The substantive editor or project manager is the best defence against perfectionism. They are best equipped to recognize when content should be deemed finished and to explain why to clients and team members.

How Much Editing Should the Writer Do?

I would love to hear from the Smashing Magazine community on this one, because it’s a thorny issue. Even writers with a firm grasp of grammar, style and technique submit substandard drafts due to time constraints or lack of familiarity with the subject matter. Competent writers learn as they go, reducing the editorial burden. For example, if a website project requires 60 pages of new content, have the writer start with 10 pages and then give them a careful copyedit and substantive edit. The edits may be numerous at this point, especially if the writer is new to the subject matter. If the next 10 pages come back vastly improved, then you’ll know the writer is catching on.

What If My Client Doesn’t Care About Editing?

Clients might not care about content editing as such, but they certainly care about public image, leads and orders. High-quality content impresses Google, which leads to more search engine visibility, which leads to more traffic and more business. High-quality content also reassures prospects, customers and stakeholders that the company is reliable and competent.

What’s the Best Way to Manage the Editing Process?

One person, generally the project manager or substantive editor, should coordinate all editorial functions and communication and make final decisions. Creative teams have many editing tools at their disposal, but using good old Track Changes and Comments in Word documents is perhaps the easiest way to start. A big challenge is preventing multiple versions of an in-process document from floating around; implement a clear procedure to avoid this. In my experience, the competence of the manager, rather than the tools, will determine the efficiency of the process.

Common Editing Issues

Let’s look at a few specific real-world issues that crop up in business Web copy for each type of editing. These particulars will give you an idea of what to look for if you are doing the editing or looking for an editor or managing the project.

Substantive Editing Issues

  • Here is an instructive, real-life example of how substantive editing produces clarity. In a recent article about writing for slide presentations, I wrote, “Slide presentations are great for a ‘peeling the onion’ narrative approach.” My editor commented, “What does that mean?” I pondered the issue and realized that I didn’t really know what I meant! After further reflection, I changed it to, “Slide presentations are ideal for storytelling.” Moral of the story: Substantive editors don’t always need to make sweeping changes. Often, just knowing what to look for helps to get it right.
  • Keeping content on point prevents content creep. Substantive editors remind clients that a landing page need not be a thousand words long to prompt a conversion, nor a website a thousand pages deep to convey the firm’s value proposition.
  • Substantive editors police all content to maintain consistency of brand messaging.
  • The company’s branding and positioning strategy, the value proposition of the product and service being marketed and the nature of the target audience will determine the content’s style and tone. The substantive editor must be crystal clear on all of them.
  • Building on the last point, a substantive editor — if time, budget and skill allow — injects personality into flat business content by adding storytelling narratives and stylistic flair that speak powerfully to the target audience.

When it comes to substantive editing, Duluth Trading Company’s website does this extraordinarily well.

Copyediting Issues

  • Headlines and headings should be descriptive and, in many cases, persuasive. Additionally, proper keyword placement in headlines and headings is important for SEO, so copyeditors and SEO editors must collaborate closely to balance these requirements.
  • Active voice usually beats passive voice: “John saved $100” has more impact than “$100 was saved by John.” There are cases where the passive voice is preferred; a competent copyeditor makes the proper adjustments.
  • Pronoun sensitivity leads writers to employ tortuous sentence construction to avoid “he” or “she” usage. Also, writers often shift from “it” to “they” when referring to a company. The copyeditor keeps pronoun use smooth and consistent.
  • The wrong word or phrase can do worse than make a company look stupid; it can convey a message contrary to the one intended. My list of commonly confused business words and phrases is a handy reference.
  • Overuse of exclamation points and all-caps conveys HYSTERIA!!!!
  • Copyeditors convert long unformatted paragraphs into Web-optimized formats that employ bullet points, three- to five-line paragraphs, judicious use of bold text, etc. This is an area where designers provide valuable input.

Fact-Checking Issues

  • Sadly, the Web is a stewpot of misinformation, cooked up by marketers who feel pressured to publish. For example, a reader might come across a flashy infographic stating, “70% of Executives Use Tablets!” but, after checking the source, discovers that this “fact” is based on a survey of 25 anonymous respondents conducted by an obscure agency. Fact-checkers protect you and your client from losing credibility as a result of shaky statistics.
  • Fact-checkers make sure that basic corporate information is correct. The company’s name, job titles and the spelling of employees’ names should always be accurate — yet often are not.
  • Fact-checkers review product specifications to make sure they are up to date. The value of this thankless task is appreciated only after, say, a customer orders a $1.5 million printing press that turns out to be 10 feet too long for its production line when it arrives at the plant.

SEO Issues

  • Overusing keyword phrases on a page of content is counterproductive.
  • Varying keyword phrases generally helps search engine visibility and makes content more readable and less “spammy” for humans.
  • An SEO editor might opt to add links to the client’s other relevant content on a given page of Web content or a blog post. If done correctly, these related links build the authority of the client’s website.

Proofreading Issues

  • One space after a period is standard.
  • Capitalization in headlines and headings should consistently follow a predetermined style.
  • Font size and style should be consistent for text and headers from page to page.

In Conclusion, How Much Editing Is Enough?

Practical considerations such as deadlines and bandwidth, along with a clear understanding of the audience, will influence how thoroughly a piece of online content should be edited.


Generally speaking, readers do not hold blog posts to the same stylistic standard as, say, white papers. However, a blog post directed at an audience of scholars, physicians or attorneys will be held to a higher standard.


Visual content such as infographics and slide presentations, perhaps because of their formality, seem to carry more weight with readers than blog posts and website pages. For this reason, producers of visual content have a greater obligation to be sure of their facts, all else being equal. Firms undermine their credibility when they publish graphical material loaded with unsupported or misleading facts, whether intentionally or not.


If a firm has an organized SEO marketing program, then on-page SEO is crucial. If not, on-page optimization alone would probably not be enough to have any substantive impact on search visibility.

Copyediting and Substantive Editing

As for these, there is never any advantage to publishing vague, incoherent and uninspiring material. Some level of review is really a must. If resources are limited, and often they are, use this editing tactic: When in doubt, leave it out.


  • AP Stylebook
    The AP (Associated Press) style is the standard for newspapers and journalists and is commonly used for marketing and PR content. An online subscription gives you instance access to authoritative information on editorial issues relating to general business content.
  • The Chicago Manual of Style
    The CMS, published by The University of Chicago, is widely used in the humanities for formatting and citation, and it contains a wealth of information, analysis and insight on issues of grammar and usage. Whereas AP primarily tells you what to do, the CMS also explains why.
  • MLA Handbook for Writers of Research Papers
    This style guide of the MLA (Modern Language Association) is widely used for academic writing.
  • Purdue OWL
    The Purdue OWL (Online Writing Lab) is a convenient online resource for grabbing up-to-date answers to CMS- and MLA-related questions.
  • New Oxford Style Manual
    This book contains detailed information on UK style. Oxford Dictionaries has helpful tables on British and American spelling and terms for online reference.
  • AMA Manual of Style
    The AMA (American Medical Association) guide is widely used for medical and scientific publishing.
  • Publication Manual of the American Psychological Association
    This manual is widely used for academic and professional writing in the social and behavioral sciences.

(al, il, ea)

© Brad Shorr for Smashing Magazine, 2014.

Sponsored post

December 20 2013


How to Rock Your Business Phone Calls

As a web designer, how do you feel about business phone calls?

Your answer probably depends on your personality. Some people love to talk on the phone. Others dread phone calls.

If you’re busy, an unexpected phone call can disrupt your day. If you’re a bit on the shy side, talking to a client on the phone may make you nervous.

Love them or hate them–business phone calls are an important part of running your web design business. That’s not going to change any time soon.


Fortunately, regardless of whether you love business phone calls or hate them, there are some steps you can take to make your business phone calls go more smoothly. In this post, I share five of those steps. If you liked this post, you’ll probably also like 5 Communication Tips for Freelancers and Designers.

Step 1: Schedule All Client Calls

Unexpected phone calls can be a real nuisance. Here are just some of the disadvantages of getting an unexpected phone call:

  • Interrupts your train of thought. Interruptions can cause you to make mistakes. They can cause you to skip steps in your development process. They can even cause stress. You can read more about the adverse affects of interruptions in the news story, Even Brief Interruptions Spawn Errors, published on ScienceDaily.
  • No time for preparation. Another reason unexpected phone calls can be bad is that you have no time to prepare. A client may call you out of the blue and ask a question that you really don’t have any answer for. Even worse, your lack of preparation may cause you to give a wrong or incomplete answer.
  • Can cause stress. For some of us, receiving a sudden call can be stressful. Not knowing what the client wants or whether they are upset can contribute to that stress. In some cases, an unexpected call on a busy day can lead to overtime or even a missed deadline.

These disadvantages are why I recommend that freelance web designers and other freelancers encourage clients to schedule a time to talk on the phone. Usually, email is adequate for scheduling calls, but if you handle a large volume of client phone calls, you may need to consider scheduling software like Bookeo or EZnetScheduler.

If a client really needs the ability to contact you whenever they want to and will not agree to schedule a phone call, you should charge an extra monthly fee for that convenience. After all, they are basically asking you to be “on call” for them.

Step 2: Be Prepared

Having your clients and prospects schedule their calls with you gives you a chance to prepare for the call.

When they schedule an appointment, ask them to give a brief overview of the purpose of the call. Here are some common reasons why clients and prospects request a phone call:

  • They want to discuss additional projects.
  • They need your professional advice.
  • They want technical support for a project.
  • They want to involve you in their company’s regular team meetings.

Knowing what the meeting is about gives you the chance to do your homework and present yourself and your web design business in a positive light. You’ll also discover what type of involvement you need to have in the meeting. For some meetings, such as a regular team meeting, you may only need to report your progress and identify any problems you have. For other meetings, such as when they want professional advice, you may need to conduct the meeting yourself.

Step 3: Use an Agenda


If you’re expected to conduct the meeting yourself, it’s a good idea to prepare an agenda. Your agenda doesn’t need to be anything formal. A simple outline is usually good enough.

Having an agenda keeps the meeting on track and reduces the amount of wasted time.

Once you’ve created your meeting agenda, it’s a good idea to send it to your client. If the client will have more than one person participating in the meeting, ask for the names of the other participants and send them the agenda as well.

Distributing the agenda in advance lets the client know what you think the meeting is about. It also gives them a chance to add a topic to the meeting if they see that you’re not covering everything they want to discuss.

Step 4: Listen Carefully

Listening is an important part of any relationship. The freelancer/client relationship is no exception.

In fact, if you do all of the talking on your phone call, something is wrong.

Here are some guidelines to help you pay attention to what your client or prospect is saying:

  • Take Notes. No matter how good your memory is, the odds of you accurately remembering everything that was discussed during the meeting is slim.
  • Ask Questions. Too many freelancers fail to ask questions when they don’t understand something the client says. It’s better to ask now than be sorry later.
  • Send out meeting minutes. I often send the meeting minutes to the client for their agreement. This is their chance to say, “I agree” or “I do not agree.

Remember, phone calls aren’t the only way to have a meeting with your non-local clients and prospects.

Step 5: Consider an Alternative to a Phone Call

A young couple talking to each other via online video chat.

Today’s technology offers many alternatives to the telephone when it comes to meeting with long-distance clients. Here are just a few of those alternatives:

  • Skype IM or Video Chat. In addition to providing the capability to make VOIP phone calls, Skype also gives you the option to instant message with your contacts or to have a video call.
  • Google Hangouts. Many freelancers don’t realize that you can schedule a private meeting using Google Hangouts for up to ten people.
  • Web Conferencing. In addition to the tools listed above, you can use a specialized web conferencing tool such as GoToMeeting and Cisco WebEx . One advantage of web conferencing is that many tools allow you to share visuals and even your computer screen with participants.

Your Turn

How do you manage phone calls? Do you schedule calls, or do you take them as they arrive?

November 14 2013


The Habits Of Successful New Web Professionals


Starting a position in an organization, especially if it is your first in the industry, can be as nerve-wracking as it is exciting. Practices that seem like common sense to those of us who have been in the Web industry for some time might not be as obvious to designers and developers without the benefit of our experience.

Part of our responsibility as veterans in this industry is to mentor new team members and share with them the knowledge that we know they will need to succeed.

The expert in anything was once a beginner.
As President Rutherford B. Hayes once said, “The expert in anything was once a beginner.” (Image source: opensourceway)

I recently published an article here on Smashing Magazine titled “Lessons Learned in Leading New Web Professionals.” As a follow-up to that piece, this one looks at the other side of the team leader-new employee dynamic. We’ll cover the practices that I have found are consistently followed by employees who excel in their new role and grow in this industry.

Embrace The Company’s Culture

Every company is different — with policies, procedures and a culture unique to it. While much attention is given to ensuring that new employees understand these policies and procedures, understanding and embracing the company’s culture is just as important to long-term success. One way to embrace a company’s culture is to get involved — both in and outside the office.

If your company is holding an event or activity for employees, make it a point to attend. It could be a full-blown company party or a small after-hours get-together of only a few employees. Either way, it provides an opportunity to socialize with your new colleagues and begin to build relationships with the people you work alongside.

In the office, look for projects that interest you and that you feel you can contribute positively to. These could be normal client engagements or even side projects driven by small teams in the organization. By asking to be included in these projects, you’ll get time to work hands on with your colleagues and show them the value you bring to the team.

Now, the challenge to participating in these activities is that new employees often feel like outsiders, and many are reluctant to join in on the company’s planned events. The irony, though, is that participating in these company events is one of the best ways to feel like part of the team and to break down that outsider status.

Respect The Client

Complaining about clients is a practice that has been around as long as clients themselves, but it has no place in the Web industry, whether you are a new professional or a seasoned veteran.

Clients can be challenging, but remember that when they stop calling you with questions or with work to be done, that is the day you no longer have a job. We are here because of our clients, not in spite of them.

Does this mean that the client is always right and that you should take whatever they dish out at you with a smile and a nod? Of course not. No one should ever suffer a client who disrespects them professionally or personally, but an abusive client who must be fired is very different from one who simply asks a lot of questions because they recognize that you are the expert. Yes, clients make poor decisions at times, and some of their questions will seem obvious or silly to you, but your answers and advice are why they hired you in the first place.

Respect clients — they keep you employed — and refrain from the bouts of unnecessary complaining that others in the organization might engage in. If others are complaining and trying to rope you in, politely excuse yourself. Nothing good will come of those negative conversations.

Ask Questions

As a new employee, you will undoubtedly have questions — a lot, in fact. That is OK. In fact, it is expected. You might feel like you are bothering others, but asking questions is how you learn and how “tribal knowledge” is passed from veterans in an organization to newcomers.

When you join, a company will likely give you some kind of orientation and show you the ropes, but only so much information can be conveyed in an orientation or in training. So much of what you will need to know is picked up on the job, by actually doing the work itself. When you hit a roadblock, look to others on the team for help. They will often have encountered the issue before and have set a precedent for dealing with it — the aforementioned tribal knowledge. Gaining that knowledge through experience and by asking questions is how you will grow in the organization.

It is OK to ask questions but be sure to try to solve the issue first
Asking questions enables you to learn and acquire team knowledge, but try to solve problems for yourself first. (Image source: Tim O’Brien)

Now, there is a balance to be struck. Throwing your hands in the air and yelling “Mayday!” every time you hit a bump in the road is too much. Try to solve a problem for yourself first, so that when you ask for help, you can show the person what you’ve tried so far. Over time, you will find the balance between exploring solutions on your own and asking for a hand.

Teach Me Something

I am constantly reading articles with new tips, techniques and best practices in our industry, and I spend many nights and weekends outside of normal office hours working to master these new techniques. When I discover an article or idea that I think is valuable, I always share it with the rest of my team. And I love it when others on the team return the favor.

When a new employee shares a worthwhile article or an approach that I had not considered, they demonstrate their passion and their dedication to growing in the industry. It also shows that they are willing not only to learn, but also to teach others.

Check Your Work

I appreciate when a team member completes a task quickly, but speed doesn’t trump accuracy. Too often, in an attempt to impress their manager, new team members will race through a task to show how efficient they are. They submit work before really going over it to make sure that all of the tasks have been completed correctly.

Checking your work before submitting it to a manager for review probably sounds like common sense, but it’s one of the biggest problems I hear about from other team leaders and managers. Work that is missing key elements or that has little errors (spelling mistakes are common) or whose functionality hasn’t been fully tested (broken links, forms that do not submit properly, etc.) are major headaches for many team leaders. A manager would rather the person finish the task a bit more slowly if the bulk of the errors could have been caught by a more thorough review.

Before you submit work as being complete, give it a once over to make sure that everything works as intended.

Mind The Clock

Web design is not a 9:00 to 5:00 job. Sometimes, inspiration or a breakthrough strikes at the end of the day. If you punch the clock exactly at 5:00, you could lose any momentum or spark of creativity you may have had, when instead you should nurture the moment. Other times, a deadline is looming that requires extra hours in the office. You need to accept that the day doesn’t always end at 5:00.

It goes both ways, though. An employee who is willing to stay late and put in extra effort when needed will be recognized and appreciated, but don’t stay at your desk 12 hours a day, only to go home and do more work there.

Working late every night will not allow you to properly balance work and life
Minding the clock means not working late every night. (Image source: abdallahh)

Minding the clock means balancing your professional and personal time. Don’t burn yourself out by trying to be a superhero who does nothing but work. The most successful colleagues I have worked with over the years have found and maintained a work-life balance.

Work On Your Communication Skills

Responding to questions and requests from clients can be a full-time job. In fact, on some days I feel like all I’ve done is answer emails. Managers want to be able to offload some communication responsibilities to others on the team — but they need to know that the communication will not suffer from a lack of skill.

Whether you are answering questions from clients, presenting design concepts in a meeting or brainstorming with colleagues, communicating your ideas in a way that meets your company’s expectations is important. This skill will increase your value to the team and set you up to take on more responsibility.

Join The Community

The Web community is amazing, and you can participate in it in a number of ways. Depending on where you live, you might have access to meetups, networking events, conferences and other gatherings. We all have opportunities to share our experience, knowledge and passion for this industry.

Participating in these events will make you feel like a part of the Web community, help you make connections with peers and reflect well on your company. With limited time to attend such events, leaders appreciate when other team members take the initiative to get out in the community and represent the company.

Stay Positive

This tip might sound easy to follow, but keeping a positive attitude and demeanor is more challenging than it seems.

As a new team member, you will undoubtedly have times when you are unsure of what to work on next or of how you are performing. This uncertainly can be stressful, and stress can eventually lead to a negative attitude. Fight the urge to give into that negativity — stay positive.

Saying that everything is easier with a positive attitude might sound like an oversimplification, but it’s not. A positive attitude makes challenges easier to face, and it encourages others to come to your aid. After all, no one is excited to work with someone with a negative attitude.

Have Fun

Many years ago, I had an employer who, whenever my job got stressful or challenging, would say, “Well, that’s why we pay you to be here. If it was fun, it wouldn’t be work!”

I don’t agree with this sentiment. Yes, most of us wouldn’t show up for work every day if a pay check wasn’t waiting for us at the end of the week. However, just because we have to work doesn’t mean we can’t enjoy where we work.

The most successful employees I have had the pleasure of working alongside over the years have enjoyed their job and where they work. Life is too short for anything else. So, have fun at your job — and if you can’t, consider getting another.

Staying positive and having fun at your job are two overlooked yet incredibly important elements of success.
Staying positive and having fun at your job are two overlooked yet incredibly important elements of success. (Image source: opensourceway)

In Summary

Joining an organization can be stressful. Hopefully, the tips presented here will help you make the most of the opportunity and relieve a bit of the stress. Here are the do’s and don’ts we’ve covered:

  • Do embrace the culture, and participate in company events.
  • Do not let the feeling of being a newbie keep you from participating in events.
  • Do not engage in pointless complaining about clients.
  • Do respect your clients and recognize that they are the reason you have a job.
  • Do not be afraid to ask questions; that’s how you learn.
  • Do try to solve problems on your own before asking for help.
  • Do share helpful or interesting articles that you come across.
  • Do not submit work before having checked it for accuracy.
  • Do strike a balance between your professional and personal time.
  • Do work on your communication skills, and understand what the company expects from your communication with clients.
  • Do look for opportunities to participate in your local Web community.
  • Do stay positive, even when you feel uncertain or stressed out.
  • Do have fun at your job and enjoy where you work.

What About You?

What habits of successful new team members would you add to the list? Feel free to share in the comments below.

(al, ea, il)

© Jeremy Girard for Smashing Magazine, 2013.

October 18 2013


Lessons Learned From Leading New Web Professionals


Over the course of my career, I have had the opportunity to lead various Web design and development teams, including a number of professionals fresh out of school. Along the way, I’ve made my share of mistakes and learned some valuable lessons.

Some new team members have jumped right in and begun contributing in a meaningful way almost immediately, and others have struggled to adjust to their new role because I failed as a leader and didn’t give them the tools they needed to succeed. One thing I’ve definitely learned is that the success of a new team member is determined not only by their own abilities and drive, but by the leadership on the team they are joining.

Recently, I was preparing to welcome a young new designer to our company. This position would be his first real experience working in our industry; so, prior to his start date, I decided to make a list of some of those lessons I’ve learned over the years as a way to remind myself of what I needed to do to make sure he had the resources needed to succeed here. As I wrote my list, I realized that many of these lessons were actually common sense — and yet, if my past experiences are any indication, these common-sense lessons are exactly the ones that are easy to neglect and that we often need to be reminded of.

Make Them Feel Welcome.

Joining a company can be an intimidating experience, especially if the company has a close-knit culture or the team has been together for some time — two factors that contribute to new employees feeling like outsiders. As a leader, you can make your new team member feel welcome by showing them, both in actions and in words, that they are absolutely now a member of the team.

If your website lists biographies and pictures of employees, make it a point to add the new team member’s information quickly. Even in organizations that have a “probationary period” to evaluate new hires, those employees should still be added to the website sooner than later. Having a presence on the website, alongside their colleagues, demonstrates to those new team members that they are a part of the group.

Adding a biography, as FreshTilledSoil does, shows a new employee that they are part of the group.

You can also use social media to welcome new employees to the organization. Welcoming them on Twitter (or in whatever social media you use) shows the new member that you are excited to have them on board. Your Twitter followers will sometimes chime in as well, echoing your welcome and adding to the warmth and positivity.

Finally, you can make new employees feel welcome by involving them in events and activities with other members of the company. This doesn’t have to be elaborate — a simple lunch is a great way to get out of the office for a bit and to interact as more than coworkers. By including new hires in the lunch party, you give them a chance to socialize with others and to feel like more than the “new person.”

Make Time For Regular Meetings.

This lesson is certainly “common sense,” but also one that I, admittedly, find myself failing to follow most frequently.

It is easy to get caught up in projects and other responsibilities and overlook that new employees, especially those new to the industry, need a lot of guidance early on. I try to meet daily with new team members for at least their first few weeks at the company. These meetings do not need to be lengthy — in fact, most are 10 minutes or less — but they provide an outlet for the employee to ask questions without feeling like they are interrupting an activity. Because these meetings are scheduled in advance, the person knows that time has been allotted to their questions; this is important because, even if you have an open-door policy and encourage new team members to come to you with questions, they will be reluctant to “bother” you. You can alleviate this concern with regular meetings.

Without fail, whenever my schedule gets crazy and I start skipping these regular meetings, I notice that the stress level of my team rises accordingly. These meetings not only give new employees an outlet to ask questions, but give me an opportunity to let them know what is expected of them and how they are doing. This open dialogue is essential as the person adjusts to their role in the company.

Of all the lessons on this list, this one is undoubtedly the easiest to let slip — but also the one with the worst consequences if allowed to go too far.

Meetings are essentials for new employees who will need lots of guidance early on. Image courtesy of flickr/dennis crowley
Meetings are essential for new employees, who will need a lot of guidance early on. (Image: Dennis Crowley)

Assure Them That Failure Is An Option.

No one wants to fail at a task, least of all a new employee who is trying to make a good impression. But, as Seth Godin so perfectly stated in a recent interview with Kara Miller on NPR’s Innovation Hub:

“If failure is not an option, then neither is success.”

New employees need to know that making mistakes is OK. If failure is not an option, then you will become crippled from trying to get everything right the first time. Anyone who has worked on the Web knows that trial and error is essential to the job. New employees need to be assured that failure will not be held against them.

Of course, a balance must be struck here. While failure is acceptable, it must yield a better understanding of the problem and an eventual solution. Failure is a means to finding a solution. So, while new team members should know that failure is an option, they should also know to use each failure to propel themselves to an eventual success.

Mistakes are a part of the job - as long as you learn from those mistakes. Image courtesy of flickr/ktpupp
Mistakes are a part of the job – as long as you learn from those mistakes. (Image: ktpupp)

Encourage Them To Contribute.

I once had a manager who felt that if you attended a meeting, you had to contribute to the meeting. He would often call randomly on attendees who had yet to contribute to a meeting and ask, “What do you think of this?” as a way to involve them in the conversation.

While I understood his reasoning, his execution left a lot to be desired. Too often, individuals would be called upon and would struggle to come up with an answer to a question that they really weren’t prepared to speak about. It put people on edge as they waited their turn. Sometimes, attendees would even rush to contribute early in a meeting so that they wouldn’t be called out later. This rush to participate usually added a lot of extra words but very little value to the conversation.

Instead of putting new employees in the hot seat, I try to find other ways to make them comfortable with speaking in front of our group. One way, when conducting design reviews, is to ask a new designer to present their work to the team, alerting them well before the meeting so that they can prepare a short presentation. Furthermore, because everyone is commenting on each other’s designs and offering constructive feedback, new employees feel comfortable speaking up and offering their own comments. This is an excellent way to help them speak more frequently in front of other team members and clients and to engage in other types of meetings.

Keep Them Busy.

You’ve probably hired the new person because your company is busy and there is work to be done. That’s great, because keeping new team members busy is critical.

Long-time employees will undoubtedly have built relationships with certain clients over time. Many of those clients will prefer to communicate with these employees than with a manager or salesperson. This is perfectly fine, as long as your company has a system in place to properly estimate, carry out and invoice this work. These client relationships can keep employees busy with new work.

Additionally, some long-time employees work on internal projects, as time permits. When they hit a lull between projects or wait for feedback from clients, they fall back on these projects to keep busy.

New employees have neither of these sources of work. Instead, they look to you to assign them tasks and keep them busy — and they will likely complete those tasks as quickly as possible to make a good impression. This is great, but also a challenge for you as the team’s leader. If you do not have a bank of work to keep the new team member busy, they will drift and grow bored, unsure of what to do with their time. Aside from your short daily meetings with them, digging up meaningful work for them will require a time commitment from you.

Before bringing a designer on board, review what projects you would expect them to work on for their first 30 to 60 days — both client projects and internal initiatives. Identify accounts into which you can integrate them so that they can begin building their own relationships, and let them know what the process is if they run short on work and you are not around to assign something else. This could be assisting other team members, furthering their training and education, or experimenting with new technologies or techniques for evaluation.

Prepare To Educate.

Part of your job as a manager is to continue a new employee’s education and fill in gaps in their knowledge. While this certainly involves mentoring and directing them to relevant resources, one of my favorite ways is to take them to a Web conference.

Many students graduate from school not having had the chance to attend a professional conference. Industry events such as the Smashing Conference and An Event Apart offer new Web designers and developers a chance to meet and learn from their peers in an energizing environment. Taking a new team member to a good conference opens their eyes to just how awesome and welcoming this industry can be. It also shows them that the company has invested in their success and is willing to spend money to help them grow in their knowledge and their career.

Every time I have taken a new employee to a Web conference, the experience has been fantastic. Such events show the team member that they are a part of something much bigger than our company — they now belong to the Web community as a whole.

Inspire new employees by taking them to a quality conference. Image courtesy of flickr/Kris Krug
Inspire new employees by taking them to a quality conference. (Image: Kris Krug)

Great Employees Need Great Leaders.

Being a leader is an awesome responsibility, especially if you are leading people who are just entering our industry. Whether you follow the lessons covered here or have more profound ways of leading new team members, the challenge you face is that, to have a great team, you must be a great leader. You must take a consistent approach to welcoming new employees to your organization, helping them to build on their strengths and acquire new ones and supporting them in their career growth.

If you do your job right, then one day, the new hire you are leading will pick up the torch and lead the next generation of designers and developers.

For more thoughts on leadership techniques in a creative agency, see “On Creative Leadership” and “Assuming Leadership in Your Design Agency.”

Summary: Do’s And Don’ts

  • Do make new team members feel welcome and part of the team by including them in company activities — both in and outside the office.
  • Do schedule regular meetings to allow new team members to ask questions and get feedback on their performance.
  • Do not allow your busy schedule to constantly override those regularly scheduled meetings, leaving the new employee with no way to get the guidance they need early on.
  • Do assure new employee that failure is a part of the job — so long as it propels them to the solution.
  • Do not put new team members on the spot by calling on them unannounced in meetings.
  • Do encourage participation by giving employees time to prepare before presenting to the group.
  • Do keep new employees busy with meaningful work.
  • Do not assume that new employees will know how to fill their time if they run out of assigned work.
  • Do educate and inspire new team members by introducing them to the Web community a whole, including at conferences and other industry events.
  • Do recognize that the team members you lead today will become our industry’s leaders tomorrow.

(Front page credits: David Joyce)

(al, il, ea)

© Jeremy Girard for Smashing Magazine, 2013.

July 26 2013


Mistakes I’ve Made (And Lessons Learned Along The Way)


We all make mistakes. Whether in our design and development work or just in life in general, we all do it. Thankfully, even the biggest mistakes carry valuable lessons.

As a contrast to the many Web design articles that focus on successes and what we can learn from those triumphs, this article looks to the other end of the spectrum to explore what failures teach us.

Along the way, I will share stories of some of the missteps I have made in the course of my career and the lessons I’ve learned in the process — being ever mindful of composer John Powel’s words:

“The only real mistake is the one from which we learn nothing.”

Mistake #1: Putting Process Over Projects (And People)

Anyone who has been designing and developing websites for any amount of time has come up with a process for working. Having a process is good, but be careful that it does not overshadow the project itself or the people involved.

I was reminded of this a few years ago in a project that was going badly. The simple reality was that I was not getting along with the project manager who was appointed by the client. Our personalities clashed almost from the start, as I found her feedback and requests to be misguided and her personality abrasive. At the same time, I am sure she found me unhelpful and combative because I was unwilling to honor all of her requests.

As frustration grew, I tried to fall back on our process as a way of adding structure to the relationship and trying to get it back on track. If she made a request that took us outside of our normal process, I explained how we could not do it without setting the project back in both time and budget. The worse the project got, the more I deferred to our process, until the client, exasperated to the limit, told me that I seemed to care more about our process than the project.

My plan had backfired. I had tried to lean on our process in order to fix the problems, instead of having a difficult confrontation and dealing with the real issue — the fact that personality clashes were becoming strained to the point that nothing was being accomplished.

Eventually, we reset the project by calling for a meeting to clear the air and address the problems honestly so that we could move forward. While I continued as the project lead on our side, I brought in another team member, someone who did not have a rocky history with the client’s project manager, to handle the day-to-day communications. Even though she acted as little more than an interpreter for me in many cases, the fresh voice and personality from our side did wonders for the relationship, and the project manager responded to our new team member much better than she had to me.

Additionally, we looked at the client’s requests a little more deeply and, rather than dismissing them outright because they deviated from our normal process, tried to identify the reasoning behind each request so that we could honor them in the spirit in which they were made (which we normally do anyway). We realized that those requests didn’t really affect our normal process in a big way. Any deviation was minor, and the relationship and the project were much better off with the flexibility in our process.

People > Project > Process
People are more important than the project, which is more important than the process.

Of course, you need to strike a balance. A process exists for a reason, and if you abandon it whenever anyone shows resistance, then there is little point in having a process at all. That being said, any good process has some flexibility to accommodate the different needs of clients and projects.

Lesson learned: Followed blindly, no process will save you from having to deal with difficult personalities or bumps in the road. A process is meant to help a project along, not to be hidden behind when the going gets tough. For additional reading on client communications, see my previous articles, “Keys to Better Communication With Clients” and “How to Deliver Exceptional Client Service.”

Mistake #2: Telling Instead Of Showing

I frequently speak with clients about their website needs. I listen to their concerns and the issues they’re having with their current website, and I tell them how we can meet their needs. Note that I said I “tell” them how we can help, when I should usually be showing what we can do for them.

This might not seem like a big difference, but it could mean the difference between winning a new project or losing it to someone else — which is exactly what happened to me recently.

A few weeks ago, I was informed by a prospective client that they had decided to work with another provider. Whenever this happens, I am gracious and thank the client for considering us in the first place. I also ask them what the deciding factor was. In this case, they loved our proposal and solutions, but another company had given a detailed demonstration of their preferred CMS and showed how they would use it to keep the website up to date. That company showed them instead of told them.

I’d be lying if I said I didn’t kick myself upon hearing this feedback. I would have been happy to give this client a CMS demonstration, but they didn’t ask, so I didn’t offer. Instead, I answered their questions — all the while thinking I was giving them what they wanted.

Certain things are more effective when shown instead of told. Image credit: flickr
Certain things are more effective when shown instead of told. (Image: Joe Penniston)

The other provider’s CMS is not necessarily easier to use than the one I was offering, but I never even made that case because I told the client how easy our solution was to use, instead of showing them.

Lesson learned: Talk is cheap. Regardless of whether the client specifically asks for a demonstration in your proposal, showing them goes a long way by backing up your words.

Mistake #3: Not Informing Clients Of Staffing Changes

Staffing changes are a reality in this industry. Team members move onto other positions and opportunities, but business must go on. Projects need to be finished, and websites and clients need to be supported. As one team member departs and another joins, you will establish a plan for existing projects and clients, assigning responsibilities and tasks as needed. Still, however solid and measured your plans may be, don’t neglect to inform your clients of these staffing changes.

I learned this lesson when a longtime colleague recently left for another position. We had a plan in place for the transition, a plan that involved him working with us part time to continue handling certain clients and services. The impact on our clients would be minimal, and I decided that we didn’t need to inform them of the changes because the services we provided would not suffer and the change in our staff would likely go unfelt. I was wrong.

It didn’t take long for one of our clients to reach out to my departing colleague. My colleague’s work emails were now being forwarded to me, so I received the client’s request. We made the changes requested, and when I emailed the client to notify them that the work was done, I also explained the change in staffing to account for why the response was coming from me. As you can probably guess, they were surprised by this news, and what should have been a non-issue suddenly became an issue, simply because the client hadn’t learned of this sooner and was taken by surprise.

While some staffing changes are certainly not appropriate to discuss with clients, others really do affect clients in a pretty big way. A person may be the client of a company as a whole, but if their day-to-day interaction is with a particular team member, then that team member “becomes” the company in their eyes. If that team member ever decides to leave, the client could feel as though they are switching providers, even though the company is still more or less the same.

So, be proactive in informing clients of staffing changes. By explaining your plan for the transition of responsibilities with their account and reassuring them of your continued support of their company, you show them that, despite the change in staffing, you are still thinking about them and their needs.

Mistake #4: Focusing On Money At A Time Of Transition

Speaking of transitions, another reality in this industry is that clients sometimes decide to move onto another provider. When this happens, there is a period of transition away from your services, and you will likely need to be involved in that transition. This can be a strange and uncomfortable time, in part because you’re concerned about money.

Ongoing clients have an incentive to pay their invoices because they want to continue working with you. Clients who switch providers are worrying because of the possibility that they won’t honor any outstanding invoices — including time spent helping them transition away from your services.

This situation is delicate and needs to be handled case by case. Their reason for leaving, their overall payment history, how much they currently owe you (if anything), and how involved you will need to be during the transition are all factors that will determine how you handle the situation. The big lesson I have learned, however, is that dwelling on exactly when you will get paid during this time of transition, which is often a time of uncertainty and even fear for the client, is rarely wise.

When I’ve focused on payment and gotten aggressive in making sure the client understands their financial obligation to us, those clients have actually turned out to be less likely to settle their accounts in good time than clients whom I approach more softly.

Providing outstanding service to a client during a time of transition is the best way to end a relationship. If the relationship ends on a positive note, then the client will be more likely to pay what they owe and to say nice things about your company, because the last impression you’ve left them with was helpful and positive.

Again, how you handle such situations will vary. If the breakup is messy, or you are owed a substantial amount of money or lawyers have to get involved, then you would handle that transition differently than if you had a good client who was leaving simply because you were no longer a good fit.

For more tips on handling client payment issues, see “Dealing With Clients Who Refuse to Pay.”

Mistake #5: Looking To The Past, Instead Of The Future

When we make decisions on a project, we often look for relevant data to justify our decisions. Referring to website analytics and usage data can help us make informed decisions, but remember that all of this data refers to the past, not the future.

The Web industry is constantly moving forward, and if we make our decisions based solely on data gleaned from past usage, then the solutions we develop will be perfectly suited to those past situations, not necessarily future ones. This happened to me about a year ago when we were working with a client to come up with a mobile strategy for their website. While we absolutely wanted to make the website responsive, the scope of the project and the budget simply did not allow it. Plans were made and a budget allocated to redesign the website the following year, and a fully responsive design would certainly be part of that project, but for now, a separate mobile-only website would be our short-term solution.

As with many mobile websites, our plan was to include only a small, targeted subset of the enormous content archive found on the current website. Looking back now, it was a mistake. Unfortunately, content parity wasn’t an option, so to determine what content to include, we looked to the analytics to see which pages mobile users were accessing. Office locations and directions, leadership team biographies, and contact details were the most popular pages being requested by mobile users, so that was what we included on the mobile website. There was, however, a problem with this logic of including only currently popular content on the mobile website: It did not account for future needs.

As we were working on the mobile website, the client began to focus on their blog. They formed a team of authors among the subject matter experts in their organization and began publishing a lot of quality content — content that quickly became popular with their audience. This new blog content was often promoted and shared via social media, and many visitors accessed those links via mobile devices.

You can probably see where this is heading. Because we had no data to show that the blog would be popular on mobile devices, we left the blog off of the mobile website. When the blog picked up steam and attracted interest from users on social networks and mobile devices, the website we had developed became a major problem. The experience would be as follows:

  1. A mobile user would see a comment about or link to an article in social media and, being curious about the article, click the link.
  2. The mobile device would navigate to the blog article on the full website, but then quickly redirect to the mobile website’s home page.
  3. Because the blog was not accessible from the mobile website’s menu, the visitor had to tap the “View full website” link and, on their small phone, try to find the blog on the full website. If that’s not frustrating, what is?

Obviously, this experience was exceedingly poor, and very few visitors went through the entire process just to read the article. Most just left when presented with the mobile home page, instead of the article they were hoping to see. Even though we knew from the start that this mobile-only website was temporary, had we more effectively planned ahead and not based our decisions solely on analytics from the past, we may have been able to avoid this problem and develop a better solution.

In this case, the answer was to kick off the responsive redesign project sooner and do away with this separate mobile-only website and its subset of content. The lesson we learned is that we have to look to both the past and the future when making decisions on a project.

Always make new mistakes
Making new mistakes helps you learn new lessons. (Image: Elyce Feliz)

This is why clients hire us in the first place — not only for our execution, but for our expertise. This expertise includes knowing where the industry is headed, what principles have to become an integral part of the experience (content parity) and what new technologies or approaches we can bring to a website today to ensure that it works well tomorrow.

The Value Of Mistakes

All of the blunders covered in this article are ones I’ve made that either took a project off track or strained a relationship or made a product far less successful than it could have been. As soon as I realized each mistake, I wished I could jump back in time and have a do-over.

Well, I’ve yet to find that elusive time machine, but I do get do-overs of sorts. Every time I encounter a similar situation, I am able to make a better decision as a result of having learned the lesson from the previous mistake. That is my do-over, and that is the value of learning from one’s mistakes.

We all make mistakes. (Image:

What about you?

What mistakes have you made, and what lessons have you learned from them? Not many folks like to talk about their mistakes, disappointments and things that just didn’t work out, but quite often they’re just as useful as all those amazing success stories you can read about in hundreds of books and articles. What tools worked for you and which didn’t, and why? Please share your stories and your thoughts with us by using the hashtag #smworkflow!

(al) (il)

© Jeremy Girard for Smashing Magazine, 2013.

January 25 2012


How To Deliver Exceptional Client Service


We often hear companies, including Web agencies, boast about how they provide exceptional client service. But how do they define exceptional?

Consider this scenario. You are hired to design and develop a new website for a retail client. The client loves the design, and the pages you develop use the latest in HTML5, CSS3 and responsive design, resulting in a website that works wonderfully across browsers and devices. The e-commerce features of the new website help the client significantly increase their online sales, and the entire project is delivered on time and on budget. Now, is this “exceptional” client service? I don’t think it is.

When the client hired you, they expected that you would design and develop a great website. They also expected it would be done according to the timeline and budget set during the planning stages of the project. As successful as this project may have been for both you and the client, in the end, you did exactly what you were hired to do. You did your job.

Just Doing Your Job Vs. Delivering Exceptional Service

Nothing is wrong with “just doing your job.” In many cases, that alone is a tall order. So, while doing what you were hired to do is nothing to be ashamed of, it is also not exceptional — nor will it set you apart. There will always be other agencies or designers that will be able to do the work as well as you can — and there will certainly be someone willing to do it cheaper! The service you provide is how you can truly differentiate yourself.

Exceptional client service is about going beyond what is realistically expected of you. It is about surprising, and often delighting, customers, turning them into enthusiastic referral sources and lifelong clients who stick with you not only because you do great work at a fair price, but because the value you bring to them goes far beyond just your products.

In this article, I’ll detail a few of the ways that I have tried to take my own client service to the next level and deliver a better experience, starting with the most important aspect: the relationships that you establish with the clients who hire you.

Superhero racing to help
There is a difference between doing what you were hired to do and delivering a superheroic level of service. (Image: JD Hancock)

Creating Real Relationships

Here’s a quick exercise. Write down your five most important clients (how you define “important” is up to you). Then, write down as many things you know about those clients that have nothing to do with their business or the work you have done for them. What are their hobbies or passions? How many kids do they have? How old are those kids, and what are their names? Where do they like to vacation? Things like that.

So, how long is your list? If you’re like most people I speak with, probably not very long at all. We learn everything we can about a client’s business, but we often fail to discover anything substantial about our clients as people. If we do not engage with our clients in a real, personal way, then we are just another vendor — and vendors are easily replaceable with better cheaper options. However, clients are much less likely to consider replacing people with whom they have real relationships.

So, how do you start learning more about your clients? Simple: ask them questions about themselves and their lives, not just about their business.

Asking Real Questions

When I give this advice to others, it is often met with some apprehension. Asking someone about their business goals is easy. Asking them about their life outside of the office is harder. We often avoid getting personal for fear of offending the person or saying the wrong thing; but by being overly cautious, we miss the chance to create a real relationship.

Whenever I get nervous about getting too personal with a client, I remind myself of a story. A few years ago, I had the privilege to work on the website for the Tori Lynn Andreozzi Foundation. This non-profit foundation was named after a young girl who, walking home from school one afternoon, was struck by a drunk driver. Tori survived but was forever changed. Today, she is in a minimally conscious state, unable to walk, speak or eat.

In one of my first meetings with this client, I sat down with the head of the foundation, Tori’s mother, Cathy. I began the conversation simply by asking her, “How is Tori doing today?”

Cathy smiled and answered that Tori was doing well. We had our meeting and discussed the website and the project. As we were wrapping up, Cathy thanked me for asking her about Tori. She explained that so many people avoid asking about her daughter, fearing the news would be bad or that Cathy would be upset by the question. The truth is that, even though Tori has bad days, Cathy always enjoys talking about her daughter and was very happy to be asked about her. By asking Cathy how her daughter was doing, I showed her that I cared about more than just the project.

Website for the Tori Lynn Andreozzi Foundation
The website for the Tori Lynn Andreozzi Foundation

Today, Cathy is one of my favorite people to speak with, and we begin every conversation by asking how each other’s children are doing. We have much more than a great client-vendor relationship, all because I asked a real question, honestly cared about the answer, and created a real, human connection in the process. Had I been too afraid to ask that question, I might never have been able to build the relationship that I have now.

Don’t be afraid to ask your clients real questions. If they don’t want to answer you, they won’t. But for those who do (and you will find that most, if not all, of your clients will be happy to have a real conversation that has nothing to do with business), you will be well on your way to building real relationships.

Participate In More Than Just Projects

Another way to build a relationship with a client that goes beyond the project is to participate in their events. If the client runs a non-profit organization, they might have fundraisers or similar events that offer you an opportunity to support their cause and nurture the relationship. Go to these events and participate. As a bonus, you will also be helping a worthwhile cause.

Not all of your clients will have fundraising events, but they might invite you to holiday parties and other gatherings. Take advantage of these opportunities to interact with your clients outside of a normal business setting. It will go a long way to reinforcing those real relationships that you are trying to create and show that you are more than just another vendor.

Similarly, consider inviting clients to some of your events to show that you view them as more than just a source of business. When they arrive, greet them warmly and enjoy their company, leaving business talk for another day.

Help Them With Services That You Do Not Provide

Clients may hire you to design and develop a Web presence for them, but in the course of the project you will often discover that they need other services that you do not provide. By listening to their needs, you might learn that they have issues with their payroll company or their accountants or some other aspect of their business.

Look to your own business and the vendors you use. There may be a service or company that you have had success with that you could recommend. Also look to your other clients to see whether they offer services that fit. If appropriate, set up a lunch meeting between you, the client with the need and the client that might be able to fill that need. Not only will you be taking two clients out for lunch, you will hopefully be helping them both by making a valuable connection between the two companies.

When a client can say, “I hired this company to design our website and they ended up helping us revamp our entire payroll system!” you position yourself as much more than just their “Web team” — you show that you are a valued business resource and a trusted advisor.

Pick Up The Phone

Good communication is key to any relationship. Still, judging from the number of clients I speak with who are unhappy with their current Web team — not because they do a poor job, but because they are unresponsive — quality communication is not always a given.

Regularly updating your clients by email is important, but also pick up the phone every now and then, so that you become more than just that distant person behind those electronic updates. By hearing your voice, clients will feel more connected to you and the project. It also shows them that you value them enough to take the time to make a personal call, and it gives you a chance to talk about something other than business.

Conversations bubbles in an office
Regular phone calls allow you to have real conversations with clients, communicating at a personal level that email and other electronic updates do not allow for. (Image: opensourceway)

Face The Bad Times Head On

Have you ever had to share bad news with a client, but rather than pick up the phone to discuss the issue, you waited and sent an email at 5:15 pm on a Friday? By doing this, you may have bought yourself a few more days before having to face the client’s worried questions, but you also damage the relationship by hiding behind an email. It also means that the client will read the bad news first thing on Monday morning; definitely not a good start to their week, and definitely not the way to treat a valued relationship.

Here’s a secret: clients do not expect you to be perfect. They do, however, expect you to be honest. When something goes wrong, let them know quickly so that they are not blindsided by the issue later on. And never deliver bad news by email. Picking up the phone to discuss the news lets you reassure the client and answer any questions they may have. An after-hours email certainly won’t do that for them.

If the matter is handled correctly, the client will not remember that something went wrong. They will remember that you were honest and kept them apprised of the state of the project, even when it did not go according to plan.

Be Thankful And Show Appreciation

When was the last time you thanked a client for working with you? How did you do it? Did you send a basket of cookies or chocolate with a generic “thank you” message, or did you do something more personal?

Too often, we fail to even thank our clients for their business. We are so keen to finish a project and move on to the next one that we forget to properly show our appreciation.

While a basket of sweets and a generic message is better than nothing, consider sending a personal, handwritten thank-you note.

Handwritten letters have become all but extinct these days. With the rise of electronic communication such as email, social networks and text messaging, so few people take the time and effort to actually write a letter. The gesture of a personal letter will delight and surprise your client, not only because you have thanked them, but because the way you did so was personal, memorable and the perfect cap to a successful project.

Handwritten thank you message
A thankful, personal handwritten card is a great way to cap off a successful project. (Image: irrezolut)

How About You? Do You Deliver Exceptional Client Service?

I hope this article starts a conversation. How do you deliver exceptional client service? What tips can you share so that others can delight their own clients and offer them value beyond just products?

In this industry, we are always eager to share the latest tips and tricks on CSS, HTML, JavaScript, PHP or some other Web technology. Let’s also start to share tips on how to deliver exceptional client service, because success in this industry is about much more than developing great websites — it’s about developing great relationships.


© Jeremy Girard for Smashing Magazine, 2012.


Stand Out Among Freelancers by Communicating with Your Client

While the internet becomes more and more accessible to everyone, some freelancers rarely use these new technologies to improve their marketing or client relations. These incredible technologies allow us to communicate easier with people from all over the world and to even optimize the communication with someone who is living close to us. Throughout my short career I have learned that communicating with a client is crucial, because his directions might help you too. Moreover, if the product is not heading in the direction the client wants, communicating with him is going to make the product better and, let’s be honest, this is what every freelancer is rated on – the quality of the projects they deliver.

Communicating with clients will also increase the probability of you getting more work from them; it can also help you stand out from the crowd. Some freelancers just show up with the product, charge the money and leave – and even if they deliver a good product, the client is still not very happy with the working relationship. Well, this is because there was no communication and the client felt he was not involved. Moreover, following you client’s directions is even more important for your working relationship, but be aware and don’t become a puppet and try to make your point when you need to, as you are the expert and know the web better than your client does. Following your client’s original instructions is totally different than doing what they say. It’s called “paying attention” and “caring” about the one you work with.

Follow instructions

The client is the one who pays you, so your final product has to please them. If you don’t do this, why would they hire you again? Or tell their fellow business owners to hire you?  You don’t have to give them what you think is right, but what they think is right.

Following instructions from a client shows a simple, but important fact – that you respect him. When they’re paying you, it’s totally disrespectful to ignore their requests and do what you want to do – even if you know that your way may be the best.

When you don’t agree with a client, the only thing to do is communicate this to him. Talk to him, explain him why  you think your way is the right one, show him examples from the web and statistics, and he will probably understand. Clients almost always agree with your ideas if you show them their final product will be better because of it. Don’t just jump into modifying that grid system because you know it’s right. Explain why you’re changing it and they will probably understand you and appreciate you even more – he may even start to see you as the expert you are and may not question your decisions as much in the future.

Photo by ilco

If you are not sure about what I mean by client’s instructions, then let’s take a look at the following checklist:

  • The deadline – I can’t stress enough about how important this is. Do you respect the deadline you get from your clients? Because if you don’t, this is a huge problem. Many freelancers think that the deadlines are not mandatory and that delivering three days late is okay – well, it is a big problem. Most of your clients have a schedule and if you don’t deliver your product in time, their whole schedule will fall apart. Keep the deadline in mind, this is one of the first things you are judged for.
  • Delivery – You can’t make a good impression by delivering a project that isn’t finished and still needs work. You get paid to deliver a completed project, and that’s what you need to deliver to build your client base. Deliver the project. On time, and complete. If you don’t deliver a fully finished project, it’ll probably be your latest collaboration with the respective client.
  • Handing in something else – Well you think this doesn’t happen – but it most certainly does. You might have done it as well without realizing. Did the client ask for a pink website and, without explaining why, you delivered a red one? Well then you didn’t follow instructions. Just because you have a different idea than the client does, it doesn’t mean you can just deliver whatever you want – at the end of the day he’s paying you, not the other way around. Make sure you talk to your client about each major change you make and always inform him about the minor ones.
  • Contacting the client – You might not think this is a big problem, but if the client specifically asked you to only contact him by e-mail, don’t overlook his wish. It’s the same when we ask clients to only contact us between 8am and 4pm, and they call us at 10 at night. Annoying, right? They think the same when we do it. Moreover, if the client asks you to contact him once per week, do it, even if you don’t consider it necessary.

Showing professionalism

This is what’s going to land you the next job – being professional. By following the simple rules above you could manage to do it, but by following the ones below you will definitely impress:

  • Keeping in mind what the client requested is important even if you don’t follow it. When you want to change something, simply ask to do it, but don’t forget to acknowledge the client’s request. Saying something like “Can I maybe contact you via e-mail, although you requested to talk by phone? I would be more comfortable with e-mail.” will work better than just contacting him by e-mail out of the blue.
  • A good way for avoiding delivering something the client didn’t request is to always ask before making major changes. If they’re rejected, try to explain why you believe the changes will be beneficial to him. As said before, he will most likely accept you as the expert and go with your way of doing it.
  • It is always a great idea to set a more achievable deadline and always deliver before the expected day, this will allow more time for the client to revise the product and he will always be happy thinking that you worked more for him than you should have. Delivering before the deadline is good and will always pay off.
  • Freelancers not only deliver a project, but quite often will work as consultants as well. Don’t forget that you can always make suggestions for next time, even if you are not going to be the one who gets the job. When the client sees that your tips helped him – even if with another designer – he will remember you and might turn back to you if needed again.
Image by Ambrosio

This article is not only about why is it important to communicate with your clients. It is mostly about acting professional. Communicating properly is just one small part of showing a client you mean business, especially today when there are lots of freelancers out there who clearly lack this crucial social skill. Managing to interact with your clients throughout the development process of a project and will insure you get positive feedback and word of mouth business, which will in the end send more clients your way.

Next time you are out there landing a big design project, come back to this article and follow these simple rules. They will only bring you positive results and will make the relationship with your clients better.

How is your usual relationship with your clients? Do you communicate a lot, or do you try to do it as little as possible? How much time do you spend consulting your client?

December 23 2011


How Do You Deal With Overstressed, Irrational Clients? An Entrepreneur’s View



As an entrepreneur who has been on the client’s side of the design and development process, I’d like to discuss the thought process of the client, as well as some effective ways to interact with them. For example, why do they ask for Shakira music on the home page? And how do you respond to that?

I was recently referred to Sam Barnes’ piece on Smashing Magazine “How to Explain to Clients That They Are Wrong.” The article was well written and made a lot of sense to me, but there are two sides to every story, and I’d like to add value to the argument by responding from the client’s point of view.

For the most part, Sam did a great job of discussing how to evaluate and act on poor decisions made by clients. What he missed, however, was the impact that the nature of the relationship between clients and creatives has on how decisions are made by both sides. By “creatives,” I mean anyone involved in the design or development of a website or application. Understanding this relationship will enable you, and your clients, to make better decisions about the product.

What’s On the Line For Us

Before getting into the decisions that entrepreneurs make, let’s look at some of the factors that motivate these decisions. Setting the scene will shine a light on the thought process of entrepreneurs and give you a better idea of how to deal with them.

You’ll notice I use the terms “entrepreneur” and “client” interchangeably. Even if your client works within the confines of a corporation, as opposed to at the top of a new venture, it would not be unusual for them to act in an entrepreneurial capacity. And even if they aren’t entrepreneurs, but middle men who were assigned the project, chances are they will still behave accordingly.

Formal design reviews
How do you deal with clients who often come up with weird, irrational requests? Image source

First, let’s think about the person you’re working with. They believe in an idea. They believe in it so much that they’ve left a paying job for it. They’ve worked nights and weekends for it, alienated their spouse, friends and family for it. They’ve begged, borrowed and stolen for the opportunity to pursue it. They’ve put everything on the line for their idea, their vision. And you know what the most important part of their vision is?


It’s not them. And to be honest, it never really was. The first question investors ask after hearing someone’s idea is, “OK, who’s building it?” Your client knows that their creative team is the only thing that can make their idea a reality.

You’re the most important piece of their puzzle, and, despite what they tell themselves, what they know about you before starting the project is often limited.

So, how did they find you?

Clients turn over every stone in search of a designer or developer, because, by that time, the necessity of a good creative team has settled in. Entrepreneurs might look harder than others because of the pressure of their particular situation, but the importance of a good creative team is lost on no one. And this isn’t like finding a lawyer, a doctor or even a girlfriend.

It’s way harder.

The Leap of Faith

There are three gigantic problems with the process of finding a creative team. First, the client has probably never done this before. Secondly, finding a creative team is tough. Products such as will help, but because clients generally don’t speak your language, assessing the strengths of a firm and how it would mesh with their product is difficult. When the team I picked told me they were experts in Ruby on Rails, my first thought was, “Is that a train or a restaurant?” Thirdly, and by far the most important point, for those of us not in the Web design or development community, feeling comfortable with our evaluation of creatives is impossible.

This is a relatively young industry, one with very low barriers to entry. Heck, my designer took his first client when he was 13. There are very few, if any, metrics we can use to evaluate a creative team. We can look at its past work, speak with the head of the team and maybe get some sort of sample or mock-up, but for the most part, we are flying blind. There are no requisite degrees, certifications or guarantees. If you go to a physician who hasn’t finished college, you probably wouldn’t be willing to let them operate on you. A developer who hasn’t gone to college could build you the next Foursquare.

The Search

In our search for a creative team, we come upon cousins and uncles of acquaintances, people who have designed investor-relations websites for Fortune 500 companies, people who wait tables but build iPhone apps on weekends. We have absolutely no idea what to think of all this.

First-time clients especially don’t understand how hard their product is to create, or how long creative design takes, or even if you’ve done this sort of work before. It’s all Japanese to them, and it’s an enormous leap of faith. All we can do is look at some of your prior work and decide whether we like it. In what other sphere of life would you make a decision this important on a gut reaction? (Wait, don’t answer that.) It’d be like grabbing someone at the grocery store and asking them to marry you because you both have Fruit Loops in your carts.

Even when we look at successful companies in our fields, their success is not always commensurate with the development or design of their products. Take Craigslist: great business idea, poor design; but it doesn’t matter because the content is great. On the other hand, Flipboard’s design is fantastic, and that’s enough to make the product successful, even although its functionality isn’t really revolutionary.


Grasping For Control

With reservations and doubts lingering in the back of the client’s mind, in steps the creative team. You start pumping stories into Basecamp, PivotalTracker or some other product-management system that the client’s never heard of, and suddenly they are on your turf. Now the client works when you work, and often sits quietly on their hands when you don’t. The product goes when you say it goes, and their input is limited. Worst of all, we flat out don’t understand what you’re doing.

This is extremely hard for people who are used to complete control. Your client has gained so much momentum to get to this point that, when the creative team takes charge, the ground drops from under them like they’re some unfortunate cartoon character. This reversal of control is jarring.

This would be fine if the entrepreneur was working with a lawyer, an accountant or even a bank. But early on in the life cycle of a company that depends on a creative team for its success, nothing, and I mean nothing, is as important as the creative team. And our control over the success of this phase is so limited. That’s why we make uninformed suggestions like, “Let’s make that @ symbol spin,” and “I think users would like some Shakira playing when they land on the home page. I know I would.” Because we’re grasping at straws.

We are trying to hold onto our vision, because suddenly it’s in your hands. We may know what we want, but we often don’t know how to do it, and we have trouble expressing it. I’ve often found myself telling my developer things like, “I want a magic search box that pulls information from the Facebook API [I learned that term a few months ago, no big deal], Twitter and Foursquare and spits out relevant people based on our compatibility algorithm,” only to have him respond, “… Yeah. Let’s start by allowing users to log in with their Facebook account.”

I know how I want the product to feel to the user, but I have no idea how to get there without my team’s help. Saying, “I want it really simple, easy to use and elegant” is not helpful. Grasping at some visual element that we comprehend is sometimes the only bullet in our gun.

So, How Do You Deal With Overstressed, Irrational Clients?

Now you have an idea of the sometimes fragile psyche of the client. The question is, how do you handle us when we say we want Shakira?

Sam’s points are all well taken and, for the most part, right on. But they are directed at a rational, faceless client. The overview is good, but implementing it in real life would be difficult. So, here is the perspective of a client with a face. The following five actionable tips should drastically help your client relationships.

  1. Show us.
    This one is the most important. It’s very hard for us to visualize our idea. We know how we want the product to feel, but we don’t know how to get there. We would certainly recognize that Shakira isn’t the answer if you showed us this on our website — or on a comparable website if building our mistake would be too time-consuming. Usually, if the client was savvy enough to get to this step in the process, they would know what works and what doesn’t. And if they don’t, their idea is hopeless anyway.
  2. Tell us.
    This one wasn’t in Sam’s points. Good entrepreneurs are flexible and can adjust their vision to meet the reality of the situation. If we want something, but you think it would take too long and not be worthwhile, tell us. Suggest a workaround if you want, or just ask us if there’s another way. Entrepreneurs are usually great at creative solutions; we make our living by avoiding barriers. But we can only avoid barriers if we know what they are.
  3. Explain the rules of the game.
    If you’re building a basketball, you know what you can and can’t do. You could probably make one that’s bouncier or more durable than competing products. But you couldn’t make one that goes in the basket every time. You know your limitations, but sometimes we don’t, and creativity is only able to flourish inside the box of reality. Because we don’t know the rules of the design and development game, we often don’t know what’s possible. More often than not, we’ll assume that something isn’t possible when it actually is. The head of my creative team had a good solution for this: he created a folder of ridiculous ideas that I wished could be part of the website, and I dumped stuff in there from time to time. More often than not, he’d ping me saying, “Hey Brian, that’s possible. Let’s try it out.” Being creative is difficult when the canvas is blank. If you can give us a line to start with, some sense of what you are capable of, it’ll help us enormously on the creative side.
  4. Be confident and enthusiastic.
    Everyone appreciates an expert. Sam touches on this, and it’s extremely important. When I told my designer that I was considering profile pages that end users could design, he said something like, “Well, it certainly worked for MySpace.” Point taken. Demonstrating your expertise puts clients at ease and instills trust in your decision-making abilities. Also, don’t be afraid to occasionally ask for forgiveness rather than permission (as long as the change is not customer-facing). It will reaffirm that we made the right decision. Nothing is more invigorating than someone who believes in your vision.
  5. We can’t act like locals.
    Clients aren’t completely oblivious to their mistakes, either. They know that some of their suggestions are absurd. They know that they don’t understand this stuff one-tenth as well as you do. They know they’ve stepped into a subculture that they couldn’t possibly fit into. It’s like when you go on a ski vacation and try to act like the locals. No matter what you do, you won’t be one. And we hate that we are an outsider in your world. That manifests itself in a number of ways: weird suggestions, holding firm on an irrelevant point, demanding certain color schemes that probably don’t matter (but sometimes do). This will still happen, but now that you know where they’re coming from and how to assuage them, you should hopefully have a more effective connection with clients. On the flip side, expect to be treated with the same level of suspicion and hesitation when you step into our world. Sam urges you to speak the client’s language, to set goals in business terms. Be very careful with that one. Misusing one business buzzword can waste your credibility, just as one suggestion for a spinning @ symbol will make you wary of any other design ideas. Discussing markets that you have exposure to but aren’t immersed in can have adverse effects. Know that we are all tourists. Which leads to the final point.

The Odd Couple

In writing this article, I realized how odd the relationship is between creatives and clients. Without my creative team, I would have no shot at getting my company off the ground. I rely on them 100%, but I have no clue what they do, how they do it or if the work they do is reasonably priced. This forces me to try to speak their language, to attempt to enter their world by learning quickly, and to try to maintain control of a vision that they are responsible for bringing to life.

Creatives, on the other hand, rely on clients only somewhat. They don’t live and die by each project, as clients do. Their work is in great demand; many of the firms I considered are growing quickly in this recession.

However, bits and pieces of Web design and development work are slowly being fragmented and commoditized, and for the same reasons that evaluating designers and developers is difficult: the barriers to entry are low. This opens the door for 99Designs to pick off clients, especially vulnerable entrepreneurs. These services leverage the crowdsourced model by matching designers who have little or no experience with clients who don’t understand the nuances of the craft well enough to be able to tell. This pushes creative firms to differentiate themselves through means that clients can understand. Business acumen is an incredibly helpful skill for creatives to have, and something 99Designs can’t offer.


So, we’re left with two groups, each possibly operating in unknown waters, working to create a product that requires both of them to be firing on all cylinders in order to succeed. That being said, do business-savvy creatives exist? Heck, yeah. I’ve got them helping me build my company, and it makes all the difference in the world. Do design- or development-savvy entrepreneurs exist? Probably. I’ve got a Mac — does that count?

The goal is to establish a working relationship between the two parties that leverages the strengths of each to quickly and effectively create a product and bring it to market. The tips above should help those working on the creative side. I’d be interested to hear a designer or developer’s take on what I should be doing to get the best out of my creative team. After all, we’ve got to have more in common than liking Fruit Loops for this thing to work.

Go easy on us poor entrepreneurs. I realize we make dumb suggestions sometimes, but it’s just an attempt to maintain some control over a process that we occasionally feel we’ve lost control over. And consider the business decisions that clients make from both sides. We’ve had a lot of practice with this stuff.

Related Articles:

You might be interested in the following related articles:


© Brian Scordato for Smashing Magazine, 2011.

December 02 2011


Content Strategy Within The Design Process



The first thing to understand about content strategy is that no two people understand it the same way. It’s a relatively new — and extremely broad — discipline with no single definitive definition. A highly informative Knol on content strategy defines it as follows:

Content strategy is an emerging field of practice encompassing every aspect of content, including its design, development, analysis, presentation, measurement, evaluation, production, management, and governance.

This definition is a great place to start. Although the discipline has clearly evolved, this breakdown of its scope makes perfect sense. The aspects of content strategy that matter most to Web designers in this definition are design (obviously!), development, presentation and production. In this article, we’ll concentrate on the relationship between content strategy and design in creating, organizing and displaying Web copy.

As a writer and content strategist myself, I’ve worked with designers in all of these areas and find the creative process highly enriching. I’ve been fortunate enough to work with designers who are quick to challenge ideas that are unclear or unsound, who are brilliant at creating striking visual representations of even the most complex concepts. A lively interplay between design and content is not only fun, but is how spectacular results are achieved. This is why content strategy should matter a great deal to designers.

What Is Content Strategy, And Why Should A Designer Care?

Content strategy is the glue that holds a project together. When content strategy is ambiguous or absent, don’t be surprised if you end up with the Internet equivalent of Ishtar. When content strategy is in place and in its proper place, we’re on our way to producing beautiful and effective results.

Slide from The Language of Interfaces by Des Traynor.

While wrapping one’s head around content strategy might be difficult, the thing that makes it work is very simple: good communication. Sometimes a project moves along like a sports car on a superhighway. Other times, the road is so full of bumps and potholes that it’s a wonder we ever reach our destination. As we explore the relationship between content strategy and design, I’ll detail how I keep the channels of communication open and go over the workflow processes that I’ve used to support that effort. I hope that sharing my experiences (both positive and negative) will help you contribute to and manage projects more effectively and deliver better products to clients.

How To Get Started: The First Step Is The Longest

Project manager: We need a landing page for client X.

Designer: I can’t start the design until I see some content.

Writer: I can’t start writing until I see a design.

You may find this dialogue amusing… until it happens to you! At our firm, we find that the best way to get past such a standoff is to write first. This is because content strategy, at a fundamental level, frames a project for the designer. As a content strategist, my job is to articulate the why, where, who, what and how of the content:

  • Why is it important to convey this message? This speaks to purpose.
  • Where on the website should the message appear? This speaks to context.
  • Who is the audience? This speaks to the precision of the message.
  • What are we trying to say? This speaks to clarity.
  • How do we convey and sequence the information for maximum impact? This speaks to persuasiveness.

Bringing it down to a more detailed level, let’s consider a landing page. A content strategist will determine such things as the following:

  • Audience
    Is the audience sophisticated? Down to earth? College-level? Predominately male? Female? Etc.
  • Word count
    Some pitches scream for long copy, while others must be stripped to the bare minimum. SEO might factor into the equation as well.
  • Messaging priorities
    What is the most important point to convey? The least important? What needs to be said first (the hook)? What needs to be said just leading up to the call to action?
  • Call to action
    What will the precise wording be? What emotional and intellectual factors will motivate the visitor to click through?

Clear direction on these points not only helps the writer write, but helps the designer with layout, color palettes and image selection. When we start with words, we produce designs that are more reflective of the product’s purpose.

Landing pages are a great place to try this workflow, because in terms of content strategy, they are less complex than many other types of Web pages. A product category page, on the other hand, might have a less obvious purpose or multiple purposes, considerably greater word counts, more (and more involved) messaging points, and a variety of SEO considerations, all of which would affect its design.

Quick Tips for Getting Started

  • Make sure someone is specifically responsible for content strategy. If strategic responsibility is vague, your final product will be, too.
  • Slow down! Everybody, me included, is eager to dive headfirst into a new project. But “ready-aim-fire” is not a winning content strategy. Make sure everyone is on the same page conceptually before cranking out work.
  • If content strategy falls on your shoulders as a designer, cultivate an understanding of the discipline. Resources are listed at the end of this article to help you.
  • Make sure designers and writers understand what their roles are — and are not. There’s no need for writers to tell designers how to design, or for designers to tell writers how to write.

Perfecting The Process: Break Up Those Bottlenecks

Project manager: How are things coming along?

Developer: I’m waiting on design.

Designer: I’m waiting on content.

Writer: I’m waiting on project management.

Web development projects in particular involve a lot of moving parts, with potential bottlenecks everywhere. The graphic below describes our Web development process, with an emphasis on the design and content components. Chances are, whether you are freelancing or at an agency, at least parts of this should look familiar:

Design & Content Process
Link: Larger version (Image credit: Chris Depa, Straight North)

The process is by no means perfect, but it is continually improving. In the next section, we’ll look at the many types of content-design difficulties you might experience.

To help our designers lay out text for wireframes and designs, we utilize content templates based on various word counts. These templates also incorporate best practices for typography and SEO. When the designer drops the template into a wireframe, it looks like this:

Content in wireframe
SEO content template in a wireframe.

The use of content templates not only takes a lot of guesswork out of the designer’s job, but also speeds up client reviews. When clients are able to see what the content will roughly look like in the allotted space, they tend to be more comfortable with the word counts and the placement of text on the page.

Communication can be streamlined using project management software. We use Basecamp, which is a popular system, but many other good ones are available. If you’re a freelancer, getting clients to work on your preferred project management platform can be an uphill battle, to say the least. Still, I encourage you to try; my experience in managing projects via email has been dismal, and many freelance designers I know express the same frustration.

The big advantage of a project management system is that it provides a single place for team members to manage tasks and interact. Internal reviews of design templates is one good example. The project manager can collect feedback from everyone in one place, and each participant can see what others have said and respond to it. Consolidating this information prevents the gaps and miscommunication that can occur when projects are managed through multiple email exchanges. Designers can see all of the feedback in one place — and only one place. This is a big time-saver.

Quick Tips for the Creative Process

  • Make sure someone is specifically responsible for project management.
  • Whether or not your process is sophisticated, get it down in writing and in front of all team members before the project starts. This really helps to align expectations and keep communication flowing.
  • Meet at regular intervals to discuss status and problems. Hold yourself and others accountable.
  • Get approvals along the way, rather than dump the completed project in the client’s lap. Having clients sign off on a few pages of content and one or two templates really helps to align the creative process with client expectations, and it reduces the risk of those massive overhauls at the tail end that demolish budgets and blow deadlines.
  • Writers and designers should discuss issues as quickly, openly and thoroughly as possible.

Conflict Resolution: Why Can’t We All Just Get Along?

Designer: All these words are boring me.

Writer: All these images are confusing me.

Project manager: All these arguments are killing me.

No matter how clear the strategy, no matter how smooth the process, design and content will conflict somewhere along the line in almost every project. In fact, if creative tension is absent, it may well indicate that the project is in serious trouble. Here are the issues I run into on a fairly regular basis, as well as ideas for getting past them.

Making Room for SEO Content

Big chunks of content are bothersome to designers; even as a writer, I worry about high word counts turning off some of our audience. However, when SEO considerations demand a lot of words on a page, there are ways to make everyone happy:

  1. Tabs are a nifty way to hide text.
    Tabs allow you to keep the page tight vertically. Even more importantly, they enable visitors to easily find the information they need — and ignore what they don’t need. Below is a tabbed product area in the Apple Store.
    Apple Tabs
    The Apple Store
  2. Keep SEO content below the fold.
    This is a compromise, because an SEO strategist would prefer optimized content to appear above the fold. However, if a website is to have any hope of converting traffic brought in by SEO, then visitors need to see appealing design, not a 300-word block of text.
    SEO below the fold
    The Movies Now landing page.
  3. Step up creativity on non-SEO pages.
    For many websites, the pages that are most important to SEO have to do with products and services, where conveying features and benefits is needed more than wowing visitors with design. Conversely, pages on which awesome design matters most are often unimportant for SEO: “About,” bio and customer service pages, for example.
    Carsonified Team Pages
    Carsonified’s team pages.

Clarity vs. Creativity

We fight this battle over what I call “design content” all the time — primarily with navigation labels, home-page headers and call-to-action blocks. At a fundamental level, it is a battle over the question, “Which wins over the hearts and minds of visitors more: awesome design or straightforward information?”

Making the labels for navigation straightforward is a fairly established best practice. Predictability is important: if visitors are looking for your “About” page, and they finally stumble on it by clicking on “Be Amazed,” then the emotion you will have elicited is irritation, not adoration. Be as creative as you want with the look and feel of the labels, but to maximize the user experience, the text and positioning of the labels must be as vanilla as possible.

For insight on how to achieve clarity, read “The Language of Interfaces.”

Design of the header on the home page
Rotating header images and other types of animation are rather in vogue these days, and they’re a good way to convey a thumbnail sketch of a firm’s capabilities and value proposition. Content must convey information, but the header must work on an emotional level to be effective. Writers must take a back seat to designers! The Ben the Bodyguard home page (below) starts to build a connection using a comic character and storyline. This is different than most sites that simply talk about feature after feature.

Ben the Bodyguard
The design should tell a story. (Ben the Bodyguard)

Call-to-action blocks
Before all else, make sure your website’s pages even have calls to action, because this is your opportunity to lead visitors to the logical next step. A call to action could be as simple as a text link, such as “Learn more about our Chicago SEO services.” Generally more effective for conversion would be a design element that functions almost as a miniature landing page.

Much like landing pages, the wording of the call-to-action phrase must be crystal clear and be completely relevant to the page to which you are taking visitors. Yet impeccable wording is not enough: the design of the content block must be captivating, and the text laid out in a way that makes it eminently readable.

Designers can get rather snarly when I tell them their design for a call to action needs five more words: it might force them to rethink the entire design. Many times, though, a discussion with the designer will make us realize that we don’t actually need those extra five words; in fact, we’ll sometimes hit on a way to reduce the word count. The creative interplay mentioned earlier makes a huge difference in this all-important area of conversion optimization.

Calls to action
Calls to action require excellent design and content.

Quick Tips for Conflict Resolution

  1. Keep the lines of communication open between all team members and the client.
  2. Select a project manager with great communication skills and an objective point of view.
  3. Stay focused on the purpose of the design: is it to persuade, motivate, inform or something else? Creative disagreements should never be theoretical; they should always be grounded in what will increase the real-world effectiveness of the work at hand.

Long-Winded Writers Vs. Lofty-Minded Designers

One thing I run up against continually is my own tendency to say too much and a designer’s tendency to say too little. Ask a writer what time it is, and they’ll tell you how to make a clock. Ask a designer what time it is, and they’ll give you a stylized image of a pendulum. Neither answer is particularly helpful!

These opposing mentalities pose challenges in Web design. Does an image alone convey enough information about a product’s key benefit? Will the length of a 200-word explanation of that benefit deter people from reading it? How intuitive can we expect visitors to be? How patient?

This is when having a process that encourages communication between team members makes a difference. I wish I had a secret formula for resolving conflict, but I don’t. I know of only two ways to balance design and content philosophies, and one of them is to talk it out as a team. As I said, communication is at the heart of an effective content strategy, and we have to resist the temptation that some of us have to withdraw into a shell when we encounter confrontation.

The other way to resolve conflicts — astoundingly underused, in my experience — is to get feedback from target users. Simply showing people a Web page and then asking for their key takeaways will tell you just about all you need to know about how effective you’ve been in getting the point across. Our opinion of our own work will always be subjective. Furthermore, because we’re emotionally invested is what we’ve created, discussing its flaws calmly and collectedly is difficult. Users are the ultimate judge of any creative effort, so why not take subjectivity and emotion out of the equation by going directly to the source?


  • The New Rules of Marketing and PR, David Meerman Scott
    Explains content strategy better than anything I’ve read. The third edition was published in July 2011.
  • Content Strategy,” Google Knol
    For a thorough overview of content strategy and links to books, blogs and other resources, check out this fantastic Knol.
  • Call to Action Buttons: Examples and Best Practices,” Jacob Gube
    To promote creative compatibility, designers and writers alike should study this Smashing Magazine article.
  • Top Ten Mistakes of Web Management,” Jakob Nielsen
    For insight into design-related project management, read this post by the brilliant Web usability expert Jakob Nielsen.

(al) (fi)

© Brad Shorr for Smashing Magazine, 2011.

November 29 2011


The Perfect Paragraph



In this article, I’d like to reacquaint you with the humble workhorse of communication that is the paragraph. Paragraphs are everywhere. In fact, at the high risk of stating the obvious, you are reading one now. Despite their ubiquity, we frequently neglect their presentation. This is a mistake. Here, we’ll refer to some time-honored typesetting conventions, with an emphasis on readability, and offer guidance on adapting them effectively for devices and screens. We’ll see that the ability to embed fonts with @font-face is not by itself a solution to all of our typographic challenges.

A Web Of Words

In 1992, Tim Berners-Lee circulated a document titled “HTML Tags,” which outlined just 20 tags, many of which are now obsolete or have taken other forms. The first surviving tag to be defined in the document, after the crucial anchor tag, is the paragraph tag. It wasn’t until 1993 that a discussion emerged on the proposed image tag.

Bursting with imagery, motion, interaction and distraction though it is, today’s World Wide Web is still primarily a conduit for textual information. In HTML5, the focus on writing and authorship is more pronounced than ever. It’s evident in the very way that new elements such as article and aside are named. HTML5 asks us to treat the HTML document more as… well, a document.

It’s not just the specifications that are changing, either. Much has been made of permutations to Google’s algorithms, which are beginning to favor better written, more authoritative content (and making work for the growing content strategy industry). Google’s bots are now charged with asking questions like, “Was the article edited well, or does it appear sloppy or hastily produced?” and “Does this article provide a complete or comprehensive description of the topic?,” the sorts of questions one might expect to be posed by an earnest college professor.

This increased support for quality writing, allied with the book-like convenience and tactility of smartphones and tablets, means there has never been a better time for reading online. The remaining task is to make the writing itself a joy to read.

What Is The Perfect Paragraph?

As designers, we are frequently and incorrectly reminded that our job is to “make things pretty.” We are indeed designers — not artists — and there is no place for formalism in good design. Web design has a function, and that function is to communicate the message for which the Web page was conceived. The medium is not the message.

Never is this principle more pertinent than when dealing with type, the bread and butter of Web-borne communication. A well-set paragraph of text is not supposed to wow the reader; the wowing should be left to the idea or observation for which the paragraph is a vehicle. In fact, the perfect paragraph is unassuming to the point of near invisibility. That is not to say that the appearance of your text should have no appeal at all. On the contrary: well-balanced, comfortably read typography is a thing of beauty; it’s just not the arresting sort of beauty that might distract you from reading.

Archaic Typographic Implements
(Image: Marcin Wichary)

As a young industry that champions innovation and rates its practitioners based on their ability to apprehend (sorry, “grok”) the continual emergence of new technologies, frameworks, protocols and data models, we are not particularly familiar with tradition. However, the practice of arranging type for optimal pleasure and comfort is a centuries-old discipline. As long ago as 1927, the noted typographer Jan Tschichold spoke of the typesetting “methods and rules upon which it is impossible to improve” — a set of rules it would be foolish to ignore.

So, please put your canvas element and data visualization API to one side just for a short while. We are about to spend a little time brushing up on our typesetting skills. It’s called “hypertext,” after all.

Setting Your Paragraphs

The Typeface

Your choice of font is important, but the kind of “family” you choose is project-specific, and we won’t discuss it here except to make one point: the conventional wisdom among Web designers that only sans-serif fonts are suitable for body text is just a rule of thumb. Although serif fonts, with their greater complexity, may tend to be less effective at small sizes, there are many other factors to consider. A diminutive x-height, for example, could impair the readability of a font from either camp. Some serif fonts are highly legible and attractive for paragraph text if they are set properly. Matthew Carter’s screen-sympathetic Georgia is a case in point.

Typographic Anatomy
X-height is the distance between the baseline and midline — a measure of lowercase character height. (Image: adactio)

Having dispensed with the subject of preference, let’s cover some important technical issues relating to one’s choice of typeface.

The first thing to consider when choosing a Web font (read: @font-face font) is the breadth of the family. Does the font include all of the necessary bold, italic (or even better, semi-bold and bold-italic) styles? One style is fine for headings, but paragraphs need greater variety. Without these variations at your disposal, not only will your text look insipid, but the lack of proper emphasis will make your writing difficult to follow.

I personally don’t like Bitstream, but it is fully functional for paragraph text

With the full gamut of stylistic variations at your disposal, you will not have to rely on the unsatisfactory “faux” styles that are applied to a regular font when font-style: italic or font-weight: bold is called. Typefaces are not designed to be contorted in this way. Using the proper styles provided by a family like Bitstream (above) will make your typography not only more attractive but more accessible: dedicated italic glyphs have a much clearer intent than text that is simply “leaned over a bit.”

The trick is to make sure that the declaration of, for example, font-style: italic requests the italic resource rather than triggers the faux style. It should be as effortless as using a system font family such as Georgia. This is probably best explained, like so many things, in commented code. For brevity, we’ll set up just a regular font and an italic (not bold) style variation.

@font-face {
   font-family: 'MyWebfont';  /* Change this to whatever you like. */
   src: url('mywebfont-regular.ttf') format('truetype');  /* The "regular" font resource. */
   font-style: normal;  /* Associates values of "normal" with this resource. */
   font-weight: normal;  /* As above for weight. */

@font-face {
   font-family: 'MyWebfont';  /* Importantly, the same as in the above block; the family name. */
   src: url('mywebfont-italic.ttf') format('truetype');
   font-style: italic;  /* Associates values of "italic" with this resource. */
   font-weight: normal;  /* ... It's not a bold-italic font style. */

body {
   font-family:'MyWebfont', georgia, serif;  /* Provides a system font fallback. */

em {
   font-style: italic;  /* If @font-face is supported, the italic Web font is used. If not, the italic Georgia style is lifted from the user's computer. Either way, a faux style is not allowed to creep in. */

Our second typeface consideration relates to rendering. Some fonts, replete with beautiful glyphs and exceptional kerning as they may be, simply don’t render very well at small sizes. You will have noticed that embedded fonts are often reserved for headings, while system fonts (such as Verdana here) are relied on for body text.

One of the advantages of Verdana is that it is a “well-hinted” font. Delta hinting is the provision of information within a font that specifically enhances the way it renders at small sizes on screen. The smaller the font, the fewer the pixels that make up individual glyphs, requiring intelligent reconfiguration to keep the font legible. It’s an art that should be familiar to any Web designer who’s ever tried to make tiny icons comprehensible.

Hinting is a tricky and time-consuming process, and not many Web fonts are hinted comprehensively. Note the congealed upper portion of the bowl in the lowercase “b” in the otherwise impressive Crimson font, for instance. This small unfortunate glitch is distracting and slightly detracts from a comfortable reading experience. The effect is illustrated below and can be seen in context as a demo.

Unsatisfactory Hinting
Slightly unsatisfactory hinting for the Crimson Roman style. I love Crimson all the same.

The good news is that, as font embedding becomes more commonplace, font designers are increasingly taking care of rendering and are supplying ever better hinting instructions. Typekit itself has even intervened by manually re-hinting popular fonts such as Museo. Your best bet is to view on-page demonstrations of the fonts you are considering, to see how well they turn out. Save time by avoiding, sight unseen, any fonts with the words “thin” or “narrow” in their names.

Font Size and Measure

As a recent Smashing Magazine article compellingly attests, you put serious pressure on readability by venturing below a 16-pixel font size for paragraph text. All popular browsers render text at 16 pixels by default. This is a good enough indication (given the notorious tendency among browser makers to disagree) that 16 pixels is a clear standard. What’s more, the standard is given credence by an equivalent convention in print typography, as the article points out.

We often express 16px as 100% in the declaration block for the body in our CSS reset style sheets. This makes perfect sense, because it is like saying, “100% the same as the browser would have chosen for you.” If you want the paragraph text to be bigger than 16 pixels, just edit this value in the body block using a percentage value that equates to a “whole pixel.” Why whole pixels? Two reasons. First, whole numbers are less ungainly and are easier to use as multipliers in style sheets. Secondly, browsers tend to round “sub-pixel” values differently, giving inconsistent results. An 18-pixel font size expressed as a percentage is 112.5% (1.125 × 16).

Normalizing the size of default text (or “paragraph text,” if you’re being good and semantic) in such a way is extremely important because it sets us up to use ems as a multiplier for the size of surrounding headings and other textual elements. For instance, to render an h3 heading at 1.5 times the font size of the paragraph, we should give it the value of 1.5em. Because ems (pronounced as in “Emma,” not E.M. Forster) are relative units, they change according to the default font size. This makes it much easier to maintain style sheets and, more pertinently, ensures that the perceived importance of headings is not increased or diminished by adjusting the size of the paragraph text.

An illustration of optimal line length, or measure

The “measure” is the number of characters in a line of text. Choosing a comfortable measure is important for usability, because if lines are too long, then scanning back to find the start of the next line can be awkward. Without conscious effort, the reader might miss or reread lines. In The Elements of Typographic Style, Robert Bringhurst puts a good measure at somewhere between 45 and 75 characters. It is the main reason why we use the max-width property when designing elastic layouts.

Whatever your page’s ideal maximum width, it is likely much narrower than what you are used to seeing. According to an in-depth study of typographic design patterns published on Smashing Magazine, the average website exhibits a measure of 88.74 characters, far exceeding the optimal range.

Leading and Vertical Rhythm

Glyphs made from lead
(Image: andrechinn)

Leading (pronounced “ledding”) is the spacing between consecutive lines of text. Leading has a similar impact on readability as “measure,” because it helps to define and demarcate the rows of glyphs that one must traverse from left to right and back again. The trick with leading is to avoid adding too much: text with lines that are too far apart appears fragmented, and the intent of a judicious use of leading is undone by a negative result.

In mechanical typesetting, leading was set by inserting strips of lead metal (hence the pronunciation) between lines. In CSS, the line-height property is the tool we use, and exposure to it is much less likely to make you go mad.

Instead of accounting for space between lines, as with leading, line-height is a vertical measure of the whole line — including the text itself and any spacing to follow. There are three ways to set it: the wrong way, the redundant way and the right way.

The wrong way to set line-height is in pixels. By introducing an absolute value, we would undo all of the good work from the previous section. As the font-size increases (either in the style sheet or the user’s browser settings), the line-height would persist. This produces an interesting effect:

An illustration of optimal line length, or measure
Absolute and relative values do not mix.

So, should we use the same em multipliers that we saw in the last section? This is the redundant way. Although the method would work, providing an em unit is not necessary. Rather, a value of 1.5 for the line-height that is 1.5 times that of the font size will suffice. The line-height property belongs to an exclusive club of CSS properties that accept unit-less numeric values.

p {
   font-size:; /* Silence is golden; implicity 1em. */
   line-height: 1.5;

The attentive among you will have noticed that so far I have only mentioned font sizes that are even numbers. The reason is that I favor a line height of 1.5. So, a font size of 18 pixels means lines with a height of 27 pixels or, if you prefer, lead strips that are 9 pixels thick. Using even numbers is another bid to maintain whole pixel values — I know that any even number multiplied by 1.5 will result in a whole number. A line-height stated in whole pixels is particularly important, because it is the key value used to achieve “vertical rhythm.”

a vertical rhythm illustration
All components on the page should have a height divisible by the height of one line of paragraph text.

Maintaining vertical rhythm (or composing to a baseline grid) is the practice of making sure that the height of each textual element on the page (including lists, headings and block quotes) is divisible by a common number. This common number (the single beat in a series of musical bars, if you will) is typically derived from the height of one paragraph line. You should be able to see by now why an impossible value like 26.5 pixels would be a mistake for such an integral measure.

The benefits of vertical rhythm to readability are much subtler than those of hinting, measure or leading, but they are still important. Vertical rhythm gives the page decorum. Because we have made sure so far that all of our measurements are co-dependent and relative, altering the font size for the body (all the way up at the top of the cascade) will not damage the page’s vertical rhythm.

It is worth noting that, although a line height of 1.5 is fairly dependable, not all fonts are made equal. Fonts with a tall x-height or long descenders might benefit from more generous, separative leading. When basic readability is at stake, adopting a more complex vertical rhythm algorithm is worth it.

Word Spacing and Justification

Without intervention, paragraph text on Web pages is set “ragged right” (text-align: left in CSS): the start of each line is flush with the left margin, but the lengths of the lines vary, giving an uneven “ragged” effect on the right side. If you’re like me, you prefer the tidiness of full justification (illustrated below). But implementing justification without impairing readability is not as straightforward in HTML as it is by using desktop-publishing software.

Fully justified text necessitates, arguably, a narrower measure than text set ragged right.

The problem with justified text in HTML (text-align: justify) is word spacing. In print media (such as newspapers), hyphenation is used to break up long words. This results in more components (words or part words) per line, thus improving distribution and curbing aggressive word spacing. Browsers do not hyphenate automatically, and the soft hyphen (­) is implemented inconsistently. Besides, imagine having to manually insert ­ all the way through your copy. CSS3’s text-justify property, which aims to give us more control over text-align: justify, could ease the problem by enabling inter-character distribution. Bizarrely, it is currently available only with Internet Explorer.


Thankfully, Firefox and Safari now support the CSS3 property hyphens, which can automatically insert hyphens much as you would manually with ­. In fact, you can revert to manual hyphenation in a document set to hyphens: auto by using the hyphens: manual override. Browser prefixes are required, but Lea Verou can help you with that.

Until the other browsers catch up, a consistent cross-browser solution is currently possible only with JavaScript. Hyphenator.js is a powerful tool that takes a library of syllabic patterns specific to each language and uses them to dynamically insert soft hyphens in the correct places. It is a bit pricey (two scripts at a total of 72 KB uncompressed just for the English implementation), but it does work. Its effect is shown in the first screenshot for this section.

Finishing Touches (Styling Contextually)

Now that we have dealt with the important business of sizing, setting and distributing our paragraphs compellingly, you may wish to apply a few small enhancements and decorations for the purpose of signposting the document. These nuances concern only certain paragraphs, and choosing which paragraphs to set off is a question of context. With the help of special selectors and combinators, we are able to target specific paragraphs depending on where they appear on the page, making sure that the difference in their design is consistent with their intended role and meaning.

Paragraphs separated with a margin (such as margin: 0 0 1.5em;) do not require indentation. With paragraphs, margins and indentation serve the same purpose.

Let’s use indentation as an introductory example. Although less common in Web typography than in print, indenting the first line of each paragraph is a conventional method of grouping paragraphs into chunks of information. In terms of rhythm, it is also a sort of punctuation: the reader is invited to pause briefly before each paragraph. Because no indentation is required for the first paragraph — why pause before we’ve even started? — we should exclude this paragraph from our CSS rule. Using the adjacent sibling combinator, we are able to target only paragraphs with a preceding paragraph, and so the convention that has been familiar to book typography over the centuries is ably reproduced.

p + p {
   text-indent: 1.5em  /* I like to keep the indentation length equal to the line height. */

In the next example, I have combined the adjacent sibling combinator with the :first-letter pseudo-class to create a pronounced introductory glyph or “elevated cap”:

h1 + p:first-letter {
   font-size: 2em;
   line-height: 0;  /* The line-height must be adjusted to compensate for the increased font size, otherwise the leading for the overall line is disrupted. I find that any values below 0.4 work. */

Example of an elevated cap

The beauty of adding these refinements (many more of which are demonstrated by Jon Tan, including “drop caps” and “outdents”) contextually is that they are activated only when semantically meaningful and appropriate. For instance, our :first-letter style above is appropriate only for introductory copy. Because the introductory paragraph is always (in this particular schema) preceded by an h1 heading, we have a way to bind its style to its particular role in the document’s flow. In other words, we can honor its meaning through its design.

As long as we rigorously adhere to semantic HTML, we can employ many nuances that are impervious to both the rearrangement of the page itself and the introduction of dynamic content.


Library isle
(Image: primatage)

Walking down an aisle in a library, I no more than glance at the vast majority of books shelved on either side of me. Only a madman would suggest that my disregard of these books should sanction their pages being torn out. Nonetheless, because research has shown that visitors don’t read the average Web page in full, and because the “success” of a page is more easily measured by user action than cognition, we are often encouraged to marginalize our writing in favor of visual signifiers or action cues.

Sure, most people will “bounce” your content, but if you really have something to say, don’t alienate the people who are willing to give your writing a chance. Good typography does justice to your words, and good wording does justice to your ideas. If readers are comfortable reading your type, then they will more likely be comfortable with what you are writing about.

© Heydon Pickering for Smashing Magazine, 2011.

November 17 2011


Fluidity Of Content And Design: Learning From Where The Wild Things Are



Have you read Where the Wild Things Are? The storybook has fluidity of content and design figured out.

It goes that one night, protagonist Max “wore his wolf suit and made mischief of one kind or another.” He hammers nails into walls, pesters a small dog. Author Maurice Sendak doesn’t explain these hijinks textually for the reader. The mischievous acts are illustrated on the right-hand pages. Readers make the narrative connections for themselves.

Wild Things Book
Photo of the book Where the Wild Things Are

The words and pictures depend on each other for completeness. Web designers can employ the same complementary dependence of graphic and text in their own work. It encourages a sense of belonging and can create strong first impressions, which are often essential to effective Web design. Because Web design is not confined to page-by-page display as storybooks are, we’ve got no excuse for neglecting Curt Cloninger’s assertions that a design “has to somehow be relevant to the content, accurately representing its purposes in the medium,” and that “the content has to be useful to the site’s audience.”

This post explains four strategies for improving fluidity of content and design, and we’ll gauge the effectiveness with which several websites use these strategies, taking special note of what we can learn from Sendak’s Where the Wild Things Are.

With Graphics As Your Witness

When editing critical papers during my undergrad, I was constantly mindful of backing up every claim I made in writing. Describing a protagonist as “yearning for a return to childhood” wasn’t enough to convince a professor unless I could refer to a passage where this was suggested.

Though published way back in 1997, Jakob Nielsen’s analysis in “How Users Read the Web” still offers a storehouse of relevant advice about how users gauge legitimacy online. He suggests that when businesses use promotional language online, they create “cognitive burdens” on their users, slowing down their experience with the website, triggering a filter by which they weigh fact against fiction.

Instead, use design to complement or convey self-promotion, easing user skepticism from the get-go.

Makr Carry Goods effectively “backs up” its content with graphics to convince users of the “news”-worthiness of its work. In the example below, the visual promotion of the products complements the text: without having to scroll over the images, we see the products themselves as being the news.

Makr Home

Scrolling over the images on top reveals the textual “news”:

Makr Hover

From there, users can carry on their visual journey through the Mark Carry catalogue, enticed to read on by the persistent connection between the product and the news section, a connection that compels users to explore further.

Key to this graphic-textual connection is the visual quality of the products themselves. Without the clean white presentation and professional style, the visuals here might fail to suggest a connection with the news. But the products have been presented to impress.

Without engaging visual confirmation, content will often fail to persuade.

Take Mark Hobbs’ professional website:

Mark Hobbs

He claims that he’s “not normal.” He’s “extraordinary… adaptable, loyal, ambitious and an Eagle Scout,” and he’s “like a sponge” (among other things). If he were getting points for descriptiveness, Hobbs would take first place. But he’s got no visual evidence of any of these claims. No hint at this lack of normalcy.

Besides, as Nielsen’s studies suggest, users generally dislike “marketese”: writing that is boastful, self-promotional and full of subjective claims. Then again, should claiming not to be normal be considered a boast?

Mark’s claims could have been justified by an impressive and immediate visual display of his past work. Engaging users with the strict facts of his expertise could have reinforced his textual claims.

Consider the home page of Rally Interactive:


It is “here to help you build digital things.” We know this because of the two immediate examples of its work, presented in triangles that recall other projects that required exceptional skill: the pyramids.

Rally’s folio effectively demonstrates a strategy of fluid content and design. The firm backs up its claim and provides users with an immediately useful and positive association. The visual and verbal prompts coalesce to convince users of Rally’s expertise.

Going back to Where the Wild Things Are, if Sendak hadn’t included visuals of Max’s misdoings, what sympathy could we gain for him as his mother sends him up to bed? We can interpret his “mischief” any way we choose, but Sendak’s visual direction helps us gauge what kind of protagonist (or antagonist) Max will be for the remainder of the story. Verbal prompts simply wouldn’t cut it.

Fluid content and design reduce the user’s search time and, in this case, justify the claims made textually. Users don’t have the time or willingness to hunker down and read, particularly when looking for a service. Fluid content and design convince users of the truth of a claim before they even begin to question it.

Tighten Up

Once you’ve eliminated any refutable claims, you might find your content looking a bit sparse. In fact, you want it naked: easy to scan and to the point.

Christine Anameier’s article “Improving Your Content’s Signal-to-Noise Ratio” points us in the right direction for creating tight content that isn’t afraid to depend on suggestive design to share the workload.  There will always be information that the user cannot process visually. So, what should you put in text?

Anameier suggests segmentation, prioritization and clear labeling to make the most of your content.


Segmentation entails sectioning content on the page according to audience or task.

The home page for Jessica Hische’s design portfolio does this effectively:

Jessica Hische

The home page targets the specific needs of users. Hische has divided the links to her services according to what particular users will be looking for, sparing us long descriptions of each service.

Hische also spares us a textual description of the quality of her service, instead pairing tight layout of text with sprawling, confident design. We can gather from the background a sense that she has clean organization. The orange ribbon font “welcomes” us and puts us at ease so that the text doesn’t have to.


Prioritization, as Anameier says, requires that you “understand your audiences and their tasks, and decide what your website is trying to do.” Structure your website to reflect these tasks, removing any content that strays from the path. Hische’s home page demonstrates a comprehension of her users’ purpose for visiting the website, and it wastes no words.

Content and design fluidity entails deciding what should be explained textually and what should be demonstrated graphically. Hische does not verbally boast about her quality of service. The design does that for her, conveying an array of positive attributes, from classic taste to proficient organization.

Hische recognizes that the first priority of users is not whether she’s any good, but whether she offers what they need. Once that is clarified, users will look into the quality. Keyword: look.

Creating those fluid user experiences in which content and design cohere requires, as Mark Boulton states in “A Richer Canvas,” “text that feels connected to the physical form in a binding manner that should make it invisible.” Anameier herself says that incorporating “specific and accurate link text, page titles and headings” gives users the luxury of perusing graphic elements on the page without being disrupted by navigation obstacles.


Labeling that is structured with the user’s goals in mind will be trim and to the point, “invisible,” as Boulton suggests, so that the visual showcase enjoys some attention, too.

Tight content that follows Anameier’s guidelines will visually suggest your service’s qualities and attributes strongly. The description of the service itself will rely heavily on text, but what sets your service apart from others can be conveyed visually. Creating cohesive visual and textual discovery paths for users replicates that same sense of control that users get from the storybook.

Doodle Pad superbly utilizes segmentation, prioritization and clear labeling on its “About” page:

Doodle Pad

Carrying over the sketch-book theme to its visuals, Doodle Pad sets down user goals with clarity, displaying information directed at clients and creative professionals.

The labelling is clear and styled with familiar doodling motifs that show the user where to look for what they need. Key questions are answered, and the word count is not too shabby for a software concept.

Impressively, Doodle Pad connects the imagery and layout to the overall concept without over-informing or weighing down users with elaborate language. It gives us notebook-style notes for a notebook concept: tight and user-friendly.

Check The Narrative Voice

Curt Cloninger’s article “A Case for Web Storytelling” argues for narrative voice as being an essential consideration for Web designers who want to create engaging user experiences.

Designers are at a great advantage when it comes to synthesizing text with graphics. We can create a rich narrative tone that convinces and directs users. We are able to explore and experiment with the Web’s possibilities, going beyond Where the Wild Things Are and celebrating non-linear narratives, incorporating several kinds of interactive media.

With Web design, narrative voice need not stay put in the text. It’s more flexible that in storybooks, and Cloninger encourages us to play with that.

For instance, look at the layout for MailChimp 5.2. Toying with slogans that would look out of date on another Web page, the designers evoke nostalgia with their use of background images, color and typography, elements ripe with narrative potential:

Mail Chimp Retro

Viewers interpret the slogans the right way because of the text’s ironic connection to the design. The “real people behind all those email addresses,” is a wink from the designers, because the viewers recognize that the “real people” in the background don’t look very “real” at all.

Users will commit to a fluid narrative online if the design fully commits to the content. And as Cloninger says, using narrative voice through Web design presents countless possibilities for exploration.

MailChimp explores one such possibility with its demo video, complete with more “wholesome” design and content:

Mail Chimp Retro 2

Users can expect to be led on this retro journey through the other formats for narrative voice, as the video suggests with its old-school film-reel introduction.

The narrative voice is so woven into the content and design that MailChimp 5.2 could offer all kinds of 1950s-terrific claims and users would be moved to follow along.

MailChimp 5.2 experiments with tailoring content and design to a narrative voice, but it is effective because of its consistency. If it hadn’t committed to a particular narrative style, then the escapist spell of this user experience would have been broken.

Green Tea Design

Green Tea Design has chosen a watery, traditional Japanese-inspired design for its website. A geisha shades herself with an umbrella, looking down meekly, making for a quiet non-confrontational effect. But look at the aggressive text: “We don’t design wimpy websites that get sand kicked in their face by the competition.” The text goes on the offence, but the design doesn’t align with or enhance the narrative voice.

Try this: choose one adjective with which you’d like users to describe your website. Affix a sticky note of this adjective to the top of your monitor, and measure every sentence on your website against this adjective. Ask yourself whether the content aligns with the adjective. Now pour over your design and assess it by the same measure. We’re looking for matching sensibilities. Does your content and design align with how you want users to feel about the website?

In Where the Wild Things Are, the narrative tone is the anchor in Max’s hectic journey. Consistent, calm and matter of fact, even when Max is off dancing with the wild things, the voice elicits the reader’s trust as it sees the protagonist back to safety.

Readers settle into this consistency the way Max settles into his boat for “in and out of weeks / and almost over a year / to where the wild things are,” and again “back over a year / and in and out of weeks / and through a day.” It steadies the commotion in Max’s imagination.

Here, readers recognize the tension between the consistent content and the disruptive visuals as the mark of a superbly imaginative journey, where anything can happen, but where eventually everyone must return home.

The narrative commits to this tension until the end, when Max gets back to his room, where dinner is waiting for him, “and it was still hot.”

As a children’s storybook, Where the Wild Things Are doesn’t employ multiple forms of narrative expression. But it is an effective example of the co-dependence of playful and experimental text and visuals, in which the narrative voice incites chaos and calms the senses at the same time.

One last example of a committed narrative voice:


Recalling Gold Rush-era drama and Victorian carnival sights with its effective design elements, Forefathers maintains an adventurous tone, employing text that is consistent, descriptively appropriate and authentic.

Be Mindful Of The User Experience

As Elizabeth McGuane and Randall Snare state in “Making Up Stories: Perception, Language and the Web,” as Web users scan pages, they are “filling in the gaps-making inferences, whether they’re based on past experience… or elaborate associations drawn from our imaginations.”

Trust the user to connect the graphics and text, and expect them to want to. Cloninger says that “the more power a user has to control the narrative himself, the more a visitor will ‘own’ that narrative.”

Keep the descriptions visual. The acts of “mischief” in Where the Wild Things Are are graphic. The connection is made when both elements are harmonized into one idea. The user will be willing to read the text and view the corresponding image if both elements are compelling.

Looking at Jonathan Patterson’s effective online portfolio, we can see he has maintained a fluidity of content and design by basing the user’s experience on the motif of “fresh meat”:

Jonathan Patterson

Patterson’s “About” page looks like a steakhouse menu. The text on the first page hints at a description of a meal, while suggesting the page’s function. The website can be flipped through like a menu, giving the user choice and control. The text is simple and linear, mirroring the sequence of appetizer, main course and dessert in a restaurant menu. Fluid text and design help Patterson to create a particular experience with his portfolio.

Maurice Sendak employs similar tactics in Where the Wild Things Are, encouraging readers to expand their gaze to match Max’s ever-growing visual landscape. As Max moves out of his room and onto the sea, the content on the right-hand pages (otherwise bordered in thick white space) creeps over gradually, thrusting more colors onto the facing page. At one point, a sea monster appears on the left-hand page, which was otherwise reserved for text and white space.

Here is the user experience at its most polished. The change comes quietly, invisibly, but the reader is aware that something is different. The protagonist’s growth has been connected with the reader’s experience of the narrative through the placement and cohesion of text and image.

Another polished example of fluidity in content and design can be found in an actual restaurant’s website layout:

Denny's Home

Yes, Denny’s. Look familiar? Replicating the experience of perusing a Denny’s menu, this layout shows how, in Patrick Lynch’s words, “visual design and user research can work together to create better user experiences on the Web: experiences that balance the practicalities of navigation with aesthetic interfaces that delight the eye and the brain.”

Denny's Menu

The user controls the narrative here, with fluid navigation options that maintain the menu-like aspect of the layout, and a pleasing visual presentation that, as Lynch says, “enhances usability.” Filling in the gaps between glancing over a Denny’s menu and browsing the website, users feel encouraged to control their experience.


Fluidity of content and design requires that you trust users to make connections. By making the tone consistent, backing up your claims, tightening the text and being sensitive to the user’s experience, you can be assured that users will draw the conclusions you want them to draw. Designers of promotional Web projects can learn these lessons in part from storybooks such as Where the Wild Things Are, which demonstrates the essential elements of user control and delight. Trust your inner child; it won’t steer you wrong.


© Sarah Bauer for Smashing Magazine, 2011.

September 01 2011


Making Communication Valuable


Design without functionality is useless. With the resources needed to design websites, videos and graphics at the fingertips of those who crave them, the value of communication today is evident. Many factors will shape the future of the creative design industry, so the more we share ideas the better. We would all benefit from interoperability. Our job is getting harder, because as the problems we try to solve become more intricate, so must our methods become. Less time spent catching up on the principles of design means more time to experiment with what we know.

The Art of Typography

photo credit: Fran Gambin.
When it comes to type, beauty is in efficiency and simplicity.

In the study of graphic design, typography has been the most difficult aspect to implement in my studies. It’s the most complex and time-consuming, yet it provides the strongest foundation. If a design has strong typographic organization, the rest falls into place.

Minimalist design is captivating and projects a sense of economy; it’s clear that the designer has mastered the basics. Simple design is also a key element in the brilliance behind proportional units of measurement, such as ems and percentages.

We can transplant typefaces, principles of organization and grid-based design from print to the screen by having a couple of Web-design tactics handy.


photo credit: typofi
The original movable type.

Old-style, modern, sans-serif, slabs: typeface elements vary in size, weight, form and structure. An old-style serif typeface might evoke feelings of warmth and elegance, class and extravagance. For something contemporary, a sans-serif typeface like Helvetica or Lucida—with a high x-height and uniform weight—would convey simplicity.

When using a combination of fonts, contrast helps readers differentiate between them, with their opposing structures and forms. Type is a matter of personal preference. Stick to a small variety at first so that you can learn to recognize the differences. Here’s a good exercise: choose one font and experiment with different weight and size combinations in that family.

Grid-Based Design

photo credit: Ilona Kuusela
Cuidad de las Artes y las Ciencias in Valencia, Spain

Typographic grids, like architectural blueprints, lay a solid foundation, which is necessary in the initial stages of design. Rigidity in structure has defined grid-based design throughout its existence, and movement occurs when a viewer is led along a particular path through a composition. Fluid Web content has changed this by introducing the element of adaptability, which makes a static medium responsive to a rapidly changing environment. Basic print and Web structures exist on the same planes: the x and y axes. Columns and gutters lie perpendicular to the baseline grid and can be measured and organized the same way. When combining the two, pay attention to the details that make each unique, such as the CSS that enables fluid content and the solid structure that print media has perfected over time.

Divine Proportions

photo credit: peter_w
The Fibonacci Sequence is a naturally occurring phenomenon that has intrigued man for centuries.

The Golden Ratio, which is based on the Fibonacci Sequence, underlies international paper sizes (the “A” series: A1, A2, A3, A4, etc.). Unlike American paper sizes, international sizes are uniform in symmetry and (metric) measurement. Paper size doesn’t necessarily bear on Web design, but proportion does. Graphic design is visual organization, and the beauty is in the details.

“The end result is the sum of all the details.”

– M. Vignelli

Making These Principles Work On The Web

photo credit:Dmetri Popov
Sketching on paper can be a refreshing and inspiring break from the screen.

Responsive Type

By using relative units as the focus of a design’s typographic structure, every word on the page can react as one to the display size. Readability issues are thus resolved in the early stages of programming, and adaptive functionality is added, creating unity.

Fluid Content

Applying the principle of responsive type to every element of a Web page makes the content capable of adapting to a variety of issues that might otherwise compromise compatibility and readability. Proportional units of measurement free a Web page from static size and can be used to design content for mobile browsers—one of the major areas guiding the direction of Web design right now. Using proportional units of measurement in CSS makes content fluid and ties in the math and proportions that have allowed traditional typography to become a means of expression and an art form (instead of mere rules to dictate what cannot be done).

Media Queries

Screens come in a thousand different sizes and resolutions. What I like about the CSS3 media query feature is the option to design for different media. With the specifications in place, you can add advanced variables in response to different types of output, not just a screen: projectors, printers and mobile phones are just the beginning. And conditional CSS declarations allow for progressive design.


The Fluid GridBreakr
I developed this print format (one of many) for the mass reproduction of a singular style.

Here is an example of a print media style sheet. The format can be adapted for Web development if you know a few basic elements of CSS. In the type treatment, the heading is set to 72 points and the body to 12 points. This means that the heading is six times the size of the body text. By using ems as the relative unit of measurement in your CSS declarations, you can maintain every text size setting as a pre-formatted style:

body { font: normal 100% Georgia, Garamond, serif; }

h1   { font-family: Helvetica, sans-serif;
       font-size: 6em; }

This same principle will keep elements on the page fluid. Set CSS declarations for page ids that tell the HTML to act this way (do this for ids, not classes, because ids occur once per page, while classes can occur more than once):

#page { margin: 40px auto;
        padding: 0 1em;
        max-width: 60em; }

That’s what CSS does: it defines the way you want the HTML to act. Set ems again as the unit of measurement to make it behave uniformly. How did I know which em values to use? It’s in the math and percentages.

First, convert the body-text setting (12 points) to 16 pixels. Then, because everything is based on that setting, you can use it to convert the margins and font sizes to conform to your grid.

Further Resources

These are available as PDF downloads:

Common Terms of Design

  • Movement
    The visual flow that directs a viewer’s eye through a design.
  • Proportion
    The relationship in scale between elements and their size, shape and quantity.
  • Emphasis
    The varying degrees of dominance in a design, usually defined by weight, space and perspective.
  • Unity
    The quality that makes a design complete; the degree to which the parts of a whole come together and resist falling apart.


July 25 2011


Email Is (Still) Important And Here Is Why

Advertisement in Email Is (Still) Important And Here Is Why
 in Email Is (Still) Important And Here Is Why  in Email Is (Still) Important And Here Is Why  in Email Is (Still) Important And Here Is Why

Social media is more than a buzzword. It’s now a lifestyle decision for a lot of companies. Many individuals and organizations have abandoned a traditional Web presence (which used to mean a website and email address) in favor of a Facebook page coupled with a Twitter account.

So, where does this leave email? Has the @ symbol lost its meaning as an address, and instead become the signifier of a Twitter name? I think that we need to radically reconsider our approach to email in this changing landscape and understand that it can be a powerful tool when leveraged correctly.

Love-for-email in Email Is (Still) Important And Here Is Why
Have we lost our love of email?

Changing Habits

While I disagree with the assertion that “social is killing email,” evidence shows that email use among the younger generation is declining: a 59% decline among US teens between December 2009 and 2010, according to comScore. In the same study, only the over-55s had increased their use of email. This is especially significant if it represents a long-term shift away from email and towards social media and SMS as preferred methods of communication.

Losing Faith In Email

Email has been around forever (it predates the Web), so it’s not surprising that, for some, it has lost its lustre. For one, it’s not exciting enough; other social media platforms have come with fanfare. Twitter has hosted world headlines, and Facebook has been the driving force behind many campaigns. In 2009, a Facebook Group even succeeded in getting Rage Against the Machine’s single “Killing in the Name” to the UK’s “Christmas number one” spot ahead of the X Factor single.

This level of drama appeals to business types who like their social media “sexy,” and for this reason Twitter and Facebook push all the right buttons around the boardroom table. By comparison, an email marketing campaign may seem tired and old fashioned.

Email4 in Email Is (Still) Important And Here Is Why
Email in a social media landscape.

For another reason, it lacks tangible value. Valuations of Internet companies (and particularly social media giants) have skyrocketed. In May of this year, LinkedIn was valued at $10 billion (roughly 41 times its 2010 net revenue). Facebook is still a private company, but rumors of a public offering in 2012 include a valuation that could reach $100 billion. While many in the industry see this as a portent of a second dot-com bubble, for a lot of businesses it is simply a compelling reason to invest in these services.

Email is non-proprietary, which means that no one is pushing its agenda, and, unlike the LinkedIns, Groupons and Facebooks of the world, it cannot attract a market worth. Value theory tells us that if something has no market value (such as air, water, etc.), it is often taken for granted. I think email has suffered a similar fate.

Finally and perhaps most significantly, it lacks the pack mentality that most of social media thrives on. Despite the growth of marketing, email is still mostly private. No one knows which lists I am subscribed to or who I write to from the privacy of my inbox, even if by virtue of Facebook they know what I ate for breakfast. In stark contrast to the insidious evils of “like” culture, my email behavior does not broadcast itself all over the Internet, which for marketers is a decided disadvantage.

Email Is A Currency

Email3 in Email Is (Still) Important And Here Is Why
The currency of email.

Everyone Has It

It’s true that email is fighting with other services for online communication, but it is still ubiquitous in a way that other social media networks are not. As of May 2010, 39% of US Internet users had never used a social network, compared with only 6% who had never sent or received an email. If you want to reach the majority of your audience, email is still the safest bet.

It’s a Unique Identifier

It’s worth noting that people tend to be members of multiple social media websites simultaneously, with varying degrees of involvement, but they usually have only one or two active email addresses. The email address remains the unique identifier online; you use it to log into almost everything, so it would take a lot for it to become obsolete.

It’s a Coveted Resource

According to research conducted by the Direct Marketing Association, email marketing is expected to generate an ROI of $44.00 for every dollar spent on it in 2011. This is due in part to the fact that more customers are engaging via email: 93% of email users have opt-in relationships with a consumer brand, as opposed to 15% on Facebook and 4% on Twitter (according to Chris Brogan, president of New Marketing Labs).

This value has been recognized by most social media networks. Facebook launched Messages, which provides each user with an email address, because it understands the importance of email in the social graph. Google+ is also tying email more directly into social media activity, blurring the distinction between the two.

Overcoming Obstacles

I hope I’ve managed to convince you that email is still a powerful part of your social media arsenal. But before you leverage it to the best of your ability, let’s understand some of email’s most notorious limitations.

Email2 in Email Is (Still) Important And Here Is Why
Understand the limitations imposed by email.


This incarnation of junk mail is relentless. It plagues users, who must be cunning to distinguish genuine mail from hoaxes. Email clients require elaborate algorithms to sift the wheat from the chaff. And perhaps most vexing, Internet marketers have to struggle to get anything commercial through to their subscriber lists.

Unfortunately, Twitter and Facebook are not safe havens either. Business folk are not the only ones taking a bigger interest in social media; scam artists are, too. As of April 2011, spam alone occupied seven full-time employees at Twitter. This is a drop in the ocean compared to email (over 73% of all messages sent are spam), but it might be a relief to hear that we are experiencing the lowest levels since 2008; at least things are looking up!


Social media networks encourage multi-way conversations between many users. Even those who are not involved directly in the conversation can often “overhear” what is happening. Email is much more direct; it is usually between just two people and does not invite additional participants. Understanding this limitation of email will make it your greatest ally. Unless an email is personal, it will not get a response; however, it is one of the best ways to deliver direct messages, such as newsletters and alerts, which do not invite discussion so much as action.


HTML email is far more effective than plain text for marketing, but you’ll need to know the tricks to make it look good across different browsers. Writing code for email usually means going back to 1998, which is enough to put most people off it entirely. Luckily, Campaign Monitor and MailChimp offer some great templates to get you off on the right foot. But make sure to use a tool to test the email across different clients before clicking the “Send” button, or else you could do more damage than good.

Making Email A Part Of The Conversation

Bonnie Raitt once sang about giving people something to talk about, and that’s what you have to do with email marketing! Spark that discussion and keep it going on your blog, Twitter and Facebook.

Rien van den Bosch

Email is difficult to ignore. Unlike social media streams, in which content is disposable, an email demands your attention until it is read. Use this to your advantage: write newsletters; push your most engaging content in front of your users; adapt your offers so they match your audience.

Email1 in Email Is (Still) Important And Here Is Why
Use email to provoke conversation.

Also, email is a much calmer medium. Inbox zero is a difficult (yet achievable) goal, whereas staying on top of every stream, tweet and status update is not only stressful, but well nigh impossible! With email, you can take time and give thought to your words; you can dedicate some time to the person you are communicating with. Email not only gives your thoughts some room, but gives you time to write them down clearly.

If you’ve heard of the Slow movement (which advocates a cultural shift toward slowing down life’s pace), then you might want to consider how email fits into Slow Marketing. Is it possible that cultivating brand advocates over time who have more than a fleeting interest in your product could bring long-term benefits? Could you talk to these customers in a more respectful way, one that leads to substantial, meaningful conversations?

Think Twice Before Hitting “Send”

If you’re not put off by the shortcomings of email and you find 140 characters more limiting than liberating, then you’re well on your way to incorporating email in your social media campaigns. Chances are your email subscribers are your most loyal audience, so treat them with respect (which means offering valuable content, and not too often), and they could become your greatest advocates.

While reams of articles are devoted to creating social email campaigns, here are just a few tips to get you started:

  1. Have something to say.
    Sounds simple, but while your daily musings are permissible on Twitter, your email audience will be less forgiving.
  2. Make it digestible.
    Email doesn’t limit your word count, but you’ll need to apply some editing of your own. If it’s a long article, include an excerpt and link through to the website for the full story. This has the added bonus of enabling you to track the most popular items.
  3. Be regular.
    Set a schedule of emails that you know you can keep to. A monthly or quarterly newsletter can be a good guide.
  4. Be personal.
    Tailor your tone to the audience. Most email services offer invaluable segmentation tools. You wouldn’t speak to your spouse the way you talk to your bank manager; neither should you address your entire audience the same way.

Don’t forget that email is only half of the conversation. Find out where your readers hang out (you can use their email addresses to locate them), and continue the discussion there!


© Felicity Evans for Smashing Magazine, 2011.

July 21 2011


Online Proofing Solutions For Everyone

Effective communication is key to moving design projects forward and is especially important for proofing. In an ideal world, designers and clients would meet face-to-face, but in reality client schedules and locations make it impossible, leaving electronic communication as the only viable option. What designers need is a virtual workspace where they can communicate with their client much like how they would in person. Emails do this to an extent but they are painful to keep organized, make it impossible to mark-up proofs, and require more work from the client and designers than they care to invest.

With so many marketing firms, design agencies, and in-house creative teams, there should be at least one software option out there that works better than email, right? There are actually several tools that can significantly make the proofing process easier and take the stress of project review down a notch. These types of tools offer you a way to automate the proofing process and send feedback to your client and vice versa without jumping through unnecessary hoops. This article lists and briefly describes many potential tools that can streamline your proofing process and make your relationship with clients less of a headache. But first, I need to point out a few factors that can effect which proofing software you choose.

Size can be a big factor in finding a proofing software that works for you. Are you a small company or a freelancer? Maybe you want something that is simpler and more straight forward. Do you manage a large corporate creative, publishing, or design team? A proofing software that offers advanced scheduling and workflow management might make your job easier. Your size and the size of your clients also play into the many security factors you should consider.

Large Agencies and Corporate Creative Departments

If you manage the proofing process for a large agency or company, you might find value in a software that not only gets the job done but also does so in an efficient and organized manner. You will want something that has advanced workflow and scheduling capabilities to make managing your team easier. In terms of security, your clients may prefer their projects hosted on a server that you own and manage rather than a third-party server. This requires more configuration and maintenance on your part but will put your clients’ minds at ease when they know their digital assets are in trusted hands.

Approval Manager

Screen Shot 2011-07-20 at 10.57.18 PM

Approval Manager includes an integrated annotation tool along with email notifications. It offers advanced workflow and schedule management features which makes it a good solution for larger teams and design firms. Approval Manager also is hosted locally by the user on a personal server so security issues are managed in-house. There is a free version available along with an upgraded version that offers more features.


Screen Shot 2011-07-20 at 11.00.47 PM

ConceptShare also offers an annotation tool for marking up and commenting on proofs along with notifications. Users can organize their proofs into collections, workspaces, and folders so they can easily navigate through their proofs. The entire proofing process, including uploaded files, are hosted on ConceptShare’s website. Their website offers a free trial and four separate editions that offer different capabilities based on team size.


Screen Shot 2011-07-20 at 11.06.59 PM

ProofHQ is a lot like ConceptShare in that the whole process is hosted online. ProofHQ includes a basic annotation tool, folders for organizing your files, file versioning, and email notifications. Prices range from $17 – $299/month which are based on the number of users, storage size, and the number of proofs per month.

Small Creative Teams & Boutique Agencies

Small design firms may be able to get away with a proofing solution that doesn’t offer as many features as the ones discussed above. As a manager of a small team of designers something that is simple and cheap might be best for your needs. Hosting on a third-party server might be another desirable option because it is easy to setup and you don’t have to waste your resources on maintenance. Granted, this option isn’t as secure as hosting locally, but it is a practical option for a small design firm.

Screen Shot 2011-07-20 at 11.15.19 PM

Backboard is a simple online proofing tool that allows you to mark-up a proof using a red pen tool. Users can set deadlines and receive notifications on those deadlines along with feedback and new proof versions. Users can also upload their existing contact lists to Backboard to easily mail out their proofs to existing colleagues and clients. All projects are hosted with Backboard and plans range from $6 – 50/month.

Screen Shot 2011-07-20 at 11.18.44 PM

Notable allows you to take a screenshot of your design, upload it to their website, and receive and share feedback between your team members. It also offers user workspaces for organizing screenshot based on projects and clients. Notable offers a limited free version, a free trial, and basic paid plans ranging from $19 – $49/month.

Screen Shot 2011-07-20 at 11.22.44 PM

ProofQuick is much like Backboard in that it is a quick and simple online hosted solution for small team proofing. It also offers notifications and an integrated markup tool. ProofQuick was originally built specifically for the yellow page industry but can be used for a variety of purposes. Their website offers a free 15-day trial.


Whether you’re a novice designer or independent expert, a simple and free (or close to free) proofing software solution might be your best bet. If you don’t have as many clients as bigger firms, workflow or scheduling management capabilities may not be essential. You can probably get away with a software that directly emails your clients the proofs and allows the clients to quickly make comments and email them back when they are finished with their review. In this case, the simpler, the better.

Screen Shot 2011-07-20 at 11.25.12 PM

With Redmark you can upload an image and send it off to your client for review. The client can then use Redmark’s online annotation tool to comment on the image and email it back to you when they are finished. It also offers a way to archive and view past versions of the image. Redmark is limited in comparison to other online proofing solutions but is a free service.

Screen Shot 2011-07-20 at 11.27.01 PM

Ididwork is a free solution that can be used as a simple feedback tool. Users can share what they have been doing with their team members and begin receiving reviews and comments on their work. Users can either sign up as managers or employees so user categories can be defined to a project. This isn’t exactly tailored for a designer/client relationship but may be used to fulfill this need.


Screen Shot 2011-07-20 at 11.31.41 PM

DesignSignOff hasn’t officially launched yet, but did recently acquire a popular proofing tool called GetSignOff. Users can present their work to clients who can then give feedback. Clients can stay up-to-date on their project with email notifications and project stats. Once this project launches, it could be a great tool for freelancers and novice designers.

Adobe Acrobat X Pro

Acrobat X Pro offers simple version control, annotation, and review. You can use the “Adobe SendNow” feature to send, track, and share your files online. Adobe X Pro doesn’t offer all the features of a regular proofing software, like workflow, scheduling, and email notifications, but does offer a simple way to receive quick feedback from your clients. This option may be a bit pricey, but Acrobat x Pro does come packaged with Adobe Creative Suite 5.5. Acrobat X Pro costs $449 for the full version and $199 for an upgrade.

Sponsored by

Made By Tinder

Advertise on Fuel Brand Network.
Fuel Brand Network 2010 cc (creative commons license)

Online Proofing Solutions For Everyone

July 04 2011


The Medium Is The Message

Advertisement in The Medium Is The Message
 in The Medium Is The Message  in The Medium Is The Message  in The Medium Is The Message

Since the early days of communication, humanity has been captivated by the methods it uses to convey and preserve information. How we communicate with each other defines who we are and constitutes so much of what makes a culture and an individual unique.

Over the centuries, we have seen media evolve across a wide array of channels, from print to radio to television to the Internet. Each one of these channels, or media, has its own unique characteristics, much like the people who use them.

Parabol in The Medium Is The Message
The medium through which we choose to communicate matters. (Image: Jon Ashcroft)

When it comes to understanding these various media, one of the best to learn from is Marshall McLuhan. Born in 1911 and passing in 1980, McLuhan had no opportunity to experience the Web the way we know it today, but that didn’t stop him from exerting a huge influence on it. It was McLuhan who first spoke about technology and communication having the ability to create a “global village.” As an early educator and pioneer of the study of communication and its evolution over time, McLuhan introduced a lot of observations about the impact of new forms of expression and media. Most notably, McLuhan’s expression “The medium is the message” has had a resounding impact not just on Web design but on mass media in general.

“The medium is the message” as a phrase sums up a much deeper communication theory, which is that the medium through which we choose to communicate holds as much, if not more, value than the message itself. At first, this concept might seem vague and indeed a lot to grasp. But I can honestly say that understanding the meaning behind these words revolutionized the way I approach Web design; not from a technical or procedural standpoint, mind you, but from a fresh mental perspective that provided clarity on how to approach and design for the Web.

On The Surface

McLuhan’s theory has certainly not been neglected or forgotten. On the contrary, it has been widely studied in a number of circles and applied to television, print and the Internet alike. While many people seem to grasp the general point, the deeper truth is often missed or misinterpreted. In order to get to this deeper meaning, exploring the general concept first may be necessary.

Perception in The Medium Is The Message
Perception of a medium plays a vital role. (Image: Jon Ashcroft)

The central theory behind “the medium is the message” is that the medium through which content is carried plays a vital role in the way it is perceived. We no doubt see this with the Internet today, in the way we get our news compared to how we got it with print. But perhaps an even clearer illustration can be painted without reference to technology or communication at all.

Imagine, if you will, a deep well in the middle of a vast desert. The well is our medium (as the radio or Web would be), and the water is our message. A rich and reliable well in the middle of the desert would naturally become the hub of travel routes and even a sustainable population. The water by itself is of no use without the well. If it were inaccessible or people were unaware of its existence, it could not support life. The well, as a medium, delivers water to the people passing by or living nearby. As a result, the well becomes synonymous with water and life, despite really being just a hole in the ground.

A Real-Life Comparison

Building on this illustration of the well being a medium for the water, we can extend the theory to modern technology. Let’s compare a feature film to a website as we know them today. Communicating the same general content to the user in both media is possible. However, because the media are inherently different, we experience the content in entirely different ways.

A film is a linear experience. Everyone watching the film participates in the same preset series of a beginning, middle and end. We watch characters and stories unfold over the timeline, working towards a conclusion. Since the creation of film, this idea has been integral to the planning and development phases. All of this is determined by the medium, regardless of what the message may be.

Transformers1 in The Medium Is The Message
The upcoming Transformers movie offers a very different experience to that of the Web.

Move the same content over to a website and the experience changes dramatically. In the context of a website, information is rarely passed to the user as a linear experience. Instead, character traits, back story and plot points might all be split up into different pages or sections. It is up to the user to decide how to consume the information and reach a conclusion. Just as a beginning, middle and end are a part of the entire film process, this segmentation and fluidity should be a part of the planning stages of a Web project.

Expanding Our Understanding

This is all well and good, but saying that we experience different media in different ways doesn’t really sound groundbreaking. A lot of people are inclined to take McLuhan’s theory here as a lesson learned and a day’s work done.

Well, sit tight because we’re just getting started in exploring how the deeper truth of “the medium is the message” can change the way you design and develop for the Web.

Medium-message-screenshot22 in The Medium Is The Message
Link yourself onto the highway of mass media communication. (Image: Jon Ashcroft)

Going back to our example of water being delivered through a well, we can quickly draw a comparison to the impact that fresh water has on our society. In the same way, we can see how a new medium can affect us. Before the telephone, there was no such thing as having a conversation with a friend or colleague in another town or region, at least not without a journey that would span days or longer. Today, we are always just a phone call away from a friend or family member abroad. We even take for granted that we can be in touch with people so quickly.

Going further, we can ask whether there was such thing as a “global event” before mass media communication such as satellite links and the Internet. Today, we often cite various events as things that will “change the world,” but 100 years ago the entire world was not reachable. Before we had the ability to learn about natural disasters, wars, elections and technological achievements through mass media, a “global event” simply did not exist. As a result, we could argue not only that mass media is a tool to channel global events, but that it made them possible in the first place.

World-vision in The Medium Is The Message
For World Vision, the Internet is an invaluable tool for expanding and executing its mission.

Think about it. Without the Internet, Justin Bieber would not exist to almost all of us. Of course, he would still be a part of the world, but without the medium that drove his success, a cure for Bieber Fever would be entirely unnecessary.

An Impact On Web Design

The real takeaway here is that Web designers are able to create tools, experiences, services and communities as a result of their medium. The Internet has a more powerful reach than any other medium in history, which in turn has equally large implications for its status as the message. As a message, the Internet preaches accessibility, expandability and instant satisfaction, things that we designers should keep in mind when approaching any project.

Think about how your projects will use the Internet, not as a medium but as a message. In the disaster that struck Japan this past spring, the Internet became the medium of choice in every way. From the people-finding tools introduced by Google to the relief websites and news coverage across the globe, websites stood out not because they were fashioned with HTML5 or designed responsively, but because they enabled us to be in touch with friends and family and to donate to the cause. New tools, trends and CSS3 gimmicks are a part of the medium, but they play mere supporting roles to the message.

Zen-garden in The Medium Is The Message
One of the original outlets for demonstrating the power of style, CSS Zen Garden remains a powerful showcase for how a unique design can shape a message.

This doesn’t mean we should minimize or eliminate design and aesthetics. Rather, designers should always consider how a design decision shapes the message. The very techniques we practice every day — using line, color, shape and other fundamentals — all play a role in the way the message is received. Using design principles to shape the tone and audience of a message, versus creating a stylish and trendy look, is what separates professionals from amateurs in our industry. Realizing your full potential as a designer has a lot to do with your ability to control the message.

Controlling The Message

We’ve come full circle, back to the original point of this article. As Web designers, how do we utilize McLuhan’s phrase “the medium is the message”?

It starts as soon as an idea or request for a project comes to us. As professionals, we need to guide our clients down the right path and show them how best to take advantage of the Internet. We need to recognize that Joe’s Hardware Store on the corner might not benefit as much from a domain name and website as it would from a Twitter and Facebook account or no Internet presence at all. If good ol’ Joe has no intention or need to market to anyone outside of his neighborhood, then the Internet’s message just isn’t necessary for him or his customers.

Fractals-desktop-screenshot in The Medium Is The Message
The whole message is more than the sum of its parts. (Image: Jon Ashcroft)

On the other hand, if Joe wants to market his patented new handsaw to a larger market and expand his business, then the Web might just be the place to do that. As a designer, you can help Joe harness the power of instant Web exposure, social marketing, online orders and all of the other fantastic tools that can help his business grow. Joe’s new website will be a beacon of Web standards: it will be responsive, elegant and unique. Of course, we may notice that none of these things actually earn Joe a lick more of money. Rather, the Internet, when used as a message to new customers, holds the real power.

Of course, this is just the tip of the iceberg with using the Internet to benefit a business, service or application. The gradual ubiquity of the Web makes this topic only more exciting and powerful. Staying true to the message that our medium presents goes hand in hand beautifully with building solutions that are adaptive and constantly expanding with technology.

As stated earlier, my tools, skills and process for designing and developing websites have always been evolving. Still, the motivating factor behind Web design is in the message. The message is what makes money, makes an impact or expands your reach. Without it, interest in websites and applications would never get off the ground.

The Takeaway

When all is said and done, it is important to remember two things about McLuhan and his teachings. First, the medium through which a message is experienced shapes the user’s perception of the message. Secondly, a medium can be the message itself if it is delivering content that would otherwise be impossible to access.

Simplify-screenshot22 in The Medium Is The Message
Keep it simple, and let the medium do some of the communicating. (Image: Jon Ashcroft)

As you start projects and are approached for your professional opinion on how to harness the power of the Internet, always consider the message. Designers who jump into talking about how the latest and greatest trends can help a new project are missing the point. We use the Web to create beautiful and unique solutions that would have been impossible just a few years ago. As a designer, make sure you always respect the powerful message that this medium is.

Additional Resources

  • A Checklist for Content Work
    An excerpt of Erin Kissane’s book The Elements of Content Strategy. A fantastic resource for taking online content to the next level and enhancing your message.
  • Make Your Content Make a Difference
    Digging further into content development, this article outlines some of the myriad advantages to spending more time on your content.
  • The Medium Is the Massage
    Get your information from the source! This book is a concise summary of McLuhan’s thoughts.


© Jason Gross for Smashing Magazine, 2011.

June 20 2011


Guidelines For Working With External Code Libraries

Advertisement in Guidelines For Working With External Code Libraries
 in Guidelines For Working With External Code Libraries  in Guidelines For Working With External Code Libraries  in Guidelines For Working With External Code Libraries

Working with code that was created by some other person or organization is routine for developers, but it can be one of the most demanding activities, particularly if you’re still learning. From using code libraries to working on a team of developers, there are bound to be times when you need to get to grips with code written by someone other than yourself.

Whether you’re a software developer or a Web designer who does a bit of coding from time to time, your work routine might sometimes be isolated, but your work typically is not. When you use an external resource or work on an existing system, you see that your work exists in the context of other technologies and, yes, other people.

For developers, the nightmare of other people’s code is one of the most frustrating aspects of the job. But I believe this needn’t be the case. If you can get into a few “healthy” habits and learn to see unfamiliar code as an opportunity, then your working day will be less stressful and your own code-writing skills will ultimately improve. Don’t worry: this isn’t a self-help presentation, and no mantras will be required.

In this article, we’ll go through a few tips and techniques (with particular reference to JavaScript and a little PHP) that can make working with other people’s code less nightmarish and more productive. If you come from a programming background, you might already indulge in many of these activities already. But who knows? Maybe you haven’t come across some of them yet. If you’re anything like me, you pick these things up in a haphazard, random sort of way. If you come from a design background, some of the tips might well be new to you.

Steering clear of the “Should Web Designers Know How To Code?” debate, this article is written to be helpful to people who are primarily designers but have chosen to get more involved in coding, as well as people who are primarily developers but are just getting started.

A Brief(-ish) Aside On Development Patterns

For developers who come from more of a design background, seeing the value in some of the techniques that more seasoned programmers use can be difficult. Let’s briefly look at some of these, and don’t worry if you don’t know much about programming (and don’t really care to), this is really general stuff that will more than likely prove useful. If you’re an experienced programmer, this section will likely be less relevant to you.

When you go about creating an application, whether for the desktop or the Web, you have a number of choices: not just in technologies, but in how you use them. Generally speaking, the result is a load of code that is executed to produce the required functionality and appearance. However, various options, techniques and patterns are involved in organizing and designing this code to make it carry out the required tasks.

Umlwebsite in Guidelines For Working With External Code Libraries
Development patterns are used to split up the various tasks involved in creating an application. (Image: Jean-Marie Favre, part of UML diagram representing LinkedIn’s social networking system.)

Organized Code

Development patterns represent different approaches to building code to implement specified functionality. In many cases, they involve grouping sections of code and assigning these well-defined sets of responsibilities (and data).

One of the most intuitive development models of this kind is object-oriented, in which tasks are distributed between objects (with class declarations that define how objects should behave). For example, you could have an object in a payroll system that is responsible for handling wage calculations, another for processing payments and so on. Code that is external to an object should be able to use it without having to get involved in the details of what’s going on inside it.

The idea of separating code into sections, with clearly defined roles and interfaces, is common to the wide variety of programming languages and development patterns in use; for example, model-view-controller architecture, and programming paradigms used with language types such as declarative and imperative. Object-oriented programming is one of the many styles of structured programming.

Say you were writing code for a payroll system and wanted to find out how much tax an employee has to pay. The code that handles wage calculations could contain a function written in this form (pseudo-code):

number getTaxAmount(number topLine)

This means that external code can call the getTaxAmount function, passing the employee’s total wage figure (topLine) as a parameter and getting the amount of tax returned as a number. How getTaxAmount works out the amount of tax owed is irrelevant from the point of view of the “customer” code. All it needs to know is:

  • What the function is called,
  • What the parameters are,
  • What it returns, and
  • What its purpose is (which would hopefully be outlined in an informative comment, although this doesn’t always happen.)

If this isn’t making much sense to you, don’t worry. Having these concepts in mind as you work with code will eventually pay off. It’s an area where learning the theory before the practice can sometimes be helpful for beginners.


Let’s use a car analogy to illustrate this. When you learn to drive a car, you learn what the controls are, how to access and use them, and what their general purpose is. For example, you know that pressing the accelerator generally makes the car speed up. But you don’t need to know how the accelerator makes the car speed up in order to effectively use the car.

Tools in Guidelines For Working With External Code Libraries
You don’t have to know how it works, as long as you know how to achieve the desired result. (Image: Vincent X)

Looking at both the tax code example and the car analogy, we can say that the reason that these functions are usable is that, from an external perspective, the interface is clear. The interface is the point of access for the user: the controls in the case of the car, and the function outline (or signature) in the case of the payroll system. You can make use of the functionality of a chunk of code as long as you understand how to access its interface. This is a basic principle in many of the development patterns you’ll come across when reading code, both server-side with languages such as PHP and ASP, and client-side with languages such as JavaScript.

So, when developers work on substantial applications, they can usually make use of code written by someone else with relative ease, so long as the interface for the code is well defined (and, ideally, commented). Again, all they need to know is what it does at an abstract, generalized level, what inputs it takes (for example, the parameters) and what it returns.

What Does This Have to Do With Anything?

Okay, let’s see how this applies to working with other people’s code. However a piece of code has been developed, when you’re working with it, chances are you will only really need to understand certain elements in order to make good use of it. Bearing the development concepts in mind, you can focus your reading of the code on those few relevant areas. Learn to see code in terms of the visible interfaces (for example, function outlines, variables that are particularly visible or persistent, and class declarations, if applicable), and don’t waste time looking into their details unless you have to.

The rest of this article runs through some of the key skills involved in reading code.

Software developers working on big applications typically program on a team, and these skills are picked up naturally. When you code on a more casual basis, you can still pick up the skills, but you may just need to consciously focus on them at first. The more experience you gain, the more automatic these practices become.

If you’ve ever used a code library (jQuery, for example, or another JavaScript resource) and have called on it on one of your Web pages, then you’ve accessed its functionality in much the same way as what’s outlined above. You’ve called on it through a defined interface; in this case, whatever code you included in the HTML to use it, even if just a link to a script in the header of the page.

Some Useful Habits

Before we get to specific tips, let’s go over some general habits that will help when you try to make sense of an external library or other code.

Be a Reader

Get into the habit of reading other people’s code, even when you don’t have to. Life’s too short, you say? Give it a try anyway; it’s less of a punishment than you may think! If you see some functionality on a website that fascinates you, look at the code if it’s visible.

Source1 in Guidelines For Working With External Code Libraries
Taking a peek at the source code on the jQuery Thickbox page.

If you’re new to programming, most of the code you look at won’t make much sense at first, but you might be surprised by how your brain soaks it up. The more code you look at, the more attuned you become to processing it visually. Few professional writers would feel equipped to do their job if they didn’t spend time reading the work of other writers. Why is coding any different?

Browser tools like Firebug are really useful here, because they let you hone in on exactly the bits of code that you’re interested in, ignoring the rest. If you work with, or are interested in working with, certain technologies, focus on them. Most websites are made up of many different elements, so don’t waste time reading stuff you’re unlikely to use. If you’re only interested in client-side scripts, just look at those. For server-side code, there are many freely downloadable scripts you can look at.

Bbc-news in Guidelines For Working With External Code Libraries
Firebug enables you to view the mark-up of each element on a Web page, in this case the BBC News page.

Learn a Bit More Than You Really Need To

As you start gaining development skills, particularly if you’ve mainly been a designer, you will typically use only small isolated excerpts of code at any one time. So, you may not become aware of the larger development concepts at work in the language. Having a casual look at the structure of an application that’s larger than what you’re used to is a great way to acquaint yourself with these patterns.

On a similar note, it’s also worth finding out, at least in theory, about the types of development models that a language is used with. It may seem that higher-level concepts are not relevant to smaller tasks, but being aware of them is useful no matter how small or big your projects are. As time passes, you may find yourself working on bigger systems anyway.

Coding-one in Guidelines For Working With External Code Libraries
A look at Smashing Magazine’s website DOM, an interactive way to explore how a website’s various elements relate to each other.

I know that spending time reading code voluntarily may be hard to justify when you’re up against a deadline, trying to get a decent hourly rate, perhaps pay the rent and eat once in a while. But the habit really will save you time and stress down the line. You have to spend only a couple of minutes here and there to benefit from it.

See Through Someone Else’s Eyes

Any development project is a problem-solving exercise. When you approach your own projects, you inevitably view them from your own angle. Moreover, programming is a linguistic activity, not unlike natural language, and there are typically many ways to express the same thing.

The downside to this is that another person’s code can seem impenetrable, because it’s specific to that individual’s point of view. The upside is that looking at how someone else has solved a problem invariably opens your mind to new possibilities. As with natural language, the fact that we all have different perspectives does not prevent us from being able to communicate, because we have a shared discourse that is understood.

Observe the ways in which code solves problems, particularly when the approach is unfamiliar to you, and especially when the code achieves functionality that you have attempted yourself. Consider how you might have approached the task, and in doing so learn something about how your brain breaks up the tasks involved in addressing coding problems. If nothing else, you might pick up a few tricks and time-saving bits of syntax.

Tips For Working With External Libraries And Other Code

If you’ve ever sat down to use a code library and found yourself struggling to understand it well enough to make good use of it, here are a few tips to help.

Examine the Evidence

Your first point of access to a code library should generally be the documentation and comments that come with it. I say “should” because as we all know they are sometimes lacking. But it’s always worth a look, and well-documented code makes a huge difference.

/* Here is an informative comment explaining the
*  function that the code appears before, indicating,
*  its logic, purpose, parameters and anything returned.
function greatFunction(someInput)
 //What's happening and why
 var someElement = document.getElementById(someInput);

 //and so on…

Don’t take comments as gospel. Programmers are only human (insert your favorite joke here), and comments often get out of sync with code, especially when changes are made and the comments are not updated.

Stick to the Path

Don’t try to read code linearly as it appears in scripts. Read it in the order of execution, starting from obvious entry points. If a library provides instructions on how to carry out certain tasks, for example, start from the function calls that are specified, and work through what happens from there.

Typically with a JavaScript or PHP library, you’ll be adding some function call or link to your HTML or server-side script. So, in the first instance, look for the origins of any such calls in the source code. Again, browser tools and IDEs can be really helpful here. Follow the train of logic from your entry point through to any other functions that are being called in turn. Take your time, and build a picture.

Let’s work through an example: the jQuery plug-in for SuperSleight for handling PNG transparency in IE6. To use this plug-in, you link to the script in the header of the page and add the following function call in your page’s script:


To see what happens when this function is executed, look in the supersleight.js script for the function being called (supersleight) and see what happens in there. You’ll see that it contains further function calls and processing, some of which in turn refer to the jQuery script itself. Here is the start of the function:

jQuery.fn.supersleight = function(settings) {
 settings = jQuery.extend({
 imgs: true,
 backgrounds: true,
 shim: 'x.gif',
 apply_positioning: true
 }, settings);

 return this.each(function(){

Naturally, you can look up the details of the internal function calls if you wish, although you’ll find that the jQuery script is a little more difficult to read!

The point is that if you want to make sense of code without tearing your hair out, you need to read it in the order in which it will be processed. With Firebug, you can speed up the process using the “DOM” and “Script” tabs. Many of the other browser plug-ins for Web development, such as Web Developer and Web Inspector, have similar functions. For server-side code, an IDE serves this function.

Give Yourself Some Clues

If the code you’re working with has a long complex flow of execution, then adding trace statements can be useful. Trace statements are a way to find out what is happening at particular points in the logic of a program. An example of a trace statement would be writing out the value of a variable at some point in the execution, perhaps for an alert dialog in JavaScript code, as in this example:

function someFunction(aParameter)
 alert("parameter value: "+aParameter);
 //other processing…

You can use trace statements to check variable values (as above), to test whether functions are being called, or for anything else you find helpful. Adding trace statements at key points in a piece of code and then running the code can give you a good sense of the functionality at work.

If you add a trace statement to a function that you believe is being called, and then the trace is not outputted, this is an indicator that something has gone wrong at some point in the code before the trace statement. In this case, you can move the trace statement to an earlier point of execution and see if it runs there, which might give you a better idea of where the code is breaking down. For example, let’s say you have the following function being called on a page:

function someFunction(aParameter)
 alert("parameter value: "+aParameter);
 //other processing…

If you test the page and the alert dialog does not appear, then something went wrong before it was called. If you move the alert call to one line earlier in the script (i.e. swap lines 3 and 4), and it does appear, then you know something is wrong with the line you just moved it in front of. If the alert still does not appear, then chances are the function is not being called and you need to have another look at wherever the call originates.

This is a simple example, but the practice of using trace statements is useful even if you’re not working with much programming code. The alert function is obviously intrusive at times, so an alternative to consider is the console.log() function, which you can use to send messages to Firebug. A number of other advanced debugging tools for JavaScript are illustrated in “JavaScript Debugging for Beginners,” by Webmonkey.

Isolate Trouble Spots

If any sections of code are particularly baffling, copy them into a separate script and run them from there. Experiment with the code in this second file to see if you can get an idea of what’s going on.

Consider the someFunction function above. If you were having trouble getting to grips with it, you could copy it into a new JavaScript file, add a link to the new file in your page’s header, and then explicitly call the function in the HTML, as in this example:

Hover to test

In this case, you know the function is being called when you hover over the link, and you can control the parameter to see how it functions.

Remember, you don’t need to understand every detail of a script in order to get good use out of it, so take the time to do it only if it’s really necessary. Don’t worry about utility functions that have little bearing on the code you’re interested in.

Consider the Context

Whenever you try to process code mentally, take an approach that is appropriate to the platform and context. If you have a general idea of what the code is for, keep this in mind as you read it, because it will continually provide clues to the logic at work.

Familiarize yourself with the programming and naming conventions of the language in question. Most languages have standards and conventions for naming variables, files, classes, functions and whatever else they use. Grasping these makes reading the code far easier.

There’s no guarantee that the other programmer will have adhered to these recommendation, but for many of the most widely used code libraries, they will have. Some programmers have their own rules for naming code elements, which can bring consistency even if it isn’t the standard. Naturally, it helps if the names are meaningful.

Here are a few conventions. In JavaScript, names for variables and functions typically use CamelCase:

var myFirstName

function doSomeAction

//as in Java, class names often start uppercase
function MyClass

In PHP, you may come across the following conventions (the underscore is also common in names of SQL database tables and columns):


function doSomeAction

class My_Class

You’ll come across many more conventions in the different languages, and the extent to which programmers adhere to them varies greatly. But hey, if the Internet wasn’t a complete mess, so many fantastic things wouldn’t have come of it.

Step Back

When you read a section of code, you really want a sense of the overall structure. For this reason, it can be useful to step back, literally, by zooming out from the text. Many experienced developers swear by this technique, and all you need to do is open the code in an editor with zoom controls and then zoom out until it’s really small. Don’t worry if you can’t read the details; you’re aiming for an overview.

The more programming code you read (as opposed to mark-up), the more you’ll get into the habit of seeing the structures, shapes and patterns at work. For example, as a non-programmer, you would read a JavaScript file like a natural language: starting at the top, focusing initially on the first few lines, which perhaps contain a list of variable names and other details that are not generally significant. If you read the same file from a coder’s perspective, you’d initially see the functions, loops, conditionals, etc., and the code’s defining structures.

Unlike with a natural language, you can grasp some level of meaning in an excerpt of code by looking at these larger structures. With natural language, meaning is contained primarily at the level of words and sentences. So, you need to make a slight mental adjustment when reading code.

Look at this example PHP code:

function doSomethingPointless()
  echo $first_name." ".$last_name." ";

If someone who is totally unfamiliar with code saw this, the first thing they would likely focus on is the list of variables at the top. For someone more accustomed to working with code, they would notice the structure (i.e. the function with a loop inside it).


Bearing in mind the development concepts outlined above, focus your reading on those areas that are most likely to be relevant to you. Look at the level of files, classes, functions, variables and obvious entry points, as illustrated in the “Stick to the Path” section above. You can make use of an external library even by ignoring most of it.

Take a Snapshot

If the code you’re working with is for a big application and you need a good grasp of its overall structure, try scribbling down an impression of it, either textually or as a rough diagram. The act of sketching the application’s structure is a good way to impress it on your mind so that it persists when you get to working with the code.

A sketch of an application or code elements could involve writing the names of classes, files, functions or variables, and illustrating the relationships between them with connecting lines. This is most likely to be useful if you’ve been working with code for a while. (See the LinkedIn UML-class diagram near the top of this article for inspiration on this.)

Look Away Now

Sometimes you need a break from staring at code to give your brain a chance to make sense of it. There will almost certainly be times when you feel you’re getting nowhere. I often find that when I take a break and come back, I’ve actually understood more than I thought.

Just in Case

This one may seem obvious, but if you’re making changes to code, keep copies of the original for reference. Losing track of what you’ve added and what was already there is a recipe for stress.

Advanced Tools

For more advanced programmers, a number of software tools can help when you’re trying to make sense of a big application. Naturally, developing your project in an integrated development environment (IDE) such as Eclipse or NetBeans helps, because it makes the code more easily navigable by highlighting various types of relationship between elements.

Coding-two in Guidelines For Working With External Code Libraries
One of my Android projects open in the Java browsing view in Eclipse looking at a method’s call hierarchy.

Additional tools for reading code employ different approaches and are designed to suit different languages, but in most cases they use some sort of visualization technique to help you wrap your head around it.

Here are a few related resources:

Don’t Let It End There

It’s easy to see working with other people’s code as a necessary evil, but I genuinely believe that it’s a valuable exercise in and of itself. When you work on Web projects, particularly as a freelancer, you often end up working in a vacuum, which is not always good for your professional development. Exposing yourself to new code (rather than to passers-by when you finally lose it!) is a great way to absorb good practices and varied perspectives.

Ultimately, the skills you learn from working with other people’s code should feed back into your own code-writing habits. Few of us have been spared the experience of staring at a piece of code we wrote ourselves only a few short days, hours or even minutes before and wondering what we were thinking. If you think like both a reader and a writer, you will ultimately create something that is better structured, more reliable and that you’d be happy for other developers to look at.

Go on. It’s fun. Honest! Embrace your inherent geekery, and develop an unquenchable love for code.

Other Resources

Some related material on reading code and working with other people’s code in general:

Material related to other topics touched on in this article:

Related Articles


© Sue Smith for Smashing Magazine, 2011. | Permalink | Post a comment | Smashing Shop | Smashing Network | About Us
Post tags: Coding, communication, libraries

May 13 2011


Two Cats In A Sack: Designer-Developer Discord

Advertisement in Two Cats In A Sack: Designer-Developer Discord
 in Two Cats In A Sack: Designer-Developer Discord  in Two Cats In A Sack: Designer-Developer Discord  in Two Cats In A Sack: Designer-Developer Discord

The differences between designers and developers often erupt in pointed jabs on the Web or at conferences. Jokes or not, the jabs create friction whose consequences are real.

I am a designer, and by no elaborate means of job-title-rejigging do I consider myself a developer, but I see the cruelty of designer and developer egos going both ways. So, what happens if someone throws a pair into a sack to hash it out? How do we emerge? Our projects, careers and maturing industry rely on our ability to learn to work together instead of against each other, and looking at what we have in common is one way to begin addressing interdisciplinary cat fights.

00McDaniel-CatsInASack-v31 in Two Cats In A Sack: Designer-Developer Discord

Shared Priorities

A belief that design and development have competing interests is an obstacle to successful collaboration. There are, of course, developers who design and designers who code (I’ll return to this point later on), but the tension referred to here is between the designer and developer who believe that their respective discipline is more important. Conquering this belief is crucial to avoiding a clogged workflow, low team morale and, ultimately, limited project success.

Design is not completely an aesthetic concern, nor is development an entirely technical one; designers must consider how functionality affects form, and developers must be creative in building out functionality. Similarly, if we look closely at design and development, we find that principles of good design are often similar in good development. Focusing on these overarching ideas reveals a large pool of reciprocal interests.

Harmony of Parts

Paul Rand, a designer’s designer, creator of the IBM, ABC and UPS logos, wrote in A Designer’s Art:

Copy, art, and typography should be seen as a living entity; each element integrally related, in harmony with the whole, and essential to the execution of an idea.

He wrote this in 1985. Today, the principles remain mostly the same, but one component is sorely missing from Rand’s statement: technology. Copy, art, typography — and technology — are the bones of a project, where design and development are the joints and skin that connect and hold together the parts. When all of these elements fit together well, you essentially have design and development working together as the support structure for the user experience and overarching concept, the so-called “living entity.”

While far too simplistic a metaphor to cast a strong light on the process (building a website in fact looks much messier), Harmony of Parts does illustrate how design and development should ultimately work towards the same goal.

01McDaniel-HarmonyOfParts-v2-1 in Two Cats In A Sack: Designer-Developer Discord

It is also worth mentioning that development, like design, encourages the harmony of parts in programming concepts like polymorphism and encapsulation. These ideas quite broadly mean that pieces of functionality should work well when placed inside or beside other pieces, another way of saying, “each element integrally related, in harmony with the whole.”


Both design and programming are teachable, and where there are talented individuals there is also hard work, discipline, teachers, mentors, standards, taste, ruthless editing and constructive criticism, all of which are cultivated. There is bad work and breathtaking work. There is the scrap heap, the slush pile, the useless code: all evidence of learning.

This commonality between disciplines is important because it presents an opportunity: designers can learn about development, and developers can learn about design. The democratization of resources in this information age (which some would argue we’ve already passed) means that we have little excuse not to obtain, or teach, at least a basic understanding of each other’s crafts. Not doing so will work to the detriment of the team. And when there are gaps in knowledge, rather than reprimanding, we should encourage an open dialogue to protect our most valuable learning tool: the ability to ask questions.

Elegance and Efficiency

Chris Coyier, self-described Web craftsman, blogger, author and speaker, writes in “What Beautiful HTML Code Looks Like”:

Code? Beautiful? Sure. After all, code is poetry. This is just HTML, so it can’t be quite as intricate and elegant as a dynamic language, but it still bears the brush strokes of its creator.

What is elegance? It could mean restrained beauty and grace, as in art and fashion. But in design as well as math and science, something elegant typically embodies simplicity and effectiveness, sometimes solving two or more problems at once or by an unexpected insight. Elegance, then, refers to underlying content or an underlying process.

Design may rely on aesthetics for its medium, and development may rely on code, but both draw on theories of efficiency (perhaps a synonym for elegance) to create effective output: elegant code is efficient code, and elegant design is efficient design. This means that design and development share some core values of process.


In his article “Design Is Not the Goal,” Francisco Inchauste writes:

The end product (website or application) should always be the focus.

Inchauste goes on to say that too often, process insists on polishing irrelevant deliverables; for example, over-updating wireframes instead of moving on to the build and user testing. The true deliverable is the final product that we launch and that people interact with. Jeff Gothelf goes more in depth in his article “Lean UX and getting out of the deliverables business.”

In a healthy team environment, we designers, developers, copywriters, user experience designers and project managers are all shippers. Bigger agencies tend to lump design and development teams into the Production Department, for better or worse, and this is telling. It demonstrates that both “creative” and “technical” professionals share a predominant interest: they must ship.

Correcting The Workflow

It may be that designers and developers are perfectly capable of collaborating effectively, and that management and process are the biggest hurdles or frustrations within a team.

Good Ideas Intersect

The logistics of securing work often mean that the earlier a great idea is identified for the project, the happier and more secure the client will be, resulting in a better working environment for everyone. However, it also means that stakeholders will come together early in the process to come up with ideas. This can occur to the preclusion of the very people who will produce the final work, especially in hierarchical agencies. This undermines the designer or developer’s ownership and discourages self-direction and personal investment in the project.

One solution to this problem is to ensure that great ideas are universally respected, wherever their origin. Michael Lebowitz of Big Spaceship famously preaches an agile workflow, saying in a New York Times interview:

We also invite people from all of our disciplines into all of our brainstorms. Great ideas come from everywhere.

A policy like this opens communication channels in a team framework and dispels departmental inequalities. When something goes wrong, finger-pointing is no longer an option if everyone’s had an opportunity to provide input, and collaborators are forced to learn from mistakes. This is not to say that responsibility is evenly distributed, but allowing teammates and workspaces to intersect in unexpected ways will allow great ideas to surface.

02McDaniel-GoodIdeasIntersect-v2 in Two Cats In A Sack: Designer-Developer Discord

Waterfall vs. Agile Thinking

In waterfall-structured processes, where development is held up by unfinished designs, developers are the ones who end up staying late to finish the project on time. Not only is this unfair to developers, it is complicated, because pointing the finger at designers for taking too long is too easy an answer. Responses to a design can be so subjective and cryptic (“I don’t know why I don’t like purple, I just don’t”); true insights require time to unearth and can result in unpredictable delays in the process.

Hold-ups are best avoided not by keeping design and development separate but by bringing them closer together via an iterative workflow. This agile methodology distributes responsibility and assigns value to each team member. Furthermore, departments are not tied to an inflexible plan. All of these attributes of agile thinking help to alleviate designer-developer tension.

Giving Credit

In the fable “The Lion, the Bear and the Fox,” a lion and bear fight over prey until they can fight no more and fall over exhausted. Meanwhile, a fox who has been watching the fight sneaks up and steals away with the prize. The moral is this:

Saepe alter alterius fruitur labribus.
From the labors of others, it is often another who profits.

Giving credit where credit is due and sharing the rewards is better, but unfortunately, in a fast-paced digital environment, whoever is left sitting at the table is often the one who gets the final praise. It is up to that last team member (the project or account manager, art director or tech lead) to pass feedback onto the rest of the team in a meaningful context. The cost is minimal (however long it takes to shoot an email or walk to someone’s desk), but the shared joy (or misery) will bond design and development teams because they will see the end product as the force that unites them.

Work Habits: Playing Nice

Sometimes playing nice is as simple as extending a courteous email; other times it is as complex as learning a new skill set. There are many concrete ways, big and small, for designers and developers to become more compatible colleagues. Let’s first look at efforts that can be shared, then at tasks more specific to designers and to developers.

03McDaniel-GoodHabits1 in Two Cats In A Sack: Designer-Developer Discord

Both Designers and Developers

Despite being in separate disciplines, our greatest commonality is that we are human. So, many of these shared tasks demonstrate how to play nice with anyone:

  • Keep an eye on the big picture.
    Pre-established goals that are developed by the whole team should inform decisions (and compromises) throughout the process.
  • Cast a wide net for inspiration.
    Look to a variety of sources for a well-rounded understanding of the topic. Discriminate material by quality, not subject matter.
  • Check in early and often.
    Avoid making too many decisions in isolation.
  • Be nice.
    If you must criticize, make it constructive. Being kind often reaches far beyond office walls.
  • Teach each other.
    In their book Rework, Jason Fried and David Heinemeier Hansson preach transparency between companies and their customers: “Letting people behind the curtain changes your relationship with them. They’ll feel a bond with you and see you as human beings instead of a faceless company. They’ll see the sweat and effort that goes into what you sell. They’ll develop a deeper level of understanding and appreciation for what you do.” This works for designers and developers, too. Revealing the inner process means teaching, and teaching is a way to invest in a relationship and build mutual respect.


There are innumerable great tips to help designers become better colleagues. Here are some of my favorites:

  • Explain the design rationale.
    Design isn’t magic, and making an effort to analyze and share design decisions will create a conversation and demonstrate to colleagues that their insights are valued.
  • Practice PSD etiquette.
    Adopt the Photoshop Etiquette Manifesto for Web Designers.
  • Design thoroughly.
    Think through the interactivity of the product, which includes designing the on, off and current states, designing error messages for forms, designing 404 pages, etc. This will save your teammates valuable time.
  • Be considerate.
    Avoid making others wait on you. Be proactive and organized, and ask for feedback often.
  • Enlist a developer.
    If the technical implications of the project are unclear, grab a developer to go through it with you. They’ll likely appreciate being involved.
  • Learn about development.
    Knowing even a little about code will make you a better designer.


Here are a few ways for developers to improve their work habits:

  • Make yourself available.
    Being a part of the process from concept to realization will translate into a sense of ownership of the project. Ask colleagues what they’re working on. Make your expertise available as a resource.
  • Simplify the explanation.
    If you can help team members from all levels and backgrounds understand high-level concepts and how they affect a project, you will become more valuable.
  • Develop the design details.
    Much of a designer’s craft lies in the details; if they are forgotten or changed, the designer’s time and effort will be wasted.
  • Be honest about what can’t be done and why.
    Big ideas often struggle against time and budget constraints; that’s nothing new. Knowing the development constraints ahead of time allows the team to create more appropriate solutions.
  • Learn about design.
    Theories, rules and standards play important roles in aesthetic and usability decisions. A little knowledge of these concepts will help you better navigate designs.

Some of the tips for designers will certainly also be useful for developers, and vice versa. Being able to work well on a team often depends on the individual’s personality, so take those habits from either group that will contribute to better collaboration. Do you have other good ideas? Share them with us in the comments.

The Hybrid’s Role

Designers and developers come in many shapes, and design and development skill sets are overlapping more and more. Hybrids, who have one foot in each discipline, seem to be increasingly sought after by clients and employers. This begs the question of whether we need to get along better or simply become more like each other.

Hybrids are in a unique position to answer this question. If you consider yourself both a designer and developer, tell us: What is it that you find easier or harder about being involved in both disciplines? What do you like or dislike about it? What can we all do to become better collaborators?

Post-Disciplinary Collaboration

Way back in 1999, Andrew Sayer, professor of sociology at Lancaster University, published an article titled “Long Live Postdisciplinary Studies! Sociology and the curse of disciplinaryparochialism/imperialism.” Despite the hefty title, he wrote quite simply:

Interdisciplinary studies are not enough, for at worst they provide a space in which members of different disciplines can bring their points of view together in order to compete […] Post-disciplinary studies emerge when scholars forget about disciplines and whether ideas can be identified with any particular one; they identify with learning rather than with disciplines.

Competition is fierce in our industry, and as talented new generations join the workforce, it will only become fiercer. Web makers will need to work harder and more efficiently to retain that quality that clients and consumers value: the ability to surprise. For this, we need innovation, but designer-developer cat fights take up precious time that could be put to innovation. If we instead incorporate post-disciplinary collaboration into our process (a fancy way of saying, “Let’s forget about job titles for a moment and work toward something together”), I believe we’ll be more successful and find our jobs more enjoyable.

(al) (il)

© Cassie McDaniel for Smashing Magazine, 2011. | Permalink | Post a comment | Smashing Shop | Smashing Network | About Us
Post tags: communication, Design, designers

October 28 2010


Communicating with type

Matthew Smith has posted his slides on Communicating with Type that start off with the basics of typography and work itself down to emotional and technical decisions of choosing a typeface for a project.

October 04 2010


How To Convince The Client That Your Design Is Perfect

Smashing-magazine-advertisement in How To Convince The Client That Your Design Is PerfectSpacer in How To Convince The Client That Your Design Is Perfect
 in How To Convince The Client That Your Design Is Perfect  in How To Convince The Client That Your Design Is Perfect  in How To Convince The Client That Your Design Is Perfect

As designers who deal with clients, we all have to face one situation, no matter how difficult and uncomfortable, and that is guiding the client to accept that your design is perfect. Now, you already have the project, so this is not a matter of convincing them to pick you for the job. This is about getting them to see that your design satisfies their requirements and contains everything they want. We all have to take on this role of virtual tour guide and lead them through the project’s twists and turns, ensuring that the best interests of the client and website are served.

Lighthouse in How To Convince The Client That Your Design Is Perfect
We have to be the lighthouse, guiding the clients to shore. (Image credit)

In the end, the final decision falls to the client, but there are times — and most of us have experienced them — when the client’s lack of expertise in the field affect the quality of the design. In such times, we have a responsibility to do everything in our power to convince the client that the design is perfect as it is, and that any further alteration would impair the website’s ability to communicate everything it needs to. This confrontation is not welcome by either party, but it is certainly necessary.

Many designers want to avoid conflict and, as a result, cave to their clients at the slightest sign of disagreement, rather than spend time trying to convince them that they stand on the right side of the design decision. This is often a mistake and does not serve the design, which should be the paramount consideration. We owe it to our creative work to argue for whatever serves the design beyond all else, even though the client is footing the bill. We may end up having to give in to the client, but at least we tried.

Below is an overview of some tips and techniques you can employ when you find yourself butting heads with a client. These approaches might work individually or in combination, but they all at least offer a launching point to help you put your best foot forward and lead the client exactly where they need to go.

Related Posts

[By the way, did you know we have a free Email Newsletter? Subscribe now and get fresh short tips and tricks in your inbox!]

Confidence Is King

Whatever the context, in every interaction with both potential and working clients, you want to present yourself confidently. This will make interactions with the client smoother and discourage them from challenging you. This is not a surefire recipe to get clients to comply — far from it. But the more confident we are in our abilities and skills, the less likely we will allow ourselves to get pushed around on a design decision. Some clients — not all — will pounce at the slightest whiff of uncertainty.

Just as the slightest sign of fear puts an animal in danger, in the professional kingdom, the slightest display of doubt could spell danger for the designer if it is detected by the client. We have to maintain an air of confidence whenever we deal with the client, especially if we are trying to convince them that the design no longer needs any tweaking. We know our proper boundaries, and if we are assertive enough, we might be able to keep the clients from forcing us cross them.

Talking Points

Here are a few things you could say to the client that might convey an air of confidence:

  1. “While I think your suggestion could potentially benefit the project, I am confident that going with the design as is will yield much more positive results.”
  2. “While I have considered alternative approaches, I am most confident that this route will serve the project best.”
  3. “I do understand where you want to go with this design, but I sincerely have more confidence in what this approach offers.”

In Short

  • Each meeting is an opportunity to be assertive and show your passion for the project.
  • Always exude confidence, whatever the context of the meeting.
  • Be assertive when discussing any and all design changes.

Remind Them Why They Hired You

Confidence leads to the next tactic for making design reviews go your way. You need to remind the client why they hired you. By that, I don’t mean to suggest you carry around your credentials and testimonials, ready to pull them out when your expertise is questioned. Rather, this has to do with constantly projecting the image of a passionate professional who is undivided in their focus on the client’s project… even if that is not a perfectly realistic assessment of your situation.

Subtly remind them that you are the expert. Your skills and ability are what made this project come to life. Never give the client a reason to doubt that. Don’t let them get the sense that you are distracted from the end game. When they ask you to make a questionable alteration, your know-how and experience should trump their wishful thinking. And it falls to you to remind them why they should listen. It is about establishing trust and making them defer to your judgment. Your skills and abilities will make this process go smoothly.

Talking Points

Here are a few things to say to remind the client why they should listen to you:

  1. “I see what you’re saying. However, given all of the time I have spent in the field and knowing what I do about it, I must say, personally, that I would let the design stand.”
  2. “I only want what’s best for your project. And from all of the satisfied clients I have worked with in the past, I have a very good feel for the market. So trust me when I say that this is your best way forward.”
  3. “Given my extensive background, I firmly believe that this design perfectly satisfies all of your needs.”
  4. “In my professional assessment, which is in part why you hired me, any further alterations would be detrimental to the effectiveness of the design.”

In Short

  • Keep your skills and experience at the forefront of their mind.
  • Show them your single-minded passion for the project.
  • Foster in the client a trust in your abilities, so that they become comfortable deferring to you.

Comparing Success

If your gentle reminders about your qualifications are not inducing the client to defer to your judgment, then you could always compare the design — or at least the elements that are up for debate — to work of yours that has succeeded in the market. While not always the best approach, most business professionals are receptive to it. Given that their decision to hire you was likely based on your past work, such comparisons might be effective in convincing them to let the design be.

Success in How To Convince The Client That Your Design Is Perfect
Sometimes, comparisons to your past successes can sell the client on your current recommendation. (Image credit)

This is not always the best strategy because it can come off as a bit defensive to some clients. If they say that the design needs something more, and you respond by recalling a similar project you had worked on that was a clear success, then they might assume this has become a matter of ego for you. Still, if you can tactfully steer the client to the right decision by describing a similar model that they can relate to and that effectively employed the same techniques and approaches, you might be on to something. Offer a comparison that will reassure them, because uncertainty is usually the cause of their resistance.

Talking Points

Here are a few things you can say that will help with the comparison model:

  1. “That is a good suggestion, but if we look at _____, we can see that going in this direction could be counterproductive to your goals.”
  2. “While _____ met with moderate success by following that direction, I believe your project will be better served by sticking with the design as is.”
  3. “If we look to _____ as an example, you can see how well this approach has worked for them. And I have no doubt you will experience the same success in your own market.”

In Short

  • Compare the design to a previous project of yours that has measurable success and that the client can relate to.
  • Be tactful, so that you come off less like you’re trying to flex your muscle and more like you’re trying to address their concerns.

Make It Feel Like Their Idea

A trickier tactic is to make it seem like their idea to keep the design the way it is. Essentially, it will be their idea, but getting them to see it that way is not the simplest of tasks to be sure, especially if they get it in their head that the design is far from perfect and needs revisions. You need to stand your ground. Explain to them why you made the choices you made and how they fulfill what they were asking for all along.

Basically, show them how the design truly realizes their original request, and demonstrate that the design as is, in fact, reflects their idea from the get go. This frees you from having to tell them that they’re wrong, and rather just requires you to point out that their new request contradicts the original purpose and impetus of the project.

This is practically reverse-psychology, and it has worked for some designers in the past. With the right type of client, this approach works well. If you think this is the route for you, then ask the clients plenty of questions early on to facilitate the process. You’ll be able to sell your case much more effectively.

Talking Points

Here are a few things to say to make the client feel that the idea was theirs all along.

  1. “While I like the new direction, I think your initial ideas, which spurred this design, are a much more effective approach for your field.”
  2. “I would recommend not changing that aspect of the design, or you’ll risk losing the _____ idea you originally wanted to convey.”
  3. “Implementing that change would almost certainly compromise the promise of your initial request.”

In Short

  • Explain that the design was created from their specs, and point out each way this is true.
  • Show them how these changes would contradict the mission they adopted at the start.
  • Ask plenty of questions early on about what the client wants to make this an easier sale.

Don’t Get Defensive

Another thing to do during these exchanges that is also a bit difficult is to not get defensive. Ultimately, getting defensive will work against your purpose, and because you may be the only one who is truly serving the design in this case, you need to stay professional and level-headed.

The design will reflect on you and will shape your reputation, so as soon as the client questions one of your choices, your natural instinct is to get defensive. But to react this way would be a mistake, and you know it.

Shield in How To Convince The Client That Your Design Is Perfect
There are times when we have to lay down our shield and not get defensive. (Image credit)

You have no reason to take disagreement personally. The client is not attacking you. They genuinely care for the project — not to mention their bottom line — so do not make it about you. If they see you get defensive, then they will assume that your ego is more important to you than the project and will react in kind. And in that mindset, they will stop listening to your advice.

Talking Points

Here are a few things to help you convince the client without sounding defensive:

  1. “That’s a good idea. In fact, I considered something very similar to that before ending up with this solution, simply because this is a more solid means of achieving what you’re asking for.”
  2. “While I do see the merit of your ideas, implementing them would not only exceed the needs of the project, but could potentially add time and expenses to the bottom line.”
  3. “I think your ideas would make for some interesting changes. But I’m not sure those changes would serve the requirements of the project.”

In Short

  • Remain professional, and do not take requests for revisions personally.
  • This is about what best serves the project, not your reputation.
  • Getting defensive usually only leads to the client doing the same.

Don’t Challenge Them

Another reason not to get defensive when trying to get a client to follow your advice is that you do not want to appear like you are challenging them. Of course, you are not challenging them, and you need to make that distinction clear to them. This situation requires finesse; you want to appear as though you only want what’s best for the project, not that you are questioning their judgment or ideas.

Most people do not like to be challenged, especially by people they are paying, because it does not feel to them like the natural order of things. So, tread carefully. They should see that you are distilling their ideas, steering them to their logical fruition, not questioning what they’re asking of you. This might sound contrary to the premise of this post, but if at any time you lose the client’s favor, then you will be less effective at guiding them through the process.

Talking Points

Here are a few things to say to keep the client from feeling that you are challenging them.

  1. “While the changes you’ve asked for are completely do-able, if you re-examine the design I have submitted, perhaps you’ll see that it already satisfies these goals.”
  2. “You are completely right, that would be an interesting change to the design. However, I am not sure how it would serve the functionality of the website.”
  3. “While I would never suggest that you are wrong, I do feel in this case that perhaps I have not fully explained the benefits of the approach I am proposing.”

In Short

  • Impress upon them that you do not mean to challenge their ideas, but rather serve the design as best you can.
  • Make them feel that you are refining their suggestions and refocusing them on ideas that were already there.

Talk Business, Not Style

As designers, getting hung up on style is all too easy, and when we do, we can lose the client fast. Keep the discussion on the business end of the decision-making process, focusing on why the design serves their business interests, not why it is aesthetically perfect.

They will be focused on their market, and you need to focus the dialog on it, too. Relevance is critical. They do not care whether the design will be the most stylish thing to hit the Web; they care whether the design serves their goals. If you convince them that you are coming from the same place, you’ll have an advantage in your disagreements. They’ll know that you understand their position and will be more inclined to listen and take your advice. Fight the urge to get caught up in the design when you are explaining why the website is perfect; keep it strictly business.

Talking Points

Here are a few things to say to show the client that you are focused on business:

  1. “Looking at it from a completely business perspective, I see so much potential in the design as is. The changes you suggested, while good, could potentially disrupt the bottom line.”
  2. “I think it is important to note that making those changes could upset the design’s ability to perform effectively in the market you are introducing it to.”

In Short

  • Keep them on the same page as you. Always relate the discussion to their business, not the style.
  • Make them feel like you know where they are coming from.
  • Focus on their business needs, not on the attractiveness of the design.

Never Be Dismissive

The client needs to feel like you are hearing what they’re saying if you are to gain their trust; otherwise, convincing them to opt for your design as is will be harder than it should. Every effort you make to ensure that things go your way will make for a smoother design process.

Just as becoming defensive can make the client defensive, not properly considering the client’s position and ideas can make them unreceptive to yours. And then, all of your efforts to convince them that no further adjustments are needed will be futile. So, ensure that they understand that you have heard what they’ve said, perhaps by resorting again to comparisons. Show them instances of other brands suffering from having been taken in a similar direction.

Talking Points

Here are a few things to help you make the client feel that they have been heard:

  1. “While I hear what you are saying, and I think that could be effective in the right circumstances, I am just not sure that taking that direction would be right for this project.”
  2. “I really like the enthusiasm coming from you, but I think at this point that making these changes would hurt the design rather than enhance it.”

In Short

  • Listen to their suggestions and ideas, and discuss them.
  • Use comparisons to show why their proposed changes would prove ineffective.

Don’t Talk Down, Lift Them Up

If you want to assure the client that you have digested their ideas, then this next point will help you do that and convince them that the design is just fine. Don’t talk down to them as you explain your case. Instead, educate them on the finer points of the design process and how it can achieve their goals. Sometimes, language is the roadblock that prevents the client from seeing your point.

If you take care to explain the reasoning behind your direction, the client will appreciate it and open up to your way of thinking, a rarity in this field. The client will sense your passion. The best way to help someone see your point of view is by enlightening them on how you arrived at it. The client more than likely lacks knowledge of design, and you must do your best to bridge that divide.

Talking Points

Here are a few things you can say to start educating the client on your view:

  1. “While I get where you are coming from, if I could take another minute of your time, perhaps I could explain how the current design already goes in that direction.”
  2. “If I may be so bold, your suggestions tell me that you are missing some of the finer points of the current version. I would love to go over the project’s goals with you to show how each is being met.”
  3. “I appreciate your uncertainty, and I don’t want to diminish your concerns, but if you’ll allow me, I can walk you through the current design and hopefully alleviate any apprehensions you might have.”

In Short

  • Educate the client on the design choices you made and the practical reasons behind them.
  • Break the creative language barrier between you and the client.
  • Let your passion show through so that the client sees that the design is what matters.

Consider A Different Perspective

The client will have a business frame of mind, which is perfectly reasonable. Perhaps you should balance this with a different viewpoint, one that the client might be overlooking: that of the end user. Whenever you ask a client to compromise on their suggestion, show that you have considered all perspectives, because that shows that you are not just being difficult or defensive. You are acting in the best interest of the project.

In addition to showing that you are truly listening to their ideas, show that you have considered the perspective of the end user as well, who will be the recipient of the design. This makes good business sense, which is hard to argue with, and it reinforces why they should keep the design the way it is. Given their own limited perspective and the fact that you are supporting your viewpoint with consideration of a perspective other than your own, they are likely to hear you out.

Talking Points

Here are a few things to say to help the client see the user’s point of view:

  1. “I see what you are asking for, but from the user’s standpoint, I think those changes would be more harmful than helpful.”
  2. “Taking the end user into consideration, I firmly believe the changes you requested would create a far less friendly experience overall.”
  3. “While I understand what you are saying, I am not sure it makes complete sense from the user’s perspective.”
  4. “The changes you have asked for are technically sound, but the negative impact they would have on the user’s experience makes them unfeasible in this case.”

In Short

  • Consider the design from the user’s perspective, and present that side of the coin.
  • Demonstrates that your advice represents a reasonable business approach, which will make the client more receptive.
  • Argue the numbers: client’s perspective vs. designer and user’s perspectives. Two against one.

Contractual Conscience Clause

This last one is not always the easiest to pull off but is certainly worth a shot: the so-called contractual conscience clause. This assumes that both you and the client are willing to sign a contract, which most designers would never work without anyway. At the beginning of the process, try to write in a clause that leaves all final design decisions up to you, especially if you determine that a requested alteration would have an negative impact on the product.

Contract in How To Convince The Client That Your Design Is Perfect
The contract may be the key to giving you final say in the project… if you set it up right. (Image credit)

Not every client will agree to this, but in the right circumstances and with the right client, this is an effective way to avoid headaches when you see a design as being finished but the client wants more. Try to get the client on board by reassuring them that you would exercise this clause only to protect the best interests of the product. Allow them to add stipulations if that would make them feel more comfortable surrendering the final cut to you.

Talking Points

Here are a few things to say to help the client see the benefit of including a contract conscience clause:

  1. “Of all of the clauses in the contract, this one does the most to make the best interests of the project paramount in importance.”
  2. “Without this clause, I feel like the design would be open to potentially being damaged by unnecessary additions or inclusions.”
  3. “If you want to ensure the most effective design for your project, then this clause is nothing to worry about, because that is its only purpose: to serve the design.”

In Short

  • Write a clause into the contract that gives you final say on all design decisions.
  • Give the client the option to amend the clause until they are sure it will work.

That’s All I Wrote

That wraps up all of the advice and approaches we have to get this discussion started. If you have any comments about what I’ve said so far or any words of wisdom on the subject, feel free to drop them in the comment section below.

Further Reading


© Robert Bowen for Smashing Magazine, 2010. | Permalink | Post a comment | Add to | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: client, communication

Older posts are this way If this message doesn't go away, click anywhere on the page to continue loading posts.
Could not load more posts
Maybe Soup is currently being updated? I'll try again automatically in a few seconds...
Just a second, loading more posts...
You've reached the end.
No Soup for you

Don't be the product, buy the product!

YES, I want to SOUP ●UP for ...