Three Reasons to Incorporate Marketing Goals into Website Design

Today, websites have to do more than simply “exist.” With high levels of competition in the digital space, a website must be fully integrated to a company’s business objectives and goals. Investing in a website that integrates your sales and marketing messages into a compelling design can improve user experience and directly impact your business’ sales funnel.

Make a Lasting First Impression

You only have one chance to make a first impression, and in marketing, that first impression is your website. The Internet has become such an integral part of our lives that most people search online and make a judgment call about a business based on their company website before ever interacting with them or using their products. Having a website that looks like it’s from the “dot com era” tells site visitors that your business is outdated. Even if that isn’t the case, it’s difficult to overcome this perception if a customer has no other reference to your company or product.

Keep in mind that over 51 percent of users surf the web on their phone or tablet over a computer, making it vital that your site is also mobile friendly. Not convinced? A whopping 40 percent of people will choose another result if their first choice is not mobile friendly. Google’s search algorithms continue to heavily favor mobile-friendly sites, and a non-optimized site can leave you out of your prospects’ mobile search results.

Hone Your Message

As companies grow, expand and evolve, your message and value proposition needs to keep up. Your website is the best place to share the most important benefits of your company and product with customers and prospects. Your website copy needs reflect where your company and products are today, not what they were previously.

While crafting your message, be careful with the claims you put on your website. Overstating your business’ capabilities can lead to disappointed users who expect certain outcomes based on your site but have received a lesser version of the product they imagined. A proper marketing strategy should hone and focus on the best ways to highlight the strengths of your product without making outlandish or disputable claims.

One way to create an effective message is through Geoffrey Moore’s positioning framework. Moore’s framework helps to clearly define the target market and their main pain point, your product/business and its key value offering that solves your target market’s pain point, and how to best differentiate your product/business from the competition. With each of these points clearly defined, you can ensure your messaging draws in your target market and leaves them with everything they need to know about your product/business and why your solution is the best solution.

Integrate the Sales Pipeline

The best websites map out the user experience that eventually leads to a call to action (CTA) to either learn more, start a trial or buy the product. Proper placement of these CTAs will drive user engagement with your brand and have the potential to drive sales for your business. There are many tools available to track user behaviors on the site, (one such tool is CrazyEgg) so that your business can best optimize its CTAs and find the most user friendly design for them on your website.

Complete omission of CTAs and other sales-driven actions can result in lost revenue. Your website has the ability to drive sales leads from individuals who engage by requesting more info or a free trial of your product. From there, the sales team has a much greater ability to convert this lead, since search-driven leads have a 14.6 percent close rate compared to the 1.7 percent close rate for cold leads.

Among the long list of responsibilities for a business, its website must remain a top priority. While there’s no set rule regarding when a business should perform website updates, businesses should be updating their websites when they fail to incorporate modern user-interface elements and when they hinder a business’ sales funnel. But by making web maintenance more routine, a website becomes less burdensome to maintain, and with the proper messaging strategy and design execution, a business can create a modern, user-friendly site to reap the benefits a great website has to offer.

By: Jaimie Yakaboski

 

Tips for Creating an HTML Email That Renders Universally

Satisfying the rendering differences between the vast selection of email clients out there is an ongoing battle with web developers. Here are a few tips that can help save you hours of coding headaches.

Use Inline CSS

When possible, write your CSS inline. Some email clients, notably Gmail, will ignore most CSS wrapped in the <style> tag. Inline CSS is implemented with the style attribute and is written on a single line, like so:

<td style=”color:#333333;font-size:16px;font-family:Arial;”>

Writing this way can get long and confusing very quickly, so keep your line formations consistent by grouping similar properties together and in the same order for every tag.

Do Not Use Shorthand

CSS shorthand is taking a set of properties and condensing them into a single one. For example, instead of

padding-top: 10px; padding-right: 15px; padding-bottom: 10px; padding: left: 15px;

you would write

padding: 10px 15px;

