Posts tagged #how to

All The Email Tips Your Assistant Isn't Using

^ Your face when you see what's been sent out to all your customer base ^

^ Your face when you see what's been sent out to all your customer base ^

Spam Assassin and blacklisted words –
Many email servers will look for specific blacklisted words that are utilized by spam services. When these are seen in subject lines or redundant within the content, they are often blacklisted and you will not be allowed to publish on that server again. Avoid the following words and offer styles:

  • Free, BOGO, %, 
  • Act now, For limited time
  • Subject lines and Pre-headers that utilize sexually oriented, pornographic, hate related and or profanity

Use emojis in your subject line! Whether to accent specific words or make them part of your call to action (CTA). Experian noted that fifty-six percent of brands using emoji in their email subject lines had a higher unique open rate.

Preheaders —
Nothing gives your reader more piece of mind that you do not spam than a solid preheater. This supports the valuable context of your subject line and can help your open rate.

Scripted Personalization –
Email services offering <inserted name> personalized subject lines are 25% + more likely to be opened.

Content priority —
Use sectional layouts to break up your content and priority — make sure that your primary call to action is listed closer to the top, and then as you descend do so in the matter of importance.

The "Inverted Pyramid" (see example below) –
When laying out your primary CTA utilize the inverted pyramid, structuring the elements of your email so they work together to draw the reader to your CTA, such as a button, video or hyperlink.

^ Click for Enlargement ^

Dimension –
Your email width should be a minimum of 640 pixels, with a maximum of 800 prior to a background color. While I've only outlined width here, my suggestion would be to ensure that the email is not so lengthy as to overstep its intent.

File Size –
Ensure that any large JPEG has been compressed properly to maximize file size.

Alt Text – 
Many email servers still publish an email in text format prior to an HTML format. Therefore, if you want to ensure that you have text in the place of imagery, allowing Alt Text to display in its place.

Hyperlink all images –
If the reader touches any graphic on an email it should be redirected to a location of your choosing. Therefore, take the time to ensure that you have hyperlinked any image to be forwarded to a destination based upon your campaign or messaging.

Negative Space – 
This design principle is simply adding ample white space (or colored “negative space”) around the elements, both text, and images allowing the reader to discern one section from another.

