Creative brief writing is not brain surgery but there are fundamental tenets to it. It should communicate the clear purpose of the project in a way that the entire creative team can understand immediately.

These core directives are the backbone of the creative brief:

1. The Message:

• What are you designing and why?
• What are the creative objectives?
• What communication vehicles or themes should be explored?

2. Company Background:

• What is the strategic plan for the company for this project or beyond?
• How did the company begin, and more important, where are they going?
• What does the brand stand for?
• Who do they align with and why?
• Who are their competitors and what differentiates them from the pack?

3. The Targeted Group:

• Who does the brand or idea communicate with?
• Who does the brand or idea want to communicate with?
• What should the target demographic do/act/feel? What are their behaviors and tendencies?

4. The Media: Detail exactly what the creative team is submitting to the client and when.

• How many viewable options is the client expecting?
• Are there variations needed for focus groups?
• Internal checkpoints and team deliverables should be saved for subsequent follow-ups and not included. More often than not those are floating dates subject to change and will only cause confusion when designers reference the brief later on.

5. The Single-Minded Proposition:

• In my research this has many names: the core thought, the value-minded proposition, the user-centric focus. Whatever you decide you call it, have it.

Collaboration is Key

The writer has a unique role in influencing the creative strategy at an early stage. Therefore, the brief should be written by creatives for creatives. Whether it’s the creative director, the copywriter or a senior designer, a “creative” voice should take the wheel when the time comes to draft the brief. A common mistake is writing in a vacuum. Like any other creative process, collaboration is necessary. How will you know if it’s inspiring if you don’t ask for feedback? Share the brief with the full creative team, those involved in the project and, when it is feasible, those who are not. Once the brief is approved and all the necessary parties are on board the worst thing you can do is shove it onto your hard drive never to be seen again. Use it as a living document. Reference the brief and discuss it often. Keep the dialogue flowing and measure your decisions against the brief when presenting options internally to the team or externally to the client.

Engaging in a project without a creative brief is guaranteed to produce a mess made of multiple, subjective ideas and voices. The brief is also essential to any design project — no matter the scope — as it wards off blank-screen syndrome; the bane of any functioning designer. There are fewer helpless feelings a creative team can suffer than knowing a deadline is fast approaching and no one has a clue on where to begin. Long before Visceral was created, embarrassingly, I was involved in some projects that went along aimlessly from a severely lacking brief or without one entirely. If you play a creative role chances are you have too at some point. It can be a soul-draining ordeal full of misguided direction, collapsing deadlines and managing a mentally taxed design team. A rich and thoughtfully crafted creative brief is the best way to avoid this.

Engage the Client

Equally as important as asking the right questions is getting the right answers; and this requires an actively engaged client. They must know that their success depends on how transparent they are with their goals and objectives. Communicate how every design decision is ultimately measured against their larger business and brand objectives, and give them a clear sense of where they can provide value and how they can provide feedback. Above all else, use the brief to have the answer to every “why are we doing this?” question as it relates to creative assets and directions.

A Creative Brief is:

• Where every design project should originate.
• Brief. No more than a page and a half at the most.
• A document that should have the input from all creatives involved.

A Creative Brief is NOT:

• A memo of sales projections and graphs of revenue targets.
• A folder of logos, loose photographs and color values.
• A specifications document, or if for a digital project, a technical requirements list.
• To be adjusted on the fly as is convenient.
• A document to lie dormant during the design process never to be checked.

To summarize, a creative brief is to designers as water is to life on earth; absolutely essential.

Photo courtesy of tudedude

It’s no easy task to build a company and culture, to learn how to balance office expenses and HR tasks with client service, strategic and creative thinking, and to continue to stay apace with skillsets. We’re gluttons for punishment, but it still can at times feel like an endless slog. It doesn’t have to.

Our brief, sunny retreat reminded us all about all the grand and exciting reasons we’re doing this, and as such inspired me to write up a few key takeaways that I think any small agency going through similar growth pains may find useful.

When you’re small, you tend to want to buck anything that hits of bureaucracy of the places from whence you came – but then you realize that some elements aren’t all that bad, and in fact, are even sort of crucial to positive growth.

