Pulling Levers Blog

Your content is one of many reasons users visit your website, but what happens if your content is designed poorly. Poor readability can cause readers to squint, causing eye strain and frustration and can drive visitors to leave your site. Readable text affects how readers process information and if designed correctly can allow your user’s eyes to flow throughout the paragraphs and retain all your information.

Here are some easy to follow tips on using font on your site for optimal readability.

Using Fonts
A good rule of thumb is to only use a maximum of three fonts throughout your website. For example, one font could be used for headings while another could be used in the paragraphs. Fonts such as Georgia, Times New Roman and Arial are safe for the web. If you want to use a font that represents your brand better try using @font-face to incorporate a non safe font on your site. To utilize @font-face:

• Find a @font-face kit generator such as http://www.fontsquirrel.com/fontface/generator
• Add your font, choose the optimal setting and download your kit. Note: Some fonts may have restrictions so always check the font’s terms or author notes.
• Add the code below to your CSS file:

@font-face {
    font-family: ‘FONT-NAME';
    src: url(‘FONT-NAME.eot');
    src: url(‘FONT-NAME'?#iefix') format('embedded-opentype'),
         url(‘FONT-NAME'.woff') format('woff'),
         url(‘FONT-NAME'.ttf') format('truetype'),
         url('FONT-NAME'.svg#FONT-NAME') format('svg');
   font-weight: normal;
   font-style: normal;
}

• Then add the code below anywhere you would like the font to appear (e.g. heading tag, paragraph tag, form input box…):

  font-family:FONT-NAME, fallback font optional;
  

Font Size
Experts say, for the best readability your content should be a minimum of 16px. Larger font sizes indicate higher priority because it draws the reader’s attention, which is why headings are typically larger and bold or a different color than the content.

Font Colors
Good contrasts makes text easy on the eyes and easy to scan quickly. Choose font and background colors that are easy to read. Black text on a white background is the easiest to read. In college, our final for my first web design class was to create a working website. I will always remember one student’s website because it was a pink background with green text. A great example of what NOT to do.

Font Spacing
White space helps break up large amounts of text and helps the reader’s eye travel through the text. You can achieve this by adding extra padding or margin space between block and paragraph breaks. Line height is the space between the individual lines of text. If the line height is too short readers will have to squint. If line height is too long it will seem like separate bodies instead of one paragraph.

You’ve heard the stats before- 800 million active users, over half of them logging on in any given day, 350 million mobile users- Facebook has become a dominant part of the online world. 

So how do businesses begin to leverage their Facebook presence?  One element to consider is a Facebook landing page. Instead of the fan page wall, the landing page can be the first thing a visitor sees when they reach your page. This allows you to control your first impression and it can help turn a visitor into a fan. Custom landing pages have been around for a little while now, but with more businesses getting involved in Facebook every day, we wanted to take a look at the basics of designing and launching a Facebook landing page.

Designing Your Landing Page

The main thing you need to remember while designing your landing page is the layout cannot be wider than 520 pixels; the height is up to you. Two best practices to incorporate into your page – include design elements from your current website and brand and include a call-to-action button near the top or use an arrow to point to the page’s like button. In Lever’s case I put a “Click The Like Button” graphic under the logo as well as the “Like Lever Interactive” text in the final paragraph. Below is another example from one of our clients (we did not design this page).

Developing Your Landing Page
Developing your landing page can range from easy to difficult depending on which method you choose and your level of understanding HTML. One of the easiest ways to develop the page is to install apps.

• Wildfire’s iFrame for Pages App is among the easiest to use and includes custom HTML and image options and Fan Gate (Like Gate) options. An example for using this app would be a landing page with one image (either upload from the app or stored on your server) that links to a page on your site.Fan Gating or Like Gating requires a user to “Like” your page before they can receive the desired content, gain access to information or enter a contest or sweepstakes.
  Difficulty Level: Low – Moderate
• Static FBML (Facebook Markup Language) is another free app that will add a box to your page in which you can render HTML or FBML for customization. An example for using this app would be a landing page that has three paragraphs with different keywords bolded and an image near the top. The page is coded in HTML and the image is stored on your server.
  Difficulty Level: Low – Moderate
• Facebook Developers Page  allows you to build with Open Graph and integrate your app with Facebook’s core experience. An example for using this app would be a landing page that includes a sign up form that connects directly to your company’s database.
  Difficulty Level: Moderate – High

Landing Page Options
After the landing page has been created you will need to edit some settings so this page is the first thing visitors see, instead of your wall. From your landing page click Edit Page in the upper right. Note: You will need to be logged in and an admin to edit the page.

If you’ve installed an app choose the Apps link and then the Edit Settings Link under your apps name. You can now change the title of the tab. By default Wildfire’s apps tab is labeled Welcome.

After you’ve made the change, click Manage Permissions and look for the Default Landing Tab option. Choose the name of your app and click Save Changes.

You landing page is now the first thing visitors will see if they are not already a fan. To test your new landing page, log out of your account and visit your fan page.

Studies have shown that Facebook landing pages convert better than just having the wall show first. Keep your landing page simple and show content that will intrigue your visitors. If you are running a contest or have an item you give away for free, Fan Gating is a great option to increase your Likes.  Here are some more examples to get your creative juices flowing.

Do you or your company have a Facebook landing page or did you create one after reading this post? Leave a comment below with a link to your Facebook landing page.

As we ring in the New Year at Lever Interactive, our online marketing teams have come together to share some of their favorite advancements of online marketing tools in 2011.

The online marketing world is constantly evolving (as you know) and 2011 was no different for new technologies, features and advancements in website management, PPC advertising and SEO.  Some of our teams have compiled their favorite new features to engines, technologies and online marketing management tools in 2011.

Google Analytics

Google’s free online analytics tool made numerous updates and additions in 2011, including the roll out of a paid package, Google Premium.  One 2011 update Lever’s team highlighted as especially useful was the real-time dashboard.

The Real-Time section displays top referrals, top keywords, top active pages and top locations all in real time.  For a more in-depth overview, check out Jen’s blog post from October.

“The top locations data is the reason why this made my list because it has been very helpful with one of my retail clients.  With the client’s continued international expansion, determining new countries to target is key to the success of our campaigns.  Also, our campaigns are very sale based and rely on critical time frames.  We can instantly see if during a sale the targeted countries are trending in traffic.” – Danyl H.

For more additions to Analytics in 2011 (including mobile and social reporting, multi-channel funnels and the new Google Analytics v5 roll-out) check out Jen Davis’ 2011 Google Analytics blog posts in our archives!

Google AdWords

For many Lever staff members, a large portion of their day is spent within Google AdWords managing PPC campaigns of all shapes and sizes. Any additions to the AdWords online or desktop tool that makes our job easier or campaigns run smoother, generates excitement in the office. One favorite in 2011 was the Google AdWords Dimensions tab.

“The dimensions tab provides an easy way to pull a variety of reports, including geographic, demographic, daily and hourly reports. It’s much quicker than having to run these reports separately in the old reporting interface.” – Jamie W.

What’s your favorite dimension to pivot your AdWords data by?  I most often use the Geographic and Hour of Day dimensions. For more info on dimensions, Jeremy Decker over at Search Engine Journal recently posted a thorough review of the dimension tab to increase conversion rate.

Some other AdWords 2011 additions receiving staff mentions- Social Extensions and Google Display Network targeting by interest categories (previously in beta).

Microsoft adCenter

In late 2011, Microsoft adCenter rolled out an upgraded look to their interface along with some new reporting features. It was a refreshing change that reduced some of the more cumbersome elements of the interface and brought it closer to the functionality you may be use to in Google AdWords. For more details on the upgrade, stop by Search Engine Watch and read John Rampton’s November article.

One of the fall updates to adCenter included a staff favorite - exact match negative keywords.

“It is important to have this level of detail when closely managing large client accounts. I was happy to see adCenter take this next step toward increasing functionality and campaign management options in their system. Hopefully it continues to expand in 2012.” – Brad B.

Google Webmaster Tools

Lever Interactive’s SEO team is good at adapting to changes with the continuous updates engines make to their algorithm, so 2011 was no different than years past. With Google’s decision to begin encrypting searches of users signed in through secure connections, various SEO reporting in Google Analytics became more limited.

One feature in the new Google Analytics interface to help overcome this limitation is through synching into Google Webmaster Tools. In the v5 version of Google Analytics, when you click through Traffic Sources > Search Engine Optimization > Queries, you will see this.

Click “Set Up Webmaster Tools data sharing” and follow the steps. In a minute you’ll have your Google Webmaster data in your Google Analytics account and you can report on impressions by landing page, search queries, clicks, click through rate and even average position.

“It takes some getting used to, but it’s accurate data without guessing, and it’s a step forward toward deep keyword analysis after the push backwards. This makes it very easy to analyze and plan your search engine optimization because you can visualize organic behavior from query to conversion (or exit). This makes it a bit easier to plan content creation by page or category based on which queries are dropping visitors off on your various landing pages.” – Mike H.

 Website Design & Development

We’re wrapping up our list of favorite 2011 online marketing management advancements with our web design team! Although not a new idea, with the rapid expansion of mobile and tablet websites in 2011, the expanded capabilities and use of responsive website layouts is an exciting area of growth in the industry Lever’s design team looks forward to using in 2012. Responsive layouts, formally called fluid layouts, adjust design and images based on the size of your browser window, to provide improved and more customized experiences for the visitor.

“These elements were great in 2011 for mobile websites because the flexible layout will reposition the content as necessary and the flexible images will resize on the fly without reducing the quality. These features help mobile sites look consistent across many mobile devices.” – Jonathan S.

An example of a responsive layout is http://css-tricks.com – open the page and play around with the size of your browser to see the changes in the site.

***

What are your favorite additions to online marketing tools last year?

Stay tuned for our blog post tomorrow for our staff’s resolutions and wish lists for online marketing advancements in 2012!

I recently signed up for a website to interact with fellow bloggers.  Upon sign up I was confused as to what to do next, and gave up as I had more pressing tasks to deal with.   But no worries, I got an email from the company admitting they have usability problems:

Hey jendavislever,

One of the most frequent complaints I hear is that our site is hard to figure… which is partly true because we have too many quite unique features. Today’s step will help you make sense of the service.

Interesting approach to a usability problem, but obviously not one that helps me use the website.  Granted, admitting the problem is the first step, but they have justified it by indicating they have “too many quite unique features.”

The next part of the email introduced their remedy to fix the problem:

We are doing our best to create a clear, easy-to-understand structure, therefore we have introduced “Categories” to somehow categorize and organize new offers.

But I’m not convinced categories are the right answer, even without looking at the site again because their own wording does not convince me: “to somehow categorize…” The word somehow does not show confidence in this fix.

The email continues by telling me how to use the categories in the different areas of the site.  But it adds to more confusion as in one area I am supposed to “look for ‘Category’ drop down” but in another area I am supposed to browse by category using the “icon navigation on top of it.”  In looking at the website, and sure enough, one area it is drop down, the other it is a set of icons, but the categories are the same. There is no apparent reason for the difference.

Next, there are four different search options on the website.  In some ways this may be good if using advanced options but in this instance there are literally four separate search pages which is not good.  Give the user one search, and provide advanced options to search the site vs. user forums for instance.

And this point I have pretty much abandoned even attempting using the site, as it isn’t worth my time to try and navigate it.  And even it I was still considering it, the next paragraph of the email completely turns me off:

Reporting users and threadsWe are a friendly community and we are willing to welcome everyone. However some people want to abuse our tools and we can protect ourselves by reporting those users:

When do I report users and forum?

What follows is more text about reporting others, more text than was used to explain their usability problems. If bad user behavior is such a problem that it has to be address in an email, this is not a community I want to part of.

This email is listed as the second of a five-step course. I’m already turned off at step two and have completely given up on this service.

Making a great user experience should be the number concern of running any website.  Using email to apologize for user experience is not a way to overcome any usability issues.

Research shows that reading on screen is tiring on the eyes. In addition, reading online is 25% slower than reading print. In other words, users don’t “read” web pages, they scan.

“Eyetracking visualizations show that users often read web pages in an F-shaped pattern: two horizontal stripes followed by a vertical stripe. F for fast. That’s how users read your content. In a few seconds, their eyes move at amazing speeds across your website’s words in a pattern that’s very different from what you learned in school.” (Nielsen, par. 1-2)

Continue Reading

Your web site was created to sell products. Your call to action, navigation and easy checkout system are important, but don’t under estimate the power of well-written, compelling content. When customers go online, 4 of 5 of their senses go offline. Customer can’t touch, smell, taste or hear your product. They can only rely on the image(s) and the product description.

Continue Reading