Fresh Roasted from Digett

Stop talking about the fold.

jd — Fri, 03 Feb 2012 15:01:55 +0000

I have been as guilty as anyone in talking about the fold — the invisible (shall I push and say "imaginary"?) line where scrolling begins. I even think about the fold when I design a web site. Why am I thinking of a concept that came from the newspaper industry? Perhaps I spent too much time on my school's newspaper staff!

In the newspaper world, the fold is the point where the newspaper folds. This concept may have existed briefly on the web when scrolling meant ever-so-carefully finding and clicking a down arrow at the edge of the browser and scrolling down a little bit. Those days ended very quickly. Now, we can scroll almost with the ease of thought. Who writes a Word document and worries that someone might need to turn the page?

I'm not even going to mention the statistics about device usage and the impact of smartphones, tablets and other devices which encourage swiping and scrolling for most actions. Ok, I guess I mentioned it.

Two approaches to consider

Approach 1: Display information in a hierarchy, most important information at the top.
Approach 2: Arrange information to lead readers down the page. Imagine the top of the page is the build-up to entice the reader to the prize at the bottom of the page. (iampaddy.com did a great explanation on how 37 Signals is using this technique.)

We can stop being concerned about the fold. Instead, we can use it to guide the placement of information. But let's stop pretending that no one scrolls.

You may want to explore a little further

Battle of the Drupal 7 Modules: CKEditor vs WYSIWYG

Art — Wed, 01 Feb 2012 15:03:32 +0000

CKEditor is the WYSIWYG (What You See Is What You Get) editor of choice around the Digett office. While some may bemoan the use of a WYSIWYG editor at all, even an experienced developer can usually save a lot of time during content entry by using one. Drupal does not come with a built-in editor but there are many excellent options; CKEditor is the cream of the crop.

The CKEditor 3rd-party Software

There are always two parts to an HTML editor, the 3rd-party software and the Drupal module that integrates it with Drupal. As with any 3rd-party software, that component must be downloaded separately from its own site (not Drupal.org) and integrated with your Drupal site using a Drupal module downloaded from Drupal.org.

Some advantages of CKEditor over many of the other HTML editors available include:

Time-tested - CKEditor started out as FCKeditor in 2003.
Actively developed - There is a new incremental release at least every few months.
Popular - CKEditor/FCKeditor is by far the most used WYSIWYG editor on Drupal sites.
Extensible - There are many plugins specifically for Drupal that can be easily added. (e.g. IMCE, Media, Drupal Teaser Break, etc.)

Drupal Modules

Once you’ve reached the decision that CKEditor is your WYSIWYG of choice, you have two options for integrating it into your Drupal site.

There is a module called Wysiwyg, which was built as a universal integration for all of the various HTML editors available for Drupal.
The other module is called CKEditor - WYSIWYG HTML editor, and was designed to integrate only the CKEditor software into Drupal.

Wysiwyg Module

Since its creation, the Wysiwyg module has gained tremendous support as one of the most installed modules in all of Drupal. The feat that it accomplishes of allowing a site to use any WYSIWYG editor is impressive; it will even allow you to run multiple editors on the same site based on the input/text format chosen for a particular textarea. If you find yourself in need of this kind of feature, the WYSIWYG editor is the integration module for you.

CKEditor module

The CKEditor module (in the form of FCKeditor module) has been around since November 2006. Since it is specifically designed for the CKEditor HTML editor, the settings available are much more complete; nearly any setting that could be manipulated in the CKEditor config files is available in the user interface of this module. We find that it’s easier to setup and make adjustments with this module over the Wysiwg module. Some nice features are:

There is a drag and drop interface for the buttons that are displayed on the toolbar.
Each user can configure their own settings (if given permission).
The Styles select box can be added in each theme.
The editor is skinable.
Custom configuration settings can be added through the GUI.

Drupal 6 note from the project page: “In version 6.x users were forced to define the set of include/exclude rules based on the ID of textarea or the path to the page. In Drupal 7 things are [simplified]. All you have to do is to pick up the input formats where CKEditor should be enabled.”

Since the CKEditor module has so many settings, I highly recommend following the installation instructions in the README file that come with the module. There are some settings that need to be changed in the ‘Filtered HTML’ text format in order to make CKEditor function correctly and eliminate the need to give users permission to use the ‘Full HTML’ format.

Results

We have chosen to use the CKEditor module with all of our Drupal 7 installations. Until the WYSIWYG module catches up on the feature set the CKEditor module will keep going strong, and it will continue to be my recommendation. If you have experience with or opinions about either of these modules, let us know in the comments.

