Posts Tagged "Design"

Bootlegger: Email + Facebook + Contest 2

Bootlegger: Email + Facebook + Contest

Posted by on Nov 8, 2010 in higher ed, howto, marketing, pseweb, socialmedia

Just got this email from Bootlegger – it caught my eye for two reasons.  First, it uses a Custom FBML tab that displays differently depending on whether or not the visitor is a fan. Second, I really like the way that the display images uses white spacing.

Bootlegger Jeans Facebook Page - Custom FBML Tab - Non-Fan View

Above: The Bootlegger Fan Page if you aren’t a fan …

Take a look at the display picture.  It is very simple, but the spacing between the photo of the models, and the brand creative below the photo, makes it seem like Bootlegger has managed to earn themselves two display images instead of one.  Because Facebook has a white background – all you’ve got to do is throw in some white spacing and fake it.

Below: The Bootlegger Fan Page if you are a fan …

Bootlegger Jeans Facebook Page - Custom FBML Tab - Fan View

Here’s what’s going on: Facebook is checking to see whether each visitor is a Facebook Fan of Bootlegger.  If they are a fan, then they are shown specific content.  If they are not a fan, they are shown completely different content.

I think this is really effective! What could be more clear than the giant LIKE with a big blue arrow.  It is also very easy to do

A few more screenshots:

Bootlegger Jeans Website - Contest Landing / Registration Page

Above: The contest landing page for Bootlegger’s become a fan and win a $500 shopping spree contest.

Below: The email campaign sent out to Bootlegger’s customer database, promoting the shopping spree contest.

Bootlegger Jeans Contest Promo Email


Learn More
Working with WordPress custom menus 1

Working with WordPress custom menus

Posted by on Oct 5, 2010 in howto, pseweb, wordpress

Today I replaced two static links with a custom WordPress menu in a site that I am working on.

Here is where I am starting with, in static XHTML and CSS:

Screen capture of the menu I am working on


And here is the code:

[code]<div id="siteindex"><a href="sitemap.html">Site Index</a></div><br /><br />
<div id="quicklinks"><a href="quicklinks.html">Ivey Quicklinks</a></div>[/code]

Below is the process for converting the above into an identical end result, built with a WordPress custom menu instead of static XHTML.

Creating the actual custom menu in WordPress

  1. In your WordPress dashboard, under Appearance, go to Menus.
  2. Enter a new menu name (I recommend one word) and hit Create Menu.
  3. Add the pages you would like to include and drag/drop into the desired order.
  4. Go to Screen Options and check the CSS Classes box.
  5. Expand each page in your menu and add the desired class.
    Note: For me, I added the same class to each of my items (“whitelinks”).
  6. Save Menu.

Pulling in my custom menu

  1. First, I need the wp nav menu code
    [code]<?php wp_nav_menu($args); ?>[/code]

  2. Then you tell your site which of your custom menus that you want to display – mine is called Sitemap.
    [code]’menu’ => ‘Sitemap'[/code]

  3. Then I define what class the div surrounding my menu is.
    [code] ‘container_class’ => ‘siteindex'[/code]

  4. Finally, I define the ID of the div.
    [code]’container_id’ => ‘navmenu’ [/code]

  5. And I end up with:
    [code]<?php wp_nav_menu( array(‘menu’ => ‘sitemap’, ‘container_class’ => ‘siteindex’, ‘container_id’ => ‘navmenu’ )); ?>[/code]

    Note: the $args  got replaced with array(), and each detail (argument) that I added is separated by a comma and a space.

Formatting my custom menu

Originally, my menu items were formatted by a class on the <a> tag.  When we use PHP to pull a dynamic menu into WordPress, the menu is pulled in as a list (ul) – each item is a new list item (li). While WordPress does allow me to define a CSS class for each item of my custom menu, it applies this class to the <li> tag for that menu item, rather than the <a> tag.

So, what I have to do is tell WordPress to format a link within a specific class:

