outside designer specsassets.fbmta.com/clt/production/productguide/... · serif versus sans-serif:...

OUTSIDE DESIGNER SPECS

Last Updated: January 2011

p - 2

TABLE OF CONTENTS

LOOP COMPONENTS 04

VIEW ONCE COUPONS 14

POSTCARDS 16

ADVANCED FTF 18

NEWSLETTERS 20

LSM 22

Client 22

Local 23

Photo Upload 23

ANIMATION 24

SIGN UP SLIPS 25

OUTLOOK 2007 28

CUSTOM FACEBOOK JOIN FORMS 30

IMAGE BASE TEMPLATES 32

p - 4

LOOP COMPONENTS

FILE SIzEIdeal < 200-300K (including html file and graphics)

Be very conscious of the quantity and type of graphics being used; the more photographs the larger the file size. While Production does the optimizing, design with optimization in mind! Average file size is 300KB.

DIMENSIONS(as appears on screen)Design should fit within monitor (800x600 resolution) with minimal or no scrolling

Custom Email - Width - 500-600px; Height - 450-600px

Note: Remember that (1) the email browser will take up a certain amount of that space depending upon the email client (e.g. Outlook versus Yahoo versus Hotmail) and that (2) email-related links and the unsubscribe disclaimer will take up space beneath the design.

COLORSUse RGB colors. Stay away from light color fonts on dark backgrounds. This combination is hard to read and, especially for live text, poses some problems in terms of printing without backgrounds and in black and white.

TYPEFACEGraphical versus Live Text:For Custom Email: (i) Using live text will save on file size plus put our emails in better standing in terms of spam filters and (ii) Using graphical text allows for more variety in the type of font face and can make a better design overall.

Serif versus Sans-Serif: The preference is for sans-serif fonts for body copy for legibility.

Use universal fonts for HTML or dynamic text: For example, personalization (member’s name), expiration dates, store locations or just copy. Web safe fonts are: Arial, Verdana, Helvetica, Times-Roman, and Georgia, Arial Narrow, Arial Black, Century Gothic, Comic Sans MS, Impact, Lucida Console, Lucida Sans, Palatino and Trebuchet MS. Note: While these fonts are commonly installed in most PC’s and MAC’s, keep in mind that when the email is programmed, a secondary basic font should be added in case one of these fonts is not available in the user’s computer.

Font size: Below is a rough comparison of web size to point size:

1 = 10 pt | 2 = 13 pt | 3 = 17 pt | 4 = 22 pt | 5 = 32 pt | 6 = 36 pt | 7 = 48 ptIt’s rough because there is a variation in size between fonts on a Mac and on a PC; Mac fonts are smaller. Below is a sample of a the way a font tag should be written in HTML <FONT face=”Arial, Helvetica, sans-serif” size=”1” color=”#000000”>

p - 5

Headline

Body Copy/

Offer

Closing Copy

Restrictions

Bottom Links

Powered by

Fishbowl LogoUnsubscribe Language

Safe Sender Language

LOOP MESSAGES DIAGRAM

LOOP COMPONENTS [CONT.]

p - 6


LOOP NAMING CONVENTIONS

Welcome: save as – wlcWelcome message default copy - Welcome to our eClub. Thanks for Joining. To start your membership off on a good foot, bring this email in for a free (offer). Then get ready for more offers, promotions and announcements.

Birthday: save as – bdyBirthday message default copy – Happy Birthday. Celebrate your big day with a free (offer). Just print and bring this email to claim your special birthday treat. But hurry this offer expires xx/xx/xx.

Belated Birthday: save as – bbdyBelated Birthday message default copy – Happy Belated Birthday. Sorry we missed your big day, but we still want to celebrate it with you by giving you a free (offer). Just print and bring this email to claim your special birthday treat. But hurry this offer expires xx/xx/xx.

Member Anniversary: save as – anvAnniversary message default copy – It’s been X years since you joined our eClub. And we want to celebrate this occasion by giving you a free (offer). Just print and bring this email the next time you visit us. But hurry this offer expires xx/xx/xx. Here’s to many more years together.

p - 7