How to Generate Leads with LinkedIn

Amy — Mon, 30 Jan 2012 15:39:28 +0000

LinkedIn is a great way to connect with colleagues and former business partners, but it also has the power to bring you more business — if you do it right. Here’s three ways to use LinkedIn to generate leads for your company.

Answer questions

Take time once or twice a week to visit LinkedIn Answers and see what people are discussing. Has someone asked a question you can answer? Is there a discussion thread to which you can contribute? Get your name out there and prove yourself to be a helpful and trustworthy resource (use the “Refine Search” section to narrow down to industry-related questions).

Join groups

With over a million LinkedIn Groups available, choosing just a few to join can be difficult. Join as many in which you have time to participate, but keep in mind that there are only two kinds of groups you should join:

Industry-related groups - Join these groups to network with individuals in your industry. Ask questions, share advice, and brand yourself as an intelligent resource.
Target market groups - Join groups in which your target customers participate. If your target customer is a steel and welding business, join LinkedIn groups where those people congregate.

This is a tricky process, because these two types of groups are not the same, and require different communication styles; if you’re a marketing agency, you can talk about your services much more quickly in a marketing group than you can in a group where you’re trying to generate leads.

It’s important to join groups where your prospective customers are, but it’s just as important not to elbow your way into a niche group and start slinging your sales pitch. When you join a group, lay low for a little while — see what people are discussing, and what questions keep popping up. Build trust by offering light guidance now and then before ever mentioning your company. Keep it all about them and not about your business.

Once you’ve gained trust with individual members of the group, send them a connection invitation. If you’re routinely sharing content on your LinkedIn profile, your new connections will see that and hopefully ask to learn more about how you can help them solve their problems.

Make more connections

Use LinkedIn’s Advanced Search feature to find new people with whom to connect.

Filter by “2nd Connections” or higher to search for people with whom you have connections in common, and use your existing LinkedIn network to get an introduction: “I notice you’re connected to [person], do you feel comfortable introducing us?”

The entire purpose of LinkedIn is to make connections — don’t be afraid to ask for introductions!

Tips and tricks

Being “sales-y” is the worst way to behave on LinkedIn. Be there to solve other people’s problems, not copy-paste your sales pitches.
Include a link to your LinkedIn company page in your connection invitations and postings in your groups. This gives people a way to learn more about your company and its services without your even mentioning them.
Don’t join more groups than you can keep up with. It’s better to post routinely in one or two groups than never in half a dozen.
Keep your personal LinkedIn profile up-to-date with your job description and current photo of yourself. People want to connect with a person, not a profile page.

These ideas are just the tip of the iceberg. Leave your tried and true methods for generating leads on LinkedIn in the comments below!

Leave Arial and Times in the past — @font-your-face to the rescue

jd — Fri, 27 Jan 2012 15:02:28 +0000

If you are a graphic designer or Drupal themer, you don't need to be stuck using Arial on your website; you can easily use a great typeface from one of several providers and implement them using a Drupal module called @font-your-face.

Web font providers have packaged up thousands of fonts for use on the web and have taken care of the licensing issues related to the copyright for each font.

Since web fonts require a special license, you won't find every typeface you may use on your computer. Various providers also vary in cost — ranging from free up to around $10/month. The most common cost is around $7 per year — pretty inexpensive.

It isn't difficult to implement the code from these providers in your theme, but I like the simplicity and administrative interface that the @font-your-face module provides.

The module currently works with the most common proviers: Typekit, Google Fonts, Font Squirrel, Kernest, Fontdeck, and Fonts.com. Once installed and configured, you can restyle elements of your site under the Appearance menu. You can browse or search for the desired font, then apply it. When you apply the font, you can choose which HTML or CSS selector for the font.

Words of warning

I love being able to expand my selection of typefaces — take care, however, because I have found a number of fonts are not properly configured to work well in IE 7. You will know if it isn't working, as the type will look rough and difficult to read. This small issue won't stop me, though! I love to have beautiful typography on my site.
Each font and attribute is usually a separate file that is downloaded to the browser. If I only change the font of the H1 tag, then I'm fine. If I decide to break design rules and use five different fonts with normal, bold and italic of each, I've just added 15 good size files to my page load time. Needless to say, less is more.

Revisited: Mega Menus in Drupal 7

Art — Wed, 25 Jan 2012 15:53:41 +0000

