Three Reasons to Incorporate Marketing Goals into Website Design

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

Cookies & Cognition: The Sesame Street Approach to Content Marketing

I hate to be the bearer of bad, awful news, but there isn’t a patented formula for successful content marketing. No matter how much we all wish that every post we publish would set the web on fire, rarely does that ever happen. More often than not, it feels like a cruel game of attrition trying to find the right topic, angle and frequency.



When Nothing Goes Right, Go Left


Let’s take a step back and simplify what content marketing is. Content Marketing Institute founder Joe Pulizzi explains in his thought-provoking book, Epic Content Marketing, that there are four primary ways to communicate with your audience:

  • Inform
  • Entertain
  • Self-promote
  • Advertise


While the latter two options are perfectly viable for any business, it’s the first two that Pulizzi deems absolutely critical to audience engagement. And what differentiates content marketing (1 and 2) from traditional marketing (3 and 4) is how valuable the audience perceives the content to be. After all, 70% of people would rather learn about a company through articles rather than ads, according to Demand Metric. Moreover, the combination of information and entertainment is where content marketing really has the potential to shine, and nothing proves that more than one of the most beloved children’s television shows of all time.



Hitting the public airwaves in November 1969, Sesame Street captured the minds and imaginations of kids everywhere with its unique blend of puppets, vocabulary, math and science. More than four decades later and the series is still going strong, having enriched the lives of over 77 million Americans in the process. So what’s the key to this show’s success?



Nothing Ventured, Nothing Gained

Children want to learn. They want to grow. They want to explore. But until Sesame Street came along, no one was willing to gamble on a program that tried to teach kids through a TV screen.



Research at the time showed that young children didn’t have the attention span to follow an hour-long lesson, so the show’s creators decided to try something different. They used educational goals to shape the content and then chopped up the format to create a faster, more engaging pace tailored to their audience. Standalone, curriculum-based segments were interspersed with fun sketches and animations, keeping kids tuned in not only from beginning to end, but also episode after episode.



Of course, that’s not to say the show was flawless right off the bat. Continuous research was needed to hone in on the ideal characters, most effective segments and best overall structure. The series underwent countless adjustments until it reached its stride. For example, do you remember Professor Hastings? Exactly! He got the axe during the first season because he was found to be too dull in comparison to his energetic cohorts, and the show was better for it.



And when new studies came to light decades after the debut, showing that children were more capable of following stories than originally believed, the Street began to incorporate evolving narratives to captivate a different generation. It never stopped evolving.



From Muppets to Marketing

You may be thinking, what do a bunch of fuzzy puppets have to do with my business’s content marketing plan? Well, let’s look at what Sesame Street is really doing here. Yes, they’re teaching children. Yes, they’re pleasing parents. But they’re also selling tons of merchandise. If you look at it through this lens, the show is actually the ultimate form of content marketing.



In Epic Content Marketing, Joe Pulizzi defines the practice as “the marketing and business process for creating and distributing content to attract, acquire, and engage a clearly defined and understood target audience—with the objective of driving profitable customer action.” Tickle Me Elmo would gleefully agree!



Understandably, very few businesses are in position to launch a wildly popular television series, but Sesame Street is sunny day inspiration at its best. The show’s constant experimentation to find the perfect mixture of education and entertainment is something all content marketers should strive to emulate. Only by understanding what your audience needs and delivering it in a compelling way can you begin to cultivate a loyal group of consumers.



Now, I can’t tell you how to get to Sesame Street, but I can help you follow their lead. Here are some things to think about as you develop your content marketing plan:


  • Figure out what your audience wants to know. Kids love stories and naturally want to learn how to read, so Sesame Street enlisted a lovable cast of characters to teach those lessons. It’s up to you to figure out the curriculum that clicks with your audience.

  • Choose the right media. Obviously, children are more likely to watch a colorful show than page through a lengthy case study, but every audience has its preferred content format. You need to find out where your prospects turn to first when they want to acquire new knowledge.

  • Balance the information with the entertainment. Should your content marketing be a profound Big Bird production or an all-out Cookie Monster extravaganza? Maybe the tone needs to be dialed in somewhere between the two. Only your audience can decide.

  • Research. Readjust. Repeat. Track your KPIs constantly to see what’s working and what isn’t. Oscar isn’t as grouchy as he used to be. Snuffleupagus is no longer a hallucination. Your content will need to change over time to keep up with your audience’s shifting preferences, so don’t be afraid to deviate from your original plan.