For hex codes, instead of color: #66cc00;, you would write it as color: #6c0;. Unfortunately, some email clients will not parse this shortened version correctly, so everything must be written in long form. It’s a pain and a bit more difficult to read as inline CSS, but it’s definitely a must!

Use <table>, Especially for Lists

It is usually best practice to use <div> as the framework for a webpage, but this is not the case with HTML emails. With how finicky email clients are, <table> tags are the best way to keep everything in its place.

Lists are another element that is difficult to tame, as some email clients will completely ignore the CSS that you assign to them. The best way get them to display correctly across different clients is to use <table> instead of <ul> or <ol>. Below is an example <table> list:

<table>

<tr>

<td>•</td><td>List Item One</td>

</tr>

<tr>

<td>•</td><td>List Item Two</td>

</tr>

<tr>

<td>•</td><td>List Item Three</td>

</tr>

</table>

Zero Out All Padding

Some clients, like Outlook, add extra padding around all table cells, which could be a problem if there are a lot of tables in your code. You can prevent this disaster from happening by applying

padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;

to all <td> tags and adjusting the pixels as needed.

Section Out Paragraphs with <div> and <br />, Not <p>

The <p> tag is another target of unwanted padding, and zeroing out each one will add unnecessary bulk to your code. Save time by wrapping them with <div> and using <br /> for hard returns, as both have zero padding by default.

Use Media Queries to Make Your Email Responsive

Media queries tell the browser or client what code to use depending on the screen size. This enables you to break down an email for smaller devices like smartphones.

The media query goes in the head of your code within a <style> tag and all CSS is wrapped within

@media screen (max-width: XXXpx) {

/* your CSS here */

}

One useful media query attribute is converting all the <table>, <tbody>, <tr>, and <td> tags to display: block!important; to break the grid formation and prevent your email from looking cramped on small screens.

Make sure to add

<meta name="viewport" content="width=device-width">

in the <head> of your code so that the media queries actually work!

Eliminate Whitespace Before Sending

Some email clients will automatically add a <br /> tag to every hard return in your code, which may cause display issues. Before sending, run your entire code through a compiler like HTML minify to compress it as much as possible and remove all whitespace. Be sure to save an uncompressed copy of your code should you need to go back to update it.

When Testing with Dummy Links, Use a Complete URL

This is something that I eventually discovered after many frustrating experiences with Outlook. If you have a few dummy links in your copy with # or javascript:void(0) as the href, they will break your email. You can avoid this by using a complete placeholder URL, like http://domain.com instead. Just don’t forget to replace it before sending out the email!

Finally: Keep It Simple

Make your HTML emails simple and to the point. Remove any unnecessary imagery, borders and accents to reduce the amount of items to code. Minimal design elements also mean less to worry about when making your email responsive. After all, the main focus of an HTML email should be the message and its readability.

These are just a few techniques to help you make your HTML emails work better. I also recommend subscribing to the Litmus blog to stay current on all of the best practices for email marketing.

 

Related Articles:

Using White Space to Improve Users’ Website Experience

In design, white space is the negative space between all of the content and supporting graphics. (White space is not necessarily “white,” it can actually be any color or part of an image.)

If utilized correctly, white space is one of the most important aspects of a website’s design. By including a healthy balance of content, graphics, and white space, the viewer can easily digest the important information – the content – and be directed to relevant calls to action.

White Space in Website Design:

  1. Highlights Key Information – There are many ways to highlight important elements in a design. One way to do it is by placing a particular bit of content or graphic in it’s own space. When content or graphics are surrounded by white space, the viewer is cued to pay attention to that particular section. A lot of white space surrounding a section of content can also suggest a higher level of importance.
  1. Directs the Viewer – White space not only highlights important information, but it also guides the audience through the material down the web page. By placing the content into sections separated by white space, the information becomes easier to navigate.
  1. Increases Readability – Appropriate spacing paired with typographical hierarchy allows the reader to effortlessly scan a document or web page at a glance.
  2. Provides Design Balance – By utilizing white space accompanied by design elements, the overall design gains a sense of equilibrium. A design that has too much white space could look lifeless or unfinished, while a design chock-full of graphics and content might look haphazard or slapped together. This can cause the viewer to become overwhelmed and leave the site.
  3. Evokes Sophistication – A healthy amount of white space makes a design feel airy and elegant.