Goal Setting

Ugh – that’s the look on people’s face when they see “goal setting” on the agenda. Remove all that management consultant gobbledygook, and just say “what do you all want us to be as a company a year from now, what do we want to achieve, and how are we going to do that?”

Sit down with your team and talk about goals, both personal and professional, and identify the objectives required to achieve them. You’ll be surprised at what you hear, and amazed at what you learn.

At Visceral, we talk constantly about the value of measurement, and then of course we forget to practice what we preach. Talking about goals has the surprising effect of making what you’re doing seam real. For those of you starting an agency, you know what I mean – there are times where it doesn’t feel real…at all. Goal setting helps maintain or correct course and heading on achieving the vision of where your company wants to go – it helps to guide activities, and to provide for everyone a  tangible sense of growth, rather than dreadful decay of entropy.

Motivation

Startups draw people who are a little bit smart, a little bit risky, very passionate – and extremely fragmented. As such, we have to remember that we don’t all carry the exact same motivations for why we do what we do. As a manager, and as a team member, it is important to take the time to understand where your colleagues and staff are coming from and where they want to go.

A good leader identifies the strengths of players and puts these people in positions where they will succeed. Understanding motivation is crucial to understanding strength. It needn’t be a guessing game. Sit down and talk casually about what it is each of you want out of your professional roles and your personal lives – some people in the service industry DO actually have personal lives – though they are largely referred to in myth and legend.

Most importantly, remember these conversations as you build teams around projects, and as you identify specific opportunities for people to play to position, and succeed. You will start to notice patterns.

Company Vision

This has nothing to do with our VSP plan. No, I’m referring to talking openly about what kind of company you want to be and what types of clients you want to work for.

It is key that every member of your team articulate their vision for the growing company, and what role they see themselves playing in its maturation. Talk about industry sectors, specific clients and specific client personalities and be very clear about what the ideal client engagement should look like. It will help you to develop  metrics for identifying new business opportunities, for knowing when to make sacrifices to work for people and projects about which you are passionate, and alternately, for knowing when to walk away from engagements or opportunities…and knowing when to run.

Internal Group Initiatives

While this title looks awesome in time entry reports, what we’re really talking about is a fun group projects, outside client engagements, that everyone likes working on.

We work for clients, whom we love, but it’s important to occasionally work for yourself – to plan, design and build projects over which you have total dominion. These projects help to develop camaraderie, culture and also keep you fresh in disciplines for which you may not always have the luxury to practice on client projects. Most of all, it is fun to work with creative people to build something really cool and outside the lines.

Group Bonuses

A pat on the back? A taxed visa gift card for your favorite fast-casual restaurant!? Yeah, we’ve been there. It stinks. And unless you want to start applying a dollar amount to every offering of “you…are…a ROCKSTAR!” it can sometimes feel like there is no incentive to going above and beyond at work.

Work to develop a sweet group bonus – Individual bonuses are warranted, but in a team-based structure, and can be difficult to single any one person out for financial or time compensation. Whether it be a surprise Friday off with a bbq at the beach and a trough of icy cold craft beers, or ski day, offer something to the collective group that everyone can help achieve, and everyone can enjoy.

Summary

Starting and building a successful agency is a lot of work, but it’s also extremely fun and rewarding. Practicing some of the above steps will remind you of where work and fun intersect, and can help you develop a winning team of talented people who really like to work with one another. Otherwise, don’t be surprised if you start seeing random “please recommend me” notes on LinkedIn.

Now in its 15th year, the WebAward program is the premier annual website award competition that recognizes industry sites that have set the standard of excellence for website development.

This year, thousands of site sites from dozens of countries were judged in 96 industry categories on criteria including, design, copy writing, innovation, content, interactivity, navigation and use of technology

Other winners in the association and nonprofit space include the American Cancer Society, the National Cherry Blossom Festival, and the 40 Days of Water Challenge and Mobile Drink Tracker.

“We’re thrilled that the Web Marketing Association has acknowledged the First Book website with an Outstanding Achievement Award,” said Visceral’s Chief Strategist, Will Sullivan.  “This site was the result of a fabulous collaboration with a dedicated First Book team. We’re thrilled that awards organizations continue to recognize the efforts undertaken to plan, design and launch a site that has helped move the organization forward in achieving its noble mission.”