Keep these guidelines in mind every time you create new content and you’ll be well on your way to where the air is sweet.



This blog post was brought to you by the numbers 0, 2 and 5.



By Justin Schorah / justin@0to5.com

Tips for Partnering with your PR & Marketing Firm to Maximize Results

Whether you are redesigning your company’s website, developing event collateral, or implementing a PR program, an outside agency can be your most valuable resource. However, it’s critical that you, as the client, guide them on the path to success and stay involved so that your agency gets the direction they need to really shine, and you get the results you want. Here are some tips to maximize your agency relationship.



Define Success


Work with your agency and all major internal stakeholders to outline the deliverables and qualities of those deliverables. Get specific about what measurable objectives you can expect from your agency. Share examples of other brands, websites or articles with your agency for review so they better understand what success looks like to you. An outline of your goals will serve as the guiding framework for the project, and will be a helpful resource as the project evolves.



Collaborate & Communicate


Perhaps the reason you hired an agency in the first place is because you are just too busy with other priorities. In that case, delegate oversight and day-to-day communication to an internal partner that you trust! Your agency will need information and feedback that only an internal resource and industry expert can provide. From proposal to kickoff to execution – stakeholder input is key to making sure that the project is successful and drives results. Like with any other business partnership, collaboration and consistent communication from both agency and client is key.



Be Direct and Specific


Be as specific as possible when giving feedback throughout the project lifecycle, but particularly at the beginning of a project. Not sure what you need or what you are looking for exactly? That’s completely okay! Your agency should have experience and be able to make recommendations. During the process, be specific about what you like or don’t like. Communication and iteration are critical to achieving the very best results, so don’t hesitate to ask for another option or to see something presented in a different way.



Trust the Experts


Set a tone of trust. As much as your agency team needs and wants your input, remember that they are the experts in their field and fully understand best practices and strategies to achieve the best results for you. Trust your agency to do what they do best – to produce creative, compelling and effective work. If you’ve been engaged from the beginning, then the collaboration should be apparent. In the case where you think the results are off base or the team has missed the mark in some way, there’s no harm in a targeted course correct. You and your agency are a team!



Whatever your role, your agency relationship can be a secret weapon. Armed with the right information, agencies can be a strategic partner that brings significant value to the relationship.



 

By Lizzie Beggs

@lizziebeggs

How to Rock Your Next Media Tour

Your client is about to make a big announcement or wants to promote the company’s latest campaign. You know what that means…time to plan another media tour. The question is, how do you make the most of the time and effort that goes into setting up a tour?

 

