Blog >> Graphic Design

Darcy Grabenstein Sep 27

The ABCs of Effective CTAs


Written by:

When researching best practices in copywriting, you can find a plethora of articles about headlines, email subject lines, SEO content and more. An equally important (and perhaps more important) element to research and refine is the call to action (CTA). According to Unbounce, more than 90% of people who read the headline also read the CTA.

Why is the CTA so important? This is the desired action you want your target audience to take as a result of your communication. If your goal is to increase brand awareness, the CTA could be a simple “Learn More.” Want to sell products or services? Be direct with a “BUY IT” button.

It does not matter whether your focus is B2C, B2B or what channel/tactic you use — email, direct mail, website, banner ad — a strong CTA is crucial. And it does not matter what industry you’re in — hi-tech, higher ed, pharma, tourism, retail — you still need a compelling CTA.

What’s not a compelling CTA? “Click here,” for starters. You’ve got to give them a reason to “click here.” From an SEO standpoint for web content, “click here” does nothing. And from a user experience (UX) perspective, it’s not exactly user friendly. Change it to “Learn more about our EMBA programs” and you’re on the right track. Adding a sense of urgency (“SHOP NOW”) can boost the click-through rate (CTR). All caps (“FIND OUT HOW”) vs. lowercase (“Find Out How”) can also increase response.

Design is another key component of a successful CTA. A button calls more attention to the CTA than a simple text link. Color, shape, icons (such as an arrow) and positioning of a CTA can impact its CTR. And don’t forget mobile. Buttons should be at least 44 pixels square to avoid errant clicks by large thumbs.

Here are several examples of click-worthy CTAs:

CTAs

When it comes to CTAs, there definitely can be too much of a good thing. On a landing page, where your goal should be to generate leads, you should have only one CTA. On the thank-you page, where you want to drive visitors back to your site, it’s OK to go hog-wild with links.

How do you know if your CTA is performing? Make sure you include a tracking code on the URL you’re linking to. Then check your analytics for click-throughs.

When in doubt, test. You could say that’s my mantra. But be sure to test only one element at a time to avoid skewing your results. After you test, apply those learnings to your next project.

Darcy Grabenstein is senior copywriter at Annodyne.


0 Comments
Ryan Schlegel Jul 17

Facebook, Firefox Jump on the Anti-Flash Bandwagon


Written by:

Back in 2010, Steve Jobs outlined why Apple does not allow Adobe Flash on its iPhones, iPods and iPads. He cited Flash as the No. 1 reason why Macs crash. In a statement on Apple.com, he said, “Besides the fact that Flash is closed and proprietary, has major technical drawbacks, and doesn’t support touch based devices, there is an even more important reason we do not allow Flash…. We know from painful experience that letting a third party layer of software come between the platform and the developer ultimately results in sub-standard apps and hinders the enhancement and progress of the platform.”

Ouch.

Flash-forward to July 2015. Alex Stamos, chief security officer at Facebook, tweeted: “It is time for Adobe to announce the end-of-life date for Flash and to ask the browsers to set killbits on the same day.”

It’s no news that Flash is known for vulnerabilities that can allow hackers to execute malicious code. It is news that major players are finally saying enough is enough.

On July 14, a few days after Facebook’s tweets, Mozilla announced it was temporarily disabling Flash by default, blocking the plugin to protect users. Firefox also tweeted its decision: “We are committed to protecting our users from security risk. That’s why following an Adobe alert we temporarily blocked flash in Firefox.”

So, for now, it looks like Flash is just a flash in the pan. While the Firefox move is a temporary one, many in the industry are clamoring for it to be permanent.

It should be noted that the Firefox block does not totally prevent the use of Flash. Users must click to enable Flash.

For years, Apple’s OSX Safari browser has shipped without Flash included. Users must install it if on their own. Plus, Safari alerts users if Flash is outdated.

So why is this such a big deal? Designers often use Flash to create animated banner ads. If Flash is disabled, these banner ads will become static. The jury is still out, however, on the efficacy of animated vs. static banner ads.

Some statistics show that users interact more with animated banners. In these cases, click-throughs and conversions could suffer as a result of Flash being blocked. Other studies show that static ads are better at capturing the user’s attention due to information overload.

The good news is that, while Flash is a very powerful web tool, HTML5 and CSS3 are gaining ground, making Flash obsolete. What’s more, mobile devices don’t support Flash (hence the switchover to HTML5).