Back in September, I wrote a blog post about making Mega Menus in Drupal. After publishing the post I found numerous issues with the proposed method and ended up using another method on the project that precipitated the article. After recently receiving a few comments on the original post I realized that it was time for a followup.

Types of Mega Menus

In my opinion there are two different types of Mega Menus—Simple and Composite—and each type should be constructed in a different way in Drupal.

You are creating a Simple Mega Menu when you have a long list of menu items that you want to place in multiple columns ordered top to bottom then left column to right column. For example, the City of Houston has some long menus that could be easily turned into multi-row mega menus.

A Composite Mega Menu is different because instead of being one long list of like menu items, it is made up of many different elements. For instance, a Composite Mega Menu may have secondary and tertiary menu items listed together along with an image or other content in the same dropdown. A great example of this type of menu is Whitehouse.gov:

Simple Mega Menu

Implementing a Simple Mega Menu can be done exclusively with CSS as long as the menu list is a fixed number of items and won’t change. If the number of items changes, you would need to update the CSS manually (An override function could be written to make this dynamic, but the CSS way is so easy. Besides, how often do menus really change once they’ve been setup?).

Assuming your dropdown menu is written as an unordered list, then the HTML for your menu would look something like this:


<ul class="”dropdown-box”"> /* wraps the secondary menu items. */
	      <li>Menu Item 1</li>
	      <li>Menu Item 2</li>
	      <li>Menu Item 3</li>
	            etc...
</ul>

To make the list into a multi-column mega menu, we first need to do some calculations. In this example we will have 24 total items we want to divide into three columns. Use this worksheet to help you calculate the needed values.

Total number of menu items: 24
Total number of columns: 3
Divide #1 by #2 for the number of items in each column: 8 (Round up to the nearest whole number.)
Desired Width per column: 155px
Desired Height per item: 18px
Multiply #2 by #4 for the total width of the dropdown box: 465px
Multiply #3 by #5 for the total height of the dropdown box: 144px

Now that we have all of the necessary values we can build the css using nth-child psuedo classes. (For more info read: How nth-child Works and Useful nth-child Recipes)

CSS Code:


ul.dropdown-box {
  width: 465px;  /* value #6 */
  height: 144px;  /* value #7 */
}
ul.dropdown-box li {
  width: 155px;  /* value #4 */
  float: none;
  clear: none;
  line-height: 18px;  /* value #5 */
  position: relative;
  margin-left: 0px;
}
ul.dropdown-box li:nth-child(n+8) {   /* value #3 */
  margin-left: 155px;  /*value #4
}
ul.dropdown-box li:nth-child(n+15) {  /* (value #3 X 2) - 1 */  /* If there were more columns repeat this declaration and increment the multiplier each time. */
  margin-left: 310px;  /*(value #4 X 2)   /* If there were more columns repeat this declaration and increment the multiplier each time. */
}
ul.dropdown-box li:nth-child(7n+8) {    /*(value #3 - 1)  /* value #3 */
  margin-top: -144px;  /* Negative value #4 */
}

Composite Mega Menu

Believe it or not, Composite Mega Menus are much easier to explain, because there is a module. The Menu Views module allows you to attach a view inside a menu item; since Views can be lists of item, node teasers, and so much more, the options are endless. It would be overkill to use this module for the Simple Mega Menus, but for anything else it’s brilliant. You could even reproduce the Whitehouse.gov menu by placing a node teaser in the header or footer of a HTML list view. LevelTen, the creators of this module, wrote an article introducing the Menu Views module that you might want look at if you are considering this approach.

Mega Conclusion

If you find any of this helpful, please let us know in the comments. Dissenting opinions are also welcome.

Want advice about video? Tell a story.

Mark — Tue, 24 Jan 2012 15:48:36 +0000

After a recent insightful conversation with Stephen Mick of Proof Creative in Austin, I felt like I had to capture his advice in a post. I'm positioning it as advice to digital agencies, but anyone should be able to extract value from it. My apologies to Stephen in advance if I've misrepresented anything he intended to say.