ALWAYS INCLUDED ON LOOP MESSAGES:1) Safe Sender: To ensure delivery, add [email protected] to your address book.

2) Client Specific Links below the : ex.- visit us online | update your preferences | unsubscribe

3) Unsubscribe Language: This email was sent because you joined the [eMail Club Name] in one of our restaurants, online, or at one of our events. Personal information you provide is subject to our privacy policy. You can take your name out of the [eMail Club Name] at any time by clicking at the unsubscribe link on this email and you will be removed from our list immediately. Corporate Address.

4) Powered by Fishbowl Logo: This goes beside the Opt Out Language. Note: Some clients may opt out of having this logo. Check the LOF.


p - 8


Online JOin AnD Preference fOrMSDesign the join page and the preference forms in one photoshop file and separate the layers with sub-folder. The width should be 800 pixels and the height around 600 pixels.

THE DESIGN SHELL SHOULD BE SEPARATED IN SECTIONS BELOW:

Header - It should only include the logo and the name of your eClub. In this section you are allowed to

add live text links, graphical rollovers driven by javascript or CSS and flash components, but this will

require additional time for testing and it will be an additional cost.

Sub header- Two sub headers are needed. One with the title “Join our #Name of eClub#” and a

second one with the title “Update Your Preferences”. These two titles should be in the same photoshop

file in different group layers. These area should be part of the form area and not part of the header. If

you have images in the sub headers DO NOT bleed them to either sides. A minimum of five pixels gap

is needed on each side of the sub header.

Form area - This area needs to be expandable with a background color or a background image

that tiles up.

NO IMAGES are allowed this area and we do not support check boxes or radio buttons.

Footer - This section can contain pictures and/or text. Any language included in this area should be

generic since, this footer will show for both your online join form and your member subscribe form. In

this section you are allowed to add live text links, graphical rollovers driven by javascript or CSS and

flash components, but this will require additional time for testing and it will be an additional cost.

All standard join pages must have the following fields: •FirstName •LastName •EmailAddress •ConfirmEmailAddress •DateofBirthMonth&Day •Zip •FavoriteLocation(designfor400pixelswidedropdownmenu)Ifclienthasalotof locations, we should suggest the client to add a zip locator.

p - 9

ONLINE JOIN AND UPDATE YOUR INFORMATION PAGE DIAGRAM


800 pixels

HEADER (In this section we recommend to only add your logo and the name of your eClub)

SUB HEADER(You will need two sets of sub headers. One with the wording “Join Our eClub”

and the other one with the wording ”Update Your Preferences”)

FORM This area needs to be expandable. You can use a background color or a repeatable pattern.No other graphics allowed in this section.

No image should bleed off to the edge. If you do you will have to leave a 5 pixels gap.

FOOTER

5 PX 5 PX

p - 10


Header

Form

Footer

FAMILY JOIN FORM

FAMILY JOIN

The Family Join form is an optional loop component which allows eclub members to add family mem-bers to their eclub account. The eclub member inserts the names and birthdays of family members, and on their birthday the family member will receive a birthday message.

SPECIFICATIONSSee specifications for a standard join form. In addition, see template below. NOTE the family join is a separate component from the webjoin, but it uses the same design shell as the join form (header/footer). However, a different design is possible as long as it uses the format below.

FAMILY MeMBeR BIRtHdAY MeSSAge

There are two ways a Birthday message can work. The same memeber message will be sent out for family members or a custom family member message can be created. This will be an additional cost.

One layout option is having the main message at the top and the offer spanning the width of the bottom. Another option is having the offer on the bottom right or left hand side. The reason for this is the offer area must be repeatable in case there are twins or family members who have the same birthday. Note that birthdays on the same day are the only way a member will receive multiple offers. See diagrams on next page.

