Many companies are finding value in utilizing Social Media.  The medium provides an enormous potential for getting out brand awareness and creating leads.  Twitter, like most social media networks are still in their infancy and many corporations are hesitant to jump the bandwagon.  It is for this very reason there’s no better time then now to start.

“Get Real with you Customers”

Place yourself in the mindset of a customer.  How hesitant are you to sign up for e-mail updates? If you’re dissatisfied with a product, do you end up waiting in a queue over the telephone waiting to speak with someone? Twitter displays brand integrity.  All interactions are online for the world to see.  How many customers are lost due to unresolved problems with customer service? As a company, you have the ability to see what others are saying about your brand and allows you to rectify any misunderstandings or provide resolutions to customer complaints. The consumer of today believes everything they purchase is worth sharing with their friends and/or relatives. Don’t let that mis-step with your latest product release sour the relationships of current and future customers.   Develop a relationship with your customer and watch the sales grow.

“Boring Brands”

So you’re not selling the latest hype… That’s alright too!  The key lies in creating a strategy.  Most brands don’t grow on their own, they require a spin.  Find a way to create a community based upon your target profiles.  Say you sell sunglasses, how could you gain followers?  Your brand could begin informing the population about how to protect themselves from the sun.  Hold discussions on the best beaches to visit and begin recommending the styles of shades you provide. Foremost, get people talking and continue to feed them.  Unless you have a well-established brand and online presence, if you stop, your numbers are almost guaranteed to come to a halt.

“Learning by Doing”

No company began knowing all the answers.  It’s a series of trial and error.  Profile your customer characteristics, find out what they like and don’t like.  Be prepared to have weeks of exponential growth and weeks where it seems to be crawling, but through it all stay with it.  Most importantly, learn from mistakes and seek to find ways to correct them.

“Where to Start”

Find out what your customers are already saying about you and your products.  Scour the web for news, search blogs, Twitter and Facebook and listen in to the conversations people are having.  Start out small. Begin with a couple networks, Twitter and a Facebook fan page are a great place to start.  Encourage employees to participate in spreading brand awareness.  Engage with your customers!  Don’t link every posting back to your site, you do not want to be a social media spammer. Rather, find creative ways to draw your customers to your site every now and then.

“Measuring Success”

If you don’t have a custom tracking number to append to a URL for your web stats program, use HootSuite for tracking clicked links.  This free application also allows you to manage multiple Twitter accounts and send out Tweets at a later time.  Pay close attention to referral URLs in your web statistics, many times these programs list how a visitor came to your site. Measure your followers on Twitter with TwitterCounter.  This visually displays how your followers are growing over time on Twitter.   Watch your numbers grow and continue to keep watching those conversations!

Final Words

A good idea is to let people know your brand is out there on these networks. Place a link on your homepage and develop an RSS feed from your Tweets to display on your website.  Keep people coming to your site with fresh content, interactive videos (webinars, screencasts etc.), photo albums on your Facebook fan page etc.  Don’t stop.  And remember, the next generation is dependent on this medium for expressing opinions, engage them now!

Many designers still hold true to designing sites with tables and formatting text with HTML.  Why? Well, there are many different reasons.  Some see tables as quicker and more efficient.  Some don’t understand Cascading Style Sheets (CSS). While others have an idea of what it is, shudder at the thought of leaving the ‘Old School of Web’.

How can CSS help you?

CSS centralizes all your formatting.  If a client decides to change a font, you spare yourself hours sorting through page after page changing from Arial to Tahoma.  How much easier it is to simply do the following:

from: body {font-family:arial;} to body {font-family:tahoma;}

This will make your change globally!

So where does one begin with CSS?

1. Take a look and play with pre-built CSS layouts. Pay particularly close attention to naming conventions! Give the sections different colors and discover what changes!

2. Don’t be scared of #DIVs (simply consider them custom styles)

3. Review the box model – margin is the spacing outside, padding is the spacing inside.

3a. For margin & padding, remember to count clockwise starting from the top. Example: Selector {margin: 10px (margin top) 10px (margin right) 10px (margin bottom) 10px (margin left);}

4. Learn predefined selectors. You can apply styles to any of these, they may be quite familiar!