My thoughts on the matter? Die, Flash, DIE!!!!!

Ryan Schlegel is art director at Annodyne.


0 Comments
Darcy Grabenstein Jun 16

Saying ‘I do’ to the marriage of design and copy


Written by:

Heart shaped by two hands

’Tis the season for weddings, which brings to mind famous pairs: Romeo and Juliet. Bread and butter. Yin and yang.

Some things, like design and copy, are simply better together than apart. Divorce is not an option. In certain channels, such as TV, this is quite obvious. Mute the volume on your TV and watch a few commercials (no cheating by enabling closed captioning). Then watch a few TV spots with sound. I think you’ll agree that the difference is striking.

The challenge is to strike a balance between the copy and design. An ad, whether it’s digital, print or broadcast, will be ignored if there’s too much copy. In contrast, it also will be glossed over if it’s all image with no explanatory copy.

This marriage of design and copy starts before the actual creative union (finished piece). For optimal results, collaboration should begin in the concept stage.

Many clients prefer to review copy first, however, for a variety of reasons. First, they want to make sure everyone’s on the same page (no pun intended). They want to ensure that the tone of the piece is what they had in mind, that the project is headed in the direction they envisioned. Second, they could potentially save on costs. Since design is usually more time-intensive than copy, they want to make sure the copy is finalized before proceeding to the design stage.

Even if this is the case, the copywriter and designer should first confer to ensure that they are on the same page. This will not only produce better results but will help the account manager, who is responsible for presenting a united front to the client.

Although my title is “copywriter,” I’m a very visual person. It helps my creative process to get an idea of what visuals will be used. Otherwise, I’m working in a vacuum, and that sucks (pun intended).

Think of the reverse scenario. What if a designer were asked to start on a project without any copy? When the copy is later flowed in, do you think there might be a bit of a disconnect?

A creative team that simultaneously develops copy and design can help the agency build a long-lasting relationship with its clients.

Darcy Grabenstein is senior copywriter at Annodyne.


0 Comments
Darcy Grabenstein Nov 17

Show Me Your Briefs (Your Creative Briefs, That Is)


Written by:

 Men's boxers

Thanksgiving is just around the corner, so it’s only appropriate that I pause to acknowledge what I’m thankful for as a copywriter. In a broad sense, I am grateful for the Internet. I have unlimited free resources for research right at my fingertips, which is invaluable when working on deadline.

I’m thankful that I work with brilliant creative minds at Annodyne, an agency that values training and continual improvement. I’m also thankful for appreciative clients who, in addition to providing honest feedback, take the time to recognize hard work and creativity.

From a tactical standpoint, I am thankful for detail-filled creative briefs. The briefs I’ve received from our account managers are the most comprehensive I’ve seen in a long time (and I’ve worked with dozens of agencies over the years).

A creative brief is essential to producing work that’s in line with the client’s goals. What elements should a creative brief include? At a minimum, a creative brief should include the following:

Background – This is particularly helpful if you’re working with freelance copywriters and/or designers.

Audience – Your audience will determine both the content and tone of the messaging.

Objective – What end result do you want to achieve? A purchase? Generate leads? Drive web traffic? Build awareness?

Key message – Summarize the main message in a simple, single sentence.

Deadlines – When are various deliverables due to the client? Use this to work backward and develop a production timeline.

Specs – For print collateral, this includes details such as size of printed piece and any other specifications such as ink and paper colors, paper stock, quantity, etc. For online materials, such as banner ads, this includes pixel sizes and more technical considerations such as static vs. animated, character counts (if applicable) and number of frames.

In addition, if the project involves online communications, the brief could include keywords and keyword phrases for SEO purposes. Brand guidelines are useful as well, especially for freelancers. Competitive information can paint a picture of the broader business landscape. Legal information, such as sweepstakes rules, should also be included.

A well-crafted creative brief not only helps the agency, it helps the client clarify its direction and purpose for the project.

Creative brief – client benefits:

• Provides a format in which the client can share its vision and thought processes

  • Allows input (and, ultimately, buy-in) from various stakeholders on the client side
  • By stating desired outcomes, makes the project measurable in terms of ROI (an important consideration for upper 
  • management)
  • A little extra effort up front can save the client in the long run, as in providing statistics or other information to be used in the content (saving both time and money by minimizing research efforts and cutting down on revisions).