{Editable live text

Minimum with of 500 pixels

p - 11


Header

Form

Footer

FAMILY BIRTHDAY MESSAGE

Body of

message

Repeatable

offer areaNote: it is important to keep restrictions, expiration date and personalization within the offer area.

HEADER

HEADER

REPEATABLEOFFER AREA

REPEATABLEOFFER AREASOLID BG COLOR

Dear Firstname,INTRO TEXT

family Member name #1

family Member name #2

p - 12


zIP CODE LOCATORIf a zip code form is required, it will be added within this same design shell as the join and preference forms. Please be aware that a client with more than 50 locations will require a zip locator.

Each client can only have 1 store locator page. If they have 2 join pages (one for each concept), the zip locator page needs to be shared.

each Zip Locator Page must have the following (Remember that this will have the same design shell as the join and preference page: •Header •ZipCodeField:and“tryanotherzipcode”copy •GoButton: •“Previous5”and“Next5”Buttons •5storelocationswithaddresses •SelectButtons:MustsaySelect.Noradiobuttons!

p - 13

zIP CODE LOCATOR DIAGRAM


Header

Zip Code Fields

Footer

Select POtOMAc MillS MAll 12.5 Mi 2700 POtOMAc MillS cir Ste 772 WOODBriDGe, VA 22192

Select MOntGOMerY MAll 28.5 Mi 7101 DeMOcrAcY BlVD BetHeSDA, MD 20817

PLEASE SELECT yOUR zIP CODE

SeArch AgAin with A different zip:

SEARCH

p - 14

VIEw ONCE COUPONS

A view once coupon is a Fishbowl technology that can be applied to loop or monthly messages. This allows the user to view the message with the offer only once. If the user closes it and re-opens the message they will get an error message instead. Clients have the choice of two different view once coupons functionality and they are:

VIEW ONCE COUPON ON A JUMP PAGE (MOST POPULAR)The message is sent out with a click through a jump page that contains the coupon. The email should have language indicating that the user will only be able to see the coupon once and to have the printer ready before they click on it. The jump page should have the coupon, personalization, location information and a rolling expiration date. This is the most popular way to do view once.

VIEW ONCE COUPON WITHIN THE MESSAGEThe message is sent out and the offer is within the email. The slice where the offer is located is the view once section and there is no need to click through anywhere to see it. The big benefit is that your computer will cache this view once image which will allow the user to close the message and re-open it as long as it’s open on the same computer. If you open the message on another computer, you will be able to see the message except for the slice that was coded as view once. You will instead get an empty image with an error indicating that you have already opened that email. The message should include personalization, location information and a rolling expiration date.

See diagram on next page.

p - 15

VIEw ONCE COUPONS [CONT.]

VIEW ONCE WITH A JUMP PAGE

EMAIL JUMP PAGE

CLICK HERE TO VIEW YOUR COUPON

COUPON

FIRST NAME LAST NAME

1234 STREET NAME

CITY, STATE zIP CODE

OFFER VALID UNTIL xx/xx/xxxx.

If you close this window and try to re-open it you will

not get the coupon, but an error page

VIEW ONCE WITHIN THE MESSAGE

EMAIL

OFFER

The offer area is the only section that is view once.

If you open this message in another computer, you will

not see the offer anymore. That area will have an error

indicating that you have already viewed this message.

p - 16

POSTCARDS

FILE SIzEIdeal < 200-300K (including html file and graphics)

Be very conscious of the quantity and type of graphics being used; the more photographs the larger the file size. While Production does the optimizing, design with optimization in mind! Average file size is 300KB.

DIMENSIONS(as appears on screen)Design should fit within monitor (800x600 resolution) with minimal or no scrolling

Custom Email - Width - 500-600px; Height - 450-600px

Note: Remember that (1) the email browser will take up a certain amount of that space depending upon the email client (e.g. Outlook versus Yahoo versus Hotmail) and that (2) email-related links and the unsubscribe disclaimer will take up space beneath the design.


TYPEFACEGraphical versus Live Text:For Custom Email: (i) Using live text will save on file size plus put our emails in better standing in terms of spam filters and (ii) Using graphical text allows for more variety in the type of font face and can make a better design overall.

Serif versus Sans-Serif: The preference is for sans-serif fonts for body copy for legibility.

Use universal fonts for HTML or dynamic text: For example, personalization (member’s name), expiration dates, store locations or just copy. Web safe fonts are: Arial, Verdana, Helvetica, Times-Roman, and Georgia, Arial Narrow, Arial Black, Century Gothic, Comic Sans MS, Impact, Lucida Console, Lucida Sans, Palatino and Trebuchet MS. Note: While these fonts are commonly installed in most PC’s and MAC’s, keep in mind that when the email is programmed, a secondary basic font should be added in case one of these fonts is not available in the user’s computer.

Font size: Below is a rough comparison of web size to point size:

1 = 10 pt | 2 = 13 pt | 3 = 17 pt | 4 = 22 pt | 5 = 32 pt | 6 = 36 pt | 7 = 48 ptIt’s rough because there is a variation in size between fonts on a Mac and on a PC; Mac fonts are smaller. Below is a sample of a the way a font tag should be written in HTML <FONT face=”Arial, Helvetica, sans-serif” size=”1” color=”#000000”>

p - 17

Headline

Body Copy/

Offer

Closing Copy

Restrictions

Bottom Links

Powered by

Fishbowl LogoUnsubscribe Language

Safe Sender Language

POSTCARD DIAGRAM

POSTCARDS [CONT.]

p - 18

NOTES:All the components of an Advanced FTF should be designed in a similar style to maintain continuity. Design begins with the Initial Postcard and should follow normal postcard specifications. (see general postcard design specs) Once the initial postcard is approved by the client, a new task is submitted to complete all the remaining components. The webforms and responses also need to follow normal design conventions. (see webform design specs)

COMPONENTS:• Initial Postcard: sent to existing eClub member asking them to invite friends. (follow normal

PC design practices)

ONCE INITIAL POSTCARD IS APPROVED:

• FTF Web Form: Includes fields to enter member email and up to 5 friend’s email address and submit button. (follow normal webform design specs)

• Thank You Response: Generic Copy: “Thanks for referring your friends. You should receive your thank you gift within the next 24 hours.”

• Error Response: Generic Copy: “We have encountered an error. Reason Here.”

• Gift Postcard: Sent to club member with an offer as reward for inviting their friends. NOTE: This is not compliant with COPA laws. If a client requests one, please let the Art Director know immediately. This will require additional client release forms to be signed.

• Friend Postcard: Sent to member’s friend email address usually with an offer and a link to join the club.

ADVANCED FORwARD TO A FRIEND [CONT.]

p - 19

ADVANCED FORwARD TO A FRIEND [CONT.]

Initi

al P

CA

dvan

ced

FTF

Form

. Inv

ite U

p to

Fi

ve F

rien

ds

Than

ks fo

r inv

iting

yo

ur fr

iend

s re

spon

se

Frie

nd’s

Emai

l w

ith

a fr

om li

ne c

omin

g fr

om fr

iend

Dia

gram

flow

bel

ow.

p - 20

NEwSLETTERS

NEWSLETTER SUGGESTIONS AND THINGS TO CONSIDER:Newsletters are communications that hold more of information than a regular email and we usually set up in separate sections. Therefore, you should plan to spend double the time designing it. As the designer you should plan the order of the newsletter before you start designing it. You should get ALL the copy from the account executive or at least the number of characters and number of sections this newsletter will hold. The length of the newsletter will vary based on the number of articles.

Fishbowl Newsletter Best Practices •Keepeverysectioninseparatesublayers. •Useacombinationofgraphicsfortitlesandlivetextforbodycopy •Keeptheclient’slogoontop.Ifit’satthebottomtherecipientmightmissit •Giveeachsectionenoughroomaroundit.Tryavoidingtightsections.Thiswill cause production problems

Header:Name of newsletter, date, logo of restaurant and possible navigation.

Side Navigation:The navigation could be to jump pages or take you to pages from the client website.

Sections:Separate the sections of the newsletter with defined headers with titles or section the them off with another creative solution, boxes…lines… etc.

p - 21

NEwSLETTERS [CONT.]

Header

(issue #, date, etc)

NeWSLetteR dIAgRAM

Articles/

Sections

Sidebar

(article links,

side sections, etc.)

link 1

link 2

link 3

link 4

Footer

p - 22

LOCAL STORE MARkETING (LSM)

LSMsLocal Store Marketing Templates are designed to give clients the opportunity to have a reusable template in which they can input they’re own copy. As opposed to postcards which offer no editing features. Clients have the ability to alter headlines, body copy, and other fields to suit their specific message. Although they are editable, LSMs have design restrictions in order to function properly.

1) Reusable postcard with editable copy for flexibility. 2) Max 650 pixels width 3) Two Versions: Expandable and Fixed Height (non expandable) 4) Main Fields – (Dummy Copy used and replaced by clients) •Headline •BodyCopy •Offer •ClosingCopy •RestrictionsCopy •DateCopy(optional) •PricePoints(optional) •CCStoreInfo - Store Name, Address, City , State, Phone # (All or some will be used per client request)