Examples That Illustrate the Power of White Space:

whitespace

This website includes little to no white space. It looks a lot more like a coupon mailer than a website. The eye does not know where to look on the page. Information is lost and buried in the immense amount of content.

This example includes a nice balance of content, imagery, and graphics. This homepage showcases the important information, which the viewer can navigate through easily. The calls to action are clearly marked, with some being more prominent than others. This is also an example of how part of an image can become white space.

There isn’t a minimum or maximum amount of content that should be included on a web page. It is more important to select which information is most pertinent rather than including everything. By being selective with your content, it becomes easier to determine how white space can be used to produce a balanced design that drives engagement and interaction.

By: Lindsey Tabor

A Few To-Do’s When It Comes to Website Creation

essex_website_design1by Katie Cannon

Creating a website can be a fun and inspiring project, but can also become a headache if the right steps are not taken. Having an online presence is more important than ever. With more individuals beginning the buying cycle online, an easily findable, informative ans functional website can make a world of difference.

At Zer0 to 5ive, we find developing an effective website is a tightrope walk between creativity and delivering up to the standards mandated by your client. Remember you have been hired by your client and the ultimate creative vision is their’s. This does not mean you cannot be creative or engaging. Communicate the client’s key messages in a professional, yet original and innovative way will help set your site apart from the millions of other .coms in the space.

Here are a few tips I have learned from experience that can help you take your website development to a new level:

• Connect with your client. Get into their mind – what are they looking for? What image and message do they want their website to convey about their company? Connecting with the client from the start is crucial – getting on the same creative page as your client will save you countless headaches down the road and make each stage of design, development and implementation a breeze. Ask them for sample art, photos and other sites to draw inspiration from

• Luckily, there are millions of new Web 2.0 features available for free to no cost. Investigate what features and widgets would help you best achieve your client’s goals. Think about what you can provide to your client that will keep visitors engages. What can you present that will make your client standout in the marketplace? How can you help give your client the WOW factor? Consider social media, embedded videos, click to chat, rss feeds blogs… the list goes on and on.

• Your home or landing page is the first page a consumer sees and without engagement, site visitors will quickly abandoned the site. This is why creativity is so important. Being able to engage or interest the visitor immediately will go a long way. Think outside the box and have fun with the design. Yet, keep in mind that the website should still come across professional, clean and innovative.

• Communicate with your client. Make sure you understand what they want and how they want it done. Website development is a long process – not having a set communication method will only make the process longer. A timeline is crucial during the site launch preparation. Have weekly update meetings to ensure you and your clients are on the same page and creating a friendly repartee with clients can help plant the seeds for future working opportunities.

• Keep it search-friendly. Now-a-day’s an overwhelming number of consumers search through today’s major search engines. If you are building your site in an outdated language implementing other elements that impede search engine rankings, your site will be impossible to find, this means you are missing out on some major dollars! Come download our FREE SEO white paper to learn more about how you can garner visibility on search engine result pages.

• Provide ongoing customer service – it’s all about the experience, and working well together. Your job is not done after launch. A good web-development team will continue to be on hand to assist with any potential bugs, upgrades or staff difficulties.

• Double check all of your work! No website should ever be launched without making sure all your i’s are dotted and t’s are crossed! Use all the resources available to you to proofread site content. Provide internal links to appropriate pages and be sure that every page can be found every time.

If you understand the importance of communicating and connecting with your client, then you should have no problem designing and launching a website together successfully!

Katie Cannon is a Marketing Strategist ant Zer0 to 5ive