• <body>
• <p>
• <h1>
• <ul>
• <li>
• <ol>

5. Syntax -
selector {property:value;} Example: p {font-family: Arial; color:red; line-height: 1.4em;}

6. Have Fun! Most of learning is by trial and error.  If something doesn’t work, play with it and troubleshoot.

Here are some resources worth checking out:

Tutorials

http://www.w3schools.com/CSS/default.asp

http://www.tizag.com/cssT/

http://www.lesliefranke.com/files/reference/csscheatsheet.html – A Great Cheat Sheet

Need more help?  Ask me on Twitter: @rich83

It is a pleasure to announce, all pages in this site are now printer friendly.  Go ahead, print something.  I dare you.

You may be asking, how did you create a printer friendly page with your WordPress theme?  Quite easily actually.  And with minor tweaks, this tutorial may also be used for creating print-friendly pages for standard HTML pages as well.

Print-Friendly Pages with WordPress

Your first task will be to identify what appears when you attempt to print.  For best results, go File > Print Preview with Internet Explorer and Firefox.  You will relatively quickly find, lots of junk is placed on that printed page.  Your task will be to simply eliminate the things which doesn’t belong.  Let’s get to the basics here.  Only content shall be printed.  If we wanted to print the webpage ‘as-is’ we’d be using the traditional Screen Print instead, right?  For the typical user, the most important content is desired and is expected when printed.

Note: Before following this tutorial, please ensure you do not already have a CSS file for Printing.  You can determine this by looking through your Theme Files.  If there is a file labeled Print.CSS or the like, please skip steps 1 & 2.

First, we will need to log in to WordPress.  Log-in with your username and password and head over to Appearance. Select Editor from the Appearance button and this will take you to your HTML editor.  On the right-hand side of your screen, you are presented with your Theme Files.

1. Open your Header.php file

This file contains the Header information for your template.  We will only need the following line:

<link rel=”stylesheet” href=”<?php bloginfo(‘stylesheet_url’); ?>” type=”text/css” />

Let’s change that to reflect the following:

<link rel=”stylesheet” href=”<?php bloginfo(‘stylesheet_url’); ?>” type=”text/css” media=”screen, print” />

You see what we did there?  We simply told the referencing CSS link, in what ways the browser shall interpret the data depending on the media.  By adding media=”screen, print” tells the browser the style sheet will be used for screens and printing.

We have finished here, so simply press “Update File” at the bottom of the page.

2. Open Style.CSS

Now we have opened our main CSS file from the directory.  This contains the style guidelines and tells the browser how to interpret the page. Our first task will be to divide this file between the styles for Screen and Print.

At the top of this page add the following:

@media screen {

And like any good programmer, add a closing curly bracket } to the very bottom of the page.  The last few lines should look similar to this, blockquote representing your last style entry:

blockquote {
background-color: #999999;
font-family: “Courier New”, Courier, monospace;
padding-left: 6px;
color:#000000;
font-weight: bold;
}
}

Now we need to begin our Print guide.  Simply add the following after your final curly bracket.

/* Print Styles */
@media print {

}

You’ll notice we have added the comment “Print Styles”.  This simply assists in us finding the beginning of this style if later necessary.  We are now ready for configuring our print stylesheet.

3. Edit your stylesheet

We are now able to create our style rules for printed pages.  First, let us create a style for the main body.  Add the following between the curly brackets:

body {
color:black;
font: Georgia, serif;
}

Your page should now resemble the following:

/* Print Styles */
@media print {
body {
color:black;
font: Georgia, serif;
}

}

We have changed the body text to black and applied a Georgia or serifed font.  A serif font is chosen for readability on the printed page, in a similar way the sans-serif font applied to screen formats.

If you conduct a print preview at this point, you won’t notice much of a change.  There is still unnecessary items on the page as well as links appear in an underlined blue color.  Let’s get rid of the link formatting with this:

a:link {
color: black;
text-decoration: none;
}

a:visited {
color: black;
text-decoration: none;
}

This now turns both unvisited and visited links to black without any underlining.  While we’re at it, let’s take out the blue border color of any linked images:

img {
border: none;
}