TYPEFACEGraphical versus Live Text:For Custom Email: (i) Using live text will save on file size plus put our emails in better standing in terms of spam filters and (ii) Using graphical text allows for more variety in the typeface and can make a better design overall.

HTML Fonts - Arial, Verdana, Helvetica, Times-Roman, and Georgia, Arial Narrow, Arial Black, Century Gothic, Comic Sans MS, Impact, Lucida Console, Lucida Sans, Palatino and Trebuchet MS. Note: WhilethesefontsarecommonlyinstalledinmostPC’s&MAC’s,keepinmindthatwhentheemailiscoded, a secondary basic font should be added in case these fonts aren’t available in the user’s computer.

Font size: Below is a rough comparison of web size to point size:1 = 10 pt | 2 = 13 pt | 3 = 17 pt | 4 = 22 pt | 5 = 32 pt | 6 = 36 pt | 7 = 48 ptIt’s rough because there is a variation in size between fonts on a Mac and on a PC; Mac fonts are smaller. Below is a sample of a the way a font tag should be written in HTML <FONT face=”Arial, Helvetica, sans-serif” size=”1” color=”#000000”>

SOCIAL SHAREAll social share icons MUST be provided for production.

ADVANCED/RICH TEXT EDITOR FEATUREThis allows for the user to select from a range of editable options for a field such as (font size, typeface, color and image upload) When this feature is requested in a template, please keep in mind it can ONLY be added to a completely expandable area.