[css]a.whitelink {font-size: 11px; color: #FFFFFF; text-decoration: none;}<br /><br />
a.whitelink:hover {text-decoration: underline;}[/css]

My last step is adding the code to take my bulleted list and turn it into a horizontal menu (items all on one line/side by side):

[code]#navmenu ul {margin: 0; padding: 0; list-style-type: none; list-style-image: none; }<br /><br />
#navmenu ul {margin: 0; padding: 0; list-style-type: none; list-style-image: none; }<br /><br />
#navmenu li {display: inline; }<br /><br />
#navmenu ul {margin: 0; padding: 0; list-style-type: none; list-style-image: none; }<br /><br />
#navmenu li {display: inline; padding: 5px 10px 5px 10px}[/code]

Done!

Sources:

Learn More
Tim Horton’s – Like us on Facebook! 0

Tim Horton’s – Like us on Facebook!

Posted by on Jun 17, 2010 in marketing

You would think that I have a passion for email, what with how often I drop examples from my inbox into this blog!

Here’s another one – nothing much to say, but I wanted to capture the treatment/push to Facebook in the bottom corner.  What do you think?

Screen capture of Tim Horton's Fathers' Day email campaign

Learn More

eduWEB 2009: “Web Content Provider 101 — When Knowing How to Type Just Isn’t Enough”

Posted by on Jul 28, 2009 in conference, higher ed

Presenter: Terri Vaughan, Web Customer Support Specialist, Clemson University

Abstract:

Are you one of the lucky individuals who provide support for your organization’s Web content providers who have little, if any, Web experience? Does your organization think typing and word processing skills are all that are needed to be a Web content expert? Is the “Webmaster” role part of a job description’s “other duties as necessary,” If you answer yes to these questions, this presentation is for you. You can transform your Web content providers into Web content experts by teaching a few simple skills. Reveal the “magic” of the internet and how it differs from “the Web.” Show how their Word skills can help them create interesting and informative Web content. Explain writing for print and writing for Web and why it’s important to know the difference. Inspire your content providers to learn these skills and more to transform them into Web content experts and you into a Web support genius!

Notes from presentation …

Many content providers given the job without volunteering and without specific skillset (they can type).

What they want:

  • Someone else to do it for them.
  • Want their web files and folders to be organized like on their desktop.
  • To never learn markup.
  • Drag and drop.
  • Word like interface

What they get:

  • Unfamiliar file structure.
  • Inadequate graphics tools – training.
  • Unclear or hard instructions.

What they do:

  • Put off content.
  • Insert improperly formatted graphics.
  • Create unfriendly urls.
  • Upload documents instead of web pages. (Don’t make users download.)

Clemson is on cascade, good because feels like word processing. Content providers are happy. Don’t have the other skills

What do they need:

  • Adequate technical experience.
  • Learn web best practices.
  • Easy to use img editting tools.
  • Ability to adapt print to web.

What we should do:

  • Select staff w the right skills.
  • Develop training program.
  • Require attending training.
  • Provide positive reinforcement.
  • Periodically check on their web and offer positive as well as support.

Training Regimen:

  • Basic computer skills
  • How the web works
  • Web best practices
  • Multimedia formatting and best practices
  • Simple tips for writing for web
  • Site specific hands on training w tools
  • Basic html

How to teach Content Providers:

  • Show them confidence
  • Avoid tech speak
  • Explain why skills are necessary
  • Analogies that they can relate to
  • Entertain and engage during and after
  • Follow up w reminders, cool tricks and compliments
  • If you can compare it to ms word, they will get it.
  • Stress the increase in their marketability.

Content Providers Love:

  • Copy paste from word
  • Activate previous version of updated page
  • Restore accidental deletions
  • Wysiwyg
  • Seeing their content live right away

Summary:

  • Clemson has 460 content providers. Manual monitoring process. Run report to see what’s been touched. Go out and look at their sites – this is what my job should be.
  • Clemson redesign had 4 templates – full, left, left + spotlight, right, in multiple looks.
  • Decision makers don’t understand web any better than admin
  • Training infinitely better when one on one
  • With workflows, someone needs to be in charge.
Learn More