With all that out of the way, we can now get rid of any extra junk.  The Firebug addon for Firefox helps us out immensely with this.  If you don’t have this powerful plug-in, you can find it at addons.mozilla.org. Go to your page with Firefox and click the Firebug icon.  This opens the plug in.  From here, click ‘inspect’ and as you hover around your page, you will find the classes and/or IDs appear in the application.  This makes things easier to identify.

I have hovered over the navigation menu and header of my page and Firebug reported the following:

<div class=”nav“>

</div>

<div class=”Header“>

Since these are classes, we will add the following to our stylesheet:

.nav, .Header {

}

I also want to get rid of the sidebar, so let’s throw that in too:

.nav, .Header, .sidebar1 {

}

Did you take note of capitalization?  Make sure you enter in your classes exactly as they are listed on the page.

We can now get rid of this stuff by entering display: none; between the curly brackets:

.nav, .Header, .sidebar1 {

display: none;

}

Yours may look longer than the example, that’s fine.  Here is a sample of my finished product:

/* Print Styles */
@media print {
body {
color:black;
font: Georgia, serif;
}

a:link {
color: black;
text-decoration: none;
}

a:visited {
color: black;
text-decoration: none;
}

img {
border: none;
}

.menu, .Header, .sidebar1, .addthis_container, .postmetadata, #respond, #commentform {
display: none;
}
}

Update your file and return to your page.  Hit ‘Shift’ as you refresh the page and select ‘File>Print Preview’. You should now begin seeing your page take form.

For further customization including creating page breaks, visit the W3C Schools CSS page.

Print Stylesheets for HTML based pages

By HTML pages, I mean pages not using any type of back-end engine such as WordPress or Joomla.

For these HTML pages, pull up your index.html page and locate where you are referencing the Stylesheet.  You’ll find this in the <head> section and it should resemble the following:

<link rel=”stylesheet” type=”text/css” href=”css/style.css” media=”screen” />

All we need to do, is add the following directly beneath the link mentioned above:

<link rel=”stylesheet” type=”text/css” href=”css/print.css” media=”print” />

Since we have determined the page to be called ‘print.css’, create a new HTML page and name it ‘print.css’.  Make sure this file is in the appropriate directory (referenced from the link you created above), in this case: root/css/print.css.

Now, simply add your print styles as mentioned in step 3.  It will turn out fairly similar with the exception, you do not need to add:

@media print {

}

Your final print.css should resemble the following:

@charset “utf-8″;
/* CSS Document */

body {
font: Georgia, serif;
color: black;
}

a:link {
color: black;
text-decoration: none;
}

a:visited {
color: black;
text-decoration: none;
}

img {
border: none;
}

#header, #top-nav, #Image1, #Image3, #Image4 {
display: none;
}

You have just made your pages much more user-friendly.

Good Luck!

 Admittedly, it wasn’t until recently I discovered the power behind Twitter.  My account with Twitter was first opened in 2007 yet remained void of Tweets (status updates) until late 2008. During that span of time, I simply didn’t know what I would do, or what I was supposed to do with it.  I figured, if I wanted people to know what I was up to, then it would be limited to friends through status updates on Facebook.

After a brief unemployment stint, I realized it was time to become more informed in Web 2.0 applications.  The buzz of Twitter was growing, I dug up my password and logged in for the first time in a year. The following are my discoveries.

1. Twitter links you with people sharing common interests.

Many of my friends from Facebook and MySpace are not using Twitter as of this writing. People I follow on Twitter are generally a mixture of people living in a shared geographical region, folks who share similar career paths, or some for plain entertainment (www.twitter.com/darthvader). No matter who I’m following, it is likely someone who has an update I might find interesting. Usually by following links of interest, pictures from an event or concert, or news updates.

2. An infinite source of knowledge

Looking for something?  Your followers on Twitter are a priceless resource.  Post a question and someone will return to you with a link or an answer relatively quickly.  Whether you are wondering which book you should read next, what movie people recommend.. etc.  Priceless.

3. MicroBlogging at its best

Maintaining a blog can be a demanding task.  Many times, they become neglected since they can be rather time consuming.  Creating, developing and reviewing content can grow to become tedious.  Twitter limits you to 140 characters.  You have to be brief.  No time is wasted in creating and reviewing posts to your blog.  If you have a blog, Twitter can direct a much larger audience to your posts.