p - 23

HEADLINE GOES HERE

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna

OFFER GOES HERE

Nam consectetuer. Sed aliquam, nunc eget euismod ullamcorper, lectus nunc ullamcorper orci, fermentum bibendum enim nibh eget ipsum.

Restrictions go here Nam consectetuer. Sed aliquam, libero cursus venenatis. Nam magna enim, accumsan eu, blandit sed, blandit a, eros.

Location Name Street Name,City, State Zip Code555-555-1212

HEADLINE GOES HERE


OFFER GOES HERE

Nam consectetuer. Sed aliquam, nunc eget euismod .

Restrictions go here Nam consectetuer. Sed aliquam


EXPANDABLE TEMPLATE

HEADLINE GOES HERE


OFFER GOES HERE

Restrictions go here Nam consectetuer. Sed aliquam, libero cursus venenatis. Nam magna enim, accumsan eu, blandit sed, blandit a, eros.


EXPANDABLE TEMPLATE WITH PHOTO UPLOADNON-EXPANDABLE TEMPLATE

photo upload photo upload

DIFFERENT TYPES OF LSMs:

•EXPANDABLETEMPLATES •Generallyhavea“header”and“footer”area.

•Artworkmustbeabletoincreaseinheighttoallowadditionalcopy

•Textmuststaywithinexpandablearea

•DONOTusepatternsorgradientsbehindlivetext.YoucanonlyuseasolidRGBcolor

•Areabetweenheaderandfootermustlookthesamefromlefttoright

•FIXEDHEIGHT(NONEXPANDABLE)TEMPLATES •Muchmoregraphicalcontentasexpansionisnotneeded.

•Copyfieldsaregivencharacterlimitssotheydon’tbreakthedesign

•Generallypricepointsandsmalltextareasareeditableinthesetemplates

•PHOTOUPLOAD •Clientshavetheoptiontohavesetareasforthemtouploadphotosinto

