SEO Werkt!

The train to get on the corporate social networking bandwagon is getting full, even though if left the station some time ago.  Eager services jump on the moving train with what they hope will be the final answer in what every company needs.  Well WhoDoYouKnowAt sent me an invite and wanted me to check it out.  Always a dangerous proposition.  After confirming my registration via email (what email address you use is important), I logged in for the first time to the following welcome screen.

You can see they try to lay it out in simple steps, with a very broad range of professionals you might encounter in the images.

Step 1
Well this totally sucked.  I would expect not just an import feature of csv files, but also some way to authenticate and grab my numerous social networks, a la Gist.  Also, they move you to SSL which is great, however some of the images they serve are non-SSL so you get warnings.  Just something for their designers to think about.  Without the live hook and only using cvs files, this site then would never get changes to your contacts or dynamically update themselves.  A downfall.

Ok, this sucked.  Once I clicked to import contacts, there was no way out.  I decided not to import anything and expect a cancel ot skip this step icon.  Nothing.  So I jumped back to Home on the navigator and was shown a dashboard.

So here is the deal.  I basically gave up right here.  I navigated through the tabs to peek at reporting (coming soon), Productivity Center (not sure what was helpful there), CDIM and My Contacts.  I might do a screencast on this later, but Gist still has my attention.

I almost forgot.  They ask you to use your business email to register so you can utilize the features around who else is at your company on the service.  I would imagine you should be able to register under an email that will never change (like gmail) and then add your business email as a hook.  But that does not seem to be the case.  The whole point is around you being able to maintain contact information, even when people change jobs.  Including yourself.  Under settings you can add more emails,and then change the primary one so notices and communications go to an alternate.

A low rating from me on this one for now.

It caught the attention of many folks around the web. Mine as well. And from a PR agency perspective – let alone a corporate perspective – it is more critical than most of us likely imagine.

For the past three months, I’ve been consumed by my new role – that being to help guide H&K’s digital corporate and public affairs offering across both the US and Canada - commuting 3 days a week to Washington, DC – and learning a lot through exposure to new colleagues and new clients. At the same time, I’ve noticed that some of the same challenges exist that I faced in my Canadian-only role, challenges encapsulated by Adam Tinworth of One Man and His Blog in his October 7 post: “On the web, social media is just media“. In it, he expounds on a recent Tweet where he stated:

Officially bored of the phrase “social media” now. I’m just going to call it “media” and everything else can be “anti-social media”.

An off-the-cuff comment in under 140 characters perhaps. But when viewed through the lens of our industry, the importance of it cannot be understated. The past few years have been tumultuous as consultants and corporations, governments and media attempted to navigate this minefield of new behaviours, expectations and technologies. “Hype” and the myriad missteps along the way could – for the most part – be forgiven.

However, if communications agencies are to survive and thrive in the years ahead, the thinking that social media is something different from what we have traditionally done must be leeched – from corner offices to cubes. We must start thinking of it in the context of “media”… mainstream, social or otherwise. It must be holistic, it must be integrated, and it must be informed. If we don’t, it will remain sidelined, a novelty, the last slide within a deck, the last page within a proposal or RFP, bereft of substance, misinformed by hype, and the realm of junior consultants. As a consequence, our own relevance will likely, and all too soon, be seen as equally “optional” and throw-away.

The “hype” and novelty is over. It is a call-to-action that must now be heeded.

Demographics don’t work in social media communication – which is a blessing as they’re completely inefficient in a complex world of niches linked by common-interest.

I’ve long pushed clients away from thinking of their audience as simply eyeballs and demographics. Even more complex segmenting of their audience can still miss the mark. In social media the trick is to find the point of connection between a brand and its target audiences passions and interests, and then build a mutually beneficial relationship over a period of time.

With this in mind, it was pleasing to see AdAge point to some more detailed research backing up my long held assertion:

