“Responsive Web Design” is a design technique: for a more in-depth definition and understanding of the term Ethan Marcotte has written an insightful article about the way to approach “Responsive Web Design”.

I look at this as a forward thinking approach to web design for the future; as technology pushes the limits so should our thinking. It’s not all about screen resolutions and scalable images on a website.

Understanding Responsive Web Design

Basically a website should “respond” to the device it’s being viewed on, this is a definition of what a ‘Responsive Web Design’ is. There are 3 key elements to ‘Responsive Website Design’:

1.       Flexible Layouts
   1. Create a separate CSS style sheet or media enquiry
   2. Adjust different screen sizes, from widescreen desktops to smartphones
   3. Choosing what to hide and show for smaller screens or devices, and simplifying the page for specific usage of a device
2.     Flexible Images
   1. Scalable images to screen resolutions
   2. Don’t create graphics to a particular device ie. iphones
3.     Media Queries
   1. Use of CSS, CSS3, javascripting
   2. CSS Scalability – apply a different page styling according to certain parameters ie. min-width, device-width, orientation, color, geolocations, etc…

In Conclusion

The concept is simple, the motives are logical, the technology behind it is basic and the results are extremely satisfying.

One thing to always keep in mind is Touchscreens vs. Cursors, I’ll explain more on my next blog.

The bottom line is when creating your next website I recommend you consider a “Responsive Web Design” site, you could argue that this is a just a trend, but it does solve a design problem that I, as a designer, face every day: designing for different resolutions. Who is going to debate making a website more pleasurable and easier to navigate?

Responsive Web Resources

There are a lot more factors in involved. If you want to learn more advanced techniques or complex layouts here are a few articles to read:

Responsive Web Design by Ethan Marcotte  – The Responsive Design movement and how it started.

A tale of two viewports – Article about CSS and how viewports work in mobile devices

Media Queries. The official W3C spec

Responsive Web Design Examples

Note: All of the images are linked to their designated website.

Earth Hour

A call to action is a prominent section on a web page that we want to guide the user’s attention to. The focal point is the eye-catching centerpiece of the page; it stands out and is distinct than other components. By designing certain areas on the website, we create and emphasize on the areas we want the user to focus on and get the message across.

It’s best to have a single call to action. Whether it’s a form to collect the information or a button to lead them somewhere else. Find the most important thing on the page, and then accentuate it. Your call to action should relate directly to the goals and priorities of the website.

It’s possible to have more than one call to action, but I recommend focusing on one main focus point. Putting a lot of call to actions on a page is the same as having none at all because, then, users won’t be able to differentiate which one’s the most important.

If there are more than one call to action, they should be distinguishable, differentiate them from one another with variety in size, color, position, visual weight and other distinction techniques.

Location of Call to Actions

The obvious choice is on the homepage. I would agree but most people tend to forget about the other pages in a website. All web pages should have call to actions that gives the user quick access to the most important piece of information on the page.

Also if your website is lengthy and users have to scroll up and down, I recommend placing the call to action in the header. For websites that don’t have to scroll, you can be a bit more creative on placement and imagery of your call to action.

Examples

Personally I like using typography for use of call to actions. Like sizing, coloring, spacing (between characters and lines) and typeface are the factors that can be manipulated for increased emphasis of textual elements.

Typography is the easiest way to grab the attention of your visitor. Also your basic buttons and banners work as well, just make sure it stands out and it’s emphasized. An example of typography use: http://www.coreymade.com/

Buttons are the most popular elements used for call to action. Big buttons are almost on every website because of the high visibility and the descriptive labeling. They are the best way but don’t over use this method as they might lose its effectiveness. An example of button use: http://www.mozilla.org/en-US/firefox/new/

Graphic illustrations are used without needing a lot of description. The visual components are an obvious hook for the visitor to the site. An example of this here: http://carsonified.com/

The use of Whitespace is the simplest way to draw your visitor’s eye to the call to action. Apple executes this perfectly. http://www.apple.com

Conclusion

Every website and all the pages in it, should have a call to action that’s useful and attractive to its users. There are many of methods of getting your visitors attention these are just some.

While many sites are built for 1024×768, the actual safe viewable area is often much smaller when one considers the browser and operating system being used. The safe area takes into account screen real estate used by operating system elements (Vista’s widgets, Apple’s dock) and the browser itself (address bar, search field, buttons, scroll bars, etc).  Some rule of thumb safe areas:

Source: Designer’s Toolbox

Our partner site has very little Mac traffic so if one removes Mac safe areas from that list, one is left with a total safe area of 849×608 due to the widgets in Vista – and, yes, though it may be hard to believe, the site gets 13.63% of its traffic from Vista users so it is something to consider when you start to think about your next website redesign.