Stephen asks himself the following questions as he approaches a video project. (These are my comments below each of the questions, not Stephen's. I'm sure he has a lot more and better things to say about each of these than what I've mustered below.)

1. Is there a story to tell?

It's hard to make a good video if you have no story to tell. So identify your client's story first.

2. How can we use video in a way to tell that story?

Okay, you have a story. Now what are the possibilities for using video to tell the story? I'm not a video expert, but this sounds like a great opportunity to exercise your creative muscles.

3. Is the client open to telling the story?

You're inevitably going to find some clients who are not comfortable telling their own stories. Hopefully you can wield some influence over them, but ultimately I think you have to be prepared to walk away when the client can't believe in your vision. The web doesn't need more bad videos.

The bigger picture

What made this advice hit home for me is its relevance beyond video. Substitute the word "content" for "video" and you have some pretty good insight into what makes for great content strategy.

As a digital agency, it's sometimes easy to get caught up in the details of design, development, and integration. But if we're not telling a story, is it all really worth the effort?

[Image: emitea]

How to Create a LinkedIn Company Profile

Amy — Mon, 23 Jan 2012 15:09:49 +0000

A Linkedin company profile is the ideal one-stop location for prospects who want to learn about your company, products, and services; having this content up to date is the first step to making LinkedIn a source of leads for your business. Here’s how to create your LinkedIn company profile.

Add a company

Log into LinkedIn and select Companies from the top menu. Then select the Add a Company option on the right side of the page.

Enter your company’s name and your email address at the company, and select the verification checkbox. This is a way for LinkedIn to make sure that you are who you say you are, and that you’re actually employed by the company whose page you are creating.

What if there’s already a company page?

If your company already has a business page, you will not be able to make changes to it unless you are given administrative permissions; these permissions must be granted by another administrator (often the creator of the page).

Once an existing admin adds you as an administrator, you should receive an email confirming that fact, and you should then be able to edit the company page as normal.

Enter information

Once you have created your page (or been given admin privileges), make sure that the profile is complete, and that you provide the necessary information to your visitors. Make sure the following is entered into the profile:

Company logo
Company description
Company specialties
Company blog feed
Company location(s), industry, and other information

Add products and services

The Products and Services tab is a place for you to individually list and describe your company’s products and services. You may list everything your company does, or confine the list to your most popular offerings.

You can add all kinds of information about each product or service:

Category
Name
Image
Description
Key features
URL
Company contact
Promotion
Youtube video
Disclaimer

Flesh out content, but remember to keep it brief — visitors can always head over to your website to get more detailed information.

Create products and services homepage

After you add your first product or service, you have the option of creating variations of your Products and Services page — and targeting it to custom audiences. So if your company is based in the US, but you do some business in Europe, you can create two separate pages that discuss what your company does in each country; users who are based in the US will see one page, and users based in Europe will see another.

After you have created a default view, you can use the section at the top of the page to create different views and target each to a specific audience.
Give each targeted page a description. Tailor each description to the audience it is targeting.
Create up to three rotating sliders that take visitors to a specific URL when they click. This is a great place to spotlight certain features, products, or special offers.

You can also add a link to a Youtube video on each page. If you have an introductory video (like the one on the Digett homepage) or a video that describes the value of a certain product, you can embed the video here.
Now what?

Once your page is complete, you can begin to use it as part of your business and marketing strategies.

Make routine company status updates. This could be a question to people who follow the page, or a link to a relevant article or special offer.
Encourage customers to follow the page. Individuals with LinkedIn accounts can “follow” a page — they’ll receive notifications when you update the page, and any activity they engage in (such as commenting on a status update) will show in their account’s activity feed.
Encourage customers to recommend your products and services by selecting the corresponding “Recommend” button. People can also share links to individual products and services by selecting the corresponding “Share” buttons.
Promote your page through your networks. Share a link on Twitter or Facebook, include a link in your email signature, add it to your business card, and let people know that your company page is a good place to go for information about your business.

Stay tuned to the Digett blog to learn how to use LinkedIn to generate leads and sales.

How to Create & Promote a Whitepaper [Free Download]

Amy — Fri, 20 Jan 2012 15:18:51 +0000

Like most businesses, we know you want to generate leads and keep your sales funnel full. Making sales through referrals, networking or even cold calling may be working for you, but did you know that your website can generate qualified leads, too?

A sneak peek

How to Create & Promote a Whitepaper includes strategies and tips for turning your website into a lead generation machine.

Brainstorming ideas
Step-by-step instructions for creating your landing page, confirmation page and email, and lead nurturing campaign
3 ways to promote your whitepaper online

All this and more is just a few clicks away. Download How to Create & Promote a Whitepaper and start generating leads now!

Get the whitepaper!

Checklist: Am I ready to click the “publish” button?

Valarie — Thu, 19 Jan 2012 15:15:36 +0000

It stinks when you realize the new blog post or page you posted three days ago is a mess. How did you miss that mistake? Don’t kick yourself. Before you publish any new piece of content, go down this checklist to determine if your content is ready.

Quick Content Readiness Checklist

Is it primo copy? Does it have good spelling, grammar, punctuation and all those things your English teacher scrawled on the chalkboard?
Has it been formatted for your web audience? We talk frequently and passionately about helping clients write copy that works well on the web:
Have you thought about SEO? Have you included a good meta description and page title? Are your images named logically? Read our SEO tips here.
Have you removed any hidden markup from Microsoft Word? If you copy and paste from a program like Word, hidden markup can break your page. Watch our tutorial on Pasting as Plain Text to learn a simple fix.
Have you removed any test or placeholder copy or imagery?
Do you direct the reader to do something after reading this? Is there a good, clear call-to-action? What makes a good call-to-action? I'll tell you.
Have you clicked on all your links to make sure they work? No broken links, right?
If you created a form, have you also written a thank you message that people will see after they submit the form?
Finally, publish your content and visit the page as a average visitor would. If your site visitors do not typically log in to view your content, log out to see what the page will really look like to them.

Remember, if you see a mistake at any time, whether on a fresh or old piece of content, it's always fixable with a few clicks. Don't be afraid to click "publish" but do use the checklist above to help you feel confident that what your posting will look great on the first try.

[Image Credit: Alan Dean]

Change the Output of a Single Field on a Drupal 7 Node

Art — Wed, 18 Jan 2012 16:31:01 +0000

Overriding the output of an individual field on a node can be done by overriding the node template, but it sure does feel like overkill for just one field. Sometimes it would be great to just override the field itself without touching the field values in the database.

The Case for template_preprocess_field

The function template_preprocess_field can be used to manipulate just the markup of the field in the $variables array before it’s output to your theme. There are a number of reasons why you would want to use this function as apposed to overriding field.tpl.php or node.tpl.php in your theme:

It’s faster. Processing an efficient php function will always be faster than Drupal’s template override system, looking for the right file and processing it.
Less Code. When you override the output of the node.tpl.php file to adjust a single field output you are also taking on the responsibility of outputting every field in the specific manner you want. So it could take a large amount of code to build a functioning node override.
Fewer files to manage. When overriding the field.tpl.php you’ll end up with a new file for every field you override (something like field--field-name.tpl.php).

Usage

In this example I’m going to take a geofield and change its output to provide a link to a Google Map. Geofield integrates well with OpenLayers, but in this case I don’t want the overhead of OpenLayers and don’t need to actually display the maps on the node.

First, create the template_preprocess_field function in the template.php file of your theme. Replace the word template with your theme name or you will end up with a WSOD.


function template_preprocess_field(&$vars) {
  // Your code goes here.
}

The next step is to isolate the field that you would like to override. I do that with an if statement that tests for the the field name.


if($vars['element']['#field_name'] == 'field_event_geofield') {
  
}

Note: I’m using the $vars array (which is this functions name for $variables). A useful step at this point is to print this array inside the if statement. If you have the devel module turned on this can usually be done with dpm($vars);. However, in the template_preprocess_field function I had hit or miss success using dpm(). I’m not sure why it only works for certain fields, but kpr() works flawlessly. So I would recommend placing the line kpr($vars); inside this if statement so you can see the entire array.

The markup for your field will be located in the array at $vars['items']['0']['#markup']. This is what we want to override. In our example the markup for geofield will likely be something like “Latitude 29.419992, Longitude -98.484321” which is useless. We need the values for each part latitude and longitude to construct the url.

The raw values of the field are located in the $vars array at $vars['element']['#items']['0'][‘lat’] & $vars['element']['#items']['0'][‘lat’];

With this information we can rebuild the field markup. First I’m going to check that values exist for latitude and longitude, then create the link to google maps using those values. So this is how we put it all together.


function template_preprocess_field(&$vars) {
  if($vars['element']['#field_name'] == 'field_event_geofield') {
    //kpr($vars);  //Uncomment to output the $vars array.
    if(isset($vars['element']['#items']['0']['lat']) && isset($vars['element']['#items']['0']['lon'])) {
      $vars['items']['0']['#markup'] = 'View Map';
    }
  return;
  }
}

If you need to override multiple fields then repeat everything in the if($vars['element']['#field_name']) statement within the same template_preprocess_field function, and customize it. It’s also a good idea to add the line “return;” to the end of the if statement to increase the speed of the function by exiting as soon as possible.

As with many things in Drupal there are multiple ways to accomplish the same task. The template_preprocess_field function is my favorite, the fastest and I believe the simplest way to override the markup of a few select fields. If you have other ideas or suggestions or you find this helpful, please let us know in the comments.

Image: Earl53

Beginner’s Guide to Advertising on Facebook

Amy — Mon, 16 Jan 2012 15:18:29 +0000

Companies and brands use Facebook to interact with customers and boost sales — and many attract new fans with ads. Here’s a guide to what Facebook ads are, how to create them, and why they should be part of your marketing strategy.

What are Facebook ads?

Just as Google AdWords ads are shown on the Google search engine, Facebook ads are shown on Facebook. They include pictures and text, and advertise products, companies, events, contests, and anything else you can imagine. A user who clicks the ad can be taken to a Facebook business page, or to an external website.

Why advertise on Facebook?

There are over 800 million Facebook users, about half of whom log on every day. 34% of users interact with their favorite brands on the site, far more than on any other social media networks. This is a huge potential fan base.

There are many benefits of Facebook advertising, but here are my favorites:

You can target ads to very specific demographic groups; if you want your ads to appear to married females between 22 and 61 with high school educations living in the United States and working for USAA who are not already fans of your page? Easy!
Because you can more closely target to whom you are advertising, CPC (cost-per-click) and CPM (cost per thousand impressions) are generally much lower than with Google AdWords. You can advertise to more people, more often, for less.
When a person “Likes” your page or shares any of your content, that activity is pulled into their news feed, where all their friends see it. This means that although you had to pay for the original click and fan, you’re being seen for free by all of that fan’s friends.

Creating an ad

Creating a Facebook ad is a simple process. Start by going to your ad manager page (www.facebook.com/ads/manage) and select “Create an ad.”

Designing an ad

Tell Facebook where you want users to be sent when they click the ad. Common destinations include the company’s Facebook page or the company’s own website or product pages.
Give your ad a title (25 character limit) and body text (135 characters). Here’s where you describe your company, product, or offer.
Add an image. Pictures are worth a lot of words, so make it enticing.

Targeting

Use the demographic options to target your ad to show to your desired market. The “Estimated Reach” widget on the right side of the page shows you which demographics you select, as well as how many people are eligible to see your ad.

Campaigns, pricing, and scheduling

Give your ad a campaign name and daily budget (Facebook will never exceed the budget you set here).
Set your campaign’s schedule. If you want your ads to show from 9am - 2pm every day except Sunday, here’s where you set that.
Select your pricing model and set your maximum bid. You can use the “Suggested Bid” feature as a starting point.

You will need to enter your credit card information as part of this process, so that Facebook knows who to bill.

Measuring ads’ performance

Monitoring your ad’s performance is important, and can be done from the ad manager page (www.facebook.com/ads/manage). Here you can see the status of your ad, its start and end dates, budget, and current spend; clicking the title of any ad brings up more information about it, including how many clicks it’s gotten, how often it’s shown to users, cost, and much more.

How to make long pages readable

jd — Fri, 13 Jan 2012 15:55:48 +0000

I recently talked about tearing down the wall of words. In that post, we talked about ways to reduce your content; this week, I want to talk about ways to improve the readability of your web page when it needs to be long. Let's talk about things you can do to make the user experience a better one.

Be careful where the long content lives

Your homepage is no place for long content. Compare navigating through your website to wading into the ocean: each step takes you a little deeper. Each link your customer clicks is one more level of "permission" your customer has given you to provide more detail. Three pages down into your website, if I click a link asking for the product features, then go ahead and give them to me (example from box.com).

Approaches to long content

So your longer content is appropriately located on your site and your customer has clicked a link asking for details. By all means, give them details — but even here, there shouldn't be a wall of words.

Break long paragraphs into multiple paragraphs. Sometimes this little step can really help.
Break things into bullet points. Lists are scannable and make content seem easier.
Use graphics!
- Is there a subtle icon you can use for each bullet point to illuminate the topic of the bullet point?
- Is there a photo or illustration that can create visual interest?
Use headings. A good heading allows a reader to jump to the portion they need and makes the overall page better organized.
Bold key points (sparingly) in your paragraphs.
Consider using a larger font size. Just one notch larger can enhance your page. (Proof here and here.)

Learn more

Overriding Page Templates per Content Type in Drupal 7

Art — Wed, 11 Jan 2012 15:50:00 +0000

Overriding a template file is relatively common task for a front-end developer, but depending on the base theme used it’s not always clear how to go about doing it.

Here at Digett we’ve begun to use AdaptiveTheme as our starting point for two Drupal 7 sites we are currently building, where previously we were using Fusion or Zen on Drupal 6. This caused us some heartache in overriding templates and brought to light the lack of clear documentation on the subject. There are a lot of opinions on Drupal.org but not much clear instruction.

Template Files

Most Drupal themes will come with a minimum of 3 default template files: html.tpl.php, page.tpl.php and node.tpl.php. Many other template files may be included that control the display of more specific elements such as comments or individual fields. Each of these files can be overridden for a specific condition simply by creating a new file in the theme folder with the correct name. These file names are called “Template Suggestions” and there is a standard set of these suggestions built into Drupal and listed in the documentation as Drupal 7 Template Suggestions.

Page Template Per Content Type

A common override that is not included in the default list is the page.tpl.php override based on the content type being displayed. There is a node.tpl.php override based on the same condition which leads to confusion as to where the page override exists. On top of that, themes like Zen add this type of override to the Template Suggestions, which leads those using Zen to believe that this is part of the default list. Check the theme documentation to see if this override has been added to the Template Suggestions by the theme. If it hasn’t, you need to add it manually.

The process is straightforward. We can create additional Template Suggestions simply by adding them to the ‘theme_hook_suggestions array in our template.php file.

Open the template.php file in your theme for editing.
Look for a function called yourthemename_preprocess_page (replace the yourthemename with your theme’s name).
If this function already exists, you will need to add the if statement to the end of the function just before the closing bracket. Otherwise you’ll need to create a new function to look like this:


function yourthemename_preprocess_page(&$vars) {
  if (isset($vars['node']->type)) {
    $vars['theme_hook_suggestions'][] = 'page__' . $vars['node']->type;
  }
}

Now you can create a template file called page--content-type.tpl.php and all nodes with that type will use the new template file.

Filename Notes:

Use two dashes after the word ‘page’ in the filename.
If your content type is two or more words, replace the underscore ( _ ) with a short dash ( - ) in the content type machine name.

Image: Woody Thrower

Social Media Strategy 101

Amy — Mon, 09 Jan 2012 15:36:55 +0000

Marketing Grader is the newest tool in HubSpot’s marketing arsenal; just enter your website URL and get a report containing dozens of tips on improving your marketing strategy. Much of what the tool recommends is what we recommend, especially regarding social media. Here are five tips for getting started.

5. StumbleUpon is your new best friend

Marketers are always nattering on about “sharing valuable content” via social media (especially Twitter). But unless you’re a large corporation with lots of people willing and able to write, you’re not going to have enough content to constantly be sharing.

Which is where StumbleUpon comes in. Just tell StumbleUpon what you like (everything from marketing to design to shoes to food...), and every time you hit the Stumble button, you are shown related web pages, photos, videos, and more. You can further refine your topics by hitting a “Like” or “Dislike” button to give StumbleUpon an even better idea of what you want to see.

StumbleUpon is a lifesaver when it comes to sharing content. Just Stumble until you find something industry-related and interesting, and share it with your followers!

4. Join the conversation

Sharing links to content is great, but social media should be a two-way conversation. Ask and answer questions (of your followers and the people you follow), join in conversations, and provide value beyond shared links. Be the same person you are online as you are offline, and never be afraid of a little humor.

3. Share links to landing pages

Social media can be a lead generation tool, too. Link to and promote your whitepapers, newsletters, and other lead generation mechanisms. If your followers come to expect quality content from you, they’re more likely to download your offers.

2. Balance between educational and promotional

People become your fans or followers because they want to know how you can solve their problem — not about how awesome you are. Be careful not to self-promote too often.

What’s a good balance? In his “Secrets to Social Media Enchantment” webinar, social media fanatic Guy Kawasaki suggests a ratio of one self-promotional post for every five educational ones.

Promote yourself and your services, but make sure to do it in terms of helping others, instead of yourself.

1. Measure, measure, measure

How can you know if your social media strategy is successful if you don’t track interaction?

Use a link shortener like bit.ly to keep track of your most popular social media posts.
Use your Facebook page’s Insights tab to see at what times most people visit your page, which posts get the most interaction, and other good information.
Use a tool like HootSuite to monitor mentions and keep up with conversations on multiple social media platforms.

What’s your grade?

Want to see how your marketing strategy (including social media) is doing? Head over to the Marketing Grader to get your score, as well as tips on how to improve.

Put it all together

Social media is just one way to generate leads online. Download Digett’s Marketing Plan for Growth to learn how you can increase your online sales with Internet marketing in six months.

Get the whitepaper!

[Image: Michael 1952]

Great content is wasted if there is no focus!

jd — Fri, 06 Jan 2012 15:52:01 +0000

You have a message to share, a product to sell, a service to offer — but it may be all for nothing if your website doesn't have focus. When we design a website, we are always looking to focus our client's message so that the message can be heard over the "noise" of our culture.

Tiered communication

A great way to get your message across is through tiered communication, or a way to organize information. Here's an illustration to explain the idea.

Tier 1: Imagine you are driving along the highway and you are hungry. You see a sign for your favorite restaurant — just the name of the restaurant.

Tier 2: You pull off the highway, pull up to the restaurant and walk up to the door. You see a sandwich board with today's specials.

Tier 3: You are seated in the restaurant and they hand you a menu.

Tier 4: (rare) You ask for allergy information and they bring you a very detailed document.

On your website

Tier 1 (the sign) is very focused and tells you one thing at a time. On your website, tier 1 is usually the home page rotator. It can rotate, but only one message at a time and very little detail.

Tier 2 (the specials) is very brief. You only have a moment to scan it. It just lists important details to encourage you to come in and find out more. On your website, tier 2 can be the information below your rotator or the landing page of each section of your website.

Tier 3 (the menu) is well organized. The information is grouped and presented in a way to help you scan and get enough detail if you look closely. On your website, these are the pages of content on your site. The goals are good headings, brief overviews and useful information.

Tier 4 (allergy information) is detailed. This information is only provided upon request. It is still good to organize the information and present it well, but at this point, your customer has asked for fine detail. On your website, this may be a privacy policy, it may be your media kit that is ready to go; but you don't offer it unless someone specifically asks for it.

In addition to this analogy applying to your website as a whole, tiered communication can work at a more granular level as well. Any web page you have can be organized with the most important message at the top, then go further into detail as you scroll.

Why do we need to do this?

In our culture, we cannot assume people will spend time reviewing information we provide. In my head, I try to always picture my website visitor holding a crying baby in their lap. I ask myself, can they "hear" the message I am trying to convey over the baby? I know that is a little silly, but as a parent, I've been there.

If you organize your website well, you have a better chance of customers connecting with you, buying your product, or hearing your message. It is also good for SEO: Google is looking for well organized information, and this is a step in the right direction.

Download our plan to grow your website

Our Marketing Plan for Growth will help you increase lead generation.

Get the whitepaper!

Image credit: Ihtatho

Fresh Roasted from Digett

Stop talking about the fold.

Two approaches to consider

You may want to explore a little further

Battle of the Drupal 7 Modules: CKEditor vs WYSIWYG

The CKEditor 3rd-party Software

Drupal Modules

Wysiwyg Module

CKEditor module

Results

How to Generate Leads with LinkedIn

Answer questions

Join groups

Make more connections

Tips and tricks

More on LinkedIn

Leave Arial and Times in the past — @font-your-face to the rescue

Words of warning

More on enhancing your content

Revisited: Mega Menus in Drupal 7

Types of Mega Menus

Simple Mega Menu

Composite Mega Menu

Mega Conclusion

Want advice about video? Tell a story.

1. Is there a story to tell?

2. How can we use video in a way to tell that story?

3. Is the client open to telling the story?

The bigger picture

How to Create a LinkedIn Company Profile

Add a company

What if there’s already a company page?

Enter information

Add products and services

Create products and services homepage

More on LinkedIn

How to Create & Promote a Whitepaper [Free Download]

A sneak peek

Checklist: Am I ready to click the “publish” button?

Quick Content Readiness Checklist

Change the Output of a Single Field on a Drupal 7 Node

The Case for template_preprocess_field

Usage

Beginner’s Guide to Advertising on Facebook

What are Facebook ads?

Why advertise on Facebook?

Creating an ad

Designing an ad

Targeting

Campaigns, pricing, and scheduling

Measuring ads’ performance

More on online advertising

How to make long pages readable

Be careful where the long content lives

Approaches to long content

Learn more

Overriding Page Templates per Content Type in Drupal 7

Template Files

Page Template Per Content Type

Related Articles

Social Media Strategy 101

5. StumbleUpon is your new best friend

4. Join the conversation

3. Share links to landing pages

2. Balance between educational and promotional

1. Measure, measure, measure

What’s your grade?

Put it all together

Great content is wasted if there is no focus!

Tiered communication

On your website

Why do we need to do this?

Download our plan to grow your website