•Max#ofphotoareasinatemplateistwo

•UploadareamustberectangularandNOTsetonanangle

•UploadareamustNOThaveborders

•FISHBOWLLOCAL •Fishbowllocalclientsuseexpandabletemplatesabout99%ofthetime.

•Alibraryof“GenericTemplates”isavailablefortheirselection

•Generictemplatesareexpandabletemplatesthataredesignedaroundspecificthemesbutnot

specifically for one client.

•ForPresentations:FBLocalclients,havetheirlogoandstoreinfoplacedatthebottomoftheemail.

(The space for these inputs are provided in the HTML Template.)

LOCAL STORE MARkETING (LSM) [CONT.]

p - 24

ANIMATION

ANIMAtIONAnimation in email marketing has become more and more popular in the past few years and now about 34%ofmarketingemailshavesomesortofanimationinthem.Animationcanbedeployedforawidevarietyof purposes in emails and, if properly use, it can entertain, inform and inspire guests in ways that static images and text cannot. Keep in mind that Outlook 2k7 does not support animation and will only display the first frame.

BeSt PRACtICeS: •Don’tgooverboardwithanimation,astoomuchcandistractthereader,andincreasefilesize.

Bigger files=Decrease in open rates because it will take longer to load •AlwaysuseanimatedGIFS.(Flashisnotsupportedbymostemailbrowsers) •InyourPSDfile,ALWAYScreateaSubfolderwithallyouranimationlayers •Keepanimationsimpleandtojustafewframes •DO NOT create rotating photos. They get too large in size and Outlook 2k7 will only display the

first frame. •Makesurethatthefirstframeoftheanimatedgifcontainsusefulinformationin

case the subsequent frames are blocked. Avoid fade-ins. •AnimationcannotbeviewedinOutlook2007,thereforemakesureyour

animation’s first frame carries all the important information •Animationshouldrepeat.Ifnot,makesuretheanimationwaitsasignificantperiodoftimebefore

it starts to allow file downloading.

ReASONS tO USe ANIMAtION: •Animationdrawstheeyetolessvisiblescreenrealestate,suchasitems

below the fold. •Animationdemonstratescriticalproductfeaturesthatdriverevenue

and increase sales. •Animationaddsvisualinteresttoemails,particularlyaroundholidays. •Animationemphasizescertainmessagesandkeycopyelementsinemails.

p - 25

SIGN UP SLIPS

DIMENSIONS, BLEEDS AND RESOLUTION

Dimensions: 4” x 6”, 5” x 7” or customized size*

Crop marks

Bleeds: 0.25” all around

Resolution: 300 dpi

*Requires 2-3 business day estimate process

FINAL FILE FORMAT

High resolution pdf or InDesign files (indesign must include fonts and images)

PROGRAM COMPATIBILITY

InDesign :CS4; CS5

Adobe Acrobat 6.0; 7.0; 8.0

COLORS

1/0 pms color

CMYK (files must be prepped for 4 separate plates)**

**Extra 10% charge if files are not prepped correctly.

p - 26

TEXT AND LANGUAGE THAT NEEDS TO BE INCLUDED

Required additional language

Title and subtitle

First name field*** Please write legibly and use all capital letters.

Last name field***

Email address field*** (two rows) Some employers block external email.

Consider using your personal email address.

Continue on second line if needed.

Birthday*** - 2 fields for month, 2 fields for

day and two fields for year (year is optional)

zip code***

Mobile – 3 fields By entering your mobile number you are opting-in to

receive mobile alerts and offers. Standard Text Rates Apply.

***Required fields

REqUIRED LEGAL COPY

We respect your privacy and will never rent or sell your information. Must be 13 years or older to

join/participate. By providing your email address you are opting-in to receive email from our company

and you may ask to stop receiving emails from us at any time.

BINDERY:

Can be padded or loose depending on the design. If padded: glue bonded to chipboard,

50 sheets per pad.

SIGN UP SLIPS [CONT.]

p - 27

SIGN UP SLIPS [CONT.]

Join Our Email Club!Thank you for visiting ##Restaurant Name##!