Below are some tips you can use to help your client look like a rock star.

  1. Time it Right – Give yourself four to six weeks to pitch the media. You need time to draft your pitch, research the appropriate media contacts, conduct the outreach and follow up. It’s rare that you’ll get responses on the first round of pitching. Getting answers from the media can take some persistence.The time of year is also important to consider. You can’t book your client on a national talk show in the summer since they are on re-runs. Are you trying to book a guest during sweeps? Will you be competing with the holidays? An election? Make sure you are aware of the date(s) that you’re selecting so you can be sure to get the most open schedule possible.
  2. Hone in on Your Targets – If you are planning a media tour in NYC, the types of media available to pitch can seem limitless. Try to hone in on what your dream day of interviews for your client would look like, and go from there. Who is the audience you are trying to reach? Are they more accessible by radio, TV, Internet or traditional print media? You’ll probably find it will be a mixture. Quality is more important than quantity when building your media list. Make sure you’re approaching the right contact.
  3. Plan – I always add a schedule tab to my media list where I keep track of confirmed and tentative interview dates and times. This allows me to see at a glance what the day(s) are looking like in real time. Don’t schedule interviews too close together. This prevents stress if the first interview of the day runs late, eating into and delaying the rest of they day’s interviews. This is especially important when working with broadcast for live TV or radio. Ask your media contact how long they estimate the interview taking, if you need to arrive early and for any special instructions when you arrive.
  4. Put Pen to Paper – Before every media tour, draft a briefing book, which should include every possible detail. Items for the briefing book include: the schedule at-a-glance, a one-pager for each interview with media outlet info, contact info (including cell phone), sample interview questions, social media handles and key messages. Don’t forget to include details of accommodations and transportation as well. Share the book with your client as soon as possible so he/she can prepare as well.
  5. Be Flexible – You have your briefing book in hand and your schedule confirmed. You’re all set, right? Not exactly. Be prepared for change as the media tour will never follow the schedule exactly as you’ve laid it out. Without fail, your client will miss their train, an interview will run over or any number of things will happen. Don’t panic. Remember, you’re prepared with all your contacts’ cell phone numbers. A quick call can get you back on track.
  6. Show Off – You did the work, now show it off! A great wrap-up report is something you can prepare in advance and have ready to add in last-minute details. Plan to send within a day after the tour is complete. Make sure to include the number of interviews secured, interviewer and outlet, impressions and any social media activity. Also include any clips that have been published and the anticipated dates for those that are pending.

 

Conducting a media tour is no easy task. You’ll undoubtedly spend more time planning and logistics than you ever thought possible. If you plan well enough though, it will all be worth it when you get great results for your client!

 

3 Things to Consider for Your 2016 Marketing Strategy

One of the most exciting things about working in marketing is the ever-evolving nature of customer behavior. The challenge that results is in keeping up with trends that our marketing forefathers could never have even imagined! Here are three drivers not to be ignored in 2016:

 



Content Driven Search Traffic


For some people, SEO has become more about outsmarting search engines than providing good quality content for people. Google has made great strides in improving its algorithms to ensure a greater quality of search results. As it moves more and more in the direction of machine learning and artificial intelligence there is simply going to be no substitute for good content. So stop worrying so much about SEO and start building content so rich and valuable that search engines will want to drive traffic there!

 



Mobile Accessibility


With more people than ever before using mobile devices and the proliferation of smartwatches into popular culture, more and more people are accessing information in ways they hadn’t been before. As a result, mobile marketing has reached new heights of importance. If you want to reach your customer where they “live” – mobile comes first. Mobile friendly websites, mobile friendly HTML emails, and – where it makes sense – mobile applications. In 2016, make mobile priority #1 – not an afterthought.

 



Immersive Experiences


The advances made recently in inexpensive virtual reality, such as Google Cardboard and the much-anticipated Oculus Rift, have given marketers a new opportunity to engage prospects. Storytelling is an essential element to connecting emotionally, and immersive experiences provide environments designed specifically to create a memorable experience and emotional connection. Be among the early adopters to use this technology for marketing campaigns and simultaneously increase your cool factor while showcasing your product in a brand new way.

 



At the end of the day, the heart of every marketing strategy is connecting with people along their unique customer journeys.   If you keep the customer at the center of your strategy, your chances of success grow exponentially!

Top Three 2016 Website Trend Predictions

The web is an ever-evolving platform. For a business to appear credible as well as functional for their users, staying on-trend is imperative. Great web design also plays a major factor in engaging viewers enough to read more about the company’s product or service and enticing them to take further action, whether that means getting in touch or downloading a piece of useful information.

2016 web design trends stem from various things, but the main idea being that many users are visiting a website on their mobile device prior to viewing the site on their desktop or laptop. In response to this, the design world has taken a mobile-first approach and many of the trends for this year are a direct response to the aforementioned idea.

Trend 1. Flat Design paired with Minimalism

Flat design has been a major trend for the past couple of years, but pairing it with minimalistic design is the update for 2016. Since users are viewing sites more and more on the go, paring down elements and simplifying content to the most important pieces is what will make a website most usable and most successful in generating interest and leads.

Examples of websites with great flat design and a minimalistic approach include:

https://www.affirm.com/buy-with-affirm/
http://www.sparked.nl/
https://www.dropbox.com/guide/business