Mobile-friendly –

  • Keep your subject line short
  • Use preheader text
  • Use minimal body copy
  • 16pt sized font usage is a good size for mobile viewing
  • Ensure that your images are large enough to see (I'm a particular advocate of square formatting as well).
  • Place a minimum of two CTA Buttons with in an email, one after your inverted pyramid design, and one at the bottom of your content, prior to your social media icons.
  • Ensure that any CTA buttons are a color that will stand out in contrast to the primary tones used an email.

Video & Animation –
While many of the newer email services allow you to embed video, older lists and legacy email applications often do not. Therefore, my suggestion is always to put an animated GIF in the place of a video and link to the location of the video within the GIF.

While it's not an actual video, readers are more apt to click through to see the real video, than simply using a static image.

While it's not an actual video, readers are more apt to click through to see the real video, than simply using a static image.

A/B Test –
If your email services offer A/B testing of subject lines or body content, ensure that you utilize this. There are an array of metrics that you should keep your eye on to ensure maximum open rate such as:

  • Does your audience prefer shorter or longer subject lines?
  • Do you have any successful trigger words/emojis? (e.g. "Awesome" "Immediately" etc.)
  • Heat mapping your emails will show you where your readers are apt to click on the page. Over the course of several emails, you'll begin to see useful patterns and redundancies. 
  • The emotional tone of the email content
  • Types of photography chosen

Social Media Icons –
Always be sure to include social media icons to your social graph, in the footer of your email. Additionally, a way to bolster interest in a specific channel is to get a graphic (such as an Instagram photo) that came from that particular channel and link the image to it.

Contact & Feedback –
Creating a contact link is one thing, but often readers assume it is simply to engage in a course of action with the content. While feedback links are often seen as a more passive way of communicating one's opinion but not committing to the content. Lines of communication are extremely important and worthy of aggregate.

Layout Madness –
Be careful not to have too many fonts or style variations on your layout. It's obnoxious and has the uncanny ability to make your messaging come across and amateurish. Only, BOLD items that are impactful, and match your TEXT colors to fall in lockstep with your brand or main image.

^ Click to Enlarge – if you want your eyes to bleed ^

Posted on September 5, 2017 and filed under Advertising, Brand, Content, Process.

How To Hire A Social Media Commodore

So you intend to hire a social media professional. You come to the point in your marketing where you understand that you have too many social channels, too much conversation occurring and too many metrics to follow to make any sense of it. Consider this a measurement of your marketing growth. Five years ago, to staff for this position seemed ludicrous and something that you would just train for internally. Now we see that this isn't simply a necessity within your business, but an opportunity to serve your customers in a much better and engaging way.
Posted on June 18, 2012 and filed under Advertising, Business, Process, Social Media.

"How To Create An Informational Website Architecture" Thing

How To Create An *Informational Website Architecture (IA)

There are those interactive shops that use IA's as a way price jobs. Some use this information to create wire-frame templates, page scenarios and test prototypes against. There are those who use IA's to figure out how the website will interrelate with complex database structures or legacy applications. There are those that use IA's to qualify and test their usability, informational flow and make assessments about the amount, location and type of content being used. And lastly, there are those who use IA's to simply sell and scope the work to the client. Naturally it's best to understand that they can be used in the "E - All of the above" category. Ergo – engage this post!

Wikipedia describes and IA as:
"Information architecture (IA) is the art of expressing a model or concept of information used in activities that require explicit details of complex systems. Among these activities are library systems, Content Management Systems, web development, user interactions, database development, programming, technical writing, enterprise architecture, and critical system software design. Information architecture has somewhat different meanings in these different branches of IS or IT architecture. Most definitions have common qualities: a structural design of shared environments, methods of organizing and labeling websites, intranets, and online communities, and ways of bringing the principles of design and architecture to the digital landscape."

With all that said the greay area here is MASSIVE of just what truly is an informational architecture. There are so many different types of architectural differentiations that it can get quite confusing.

Just as an example there are architectural documents on:

  • Business analyst
  • Enterprise architecture
  • Enterprise Information Security Architecture
  • Data architecture
  • Information design
  • Information system
  • Interaction design
  • Knowledge organization
  • Knowledge visualization
  • Process architecture
  • User experience design
  • Web indexing
  • Website architecture

We're going to be spending our time talking about Website Architectures. More specifically in today's interactive lexicon we call these documents 'informational design documents'. While you as the newbie or senior architect may not require all architectural documents in order to complete your website it's best to construct at least the primary foundation.

Informational design can be used for an amazing array of things including (but are not limited too):

  • A sales tool
  • To test a creative brief against
  • To inspire and direct a copyrighter
  • To inspire and direct a developer
  • To inspire and direct a designer
  • To use as a comparative measurement against competitor sites
  • To phase jobs and assess budget thresholds
  • To select and insure proper technology usage
  • To insure proper modularity of a website
  • To construct project scheduling against
  • Can be used in testing, quality assurance and usability efforts
  • A scope-creep device; change orders and client guide

Getting started:

  • First off (I'm going to assume you have a site that your working or intend to submit an RFP against) write down every page that is on the current website for overhaul.
  • Next, do you some in-depth due diligence on your competitors websites. Write down and construct a comparative matrix of pages/information you thinka re good, bad and or worthy of a consideration set to the next version of your web presence. Rank each item them 0 - 5. This does not give navigational priority, simply gives reference to compare against.
  • Now go to sites that you consider utilizing 'best practices' with your industries discipline. Example would be, you sell hand-made jewelry online; look at the best eCommerce websites such as, Ebay,com and others. What pages make the site functional and easy to use? What content makes the items enticing for purchase? Write down all the pages and site a small detail of their importance.

    TIP: Often if you're comparing a boatload of sites you can jump to the bottom of the page and see if they have a site-map. A site-map is a page that lists all (or most) of the pages within their site and typically their navigational importance. Navigational priority will later become very helpful in how and what content goes where in your website.
  • What you should now be left with is a sea of page titles, details and a vague idea of where certain content will [might] go.
  • Next, start with the home page, or the page that will lead you into the area that your creating a flowchart for. It's safe to say that if your constructing a flowchart for a micro-site or new area of a larger site that there may not be a "home page" by definition. Now slowly sift through all the content you think should go on the site and its priority and start a hierarchical structure. Each column under the main (home) page will be a "sub home" page, and all pages below will become simply "sub" pages. You can delta your material even further into 'subsets,' but it's not recommended as your will be increasing difficulty on the usability and therefore making assumptions on your audiences technical proficiency. The "K.I.S.S." (Keep It Simple Stupid) should be your mantra.

A basic Website list [might] go something like:

  • ACME CO. Home Page
  • Newsletter signup
  • RSS Feeds
  • Social Media Links
  • Rotating Product Line
  • Specials (Call-Out)
  • Submit Your Photos!
  • Follow Us on Twitter
  • "Latest News" - blog post
  • Footer Navigation Items (example: SITEMAP, LEGAL, ADVERTISE, WHOLESALE, CONTACT)
  • © Copyright your home page and the internal pages are protected under it

You can see in just this quick example that you're starting to crowd up a single page in a hurry. This is why defining your architecture is so important.

From the Top Down & The Left to Right:

There are two typical styles of IA. One is horizontal flowchart (recommended) that shows hierarchal importance from top to bottom, and left to right.

The second is a horizontal IA that has the home page on the left and then delta's out to the left, putting the hierarchal importance to the top. Either style is fine, but I seem to have the most success explaining sites to clients with the first version.

Define your architecture:
Defining your document with top line mandatories such as:

  • Client & Project Name
  • Date
  • IA Version (this convention should change every time the IA changes, so it's your third revision it should be labeled v3. or v1.3 dependent upon complexity and differentiation from the previous)
  • Comments (given that the client, or your team internally had made comments, note them here

Create a key:

A key is like an map key, it's a set of iconography that allows for you to give detail to an area with just a small succinct image.

Here are a few that I use on my own to detail various parts of the overall structure:

  • Downloadable Files – This would be a page(s) that might contain a series of PDF or other documents you want available for download.
  • Registration Page – This would symbolize a page that would require or have a registration component to it.
  • Auto-Rotating Functionality – An image(s) that would rotate through or be randomly generated upon reload.
  • Multiple Pages – This one is key, it's used to notify that there are more than likely many pages within the given section your outlining.
  • Secure Pages – Page(s) requiring password protection.

Please see the attached PDF (below) for a larger list.

Define server technology and analytics:
If you're a shop that is specific to a development language, server technology, analytics package or proprietary application please be sure to note it somewhere in the IA for your own protection.

Somewhere begin the overly tedious process of protecting your ass with some legal verbiage that says, that this is a copyright protected document and that should you make changes to it after the final approved version that it will be 'client notified.' There's tons of free legal/contractual resources for you on the internet – see my Delicious links for more.

Last couple of thoughts as you embark out on your new education:

Red flags to be mindful of:

  • No one wants to click more than four deep for their selected content (Home/Sub/Sub-sub/detail)
  • Users hate to wait
  • User don't want to be forced into a linear digestion of information
  • Don't break the navigational pattern(s)
  • Users hate to hunt (UNLESS it's part of the conceptual experience)
  • There's no such thing as a "Back" button anymore
  • Users interest level [usually] goes like this:
  • Home page - I want it now, I want it brief and I want it concise
  • What out for long sub-navigational strings; if you can try to break up isolated areas of heavy content

*I'm not claiming that any of this information is fact or legally bulletproof, it's worked for me for 15 years, but USE AT YOUR OWN RISK you ungrateful bitches.

Additional Resources: - For the most visual control, by creating your own 'system' utilizing Adobe Illustrator - Another great application (with flowchart capabilites) for a MAC - The super hardcore informational development tool for PC (please note this is not a user friendly application) - online flowchart software - online diagram software  - online site-map software

Great Educational Overiew of the flowchart process:

Posted on December 11, 2009 and filed under Design, Interactive, Tools.