By joining ##our Email Club Name##, you will receive a gift for joining, a gift for your birthday and exciting news and offers all year long – delivered straight to your email inbox.

##restaurant name## We promise to not sell, rent or distribute your information. You must be 13 years or older to join. By providing your email address you are opting-in to receive email from our company and you may ask to stop receiving emails from us at any time.

Birthday

Month Day Year

Last Name

First Name Please write legibly and use all capital letters.

Zip Code

Email Address Some employers block external email. consider using your personal email address.

continue on second line if needed.

reStAUrAnt lOGO

SIGN UP SAMPLE

p - 28

DESIGNING EMAIL FOR OUTLOOk 2007

WHAT HAPPENED TO OUTLOOK 2007?

With the move from Outlook 2003 to Outlook 2007, Microsoft has changed the way emails will be rendered. Instead of using Internet Explorer it uses a single Microsoft Word-based engine, which does not support a number of commonly used HTML properties.

One of the driving factors likely prompting these changes is fixing known security holes and weaknesses. The heightened security and reduction in spam messages will lead to email becoming a safer marketing medium benefiting all parties involved.

There is expected to be a heightened number of Outlook 2007 users. Though this will mostly affect B2B marketers, many consumers also use Outlook as their home email client, some with a non-corporate email address (e.g. yahoo.com or gmail.com).

HOW THIS WILL IMPACT EMAIL DESIGNThough deliverability should not be affected, Microsoft’s changes will cause HTML emails designed under today’s standards to break or render incorrectly. Following are some recommendations on how to restructure HTML emails to maximize visibility.

TIP #1: DESIGN WITH IMAGE BLOCKING IN MIND

As with Outlook 2003, 2007 also blocks images by default, unless viewers ‘allow’ images.

WHAT TO DO:In order to display parts of the message without turning the images on, make sure your primary call to action (body copy) is displayed in live text and make sure you have ALT tags for images in case they aren’t displayed.

TIP #2: DON’T RELY ON BACKGROUND IMAGES

Many designers use HTML or CSS background images such as gradients, dropshadows and pictures behind “live text” to create visual impact within their emails. Outlook 2007 will not support background images of any kind.

WHAT TO DO:Be sure important information is not embedded in a background image. Use background images as a design treatment only, not in a way in which the overall design will be compromised if the background image is not visible.

Also provide a RGB background color (hex color) as a backup for images. For example, if you are using white text, don’t rely solely on a background image to allow the text to be legible. When Outlook 2007 doesn’t render the background image, you’ll be left with white text against a white background.

As a rule of thumb, body copy should be live text with a solid, RGB based background color (no gradients). Headlines and offers should be graphical and may have a background image. “First name” and expiration date must always be live text.

p - 29

DESIGNING EMAIL FOR OUTLOOk 2007 [CONT.]

TIP #3: ANIMATED GIFS

Outlook 2007 does NOT support animated GIFs. Outlook 2007 displays a static version of the first frame of the animation.

WHAT TO DO:If you want to use animated GIFs, be sure that all important content is in the first frame of your animated GIF. Avoid using an animation where the relevant content is not included in the first frame.

If animation is required, feature a link to a jump page or website where animated GIFs or rich media (Flash) can be played without an issue.

NOW WHAT?

Designing effectively for Outlook 2007 and other email providers may require more time, resources and strategy. The good news is, adding a few modifications to tried and true best practices will still result in effective email campaigns and emails will look their best for all email users. See the example below for basic changes you can make to your next email message.

p - 30

CUSTOM FACEBOOk JOIN PAGES

Fishbowl can set up a custom tab in your Facebook fan page with your join page fields. Below are the requirements and specs.

REqUIREMENTS

•Yourrestaurantneedstohaveafanpageandnotaprofilepage

•Fishbowlwillneedanadministratorloginandpasswordtogetintoyoursettings.Thiswillonlybeneededonce, unless you change the artwork later, so we suggest to change your password after your join page is set up.

SPECS

•IfFishbowlhostsyourwebjoin,wewillusethesameartworkusedforyourjoinandpreferenceforms