Trend 2. Microinteractions / Animations

Interactivity on the web has long been a driver of user retention but until recently has it been done well. Thanks to technologies like HTML5 Canvas and CSS3 transitions and animations, businesses can showcase their unique offering through small interactions triggered by scrolls and clicks that not only engage the user but make the story of their offering much more visually appealing.

Examples of websites with some good use of microinteractions:

Zer0 to 5ive sites:
http://www.exagen.com/

From around the web:

http://vasonanetworks.com/#/home
https://www.trippeo.com/
http://cloudhorizon.com/en/index.html
https://www.affirm.com/buy-with-affirm/

Trend 3. HD Visual Assets (Photography and Video)

Thanks to increased bandwidth and more browser support for HTML5 video, available to just about anyone with an internet or wi-fi connection, the use of large, full-screen, HD photos and video has become a major design trend for 2016. Pairing with the above two trends, HD photography makes for a fantastic user experience, which translates well to phones and tablets. Likewise, use of video for not only main banners but supporting content has become extremely common and doesn’t just support the mobile-first movement, but is also great for making search engines happy. Ties with social media websites along with proprietary footage make video a trend that is sure to stick around for a while.

Examples of websites with use of video and HD photography

Zer0 to 5ive Sites:

http://nmb.bm/
http://rocketfuel.com

From around the web:

http://magnainvests.com/
http://chattanoogarenaissancefund.com/
http://www.bienvillecapital.com/

Other trends from 2015 that will continue to grow in 2016 include the use of bold, statement typography and use of illustration and iconography, which go along with the flat design and minimalistic trend.

These web design trends are not self-contained, sealed compartments. Dramatic typography works great on top of HD photos and videos. Immersive storytelling goes beautifully well together with custom typographic elements and colorful illustrations.

As the latest web standards keep gaining browser support, variety and uniqueness in design will be more noticeable on the web and only creativity and imagination is the limit to what you can do in the browser.

Davey Award – Silver Award Winner in 2 Categories

Zer0 to 5ive was awarded two silver 2014 Davey Awards for developing the South Sixteen website, http://www.southsixteen.com, and print brochure. With nearly 4,000 entries from across the US and around the world, the Davey Awards honors the finest creative work from the best small firms, agencies and companies worldwide.

5 In-Browser Tools That Make a Web Developer’s Life Easier

null

A web developer’s life is often burdened with the task of writing thousands upon thousands of lines of code and sometimes, it’s nice to have little shortcuts to ease up some of the load. Below are five tools that I have found to be incredibly helpful for streamlining the process.

1. Blind Text Generator

Need filler text for that page design? This dummy text generator has the standard Lorem Ipsum, as well as passages from Cicero, Werther, and my favorite, Kafka! What makes Blind Text Generator different from other dummy text sites is its ability to automatically add tags, which saves you the trouble when coding HTML mockups.

2. Border Radius

Rounded corners are a feature introduced with CSS3, eliminating the need to use graphics to round out divs and other containers. The CSS code for rounded corners is a bit complex and requires several versions to cover all the major browsers. Border Radius not only allows you to preview the corners, but also generates all the code for you.

3. ColorZilla

ColorZilla ia a browser plugin for Firefox and Chrome that enables you to use an “eyedropper” anywhere on the web. The hex code automatically copies to your clipboard whenever you pick a color, making it easy to paste into Photoshop or your HTML editor. ColorZilla also comes with a built-in color browser for quick reference and a shortcut link to a code generator for background gradients.

4. Pixel to EM

EM is the unit of measurement that ensures every browser and device displays text size consistently. Just as the title says, this tool is a pixel-to-EM converter that translates a pixel measurement to EM for you. It also provides a chart with the most common sizes and percentages. No more fancy equations!

5. WordOff

Sometimes, when you copy text from a Word document or existing webpage and paste it into a WYSISYG editor (like WordPress), an annoying thing happens where snippets of unwanted HTML tags appear in the code and you end up with the meticulous chore of hunting for and deleting each one. Paste the messy code into WordOff and it will remove the tags for you.

Post by Jen Tabangcura
Zer0 to 5ive Developer