Visceral re-launched Firstbook.org in February 2011 for the DC-based national literacy non-profit organization. Since its launch, the site has received awards from the Interactive Media Awards, the New Media Awards the and now the WebAwards.

About Visceral

Visceral is a digital consulting agency specializing in strategy, design, content and development. We have offices in San Diego, Seattle and Columbus. Website: www.thisisvisceral.com.

Twitter: @thisisvisceral.

With over three decades of industry expertise, Visceral has developed a number of award-winning digital communications campaigns for an international client roster, including Cause Communications, the U.S. Army, California Olive Ranch, First Book, Huawei, Carney and iBAHN among many others.

About the Web Marketing Association WebAwards

Founded by the Web Marketing Association in 1997, the WebAwards is the standards-defining competition that sets industry benchmarks for the best web sites based on the seven criteria of a successful website.

The goal of the WebAwards is to provide a forum to recognize the people and organizations responsible for developing some of the most effective websites on the Internet today.

Beyond validation, entrants benefit from a website assessment by a professional judging panel, which provides specific feedback on how each site ranks against standards of excellence.  For more information, visit www.webaward.org.

###

To get started, or to dive in deeper, check out the documentation, appropriately done in jQM.

Page Structure Markup

jQM takes advantage of HTML5's data- attribute, and we need to be aware of these attributes in our markup. The basic page structure of a page will look like this. You'll notice in the head we include the necessary jQM JS and CSS files, a necessary meta tag setting the viewport width and then in the body we have a few sections marked up with data-role attributes. These data-role attributes essentially tell jQM what classes to add to that element to style it correctly, and if you look at the page source after jQM gets done manipulating it, you'll see all of those added classes.

To get a better idea of how everything is styled in jQM, let's take a look at a page with a mix of jQM data-roles and elements. On this page, the default jQM theme is being applied to a page of basic marked up elements using the "data-role" attribute to tell jQM how they should be treated.

Basic Theme Application

Out of the box, jQM has 5 different themes which we can set on a page level and override on an individual element level. By simply adding data-theme=”e” (or a, b, c, d or e) to our page element:

You'll see that every element within that container gets the designated theme's ui- classes, and now our page looks like it got the Midas touch. If we want to mix and match the provided themes, simply supply the data-theme=”x” attribute on a supported element, and we can apply the rules of element parent inheritance. That's all great when we want to mix and match styles from the supplied themes, but now let's take a look at how we can customize these elements even further to create our own theme.

Custom data-theme

To create a custom theme, we could always add our own custom classes and ids to existing elements to target with CSS. This will work great for some elements, but you'll find it difficult in many instances to override and work with all of the inherited classes added to an element by jQM. Instead of trying to force an override by adding new unnecessary attributes, let's separate our theme, and make it applicable via the data-theme attribute. We know that jQM themes elements by adding appropriate classes indicated by our data-role and data-theme attributes, so let's use their existing CSS and class framework to our advantage. If we simply use data-theme=”v” on our element, you'll notice instead of a theme letter, the value just gets appended to the ui classes in place of a letter:

Visceral

or

	 Button

Be sure to use a single letter here, because jQM will only use the first letter on inheriting elements. To make sure our overrides work consistently, let's just modify some code from their existing stylesheet. I copied one of their CSS theme blocks into my own stylesheet, replaced the theme letter with my custom data-theme value, and imported it after the jQM CSS file. Now, I have a custom data-theme which I can apply and which will allow me to control the look of my mobile site without battling jQM's existing framework.

Take a look at how we used this technique to create the mobile version of the Visceral website.

The New Media Awards is an annual competition celebrating excellence in online communications. Websites are judged based on how well they serve their audience, considering the overall user experience, ease of navigation, content and design.

“We are pleased that the New Media Institute has recognized not only the design of Firstbook.org,” said Will Sullivan, Visceral’s chief strategist, “but also the site’s ability to communicate the organization’s mission-driven focus on ending the plague of illiteracy in our society.”