•IfFishbowlhostsyourwebjoin,butyouhaveacustomform(quicksubscribe)yourform,wewillusetheartwork that is currently used for your preferences form. This also applies if you host your join form, but Fishbowl hosts your preferences form.

•Ifyouhostyourwebjoinandyourpreferenceformandwewillneedcustomfollowingdiagrambelow.

•ThewidthoftheartworkCANNOTexceed750pixels

800 pixels

HEADER (In this section we recommend to only add your logo and the name of your eClub)

SUB HEADER(You will need two sets of sub headers. One with the wording “Join Our eClub”

and the other one with the wording ”Update Your Preferences”)

FORM This area needs to be expandable. You can use a background color or a repeatable pattern.No other graphics allowed in this section.

No image should bleed off to the edge. If you do you will have to leave a 5 pixels gap.

FOOTER

5 PX 5 PX

750 pixels

p - 31

DESIGNING EMAIL FOR OUTLOOk 2007 [CONT.]

SPECS [CONT.]

•TheonlyfieldsthatwecansupportareFirstName,LastName,BirthdayandZipCode.WeDONOTsupport a location drop down. If you are set up with a zip locator form, Facebook will re-route you to this form after you input your zip code and click “Save”.

•ForclientsWITHOUTaziplocator,allmembersthatcomethroughFacebookwillhaveunknownstorecode (UNK).

Note - Fishbowl will be able to track who joined from Facebook.

INTERNAL PROCESS

•AllcustomFacebookJoinpageformprojectswillNOThaveanAEorclientreview,sinceallcreativewillbedoingisre-sizing the existing artwork. You will just need to save the re-sized PSD file to the repository and follow the regular creative prep steps.

•Ifyoucomeacrossaclientthathoststheirjoinandpreferencepage,pleaselettheAEknowthatwewillneedcustom make one based on the client form graphics. In this case, the artwork will require client approval.

p - 32

STANDARD IMAGE BASED TEMPLATE 1.0

DIAGRAM

Personalization and/or optional paragraph

5 uploadable image fields

Personalization and/or optional paragraph

Social Media

A

B

C

D

email footer

p - 33

IMAGE BASED TEMPLATES

An Image Base Template is a template allow Fishbowl to code an email with less HTML custom coding. This template contains six image fields and a text field on top and at the bottom. These text fields can be utilize for personalizations, conditional content store information or just text.

DIAGRAM

IMAGE 1 (Only one hyperlink per slice)

PERSONALIZATION AND/OR OPTIONAL PARAGRAPH

PERSONALIZATION AND/OR OPTIONAL PARAGRAPH

UP TO SIX SOCIAL MEDIA ICONS WITH LINKS. Ex., facebook, twitter, etc.





AB

CD

p - 34

IMAGE BASED TEMPLATES 2.0

DIAGRAM

text version

HtML version

Concluding text

Social Media

x6

Image fields and images with text field

duplication of seccions d&e

email footer

ABC

I

I I ABC

D

E

F

G

H

IJ KL

p - 35

Six (6) collapsible image upload fieldsallowing up to six (6) hyperlinks

Multiline advanced text field for concluding text

Six (6) collapsible image upload fieldsallowing up to six (6) hyperlinks (social media)

optional Forward to a FriendGlobal variables and Loop & Postcard links

Common Footer

*This is the above section repeated, showing all four images collapsed, so a text field remains.

*This is the above section repeated, 3 of the image upload fields collapsed as well as the text field, so an image upload remains.

Personalization / Optional intro paragraph

Two (2) image upload fields, followed byone (1) multi-line advanced text field, followed by two (2) more image upload fields. All fields are collapsible.*

IMAGE BASED TEMPLATES 2.0

The SIB 2.0 much more complex than the original. This template contains all the same advantages of it’s predicessor but now allows multiple image and text fields throughout. The image uploads can be used as image mapped links, the same as the original, but this version allows us to have multiple images / links on the same line. There is also an area built into the template to allow live text to sit next to images.

DIAGRAM

X6

outside designer specsassets.fbmta.com/clt/production/productguide/... · serif versus sans-serif:...

Documents