Creative brief – copywriter benefits:

  • Provides both general and specific insight (without getting overly specific so as to stifle creativity) into the brand, the stakeholders and the project
  • Helps develop the tone and direction for the piece
  • Gives the client’s perspective, which can help frame the content

Creative brief  – designer benefits:

  • Gives a starting point for layout and design
  • Prevents developing creative that’s off-target
  • Helps in presenting creative to the client and building a case for design direction

What are you thankful for, either on the agency or the client side?

Darcy Grabenstein is senior copywriter at Annodyne.

Photo credit: By Luis2492 (Own work) GFDLCC-BY-SA-4.0-3.0-2.5-2.0-1.0 via Wikimedia Commons


0 Comments
Darcy Grabenstein Oct 13

Clients, Don’t Be Afraid of a Little Creativity


Written by:

As Halloween approaches, we revisit many of our childhood fears — haunted houses, scary lawn displays, freaky costumes. There’s another fear, however, that I’ve come across as part of the creative team at Annodyne, and that is clients’ fear of creative.

Light bulbs

This is nothing new, yet somewhat surprising, as clients hire advertising agencies for their expertise and their creative savvy. While many clients initially may hire an agency based on the creativity of its pitch, on a day-to-day basis they are much more conservative in their preferences.

We often get requests from clients to be more creative in our copy or our design, and we’re happy to deliver … only to find that the clients dial back on the creativity in the revision stage.

Why are clients so afraid to think outside the crayon box?

  • “We’ve always done it that way.”

    You may be hesitant to go into unchartered creative territory, and understandably so. When it comes to printed materials, this certainly makes sense. Why invest all the time, effort and money into a new concept if you’re not sure it will fly?

    The online world, however, is ideal for experimenting with new creative. Don’t like it? No problem. You can always revert back to the same-old, same-old or choose an alternate presentation. Better yet, test your concepts. An A/B creative test for an email, home page or landing page can give you timely, valuable insight as to what’s resonating (or not) with your audience. Measure, analyze, tweak. Wash, rinse, repeat.

  • “If it ain’t broke, don’t fix it.”

    My mantra is, “If it ain’t broke, it could be better.” Just because something is working, that doesn’t mean it’s working at utmost efficiency. There’s always room for improvement.

    In fact, when it’s “business as usual” is the perfect time to revisit your creative strategy. Don’t wait until your competition has pulled ahead. Listen to what your customers are saying. Often, the seeds for many creative ideas are generated from your own consumer base.

  • “We know our company best.”

    That may be true, but we know our craft and industry best. Remember, that’s why you hired us in the first place. And it’s our job to learn as much about your business and industry as we can, so that we can recommend the creative approaches that will garner the best results.

As with any relationship, the agency-client relationship thrives when both parties come to the table with open minds. Approaching each project as a true collaboration will result in work that doesn’t necessarily win awards, but will grow your business in the end.

So don’t be afraid of the creative beast. Who knows? With a different creative approach, you just might scare up some new business.

Darcy Grabenstein is senior copywriter at Annodyne.

Photo credit: B Tal via photopin cc


0 Comments
Sam Saltzman Aug 4

Optimizing the Web


Written by:

“Why is this page taking so long to load?!” This is a common theme with Internet users — why is it that web pages take so long to load on one’s browser?

The reason for this is (unsurprisingly) complex and multifaceted. The Internet is richer in content and media than it was in yesteryear — there is more interactivity, larger bandwidth options by Internet Service Providers (ISPs), and more web traffic. Web pages are filled with so much material, and the technologies driving these pages are becoming so much more complex.  “OK, I get it!  It’s technical. Speak English now.”