So why does this matter? It matters because it can hit you in your most important web statistic – conversion rates. What if you design a squeeze page (landing pages created to solicit opt-in email addresses from prospective subscribers) and the giant glowing red button the poor sap, ahem, “prospective subscriber” is supposed to click on is nowhere to be seen?  You may have thought it was visible, but alas it is off screen because it sits outside the safe area.

Sadly this was the case with our partner site.  In figure 2, the call-to-action button is below the bottom of the form in the right-hand column.  It is unlikely a user will click on the button if they can’t even see it.

The solution?  Always keep your calls-to-action within the safe area where they will grab the most attention.

Who knows, your conversion rates may skyrocket, getting you noticed by the VP of Sales who promotes you and gives you a raise and unlimited use of the corporate jet and twice as much holiday time and women love you and men respect you and babies hardly ever throw up on you – all because you played it safe.

In the last few months, most of design time has consisted of designing HTML email for our clients and ourselves. Whoever predicted that email was going the way of the dinosaurs couldn’t be more wrong.

At this point, after many rounds of trial and error, I’d like to think I have a very good grasp on designing emails for successful delivery. Developing artfully designed emails to implement across the most popular marketing automation/email marketing programs has been challenging. Overcoming that challenge to see a flawlessly designed email delivered right to your inbox does provide a great sense of satisfaction.

Designing for Email Deliverability

However, this success does not come easy. There are numerous factors that come into play with email design and its impact on deliverability. To begin, like all marketing activities, you need to know your audience. Find out which email program your audience utilizes most, such as Microsoft’s Outlook 2010 or Google’s Gmail. This exercise will not be made in vain, as email clients render HTML emails differently; making a big impact on how you design and code your emails.

Utilizing CSS in Emails

A component of email design to pay particular attention to is using CSS in your emails. CSS is the code that makes HTML emails visually pleasing, but it can also be the most frustrating part of designing for emails. A terrific resource for utilizing CSS in email is the Guide to CSS support in email clients.

Best Practices & Design Guidelines

Based on my frustration and heartache designing HTML emails, here are a few best practices or guidelines I would advise you follow to develop the artfully crafted, successfully deliverable emails you desire:

I. Strategic Use of Tables

For using tables when coding, most email clients don’t support CSS layouts.

Here’s an example:

<table border=”1″>

<tbody>

<tr>

<td>row 1, cell 1</td>

<td>row 1, cell 2</td>

</tr>

<tr>

<td>row 2, cell 1</td>

<td></td>

</tr>

</tbody>

</table>

For a reference on tables visit W3Schools to get more detailed information. If you require more information on coding, go to Quackit. This website will generate tables for you.

Also, using “Nested Tables” when coding makes the code a bit messier, but will help you overcome the margining and padding issues you may encounter. A “Nested Table” means to put a table within a table which will help you achieve the right look when dealing with complex graphics and/or copy.

II. Utilizing Inline CSS

As stated earlier, most email clients do not support CSS layouts; however, they will support some basic CSS elements (refer to guide from Campaign Monitor) using inline styles. This requires that you embed the CSS within the code. Note: you cannot use external CSS files in emails like you can on regular websites.

Here’s a basic example of inline CSS

Sample text here.

There are many tools online to help you with inline styles. The most useful inline style site I have found is Inline Styler. This site has saved me numerous headaches.

III. Maintaining Email Width

Most marketing automation/email marketing programs limit the maximum pixel width of your email to accommodate the variety of email preview panes, like in Outlook and Gmail. As a rule of thumb, its best to stay under 600 pixels when designing for emails.

IV. Images & Graphics 

Images and graphics are where email designers want to spend most of their time and have the most fun, but this can also be the most difficult to master. The illustration element of emails is what really makes emails standout, but not all email clients support background images. Some viewers will specifically turn-off images until the reader elects to show “pictures”.

Given this, I recommend limiting usage of images in HTML emails. Limiting images does not have to hinder the design of your email as layout and formatting can be just as powerful as images in email design. Don’t forget to test your layout with the images disabled, since many readers will only view the email in this format. Just as Robert Browning, the notable poet/playwright, said “Less is More”.

Outside of images and graphics, other ways to enhance your email design is using background colors to convey your core design. Keep in mind, it is important to maintain readability to the viewer while utilizing background colors.

Another best practice is to never embed your images in the email. Always have your images hosted on your server. This will also save you time if images need to be changed quickly in a multiple part email series.

Lastly, remember to optimize your graphics to a suitable file size. No one likes waiting for images to download. While everyone is on hi-speed internet these days, where there is little patience with delays in loading.

V. Unsubscribing