Tips for those new to Twitter

Manage Tweets with Tweetdeck

Undoubtedly, through time you will end up with hundreds if not thousands of followers.  How do you manage to stay on top of all those Tweeple?  Tweetdeck is a nifty application.  Updates come streaming in the background and you can organize groups to easily keep up-to-date with your favorite Tweets.

Upload pictures with TwitPic

Twitpicis an online service where you can upload photos and link to them on Twitter. Should you decide to Tweet via mobile phone, this becomes a very handy tool.  When looking at mobile Twitter clients, look for this add-on.  If not, you can still email pictures to TwitPic to be posted to Twitter.

Finding People

A good way to find people on Twitter is by searching by keyword on search.twitter.com. Alternatively, search around those blogs or websites you browse to often.  Some Twitter users will link to their Twitter profile for you to easily follow.  It is especially courteous to follow people who are following you, provided they aren’t spam accounts.

What does RT mean?

RT stands for “ReTweet”.  This is basically a reposting of what someone has posted on twitter.  Retweets are followed by the @username of the originating source.  Example: RT @darthvader: The bad news is we had to let go of about 8,000 clone troopers today. The good news is it really only counts as 1.

More Shortcuts

You can keep your conversations private through Direct Messages. Simply begin your tweet with:

D username enter your personal message

Reply to someone using the following:

@username type your reply

Tweetdeck becomes a big help with replies and direct messages.  You don’t want to miss your replies!

The possibilities with Twitter are limitless.  Enjoy!

This article is a repost of a previously published article from Articles of Animationator, Dec. 14, 2008.

Want to personalize Facebook?  This article will guide you through many of the setting features offered in Facebook!

After you have logged-in to Facebook, a blue navigation bar borders the top of the screen.  From this navigation bar you can visit the following:

Facebook – This takes you to the screen which appears immediately after you log-in.  The page displays your friends’ status updates.

Home - Similar to the Facebook link mentioned above, this link takes you to the same Facebook home page.

Profile – This link takes you to your Profile View page.  This is how you appear to your friends when they visit your profile.

Friends - Upon clicking this link, you will be taken to a directory of all your friends.

 Inbox – This is the Facebooks version of personal email.  You can compose messages to selected friends.  From here, you may also read personal messages sent to you by your friends.

Changing Facebook Settings

 To edit and personalize your Facebook settings follow the blue menu bar at the top of the screen to the right side of the page.  Here you will find your name followed by Settings and Logout.  Select Settings to edit your Facebook settings.

 Quit Receiving Pesky “Update” Emails

No doubt about it, you have most likely received emails whenever “Someone has sent you a drink!”, “Your Friend Comparisons” and the like.  You can elect not to receive these emails.

1) Select Settings, Account Settings

2) You will be presented with a page with five tabs. Select the third tab, Notifications

3) From here, you can turn on and off the email notifcations you desire to receive.

Your Privacy Settings

Need to edit your privacy? Don’t want somebody finding you online? 

Select Settings, Privacy Settings

From here, you can edit your privacy for:

Profile – Control who can see your profile and personal information.  This includes: who can view your profile, basic info, personal info, status updates, photos you’re tagged in, videos you are tagged in, friends, who can view your wall posts, education info and work info.

Search - Do you want to be found in Google? Should someone be able to find you through Facebook Search?

News Feed and Wall - Should all or selected activities on Facebook be visible to your friends?

Block People - Type a name and block that person from finding you, viewing your profile or interacting with you on Facebook.

Your Application Settings

Ever added an application to Facebook and want to edit and/or remove it?

Select Settings, Application Settings

Edit or remove Facebook applications from this page.

This is a repost of a previously published article from Articles of Animationator, Nov. 21, 2008

Just released yesterday, 31 new themes for your Gmail interface! Currently, 16 of the 31 reflect only color changes of the default style. Others, such as Tree, Bus Stop and Beach change with the current weather and/or time of your location. Visually appealing, it brings a new satisfaction to emailing. A must-see is the Terminal theme. For some, it may take you back…

 To change your theme, simply log in to Gmail and go to Settings -> Themes. Once you make a selection, your change is automatically applied.