Perspective, tips, and insight

Articles to help you improve your digital marketing

What comes first the design or the content?

It's like the age-old question of chicken vs egg: When planning your website what comes first the design or the content? The answer will likely vary depending on if you're asking your designer or your copywriter. After all, you can’t have an effective design if you don’t know anything about the content but you can’t write impactful copy without knowing how it flows in the design.



Don't worry. It's not an impossible situation. It just requires the designer and the writer to work together on two key steps:

Site architecture 

Before the design starts, you should develop the site architecture. The menu will guide much of the design and, obviously, the content. Your writer may lead this part of the planning but, more than likely, a team of people will have input into the site map and structure.

Wireframes

The designer will take the lead here. Using your defined site architecture and stated website objectives, the designer will develop a set of wireframes that will give the design and content a framework. The wireframes will account for pages that need to communicate different types of content and give a structure for the content writer to work within. That framework will also provide necessary constraints as the design is developed.

 Read more of our thoughts on the importance of site architecture and wireframes. 

Once the wireframes are approved and communicated to your team. The heavy lifting starts. Now the design concepts are created while, often at the same time, the content is developed. When the two pieces come together, there will likely be some fine-tuning involved to tweak the content or rewrite calls to action to best fit the design.

With the right planning, design and content come together to create an effective, strategic and functional website.

So which comes first? Neither - it's all about the strategy. Need some help developing your website strategy? You've come to the right place. Let us help you realize (and maximize) the potential of the Internet.

Using CSS Preprocessing to Speed Up Development

As websites become more complex and designs break the boundaries of standard HTML, we are seeing a rise in the use of CSS preprocessors. CSS preprocessing allows developers to write clean code in a programming language, rather than static syntax. The preprocessor rewrites this code into the CSS. This process greatly increases development workflow and reworks how developers think about CSS.

Why use CSS preprocessors?
CSS preprocessors do not break browser compatibility. It is the same CSS we are used to seeing. The only thing that has changed is how we write it and begin our development process.

Preproccesors allow developers to create reusable CSS properties by defining variables, thus making code more modular and scalable. For example, if a primary color of a website is #0000FF (blue) and it is time to start styling elements, we only need to define the color as "Primary Blue" and all elements with the "Primary Blue" syntax will have the same color applied. This becomes very useful for those times when we need to make quick updates across many HTML elements and pages. These variables can also be applied to font families, font sizes, borders, background-colors, and more.

The example shows how we declare the variable for "Primary Blue," how it is written in SCSS, and then, how it is generated back into CSS.

SCSS

$primary-blue: #0000FF;
$spacing: 5px;

a {
  color: $primary-blue;
  padding: $spacing;

 }
Generated CSS

a {
  color: #0000FF;
  padding: 5px;
}


Mixins and nesting
Another advantage is CSS becomes more manageable. Sifting through lines—and pages—of CSS can be tedious. CSS preprocessors makes this more manageable by allowing nested selectors, referencing parent selectors and identifying 'base' selectors like color and font. Additionally, we can use mixins to group styles, vendor prefixes and easily reuse these blocks of code. The code sample below shows an example of nesting.

SCSS

#primary-nav {
  display: block;
  padding: 10px;

    a {
       color: #FFF;
       display: inline-block;
       padding: 5px;


          &:hover {
          color: $primary-blue;
          }
     }
}
Generated CSS

#primary-nav {
  display: block;
  padding: 10px;
}
#primary-nav a {
  color: #FFF;
  display: inline-block;
  padding: 5px;
}
#primary-nav a:hover{
  color: #0000FF;
}

Types of CSS preprocessors
The three most popular types of CSS preprocessors are LESS, Sass, and Stylus. Although each have their own syntax, they all follow the same parameters with nesting, mixins, and declaring variables. In a survey conducted by CSS-Tricks, 54% of people have tried or currently use a CSS preprocessor. Of the 54%, 83% of people have a preference of which syntax they choose to use. Here is the full list of results from the survey.  Below are a few resources that will help you determine which may be the right fit for your development team.

LESS
A Comprehensive Introduction to LESS

Sass
The Sass Way
35 Great Resources for Compass and Sass
Intro to Compass/Sass

Stylus
Getting started with Stylus

CSS preprocessors are a way to add functionality to your CSS with mixins and variables. This workflow greatly increases productivity, is more maintainable and creates a more scalable website.

The importance of the call to action

One of the key differences between writing for the Internet and writing a print piece is the call to action. Yes, all good marketing writing includes a call to action, however, on a website the call to action has functionality. On your website you have the opportunity to guide the reader right where you want them to go. That could be through a series of pages, to a contact form or a featured service or product. On the Internet the CTA doesn't just direct traffic, it leads people down the right path.

How do you incorporate calls to action in your writing?

First, consider what you want users to do when visiting a particular page. Do you want them to continue deeper into the site? Maybe you want them to email you for more information? Or perhaps both are viable options to capture the interest of readers at different levels of interest? You should have goals for your website overall but each page should also have a communication objective. Now that you know the objective for the page, write the content to lead them there:

1. Consider placement: Don't limit yourself to the basic, 'line of copy plus button' at the bottom of the page. Yes, that's a good call to action but it's not the only one. Use text links within your content where appropriate. Place buttons in the middle of the page. Create feature boxes in the right column. Is the page long? Consider having a CTA in the middle of the page and at the end. Try to look at the page from your prospect's point of view and consider where he might take action - then give them a way to do just that.