When someone jumps on the web (via a web browser such as Internet Explorer), a couple of things happen while accessing a website (e.g., http://www.google.com). The web browser says, “OK, you want to go to google.com. Let me check with the Internet to find the exact address for that link.” This process of identifying where to go — finding an Internet Protocol (IP) for google.com— could take a couple seconds to locate. Fortunately, countless computers request the IP for google.com; Internet servers cache popular sites like this for future requests to speed up the process.

“OK, so we found the site, now what?” Your computer will then ask Google’s computer(s) for a list of the content on the requested page (http://www.google.com/ has a couple of images and a couple of web files). One way this is optimized is by an acknowledgement between Google and your computer to identify which files have already been saved/cached on your computer (by comparing dates and file sizes). This comparison prevents re-downloading those files, thus reducing the total data to download from the site. For files that haven’t been previously saved, your machine and Google will determine if it is OK to save them for quicker future access.

Have I still got your attention? We went over the following: caching the IP address for a website and caching a web page’s assets (images and files). What else is there to be optimized? How else can we speed up the loading of web pages?  I’m sure you are asking yourself all of these questions in that exact order right now … right? Well, I’m going to start dropping some golden information on your collective consciousness now.

Other reasons for slowness involve rendering the content. Rendering is a fancy word that means your browser is trying to “display” web content using various tools. How will it display those images? How will it understand the code that the web page is written in (HTML)? How will it compute the JavaScript files that make it more interactive and dynamic? This is all taken care of by the rendering engine. Just like the engine and gas tank in a car, a browser engine performs a lot of complex processes and could explode with the slightest erroneous tap in the wrong place. In the past decade, browser rendering engines have matured a great deal (like those found with Internet Explorer, Firefox® and Google Chrome).

So, images are drawn onto the screen using format-specific algorithms that interpret image data. For example, bitmap files are processed and drawn differently than JPEG or GIF files. Some images are compressed more than others — this means they are smaller in file size (and likely image quality). One way to reduce image sizes (thus optimizing your web page’s load time) is to remove unnecessary color information (i.e., making the image’s color scheme “web safe.”) This reduction in information reduces file size tremendously, but can also noticeably alter quality; thus, it must be adjusted carefully.

SpeedThere are script files that also slow down the rendering of web pages, called JavaScript (JS) and Cascading Style Sheet (CSS) files. JS files provide communication between your browser and the web page — this is called “client-side interaction.” By enabling client-side interaction, actions like client-side form validation can take place prior to a bad form submission to the server.

JavaScript is used in many popular web applications, such as Gmail. Gmail is built upon thousands and thousands of lines of JS code. How does the Internet optimize thousands of lines of JS code? One way is to “minify” the code: removing unnecessary spacing and carriage returns, shortening variable and function names, and other ways to reduce the total file size.

There is also a way to reduce file sizes between computer servers and your computer by different forms of compression. The most popular compression is “gzip” or “gzipping.” When a file is transmitted over the Internet, it can be compressed via the gzip format, making the file size smaller and thus faster to receive on the client end. Gzip is similar to the zip” format, but for the Internet, and using it with the minifying process can optimize the transmission of large files by large percentages!

So, what have we learned today? The Internet is a place of wonderment and baffling processes. It is fraught with confusing terminology and scary server rooms. It also offers web designers and developers different tools to speed up the time to load web pages. This can be done by reducing the number of colors used in GIF images. Script files can also be “minified” to reduce file sizes. Developers can also send files to clients using special compression techniques like gzip. By reducing the number of files, images and file sizes, and by using complex processes, developers can optimize their webpages and provide clients faster load times.

 

 


0 Comments
Eric LeVan Jul 17

Next Gen Banner Ads


Written by:

Flash has been on the decline for a while now and I am still surprised that we’re using it in our campaigns as a means to capture attention and drive traffic. What technology do we fall back on once flash has gone the way of the dodo? We need a technology that can provide comparable 2D rendering to achieve the kinds of effects that people want to engage with.

I’ve decided to explore the HTML5 canvas platform as a suitable alternative to Flash. Why canvas? Since it is part of the HTML5 standard, it integrates much more seamlessly into a web page. Flash cannot be viewed on some mobile devices, which is a huge detriment for marketers, considering a vast amount of Internet traffic is now generated from handheld and portable devices.

Below you find two similar examples of the same ad. One is implemented in Flash, while the other is implemented in canvas. Can you spot the difference without cheating?

 

Get Adobe Flash player
AimRx. We can help you reach your patients. Get in touch.

Now that we have seen both demos in action, let’s draw some comparisons:

Flash (left) Canvas (right)
Dev Overhead Very Low High
Footprint Compiled SWF (38 KB) Canvas Javascript (7KB) + Assets (200KB)
Quality Embedded True
Fallback Support Good None
Maintainability Requires Adobe Flash Requires Text Editor

Thoughts

Both contenders offer up specific advantages. Because of Flash’s age and maturity, it is widely supported in older browsers. This is a major benefit over Canvas, which will only work in current-gen browsers. With Flash, though, you lose your audience on other platforms. Canvas will work on mobile devices, although it may not run as efficiently on the hardware that runs phones and tablets. Flash grants us some portability since all the assets are embedded in the SWF format. Extra care must be taken, however, to ensure that the assets will not suffer a loss of quality in the compression process. Personally, I like a crisp, clean image. Because canvas uses native browser functionality to build its presentation layer, there is no discernible loss of quality.

The overhead for canvas is very high. While Flash demands the use of proprietary software, it also makes the development of the ad itself much easier. This means that creating a canvas ad from scratch by writing custom JavaScript takes a long time — approximately 8 times longer. This overhead time could be mitigated quite well by performing the development in Flash or associated IDE and then exporting the final product as HTML5 canvas. Some applications, such as Muse, handle this very well. They use a built-in framework for easily translating Flash-like builds into canvas.

After all is said and done, if pressed to choose a technology for ads going forward, I would find it hard to choose Flash. My decision isn’t weighted on the bias against Flash that is growing steadily as we progress, but simply in its inability to reach the market share of growing mobile platforms. Now if only Google would permit us to provide a simple JS file in lieu of the usual format.

Eric LeVan is a front-end developer at Annodyne.


2 Comments
Ryan Schlegel Jun 18

The Flat Design Trend — Lasting Trend or Passing Fad?


Written by:

Flat design or flat UI has been one of the most talked-about trends in web and user interface design. It has been compared with skeuomorphic design (think Apple’s original iOS) because of its completely opposite principles and style. Is this a lasting trend, or just another passing fad? Most designers have been tempted to try implementing this “trend” in some of their work.

What is flat design?

As the name indicates, flat design is defined by flatness of style, simplifying an interface by removing extra elements such as shadows, bevels, textures and gradients that create a 3D look. The idea is to create a finished design that lives in only two dimensions, without losing any of the functionality that a “regular” interface provides. This creates a new challenge for the designer; by stripping an interface of its decorations and effects, it becomes harder to define the main actions and elements in a design. Most flat design schemes have five characteristics – no added effects, simple design and UI elements, a focus on typography, a focus on color and an overall minimalist approach.

Who started flat design?

The biggest player in flat design, and the first to bring this style to the forefront was, of all companies, Microsoft. In 2006, Microsoft launched the Zune music player. Zune’s interface was minimalistic, with a focus on simplicity and big typography, and an interface free of surplus details and elements. From 2006 to today, Microsoft has used Zune as a foundation to develop its image and visual interface, becoming cleaner and flatter. Windows 8 “Metro UI” was probably one of the biggest interface overhauls at Microsoft. Its simple geometric interface was replicated shortly after on the Windows Phone 7, a smaller, mobile version of the Windows 8 interface.

How do you create a flat design?

As mentioned above, there are some simple styles that you can stick to that will help you develop a flat design. Here are a few:

Buttons. We’re used to seeing buttons with a border, a gradient and drop-shadow that will make the button stand out against the background and content. This makes it easy to identify as a clickable element. Not in flat design. A button using the flat design style should be large, square edged and use color contrast.

Forms. Forms are a crucial element to get right in a flat design. Text areas, inputs and dropdowns shouldn’t use inset shadows as they usually do by default. In flat design, form fields are large, use no inner shadow, no extra fields and have a subtle action button.

Color. Color is also a big factor in flat design. The color schemes used in flat design interfaces tend to be bolder and brighter than some other color palettes we’re used to. When picking a color palette, remember to think about how colors will help users navigate a site. Specify a color for the main actions on your website (submit, login, learn more, etc.) and secondary colors for less important actions to help the users identify what is important.

Usability is more important than looks

If you’ve made the decision to create a flat design for your website, the main purpose should always be to clearly communicate a message and provide a usable and intuitive interface for the user. It’s the designer’s job to make sure a certain design aesthetic doesn’t hurt usability. Flat design looks like it’s here to stay for quite a while, even Apple is revamping its entire OS and iOS to keep up with this new look.

Will this be the future of web and app design for good? Only time will tell. With all trends or fads, someone is always lurking in the shadows and will start a new bandwagon to jump on.

Ryan Schlegel is senior designer at Annodyne.


0 Comments