The 2010 Census is expected to find that 309 million people live in the United States. But one person will be missing: the average American.

“The concept of an ‘average American’ is gone, probably forever,” demographics expert Peter Francese writes in 2010 America, a new Ad Age white paper. “The average American has been replaced by a complex, multidimensional society that defies simplistic labeling.”

The message to marketers is clear: No single demographic, or even handful of demographics, neatly defines the nation. There is no such thing as “the American consumer.”

The census is the biggest market-research project of the decade. The Census Bureau will spend upward of $15 billion to count the population as of April 1, 2010, and amass a treasure-trove of data on U.S. consumers.

“The decennial census will tell us quite precisely how American consumers have changed in the past decade,” Mr. Francese writes. “It also will give us clues about where the consumer marketplace is moving. The census is the gold standard against which the results of all major consumer-research studies are benchmarked.”

The Census Bureau will begin releasing data in spring 2011. Mr. Francese, demographic trends analyst at WPP’s Ogilvy & Mather, New York, and founder of American Demographics magazine, now offers projections and insight on what the census will show.

His 32-page report, available at AdAge.com/2010America, will give marketers a window on what the census will show and how to adapt those findings in a marketing world reliant on broadscale demographics that no longer exist.

Selected findings of 2010 America:

• U.S. households are growing ever more complex and varied.
“This census will show that no household type neatly describes even one-third of households,” Mr. Francese writes. “The iconic American family — married couple with children — will account for a mere 22% of households.”

The most prevalent type of U.S. household? Married couple with no kids, followed closely by single-person households, according to Mr. Francese’s projections.

The Census will give Americans 14 choices to define household relationships. Mr. Francese says this will “enable the Census Bureau to count not only traditional families but also the number and growth since 2000 of blended families, single-parent families and multigenerational families, as well as multiple families doubling up in one household.”

That presents boundless opportunities for marketers and media in how they target and segment households.

• Minorities are the new majority. “One fact says it all,” Mr. Francese writes. “In the two largest states (California and Texas), as well as New Mexico and Hawaii, the nation’s traditional majority group — white non-Hispanics — is in the minority.” And in the nation’s 10 largest cities, he says, “no racial or ethnic category describes a majority of the population.”

Mr. Francese notes how diversity varies greatly by age, “with the younger population substantially more diverse than the old.”

To quote Don Schultz from his excellent keynote on media consumption at the recent iMedia Summit: “18-35 year old women? I’ve been with 18 year old women and I’ve been with 35 year old women… and let me tell you they’ve got nothing in common!”

CSS is a sticky subject in the best of times and to make it more sticky I thought I’d run down the techniques needed to make a sticky footer that works in all modern browsers. This is unlike most examples on the web that break in either Opera, IE8, IE7 or indeed in all three.

Try any of those footers from the Google search above in IE8 or Opera (some don’t work in IE7 either). Load the page then grab the bottom of the window (not the side or corner of the window) and drag it up or down and you will see that the footer usually sticks in the wrong place, messing up the display.

Now try it on my old original sticky footer version (circa 2003 which pre-dates all those above) and you will see that my version is working in all browsers including IE8.

Before we get into details I should first explain what a sticky footer is.

What is a Sticky Footer

A sticky footer is one that sits at the bottom of the viewport when there is not enough content in the page to push the footer down. If there is a lot of content then the footer sits at the bottom of the document and will be below the fold as usual. Why this is desirable is because on short content pages you won’t have a footer right at the top of the screen looking very strange indeed as shown from Figure 1 below.

Figure 1 – normal footer close to content.

Figure 2 – Sticky footer at bottom of viewport.

Note that a “fixed positioned” footer is not the same thing as a sticky footer as a fixed positioned footer is one that sits at the bottom of the viewport at all times and never moves. Don’t get confused between the two.

Overview

Before we get into the nitty gritty detail I will briefly explain the concept in getting a sticky footer to work.