It’s common practice that most HTML emails are only sent after an opt-in process. However, keep in mind that you need to make opting-out just as easy as you made optin- in, or the ramifications could be detrimental to your email deliverability. If you make it hard to unsubscribe, you’ll surely lose respect from your audience.

VI. Viewing Options

Give your readers other ways of viewing your email. Simple text is always best for the minimalists. For others, you can enhanced the experience by having a link that will take them to a browser, in which case you can go all out because you can use all aspects of HTML and CSS, like on a website. As best practice, I usually put a text link at the top that allows users to view the HTML version in their preferred web browser.

VII. Don’t Over Complicate the Content

Companies use emails and newsletters as a way to keep contact with their clients and nurture their prospects. It cannot be stressed enough that you shouldn’t overload your emails with too much information, as no one wants to read a multiple page email. Your content should have descriptive headers and concise copy that entices your readers to act on the “calls to action” you have identified in your emails.

VIII. Test, Test & Test Again

Similar to designing a website, you must test amongst various browsers and operating systems, in this case in multiple email clients and versions. There are over 20 popular email clients, each with their own standards, without considering the outliers.

With these standards in mind, I suggest you check out the “Email Standards Project” website. The information on this site is always being updated with email client standards and potential problems you may encounter.

That’s a Wrap

With these best practices in mind, ensure your emails are: designed with tables; inline CSS; under 600 pixels in width; using minimal graphics and copy. And remember, make it easy to unsubscribe and test, test and test again!

First off, I am new around here so let me introduce myself. My name is Cameron. I enjoy long runs in the rain, loose-leaf black teas, the occasional Trojan bunny and floors free of small particulate matter. I do design work. I am not anal-retentive (all the time). I am also not a writer.

I like working here, or did until they said, “Guess what?!? You get to write for the blog!” I thought this was some sort of n00bie hazing ritual but alas, they were not kidding. I figure I have two options, either write something so terrible that I am never asked to write another blog post, or try and come up with something of at least minimal value; you be the judge as to which has been achieved.

We have created many websites for clients, but there came a time when we had to take a long hard look in the mirror and come to terms with the fact that our current website was, well, not being all it could be. We had to become our own client.

We had to step back and ask if our website was easy to use? Could users find the information they needed quickly? Did it have the functionality we needed? Did it look like the year 2011 or 2007? Did it have vaguely glowing stock photos of happy businessmen and women on every page?

The answers were shocking – well, aside from the stock photo thing because we knew they were there all along. We are now in the process of addressing these issues, which means stripping everything down and starting from scratch. No sacred cows (or Trojan bunnies for that matter). It means a complete reorganization of the pages on the site to make it easier to find information. It means refreshing all content and redesigning all graphics.

Was there grumbling? Maybe a bit. What client is perfect after all? But in the end we will have a better user experience. We may even stay for breakfast.

Information graphics

Infographics are best way to instantly capture the attention of the masses (with data), without saying a one word.

Spice Up Your Web Life

Data visualization and infographics are powerful ways to communicate data in a way most companies never consider.   Yet, we are in a world full of data and information, so why not make it more interesting.

Spicing up your infographics for presentations or white papers can say a lot about your company.

Just like your company website and your core branding, you want to keep it consistent. Dry, boring data becomes a lot more interesting when it’s visualized in unique manner.

Reading charts, graphs and pdfs can be pretty boring. You need to keep your audience intrigued to keep their attention. Visual design can help translate charts and graphs into different languages without losing essential information in the process.

Translate Any Language Visually

Whether you have a chart in Chinese, Russian or English graphics will help translate confusing concepts. Graphics, like fonts and colors, help breakdown and group necessary information that will enhance the impact you are trying to make on your readership. Not only do infographics make difficult topics easier to read, it is also aesthetically pleasing.

Infographics will  tremendously enhance your website content as well as your Search Engine Optimization (SEO), by keeping your readers engrossed in graphics and valuable content.

Samples of Infographics

1 – http://www.behance.net/Gallery/Information-Graphic–Bus-Ride-37-Mintutes/215694

2 – http://digitalpodge.co.uk/2009/

3 – http://farm3.static.flickr.com/2637/4242191963_03823c2a62_o.jpg

4 – http://www.flickr.com/photos/densitydesign/3409542518/sizes/l/

5 – http://www.alwayswithhonor.com/#308765/GOOD-Transparencies

6 – http://www.focus.com/images/view/6962/

Infographic Resources

Take a deeper look at your data visualization and see if your data visualization is up to par with the trend of displaying data.

Here’s a list of infographics resources sites to spice up your website:

• www.flowingdata.com
• www.coolinfographics.com
• www.flowtown.com

The 3 Rules of Infographics