Visceral worked with a dedicated First Book project team to relaunch Firstbook.org in February 2011. First Book is a DC-based national literacy nonprofit dedicated to providing access to new books for children in need.

About Visceral

Visceral is a digital consulting agency specializing in strategy, design, content and development. We have offices in San Diego, Seattle and Columbus.

Website: www.thisisvisceral.com. Twitter: @thisisvisceral

With over three decades of industry expertise, Visceral has developed a number of award-winning digital communications campaigns for an international client roster, including Cause Communications, the U.S. Army, California Olive Ranch, First Book, Huawei, Carney and iBAHN among many others.

About the New Media Institute

The mission of the New Media Institute (NMI) is to promote excellence in new media communications and improve public understanding of communications strategies and issues surrounding the Internet and other forms new media communications. NMI works directly with the news media, researchers, academics, government and industry professionals and serves as a primary resource of facts, statistics and analysis.

###

Today I think that book is "Responsive Web Design" by Ethan Marcotte.

It's the fourth book in the A Book Apart "Brief books for people who make websites" series. (We reviewed the first, Jeremy Keith's "HTML5 for Web Designers" last August.) In this new book, Ethan details how and why to create websites that are "responsive", or that adapt to the devices on which they're rendered. He does it in a way that's informative but also witty and genuinely fun to read.

What is Responsive Web Design?

There's no denying that the web, and how we view it, is changing. One in three American adults now owns a smartphone while e-readers and tablets continue to grow slowly but steadily (PDF). The web is no longer just your desktop browser, it's everywhere.

Responsive Web Design means designing and building websites in a way that they will automatically adjust to the size of the browser.  On a desktop, this can mean a fluid layout that expands and contracts for different sized monitors.  On mobile devices and tablets this can mean re-designing (or even removing) content areas so that they fit on a much smaller screen.

The Magic of Media Queries

Most web developers are already familiar with the concept of serving one stylesheet to the browser and a second simpler stylesheet for the printer.  Media queries takes that concept one step further and allows us to specify styles based on the physical characteristics of the browser, such as the screen width.

Take the following example:

body { background: blue; }

@media screen and (max-width: 480px) {
     body { background: green; }
}

The above code will set a default background color of blue. For devices that have a small screen (maximum width of 480px) the background color gets overwritten and becomes green.

Obviously that's a simplified example, but it shows how easy it is to serve custom CSS for different devices. You could use this technique to define a CSS class that would automatically hide blocks of content on devices with small screens.

@media screen and (max-width: 480px) {
     .hideFromMobile { display: none; }
}

The website that accompanies the book offers many more detailed and real world examples.

Responsive vs. Separate

Some in the industry would argue that separate devices deserve separate sites. Users on smartphones for example, may have different content needs than those accessing the same site from their office computer. Wouldn't it be better to direct them to a different mobile site that has content specifically targeted to them? The answer is... maybe. Responsive web design is a great solution, but it's not the only solution. It's important to remember that content strategy plays an important role in either scenario and that you should always assess your user's needs before picking your approach.

Conclusion

How we access the web is changing, and Mr. Marcotte's book teaches how to embrace that change and create projects that offer more value to our clients and to our end users, making it a must read for anyone in this business.

Ethan Marcotte's personal website as well as the book's example site both use the techniques described in the book well. For a real-world example from our own portfolio, check out the site we created for our friends at Wild Blue Flight. Re-size your browser window (or view it on your smartphone) to see how the page re-formats for smaller screens.

Visceral, like many companies, started out small – with great velocity and grandiose visions of success.

We didn’t quite know who we were, but we shared a sense of youthful exuberance that was tied to the excitement of leaving our former jobs and going out on our own. Our visual logo and brand identity were therefore aligned well with the mood of the time – we were a company borne of a vision to provide objective and fearless counsel on our own terms.

That sense of urgency and righteousness defined our early identity. We were daring, passionate and like any adolescent, sort of figuring it all out as we went along.

Brand Definition

As we grew, we began asking important questions about who we were. As we channeled that excitement into defined aspirations, a vision took shape, and we grew into the idea of our shared values – that we wanted to work for clients who are similarly passionate, who’ve followed a different path, and who hoped to make a positive contribution with the products they created.