The first thing we need to do is create a 100% high container which is achieved by setting the html and body elements to 100% height and then creating a container that is a minimum of 100% high. The footer is then placed after this container which means it will be invisible as it will be below the fold of the page but by the magic of negative margins we can bring it back into view at the bottom of the viewport.

Of course this means that the sticky footer must be a fixed height (pixels or ems will do) so that we know how to accommodate it with the exact negative margins that bring it into view. This also means that our footer is now overlapping content on the page so we will also need to protect this content with either padding on an inner element, or some other similar approach as you will see when we get into specifics later.

That’s basically all there is to it except that we have to squash a few bugs on the way to make it work everywhere.

When to use a Sticky Footer

Sticky footers are best suited for fixed width sites with small copyright messages and horizontal menu links that keep the footer at a relatively small size. The technique will work with a large height footer but the chances are that if you have a very large footer it will always reach the bottom anyway by the time you’ve got your header and content in place. It will also work with percentage width footers but remember that if the content in the footer is squeezed into making the footer higher than it was then the negative margin routine won’t match any more and the layout will be misaligned slightly.

Creating The Footer

Now it’s time to get your hands dirty with the code and I will break the method down in easy steps.

1) Create a 100% high wrapper to fill the viewport.

This is accomplished by removing the default margin and padding from the html and body elements and then setting a height of 100% so that our wrapper element can base its height on this. We then use min-height:100% on our page wrapper and not height:100% because our container would never grow otherwise but we will still need to address IE6 as it doesn’t understand min-height at all. (If we didn’t apply a height to html and body then our container would collapse to auto height and would not stretch to the bottom. The margins from html and body must also be removed because they would increase the height and thus ruin the effect as we want an exact 100% height only.)

As mentioned previously IE6 doesn’t understand min-height therefore we provide a rule for IE6 only (using the star selector hack to target IE6 and under only) using the height property instead. We can do this because IE6 treats height as a minimum and will always expand an element to accommodate its content when overflow is set to visible (which is the default). We must also hide this height rule from other browsers because this would limit them to only an initial 100% and therefore the element would never expand with content.

Don’t be tempted to use the !important hack to provide the height property to IE6 because the routine causes IE7 to be buggy with 100% height and won’t resize the footer when the viewport is resized vertically.
i.e. Do not do this:

PLAIN TEXT

CSS:

1. #outer{
2.     min-height:100%;
3.     height:auto!important;
4.     height:100%;
5. }

Do not do this either:

PLAIN TEXT

CSS:

1. #outer{
2.     min-height:100%;
3.     height:100%;
4. }
5. html>body #outer{height:auto}

Both the above will fail in IE7 due to an obscure bug and should not be used in this routine.

The result of this code is that we now have a container that stretches to 100% height of the viewport quite nicely but the footer is sitting under this element and therefore under the fold of the page.

To bring the footer into view we first have to give it an appropriated height and then using a negative margin we drag it back into view. The negative margin can be applied in either of the following three methods.

1) A negative top margin on the footer itself
2) A negative bottom margin on the main wrapper
3) A negative top margin on the main wrapper

The first two methods are basically the same and just cause the footer to slip up over the bottom of the wrapper by the appropriate amount. Remember that the negative margins must match exactly the height of the footer. As a consequence of pulling the footer upwards it may indeed overwrite any content that was above it so you would also need to add some padding to the content above. The padding couldn’t be added to the main wrapper because that means it would be too high and therefore the padding must be added to an inner element instead or just added to the element above the footer.

The third method mentioned above uses a slightly different tack in that the whole wrapper is moved upwards with a negative margin thus allowing the footer to fall into view at the bottom of the viewport but with the consequence that our wrapper now starts above the top of the viewport and out of sight. We therefore need to soak up this space on an inner element much the same as we did with the other two methods.