If your considering creating an infographic for your next meeting or for your website remember these 3 rules:

1. Accurate Data – Make sure all your data is accurate before creating the graphic.

2. Attractiveness – Consider your usage of fonts and colors. Do not overwhelm your reader with loud colors and hard to read fonts.

3. Message – The whole point of having a infographic, is displaying a core message you are trying to convey. Having raw data and a cool graphic won’t mean anything if the two are not properly in sync.

Resources:

1. “Information Graphics“. Retrieved 2010-11-28.

This choice can have endless repercussions on your business. You want to send a positive message about yourself in your respective industry. Colors like blue and black may be great in sales, but in other arenas it can be downright depressing.

Color is a large part of your corporate presence and the image you convey to prospects, customers, investors and competitors.

The average business person is more concerned with the color of money rather than the color of their logo.  However, corporate colors and trends have come a long way in recent years and play a large role in how you create your branding and marketing.

The Meaning Behind Colors in Business

White: Pure, Clean and Youthful

Black: Power, Elegant and Secretive

Red: Passion, Excitement and Danger

Orange: Vibrant, Energetic and Playful

Yellow: Happy, Warm and Plentiful

Green: Natural, Healthy and Calming

Purple: Royalty, Wise and Celebration

Blue: Loyal, Peaceful and Trustworthy

Blue is the most neutral and global color.

These colors are widely used in marketing materials from corporate identities to business cards and brochures to websites. Consider your current logo and brand images, are they conveying the message you intended to your audience?

Color Selection Steps

Here are some basic steps to follow when selecting colors for branding and marketing:

Step 1: Determine the message you want to convey – strong and aggressive (e.g. black, red) or calm and trustworthy (e.g. green, blue).

Step 2: Utilize complementary colors throughout your marketing material, keeping the color schemes and messaging consistent throughout.

Step 3: Test the colors you choose on business cards before adopting them to your entire brand, to ensure you are comfortable with the new look and message it conveys.

Color Trends

There are many resources to utilize when choosing your colors and color palettes. Color schemes that made sense 10-15 years ago, now look a bit outdated. The Colourlovers website can help you choose and update your colors with the latest color trends for business and non-business markets.

Welcome to the New World of Color

There is a lot of science beyond colors, from how they are made (primary vs. secondary colors), to how they affect moods and emotions. Color can also mean different things to different cultures, companies and audiences.

Do Your Research

Hence, it is important to do your research; for the markets you are in and the cultures you serve. The University of Loyola, Maryland has proven that color increases brand recognition by up to 80 percent.

Choose Carefully

Colors have meaning whether you’re a small start-up or a Fortune 500 company. Choose wisely and evaluate the landscape. What direction you want to go and what message do you want to convey?  And of course, know your audience.

Brand consistency is not always easy.

Putting your logo on all marketing material and using the proper pantone color doesn’t cover it. These small exercises can be helpful, but brand consistency is an evolution; it’s not just about logos and colors. You need to get your core marketing messages aligned and compatible first.

Using consistency to build your brand provides your business with creditability and recognition. Gaining brand recognition moves you to the next level – trust and loyalty with your customers.

To achieve this, you need the look, feel, tone, and terminology to be consistent throughout your brand. This must be implemented for every marketing piece, including: business cards, websites, campaigns, letterhead, envelopes, invoices, signage, banners and all things related to your brand.

Without brand consistency, customers will lose sight of the message you are trying to portray and vital trust in your business.

Every company should establish Brand Standards Guidelines. It should contain instructions on how to use all your brand elements: name, logo, tagline, typeface, typestyles, textures, color palettes and all other brand attributes. This step is vital in keeping a consistent look and uniform messaging throughout your company.

A perfect example of stellar brand consistency is Nike. Since Nike’s inception in 1971, their brand and core message has never changed. The only change they have made through the years is how they market their message. They have unrelenting brand consistency, which has gained them great brand recognition and trust with millions of customers.

5 Simple Rules to Brand Consistency:

• Utilize Imagery Characteristics & Illustration Hues of Kin
• Standardized Colors & Design Styles
• Repeat Your Core Messaging
• Use Uniform Typography
• Know Your Audience

Do you have consistency in your brand?

Here’s a simple way to find out. Survey a group of employees from different departments (e.g. Accounting and Sales). Ask them…

• What does our company stand for?
• What does our company mean to you?

Compare the answers. Are the answers consistent? Are the same words being used throughout the company to describe your brand? This simple poll that will give you a great indication on your level of brand consistency.  Remember, these are employees that are aware of your business and breathe its culture every day.  Just think about your prospects or customers that do not get this intimate level of contact with your brand. Is your brand speaking the same words to everyone?