We found that these core tenets fit us very well, and our brand evolution continued to align with certain “truths” about who we were, and the type of work we wanted to do.

Brand Clarity

As we continued to grow and evolve, we articulated the brand even further.

• We redesigned our website to align with the reality of Visceral 2011.
• We updated our marketing materials and our outbound networking approach to talk more honestly and openly about who we are and what we do.

In doing so, we discovered that we’d outgrown the youthful urgency of our original logo. It played an important role during a crucial time in our organization’s history – so we thanked it for its valiant service and readied ourselves for a new chapter in the company’s history.

Our new logo, released just this week, is based on the legacy of our original design.

It is more mature and elegant. It’s seen a few more battles, grown in unforeseen ways, and is ready to bear the responsibility of becoming an industry leader in digital communications.

We’re proud of it because it’s a reflection of ourselves, our work product and our shared values at this time and place in our company’s evolution.  By staying true to the legacy of where we’ve been, and engaging in honest, regular discourse about who we are and where we’re headed, our efforts amounted to a stewardship of the brand’s evolution. Rather than rebranding, we merely needed to refine our original identity.

This effort was representative of the challenges all organization’s face – how to grow and evolve while staying true to your values and culture.

Sure – it’s difficult to take the time to turn the lens on yourself and to think critically about what you see – especially when you’re busy growing a business and trying to make a living.

But it’s also a good reminder of the importance of honesty and clarity in your communications.

As a brand is merely a reflection of who you are, and your ability to deliver on the promise of that identity, it’s crucial to accept the organic nature of the process – to know how and when to grow – when to think critically, and when to listen to what your gut tells you.

The Lost Drupal Documentation

Thankfully, some of Drupal’s core maintainers and contributors collaborated to bring us Drupal 7 Module Development. This book is targeted at developers who already have an understanding of Drupal and PHP. The basics of the platform are certainly covered in the early chapters, but the pace is quick. As someone who has been around the block with Drupal 6 and occasionally struggles with conflicting opinions on best practices, I felt like this book was written for me. This book is a long-awaited documentation of proper Drupal development.

While the book is titled Drupal 7 Module Development, it can rightfully be considered a developer’s guide to working with Drupal. It covers everything from what’s new in version 7, to the theming layer, to working with admin interfaces and forms. Like most technical books, this one has you developing and expanding on module code examples from beginning to end. This book doesn’t cover every topic in Drupal, but it does do an excellent job of letting you know where to get more relevant information and explore topics further.

From Soup to Nuts, From Hooks to Fields

Some of my top highlights for this book include:

• The proper writing of functional tests for the Testing API, now a core  feature of Drupal
• A clear explanation of the Drupal theming system, and its new features in version 7 (including the new render elements and template_process function)
• The new Fields and Entities APIs and practical examples of their  applications
• Snippets  and explanations of proper Drupal (and PHP) coding standards
• Module permissions and security using user_access and node_access
• Working  with Javascript and the Drupal AJAX helpers
• Coding with the images and files modules, a new addition to Drupal core
• Creating installation profiles for rapid site deployment

I couldn’t recommend this book to a Drupal novice, but if you’re already a Drupal expert looking to reach guru status, this book is a must-have.   It’s good to know the Drupal community will always be there to back us up, but this is the best offline Drupal resource I have come across to date.

“We’re honored that the Interactive Media Council has acknowledged our efforts to help First Book advance its mission online,” said Visceral’s Creative Director Matthew Billingsley.  “We’re thrilled for the recognition as a firm, but its extra special when it reflects the work we’ve done for a cause we care about.”

Visceral re-launched Firstbook.org in February 2011 for the DC-based national literacy non-profit organization.

The IMA judging consisted of various criteria, including design, usability, innovation in technical features, standards compliance and content. In order to win this award level, the site had to meet strict guidelines in each area — an achievement only a fraction of sites in the IMA competition earn each quarter.

About Visceral

Visceral is a digital consulting agency specializing in strategy, design, content and development. We have offices in San Diego, Seattle and Columbus. Website: www.thisisvisceral.com. Twitter: @thisisvisceral