2. Don't just use a phone number: People on your website are often there because they don't want to pick up the phone. Even if your ultimate goal is to convince users to call, give them good alternatives. Create forms that are easy to complete to start the lead-gathering process. Include a link to an email address (and make sure someone answers it promptly). Invite people to attend an event or watch a video or listen to a webinar. Don't ignore your phone number, but consider that this may not be the most desirable action for your prospects.



3. Feature + Benefit: It's Marketing 101. If you want a prospect to take the next step, give them a good reason. Don't just include a big button to Watch A Demo! Tell your reader why they want to watch the demo. Then include the big button to make it easy to do so.


Pay attention to the design of your calls to action to make them more effective.

If your page has more than one call to action, it's critical that you consider the design of them to make sure you communicate their relative importance. After all, not every CTA deserves a large button. Even if your page has just one call to action, don't make people hunt for it. Whether you use graphics or text for your calls to action, make them obvious and you'll have more success getting your prospects to take the desired action.

Make the text link bold. Make the button large and distinctive. Use white space effectively. In short, use design to make your calls to action more effective. Read more about call to action design tips and view examples. 

To be effective, a call to action needs to be well-written and well-placed. Want more information on improving your calls to action? There are some great tips and examples in this article: Ten Techniques for An Effective Call to Action

Calls to action should never be considered as an after-thought. The objectives behind them, their design and implementation should all be part of your website strategy from the beginning. Not sure where to start? TBH Creative can help. From start to finish we can help you create an effective online strategy and improve your website's functionality. Contact us to learn more. 

2013 Color Trends for the Web

The web has fads that come and go, and color is one of these trends to keep in mind. The use of color on a website sets the mood and visually communicates the brand personality of a website. For 2013, we are seeing both the use of calmer, more subdued color palettes as well as palettes pairing bright neons with gray hues. These trends are also influenced by Pantone’s Color of the Year for 2013, which is emerald.

Trends for 2013

Grayscale
Using gray on a website instead of black tones down the contrast on text and aids readability. Incorporating bright color accents brings attention to important elements and creates hierarchy among the content and design.

Paypal's new website uses grayscale colors paired with soft hues throughout the site.

Another interesting way to use grayscale accented color is with photographic images. When the user interacts with the image or mouses over the grayscale photo, the image comes to life with color.  Once a user interacts with that pop of color, they will be that much more inclined to click.

Use of block colors
Blocking content is a trend that has evolved and this year we are seeing color being introduced via this technique. Visually, color blocking is a great way to categorize content and sections of your site and allows for clear interactions with blocked elements.

iStockphoto uses color blocks for content and when interacting with the design elements.


Neon colors
Neon colors are bold and bright. Neon colors are beautiful when coupled with gray hues. The gray hues allow the bright colors to stand out and immediately catch the eyes of users.

Prophets.com uses bold neon colors to bring out unique design elements.

Pastels
When used correctly, pastels help create a feel that is friendly and often engaging; whereas neon colors tend to be bold, with the main purpose of making a statement.

Coullon.com, an online portfolio, uses subtle pastels to communicate a friendly experience.


Use color tools to tweak your palette

There are many tools out on the web that you can use to test color combinations and tweak your existing palette. Below are a few of our favorite tools that we use when exploring color in our web design process.

Kuler
Kuler is a great tool to explore color and can be used directly from within Adobe software programs like Photoshop and Dreamweaver.

Colourlovers
Colourlovers is a great tool. It is maintained by graphic designers and is supported by a large community of developers.



Using style tiles to streamline the web design process

Narrowing down a website design can be a tricky process. Sometimes it's perfect on the first try, sometimes it takes multiple versions of design mock-ups before settling on a final look. This is commonly just an accepted part of the design process, but wouldn't it be great if there was a better approach? Wouldn't it be nice to save some time for both the client and the designer? Well, that's where style tiles come in!

Style tiles are a design tool that can help designers and their clients streamline the website design process. Style tiles can be used when a wireframe might not be detailed enough, but a full design mock-up would be too much. The purpose of style tiles is not to represent the final version of a website, but to set its overall look and feel.

What does a style tile look like?

While style tiles will differ from project to project based on the needs of the website, some of the most common elements they will represent are:
  • colors
  • typography
  • buttons
  • image treatments
  • icons
  • user interface elements
Here is an example of style tile created for The Washington Examiner 2012 Campaign and the final site design.
The Washington Examiner 2012 Campaign Site: Style tiles created by Phase2 Technology

As you can see, each style tile represents a slightly different design, with each invoking different feelings in the viewer. The full version of the site shows how the design elements are carried over from the style tile to give the website the same overall look and feel.

Below is another example of a style tile created for the new TBH Creative website design:
Style tile for the new TBH Creative website, coming soon!

This style tile represents the overall design of the new TBH Creative website and provides details about the various design elements. When the new site is launched, come back and see how the design elements are carried over from the style tile!

Why use style tiles?

Now you know what a style tile is, but why are they so beneficial?

It's important to determine how a company will be represented through the design of its website early on in the creation process. Style tiles help to narrow this down without the distraction of details such as layout or content. This can provoke better feedback during the early stages of the design process, and can save a lot of time and effort for everyone involved. Also, changes can be made more easily to style tiles than to full site mock-ups. Therefore, you can get to the development phase more quickly.

Also, with design elements decided, the focus can shift to more important aspects when determining the layout of a site. Since elements like typography and colors are already set, you can focus on the message you are trying to communicate and how you are going to best present content to your users. By making this separation, a website will be better tailored the goals of the company, and more effective overall.

If you want to find out more about styles tiles and how they can be used in the design process, check out the article Style Tiles and How They Work.

Overall, style tiles are a great way to open communication between the designer and the client early on in the design process, and to help a project progress more efficiently.

Receive articles in your inbox