In 99% of cases you will most likely have a header element at the top of your page and you can use this element to soak up the extra space. My preferred method is to use a solid border on top of the header to do this because unlike padding it would not interfere with any absolutely positioned children should there be any.

Assuming our footer is 40px high the code to accomplish this is shown below:

The top border soaks up the space that is above the viewport and allows content to start in the viewport where it should be. This is exactly what we wanted and is quite a slick way to do this as we no longer need to worry about any overlap of the footer.

To make it easier to follow here is the code so far:

With the code shown we are very close to have a working footer and indeed the code above will work in IE6/7 and Firefox with no problems. Try out the above and see for yourself.

The problem with the above code is that it doesn’t work properly in IE8 or in Opera. If, as already mentioned, you move the window by grabbing the bottom of the viewport (not the side or the corner) then the footer becomes mis-positioned or doesn’t move at all.

This is the behavior seen in all other sticky footers but it doesn’t occur in my original demo. The clue to why my old demo is still working will provide us with a neat solution that can be wrapped into this specific footer routine.

Back in 2003 not many browsers understood min-height and to accommodate these browsers I used a min-height hack which was basically a 100% high float that was 1px (or even 0px) wide. This held the browser open to the initial 100% height quite nicely without affecting much else as long as we took clear of clearing issues. The 100% height float triggered opera into resizing the page correctly once the viewport was moved and caused the footer to be drawn into the correct position.

Today (and thanks to the quiz I set at sitepoint) we can apply that 100% float using the pseudo element “:before” and negate the need for any extra html mark up at all.

The code above places a 100% high float that has no width as the first element on the page. This enables Opera to resize nicely and keep the footer where it should be. To negate any possible clearing issues on normal page content we use a negative top margin to pull the float high above the viewport (32767px is Opera’s limit so don’t use any more than this). Even with the negative margin applied Opera still continues to resize the page nicely.

IE8

The last browser to address is IE8 as it won’t play ball with this method although it does understand the pseudo element :before, it doesn’t apply the 100% height to it as required. Therefore we need another fix and again the answer is quite simple and logical and we supply IE8 with height:100% but declare the element as display:table. This will enable the element to be 100% high initially but also to expand if content dictates which is exactly the way that tables work.

As IE8 is the only one that needs this rule we will use conditional comments to supply this rule to it. In order to tidy up we can also remove the IE6 hack we added earlier and put it in the conditional comments as shown below.

If you are not familiar with the first line of the conditional comments shown above then in English it basically says “If less than or equal to IE6 or If greater than or equal to IE8 then use the code below“.

As IE6 doesn’t understand display:table then it is simply ignored by IE6 and it gets the height:100% rule only. IE8 on the other hand understands both and gets both just as it needed. This saves using two sets of conditional comments and keeps the page nice and tidy.

Here is the full code with comments to make it easier to understand or you can view source from the Full live version.
Full Code

Just in case you are thinking that there is too much code overhead in this if we look at the html needed you will see that there aren’t really any extra elements (apart from assuming that you have a header in the page.) The minimum html is as follows.

I don’t think you can get neater than that!

Although I have shown the example in a fixed-width format you can use it in a percentage or fluid width page as long as you take care with the footer dimensions and don’t let the footer height increase with content. To enable text-resizing you could size the footer and negative margins using ems but that would assume you were basing them on the same font-size, etc.

Things to watch out for

Remember to take into account the effect of collapsing margins on the first and last elements in the wrapper because these may have an impact on the position of the parent or the position of the footer.

I also often see problems where authors have tried to make space at the top and bottom of the page by simply moving the wrapper down the page. The result of this is it moves the whole 100% down the page and ruins the effect. Everything has to happen in the 100% high wrapper and if you want space at the top then you would need to reduce the space at the bottom or be creative in other ways.

Here are just a few various examples.
Main Version
Example 1
Example 2
Example 3
Example 4

I hope you have enjoyed this article and if you have any questions then post away and I’ll try my best to answer them.