With over three decades of industry expertise, Visceral has developed a number of award-winning digital communications campaigns for an international client roster, including Cause Communications, the U.S. Army, California Olive Ranch, First Book, Huawei, Carney and iBAHN among many others.

About the Interactive Media Awards

The Interactive Media Awards™ recognize the highest standards of excellence in website design and development and honor individuals and organizations for their outstanding achievement.

Created by the Interactive Media Council, Inc. (IMC), a nonprofit organization of leading web designers, developers, programmers, advertisers and other web-related professionals, the competition is designed to elevate the standards of excellence on the Internet and offer winners a boost in marketing and exposure. IMC serves as the primary sponsor and governing body of the Interactive Media Awards™, establishes the judging system and provides the judges for the competition.

###

It’s a question we hear a lot these days.  Pretty much every web project that crosses our desks has one thing in common; a Content Management System (CMS).  The days of hard-coded websites are over.  As websites have grown more dynamic, interactive, and social, the requirement for their continual update has become a necessity. Content strategy is growing as a defined discipline and helping organizations to formalize an approach to publishing their content. As such, the number of CMS options has exploded.

With so many options, which one should you choose?  There’s no perfect answer to that question.  Each CMS has its own strengths and weaknesses. Analyzing all of the requirements for a project is paramount in determining what platform to choose and is the first step of the process.

To help you wade through the multitude of options on the market, we’ve broken down three options that we find are appropriate for the vast majority of content needs.

Drupal

Pros

• Extremely Powerful – Drupal’s framework allows for almost infinite customization.
• Support  – There is a huge community of developers contributing modules and plugins to extend Drupal.
• Control – From the types of content you create to the permissions controlling who accesses them, Drupal allows almost complete control over every aspect of the CMS.

Cons

• Difficulty Level – The learning curve for both developers and end user administrators can be much higher than other systems.
• User Interface – Navigating through Drupal to find / edit content can at times be a chore, especially for non-technical users.
• Lack of built in features – Drupal is an extremely powerful system but many necessary CMS features (like WYSIWYG editing) don’t come “in the box”.

Bottom Line

• Given its power and flexibility, Drupal is likely best-suited for projects that have extensive, unique, or custom requirements.

WordPress

Pros

• Setup – Extremely easy to get up and running, especially for smaller sites.  1-click updates also make maintenance simple.
• Popularity – Many users have experience from their own personal sites, which limits the need for extensive training.
• Blogging – Since it started as a blog platform, WordPress has some of the most extensive blog and straightforward publishing tools of any CMS.

Cons

• Scalability – WordPress is more designed for small to medium sites and blogs.  It’s possible to outgrow it if your site has hundreds or thousands of pages.
• Simplicity – While great for small / simple sites, setting up complex sites with custom post types can get tricky.
• Load Times – Larger sites can sometimes suffer from slower load times.

Bottom Line

• WordPress remains a prime candidate for sites where blogging is a large component and has evolved into a great CMS for small-to-medium based sites.

Sitefinity

Pros

• Unparalleled User Interface – Drag-and-drop page creation with layout and widget customization make administration easy for even the least tech-savvy users.
• Features – Comes with an impressive set of out of the box functionality and API system for developers to easily extend the core CMS and add new features and/or integrate with other systems.
• Support – As a commercial product you have access to a support team to help answer questions and resolve issues.

Cons

• Cost – Sitefinity is a commercial product and has an associated license fee.  (Drupal and WordPress are open source and free)
• Growing Pains – The current version (4.x) is a completely re-written solution.  While extremely powerful , there are still several bugs being worked out.
• Development Community – While the number of Sitefinity experts is growing quickly, it is currently not as extensive as the open-source platforms above.

Bottom Line

• Sitefinity works for sites of all sizes and is particularly well suited for those where non-technical users may be required to maintain the site.

Conclusions

At the end of the day a CMS is just a tool, and the right tool for the job always depends on what the job is.  The best CMS isn’t the one that’s most expensive or the one with the most features.  The best CMS is the one that helps meet an organizational objective and does so in a way that is efficient for the content team charged with its maintenance and evolution.