So here’s Johnnnnny!

What did I learn about CSS3?

Well the first thing I learned that was important to me was the overall current status of CSS3 as it is being used by current web browser vendors.

I used the tutorials on Lynda.com, so I liked that each chapter told you if the properties been studied were useable in the “real world” right now (so you could put it to work immediately) or they were still in their experimental stage (nice to know for later).

I liked learning how to use the box-shadow and border-radius properties, because while they aren’t seen in IE (and not much is) they add a nice, modern touch to a website’s appearance.

The box-shadow feature is cool way to set an element (like an image or a callout box) apart from the rest of the stuff floating around a page or give an entire page or a page sidebar a nice individual touch.

To create a box shadow the CSS is fairly straight-forward:

#element {
-moz-box-shadow: 10px 10px 5px #333; /* code for firefox browsers */
-webkit-box-shadow: 10px 10px 5px #333; /* code for chrome type browsers */
box-shadow: 10px 10px 5px #333;  /* standard code for all browsers – if they all used it — which they don’t */
}

The syntax is easy – box-shadow: h-shadow v-shadow blur spread color inset;

So…

box-shadow: 10px (position of the horizontal shadow) 10px (position of the vertical shadow) 5px (the The blur distance) #333 (the color of the shadow);

I didn’t use the inset or spread features since for most projects the h-shadow and v-shadows are fancy enough.

Now the border-radius property, which lets you create rounded corners on any type of border, is probably for me the best new feature in CSS3. With just a little imagination and practice, you can do lots and lots of interesting visual effects.

The border-radius is also fairly easy to figure out -

div
{
border: 2px solid;
-moz-border-radius:15px; /* code for firefox browsers */
-webkit-border-radius:15px; /* code for chrome browsers */
border-radius:15px; /* standard code for all browsers */
}

The greater the pixel size the more curved the radius or more rounded the corners become. You can even use this property to make a border oval or completely round.

Learned some more good things about the @font-face property and how to use it better plus more neat places to find more free fonts!

Also I liked learning about text-shadows, which adds a nice visual effect without spending time screwing around with Photoshop or Gimp to get a similar effect.

#sidebar h1 {
text-shadow:5px 5px 10px red;
}

Like the box-shadow, the syntax is easy – text-shadow: h-shadow v-shadow blur;

But unlike box-shadow it has been accepted by most browsers and you only have to use the standard code above to make it work.

And I really liked learning about the media query for mobile devices. I liked knowing that there was at last an almost automatic way to switch from a standard page to a more mobile friendly one. This was something I could use right away for some client sites.

Now the new CSS3 background property can have multiple images and use opacity which can be cool for those “peekaboo” looks that I would struggle to create with Photoshop or Gimp.

Now CSS3 allows you to design pages with more photoshop-like effects in mind, which is great.

But these new CSS3 properties can also a bit more of a pain, because now you have to pick and choose which CSS3 effect to try out vs. which ones you would be better off using an image editor or resorting to something like Modernizr to create a workaround which can be seen by most if not all web visitors.

But you should get used to using them NOW as they help provide a better user experience, which helps make people keep coming back to a website time and again.

Done poorly or without a good understanding of the coding process behind them – well let’s say some of my gray hair is due to the slip-slidey nature of floats.

So if you have ever wondered what are floats and how to use them, then you should read this post.

What are floats?

“A float is a box that is shifted to the left or right on the current line. The most interesting characteristic of a float (or “floated” or “floating” box) is that content may flow along its side (or be prohibited from doing so by the ‘clear’ property).”  W3.org

This means that once an element is set to float, the other elements on the page, like text for example will auto-magically flow around it. The float property has 3 active states: left, right and none.

A floated box will sit or float on either the extreme left or extreme right inside its parent div or container.

How are floats used in design?

Floats usually used one of two ways in website design: for allowing text to flow around images and callout boxes or to create page columns.

Text Flowing Around an Image

This is most common method of using the float properly. By allowing the surrounding text to flow around images or callout boxes (containing other text), you can easily mimic the visual layout of a printed magazine or book.

As you can see the text flows around the images and their borders. This same technique could be used for either a callout or text “sidebar” box.

Here is the css code for these image floats..

img.img_left {

float: left;
border: 2px solid;
border-top-color: #333333;
border-left-color: #333333;
border-bottom-color: #999999;
border-right-color: #999999;
padding: 5px 5px;
margin: 5px 5px;
}

img.img_right {
float: right;
border: 2px solid;
border-top-color: #333333;
border-left-color: #333333;
border-bottom-color: #999999;
border-right-color: #999999;
padding: 5px 5px;
margin: 5px 5px;
}

Floated Columns

The next most widely used function of floats is to create “columns”. It is this bit that is most frustrating and confusing for people — even ones who have some web programming experience.

A floated column unlike a standard “fixed’ width design, is more “liquid” (shrinks to fit). This means a page with floated columns can be more easily viewed by a variety of different devices with different screen sizes than ordinary desktop monitors.

And with the flood of web capable mobile devices onto the marketplace – from smartphones, to iPads, netbooks and tablets, designing websites that are somewhat more viewable by a larger range of device is becoming critical.

As you can see the three different columns float up against each other and their sides. This technique can be used for both a main content block and a single sidebar or for several columns as shown.

Now the trick to floating columns is you have to specially code BOTH the HTML and CSS. Yes, I know that ‘they’ told you would never have to touch HTML again to set appearances but ‘they’ lied.

The deal is you have to structure the HTML so that the “sidebars” (or what you want to call your left or right floats pieces) come first. For example in your HTML you MUST set up your page using something like this:

<div id=”sidebar”>Left Sidebar = Column 1</div>
<div id=”othersidebar”>Right Sidebar = Column 2 </div>
<div id=”maincontent”>Main Content box = Column 3 </div>

The sidebars have to be rendered FIRST in HTML.

Now in the CSS the trick I have found that works for me is to set the width of your sidebars and float them either left or right. – then using the “margin-left” and “margin-right” function to “push” your main content box away from the sides of the wrapper div (exactly the space need for your 2 sidebars).

Check it out this shorthand code

#content {
margin:0 160px 0 160px;
}

The margin-right is 160px with the margin-left the same since both sidebars are same width. You would change margins to match the sidebar widths.

Floats: Pros and Cons

Now here is the truth. Floats can be freaking hard to work with if you haven’t had a lot of experience working with them. And if you are under some type of deadline or time crunch they are almost impossible.

BUT you can do things with floats that are very difficult or even more time consuming to do with other programming. And a like I mentioned a floated website is more liquid and therefore more viewable in some mobile devices.

But they are very hard to create on the fly – which is why folks that I know have a handy “swipe file” of ready to rock ‘barebones” HTML and CSS templates (with floats).

They already have them setup to suit their needs and can just customize and expand to fit the needs of their clients. You can start your own “swipe file” by visiting http://blog.html.it/layoutgala/ and downloading their barebones CSS layout.

photo credit: lovelornpoets

A while back I did some work for a client who wanted to install a WordPress blog as his business website.

He had already brought a premium theme, registered his domain name and setup a web hosting account all on his own.

So all I thought I had to do was upload the software and hammer out some details to customize the theme.

I was struggling with the theme – it had more moving parts that a room full of rug rats on Coke®. Between the theme’s custom-coded widgets and funky CSS, I got a call from the client.

It seemed that he didn’t like the way his logo looked on the draft site. I explained I had taken the logo from a scanned brochure and if he could provide me with a .jpg, I would fix it.

And I also said that the font I was using was web-safe and could be viewed across a wide variety of web browsers but if he told me what was used in the brochure, I would try and find a web version.

That’s when I met his graphic designer Sawyer (not her real name). Well Sawyer is an old school graphic artist – she has made her living for decades using typography, drawings, and the CMYK color model for printing.

And she is so NOT impressed with all that is Internet and especially NOT with web designers. So when my client asked her to forward to me his logo image and fonts, the old cow sent me a PDF file!

No separate .jpg, no font type info/name.

What the Font!

I called him back to clarify why she was not being helpful – then we got on a three way call with Sawyer.

I patiently explained to them both that a visitor’s web browser used the internal fonts that were pre-loaded on their computer to display web pages.

I told them that web-safe fonts were the fonts that are universally accepted and installed on most, if not all modern computers.

I explained that with all the different operating systems, web browsers, monitors screen sizes and display settings, any one of which could negatively affect the way a web page is displayed –

– that using a web-safe font was the best way to ensure that the site’s text would actually display correctly for most visitors.

But I was ignored and he and Sawyer went on to complain about how the website colors and fonts didn’t “match up” with what his printed marketing materials looked like.

All of which were designed by Sawyer of course. I felt a felt a sharp pain — was that my eyeball rolling around on the floor?

Sawyer then went on tell him, this happened a lot when HER clients went to have a website designed. It seemed us web folks were just not a good as print graphic designers like her.

I again requested a jpg or at least the RGB/Hex color codes and the logo font type. She went on to tell the client that she had already sent that, in the PDF.

The implication being if I was any good, why would I need anything else?

So I bit my tongue and said I would do my best to “match” up his website to her PDF file. I hung up, pissed but determined to prove Sawyer wrong.

Since my PHP and CSS coding skills were very shaky at that time, I spent a solid 4 hours hacking apart his WordPress theme trying to squeeze in his logo image without pushing everything else off screen.

Eventually I made the changes necessary then I sent a link to both him and Sawyer of the finished theme.

Sawyer whined about the colors again, but since I told them both, I had matched them to HER color scheme, and that the header was actually HER logo from the PDF, she finally shut up.

Why Web-Safe Fonts are Important

Now I didn’t just tell you this story to vent…okay maybe a little.

But this project taught me a very valuable lesson about how things can go wrong when a business owner (and his graphic designer) try to duplicate the appearance of printed documents online.

Most small business owners are used to getting some great looking printing done for “branding” purposes.

And they want the same “look” to be online as well. In fact, once had a client tell me that she wanted her blog to be like her “digital stationary”.

So they naturally think that a web developer/designer should just be able to grab whatever worked well offline and somehow “auto-magically” replicate it on their website.

After all, in the “real world” both a magazine publisher and a newspaper ad director can often both use the same graphical ad setup.

Why can’t a web designer do the same?

This is why people really don’t understand the great “Obscure Font fights” you might be having with their graphic design staff over web-safe fonts vs. fonts for printing.

America’s Most Fonted

The problem with using the wrong fonts on the web was recognized very early on. In fact, Microsoft in 1996 introduced a set of fonts it deemed were web-safe.

Several of them were proprietary (so never really caught on) but most are now considered the “core” web-safe fonts.

• Arial
• Arial Black
• Comic Sans
• Courier/Courier New
• Georgia
• Helvetica
• Impact
• Times/Times New Roman
• Trebuchet MS
• Verdana

These fonts are considered “web-safe” mainly because they are:

• Very legible on-screen – this is very important since people read 10-30% slower online than with print

• Offers a wide range of typographic “tones” to convey emotions or movement using a small number of font styles

• Is suitable for a large number of international languages.

Web-safe fonts are becoming even more important as mobile devices such as kindles, netbooks, tablet PCs and smartphones continue to increase in use.

Most of these smaller devices have limited internal storage space so few house fonts beyond the basics:

• Arial / Helvetica
• Times New Roman / Times
• Courier New / Courier

Web-safe Fonts and SEO

SEO is often thought of solely as tricks to game the search engines. While it is important to code a site’s content using the appropriate <H1>, <H2> or <p>tags, it is even more important to use user-friendly fonts to provide a good user experience.

The easier a website is to read and understand, the better chances that visitors will return and link back to it, thereby improving the site’s search engine rankings.

But all too often a business owner will get stuck on some obscure font for one reason or another.

That is until you take a couple of screenshots of how their website looks in a variety of computers over at http://browsershots.org/

Then they understand how web-safe fonts can help them get their message across to more people but also keep their site from looking like a red-hot mess ==> http://thebiguglywebsite.com/

“My Client Is In Love With The “Tangerine” Font – What Can I Do?”

Okay, if the powers that be are dead set on using some non-safe font on the website there are a couple of work-arounds you might try.

• You can add the non-safe font in with the web-safe fonts in the CSS style sheet on the site. Now you can download the font into the client’s PC, when he’s not looking. That way he sees what he wants but the rest of the world is safe!

• You can try “image replacement”, which is what I did. You can create an image of the text you need using the non-safe font. Then just make a class called “.weirdfont” in the CSS to insert it whenever you need it.

• You can mess around with FLIR (Face Lift Image Replacement) which uses PHP to replace the text with font-image in a more SEO friendly way than plain image replacement.

• And of course there is sIFR (Scalable Inman Flash Replacement) which mashes up Flash, Javascript, and CSS to do text replacement on the fly with a Flash file instead of an image file.

• Or you could try adding a Google Web Font , which is added to the CSS like any other web-safe font but is instead of being pulled from the local computer, is pulled from Google’s servers

 Go Find Timmy, @font-face!

photo credit: tehzeta

As you can see with all the headaches and problems of trying to merge the old printing fonts with the new web-safe fonts, things haven’t been easy.

Most the font work-around methods described above require a wee bit of programming skill and time, which why only the very geeky have used them in the past.

When you are developing for dollars, frequently quick and dirty web-safe fonts often take the place over using a more complex coding solution.

And this is why the @font-face protocol is like a digital Lassie coming to the rescue of a frequently lost Timmy.

To use the @font-face method, all you have to do is upload a font you want to use like the “Tangerine” mentioned before onto the root directory of your website or into a specially created “fonts” folder.

I like the idea of a separate folder that way there will be less chance of accidental deletions.

Next you should create the following code and put it into your CSS file:

        @font-face {

font-family: Tangerine;

src: url(‘fonts/Tangerine.ttf’);

}

Now the problem with this simple yet brilliant solution is that all those stinking browsers have mucked up things again!

• Internet Explorer only supports EOT
• Mozilla Firefox supports OTF and TTF
• Safari and Opera support OTF, TTF and SVG
• Google Chrome supports TTF and SVG

So to fix this problem you should locate and upload as at least the EOT version of the font for IE and the TTF one for the rest of the browsers.

Then you can add insert this code into your CSS.

@font-face {

font-family: ‘Tangerine’;

src: url(‘fonts/Tangerine.eot?’) format(‘eot’), url(‘fonts/Tangerine.ttf’) format(‘truetype’);

}

That should create a cross-platform usage of non-web font safely into your website!

Now the pros of doing things this way are simple — you don’t have to be an uber-web geek at coding to make it work, nor do you have to rely on users having Flash installed on their computer or be dependent on the whims of Google.

The cons are very few, in that you do have to have at least the EOT and TTF versions of any font in order for it to be seen on the major web browsers.

However, if you can only find one version of the font (either a OTF or a TTF), you can always use a web-safe font as a fallback for Internet Explorer.

For a small business owner, who is new to web publishing, the whole process of website design and development can seem rather confusing and frustrating.

In part this is because they are diving head first into a technical field that is unfamiliar to them but also because too often the web designer they are working with hasn’t taken the time to educate them on how the site building process works.

A client who is uncertain about what a developer is working on and who is worried about project costs will often micro-manage in an attempt to “get a handle on” of what they perceive to be an out-of-control situation.

This is why I have often found that using a website wireframes as a quick and easy “teaching tool” is a great way to show the client the entire project, page by page.

When you tell them, you are going to create a “contact us” page, a wireframe allows they to see it and understand BEFORE you begin. This in turn helps eliminates a lot of problems in the long term.

A wireframe is basically a visual aid or mockup, which is meant to help both the web developer and the client “see” how a particular web page will function and what web content and links need to be on it.

Definition: “A wireframe is a visual illustration of one Web page. It’s simply meant to illustrate the features, content and links that need to appear on a page so that your design team can mock up a visual interface and your programmers understand the page features and how they are supposed to work.”

By sitting down and sketching out the basic page layouts, features and notes for content, a client will quickly get an idea of what the whole project entails, as well as better timeframe.

Not to mention, a detailed wireframe assures the developer that they are on the right track and that they aren’t missing any critical elements, their clients might have forgotten to include in a verbal conversation.

The easiest wireframe is a hand-drawn sketch. For most small websites of 1-5 pages, a simple wireframe can be created using an ink pen and a couple sheet of paper (the original iPad).

I also use Microsoft Word’s drawing tools if I want to make my “line” wireframe slightly better looking. I seldom have had to create a wireframe more complex than this.

But for big, old-hairy website or one with a in-house marketing staff, you probably should use wireframe software. With software you will be able to create diagrams that are easy to fix, adjust and share via email with clients and their staff.

I downloaded and installed a Firefox Add-on called “Pencil Project”. It was a bit confusing at first, but since it is a free open-source application, that is to be expected.

But it works like a charm and should be a great edition to any web developer’s toolbox.

Another one I checked out was Lumzy which is a free online wireframe tool. It was very easy to use and all you have to do to use is click to enter.

Now you do have to register to save, but you can easily grab a screenshot of a page if you need to do something quick and dirty in a client’s office.

Why H.R. 3261, the Stop Online Piracy Act Sucks:

While, I understand this bill has not yet come to the House floor yet I believe you should oppose the SOPA (the “Stop Online Piracy Act”) immediately.

As a certified IT professional with over 23 years in the industry, I believe that SOPA will do absolutely nothing to stop online piracy.

In fact, I could show you and your staff several ways to “hide” or circumvent what the bill proposes in a matter of minutes. And if I could do so, legally what makes Congress think they could stop pirates?

And naturally this bill will not only stifle free speech aboard (especially where it is needed in terrorist-based countries) but will also kill off public discussions here in theUS.

Not to mention that the tens of thousands of jobs that will be lost. In 2007, award-winning journalist, David Faber, did a documentary on how just eBay alone affected theUSeconomy:

“An estimated 1.8 billion items, worth approximately $40 billion, are expected to be traded this year on this global electronic marketplace. If eBay employed the 430,000 people who earn an income selling on its site, it would be the nation’s number two private sector employer. How did this company, just shy of its 10th birthday, change the fortunes of so many?” And these numbers have grown since the collapse of the economy in 2008.

Do the drafters of this bill even understand the concept of country-based hacking? If this legislation passes, I don’t see any reason to believe other countries won’t follow suit.

Imagine US citizens traveling aboard only to find out that the host country won’t allow connections back to the US – because a single US blogger “encouraged” some oppressed national to stand up for freedom?

By forcing US ISPs and payment processors to “give the finger” and ban the rest of the networked world, we are inviting a horde of hackers – both talented amateurs and government sponsored professionals to attack back.

China is already secretly “hacking for dollars”, why not allow this bill to pass and give them even more room to attack our companies and networks openly.

Congressional members, I beg you to stand firm against this bill. The sponsors of this bill are seeing dollar signs instead of the damage it will cause to the basic security and infrastructure of the Internet in ways that we might never be able to be fix.

For a plain English explanation of why SOPA is a genuinely
dangerous idea, no matter where you live, go here: http://talkbiznews.com/sopa/

Update:

I got several repsonses to this email I sent both my local Congressional member and from one of my Senator [Kay Hagan}. Let me quote parts ot the letter: ” This bill would allow the Attorney General, or an intellectual property rights owner who has been harmed by an Internet site dedicated to infringing activities (ISDIA), also known as a rogue website, to take action against that site…”

“A site would be designated as an ISDIA if their sole purpose is to facilitate copyright infringement, or promote or sale of counterfeited American works.”

So let me get this straight… as a web developer say I have created a website for an overseas or US client. They sign up with an affiliate program. And unknown to them the program owners are offering some type of information product, book or physical product that is currently being opposed by some US based company for copyright infringement. The case is still up in the air legally but the US guy who is suing contacts the US Attorney General and rats out these innocent site owners as “rogue” sites. Now my client’s “rogue” site is DOA?

Or say a US blogger who often uses duplicate content from other websites or online resources under the US’s “Fair Use” law to write controversial posts about companies he doesn’t like. Now suddenly these bloggers can attacked by the owner of the orginal content, who says their intellectual property rights has been harmed and asks for the site to be declared a “rogue” and blacklisted.

No more messy lawsuits to PROVE the blogger went beyond a the “Fair Use” rule. Why not post a nice note to some Justice Dept hothead looking to make a name for themselves instead? Site declared rogue, all done!

Please did anyone in Congress actually sit down and talk with a REAL web professional who has worked with internet businesses, both good and bad, to really UNDERSTAND how futilte and dangerous this bill is?

And here the last quote from my Senator — better do this before I am declared a “rogue”.

“[Kay Hagan} I strongly support the goal of reducing the theft of intellectual property that is so important to North Carolina’s economy, including our budding film industry, which is why I and 40 of my bipartisan cosponsors originally cosponsored this legislation last July.”

I have lived in NC all my life. I have NEVER known of anyone to has make money or got work from “our budding film industry”.

I do know of several colleges that graduate hundreds of computer science and web technology students each year though. I know of several small businesses and medium size companies who hire and make money using the Internet.

I think Congress and the US Senate have been locked up in DC too long. Get out Kay, go visit RTP. That’s NC future.

Better yet go to SC and see the new Amazon facility and see the jobs being created there… “our budding film industry” won’t pull us out this Recession, lady.

Of course I was much younger and much more athletic then.

But the whole concept of the little guy coming out of no-where to not only to compete against but to whip the current “world champion” was pure primial storytelling.

But I didn’t like the others so much so naturally I had my doubts about the last Rocky pix, “Rocky Balboa”.

I was very reluctant to watch Stallone sleep-walk through another movie about this wonderful character. But the old man suprised me. “Rocky Balboa” was a decent good-bye for a true American movie hero-character.

If you haven’t seen it on re-run TV yet or on DVD, the story is when Rocky Balboa comes out of retirement to step into the ring for the last time and face the current heavyweight champ Mason ‘The Line’ Dixon.

Okay goofy character names aside the whole movie boils down into 2 pivotal sceens, one of which is between Rocky and his son.

Rocky and his son get into a fight over Rocky’s return to the ring. The son thinks his father is nuts for wanting to box again not to mention feels that this fight will embrass him and hurt his climb up the corporate career ladder.

But the thing that made this movie and made this scene was this quote,

“The world ain’t all sunshine and rainbows. It’s a very mean and nasty place and I don’t care how tough you are, it will beat you to your knees and keep you there permanently if you let it. You, me, or nobody is gonna hit as hard as life. But it ain’t about how hard ya hit. It’s about how hard you can get hit and keep moving forward…“

Okay corny, yet oddly true for most of us… for example, recently I got a call from friend who said that a local author I knew was unhappy over his poor book sales.

I had read the guy’s book and understood he was the mental health field and the book was a decent self-help book for people from abused backgrounds.

At the time I thought it was cool that just that morning, I had received a promo email from an online guru who makes his living selling massive qualities of  his business book to corporations as “marketing training materials”.

Since I had taken one of this guru’s online classes before, I figured it was fated, yeah?

So excitedly I forwarded the email to the local author. The email explained how the book selling guru was offering a FREE webinar and how I thought it could help him sell more of his own books.

The local author called me the next day or so and said that he couldn’t do business with me right now.

He told me he would love to use my marketing services but he just couldn’t at this time because of his circumstances. He sounded so upset that I asked him what was wrong…

It seems he had struggled for years and had finally got his book placed in one of the “BIG” bookstore chains only to find out that his book – a collection of his life’s work as a counselor and personal coach had finally been put back in the dusty corners of the bookstore chain’s “discount” section!

He was so frustrated that he said he was more or less giving up on marketing his self-published book because of this.

I told him that was bad but not to give up yet and I asked him if he had signed up for the online book promotion class. He said no because,” things are very bad, right now as I told you.”

I reminded him the class was free and told him if he could just sell a couple hundred copies of his book in bulk to just a handful of therapy centers he could maybe make an extra thousand a month in sales.

He was NOT open to that suggestion and I got the definite feeling he was getting a tad pissed, so I quickly ended the call before things got nasty.

But I’m writing this article because I’m still upset — no not at the local author but FOR him!

I feel bad that he has spend over 2 years of his life writing and struggling to get his book “out to there” in the marketplace only to give up on his dream at the seemingly first hard hit on his way to success.

Yes, I know it might be the best thing for him at this point, but when was the last time getting beat down did anyone any good?

Life will come out swinging and you will get hit, and hit hard but like the movie says can you get hit and keep moving forward?

Now I’m not talking about beating your head uselessly against a brick wall… but I’m not talking about giving up and throwing in the towel in the first round either.

Making mistakes can be a good learning experience! I know from personal experience that this is really true.

Hell, I screw up and fall down all the time! In fact I have a note over my desk that reads “People who don’t make mistakes, generally don’t make anything!”

My author acquaintance mistakenly thought that if he could just get his book distributed by one of the major bookstores that it would “auto-magically” become a bestseller and then he would be on his way to bestseller success.

As he found out this was not true. The world is indeed a mean and nasty place sometimes. But instead of sucking it up and getting back on his feet and testing out some new and different ways to market and promote his book – just he gave up.

He never once tried any of the free marketing ideas I told him about in the past. I had sent him emails before about using online forums to market and promote both him and his book.

Heck, I even made a video showing him how to do it. Check it out here if you are interested >> “How to Use Online Forums for Visibility”.

But nope he couldn’t do it – he was too busy off marketing in the traditional ways that take up a lot of time and money.

Yes, I understand in the past such traditional marketing and promotional strategies worked well for many types of organizations, not just book authors.

But over time this poor guy worn himself out traveling back and forth for face-to-face meetings, book-signings, trade shows and speaking events  to build up his reputation and visibility.

I guess finding out his book was being placed in the discount bin was the last straw and it broke him down so bad, that he felt giving up his dream was his only choice.

Failure Can be Your Friend

But you don’t have to let getting hit and knocked down, completely overwhelm you. Here are some things you can do to avoid being TKO’s when you eventually “fail” on your way to winning.

Know What YOU Really Want

Now if the author I have been talking about only wanted to be a bestseller on the New York Times list, then okay he did indeed fail big-time.

But what if he really only wanted to sell enough copies of his books to make some extra income or build his reputation as a lifecoach?

Okay those two goals are very different from the first one, yet are very doable using easy and inexpensive online marketing tools, he could have learned about from me or somewhere else online.

Ignore Negative Advise

Don’t listen to the “Why Not’s” or the “It Can’t Be Done Here’s”. There will always be naysayers, cynics and pessimists disguised as “realists”.

If the people with the advice have done what you want to do then listen to their insights and advice – but do your due dillegene and use your common sense about what they tell you.

On the other hand if the people with advice have NOT done what you want to do, feel free to ignore them. People often say you can’t do such a thing because they can’t imagine THEM doing it either.

So their advice is not a true picture of your skills, ability to learn new things, or your “mule-headed” persistance in the face of overwhelming odds.

Think about this – would you listen to me if I told you how to perform brain surgery on your child?

Well…NO!

Ok, so why listen to well-meaning but misguided friends, relatives and associates about how to market your products or services online?

Would you listen to me if I tell you all about online and internet marketing really works and how to use it to grow your business?

Maybe..?

What…WELL YOU SHOULD! But only because I make my living using web tools to market and promote both my own websites and those of clients, not because you might like me or not.

Find & Focus on a Specific How-To

While what I teach, which is how to use web technology tools for business, does works for me or my clients – not all tools might work for you or your organzation.

For example, I like using videos and slideshows now to market and attract attention to my blog. I also like writing long-long blog posts.

This is not for everybody. Sometimes it’s a skill thing or a software issue or a personality mismatch like a fear of public speaking or writing.

But no matter what your current marketing skill-level might be, you have to pick your battles and focus on a single online marketing technique that plays to your natural strengths.

I’m an introvert, so going to face-to-face meetings with offline clients is both a painful and stomach-churing experience for me.

On the other hand messing around web video technlogy is fun (all off-screen stuff of course – no “talking heads” for me).

But if you like having your picture taken and no has ever called you “bashful”, a 1-2 minute “talking head” video shot with an inexpensive camera will seem like child’s play for you.

The same goes, if you like writing short pieces several times a day for friends and family then micro-blogging, Facebook and Twitter seem natural to you.

So learn what has been proven to work THEN rework that to fit your personaliy, lifestyle, skill-set and business goals.

By finding out all about the various “How-To’s” of a process and focusing on the ones that seem like a good fit, you will eventually find one that works best for you and your business – If you don’t give up too soon!

But for many small companies traditional marketing is failing, so they are taking a hard look at online marketing.

Take a few moments to watch a short video to learn why you need to go beyond business as usual if you and your business are going to make in the next few years… Marketing for a Small Business -

But every year, thousands of business owners unfortunately have their websites vanish… read this article to see what you can do to prevent this problem >> Small Business Websites.

Originally nicknamed the “Farmer Update” and later officially named “Panda” , this update it was at first rumored to be designed to weed out websites or blogs that Google considered to be “content farms”.

According to Wikipedia, “…the term content farm is used to describe a company that employs large numbers of often freelance writers to generate large amounts of textual content which is specifically designed to satisfy algorithms for maximal retrieval by automated search engines. Their main goal is to generate advertising revenue through attracting reader page viewsas first exposed in the context of social spam.”

Hmmm… let me tell you want a “content farm” is in simple terms anyone can understand. Okay, say I’m a website publisher with a blog on caring for sick cats. In the past I wrote all my articles or blog posts all on my own.

After writing I would post them to my little site. Now in order to make some money I started placing various clickable ads (using Google Adsense) all around my site. Over time I noticed that I made about 10 cents in ad revenue per page.

That’s 10 cent per published web page per day. So with only about 10 published web pages, I roughly make about a $1.00 day or just $30.00 a month. Nothing spectacular, right?

But say I worked hard and eventually got about 1,000 published pages uploaded to my not-so-small sick cat website now. That same 10 cents per page now adds up to about $100 dollars a day or $3000 a month!

Now what if I could have someone else (hundreds of people in fact) write 10 or 20 pages of material for me a day. Say I hired a team of just one hundred freelance writers who could create 30, 000 pages a month for me (100 writers x 10 “article-pages” a day x 30 days).

That same tiny 10 cents a day is now worth $3000 a day or $90,000.00 a month. (30,000 pages x $0.10 per page x 30 days). Ka-chang! Yes, the cash register just went off in your head, right?

Well don’t jump out and starting hiring folks to build your own “content farm” just yet. It was the gold rush to this type of business model of uploading content low quality content just for the ad revenue that has probably derailed your small business website during past few months.

See, once website publishing companies, both large and small, started hired cheap freelance writers to churn out hundreds of rather low quality articles as quickly as possible, the Google’s search databases starting filled up with tons of junk and spammy web content.

I know…I was one of those thousands of “freelance” writers. Until recently I wrote hundreds of SEO articles for online media companies. If you wanted web content on your site, no matter how unusual or weird the subject matter (sorry no porn, please) I was your girl.

I wrote all kinds of stuff, some that was very bad and some that was pretty good. I’m especially proud of my “Trek to the Everest Base Camp” piece.

Check it out here… http://www.basecamp.com/ Yes, I wrote that entire front page. Not bad for a woman who is scared of heights and who has never been farther overseas than a small military base in Germany.

So what has all this got to do with you and your small business website?

Now I didn’t tell you all about this “hidden” world of internet marketing to entice you or scare you off, but to let you know, that you as a small business owner can be negatively effected by things that happen online — things you have absolutely no knowledge of or understanding of.

See, when Google released the Panda update, they were trying to kill off or at least hurt the larger “content farms”. One such farm is Demand Media which sold shares of their newly minted public stock offering for some $76.5 million bucks.

Yes, there was big, big money was being made around content farming and Google used it Panda update to punish those it felt was taking unfair advantage. But unfortunately for small time operators like us got caught in the crossfire.

See the Panda update ended up changing the search traffic on an estimated 12% of all US websites.

This means if your small business website didn’t have a lot of other websites linking to it  or had lots of “low quality” web content (i.e. had articles that were 400 words or less) or has web copy that is heavily laden with keywords (search terms people use to find you) or promotional words like “selling online”, “make money online”, etc. then you probably got hit too.

Only the changes are pretty good, you don’t know it.

Even the Wall Street Journal ran a story on an ergonomic furniture dealer called Ergo In Demand (www.ergoindemand.com) which suffered a 40% drop in sales.

As a result according to the WSJ, “…Online ergonomic-products retailer Ergo In Demand Inc. in Central Point, Ore., reduced its 17-person staff to five, moved to a 4,500-square-foot office space from one more than double in size and cut $4,000 in monthly software subscriptions”.

Basically because of Google, this small business owner has to let 12 people go. Not due the economy directly but due to Google’s heavy handiness.

In the WSJ report, still another small business owner claims…””We got caught in the fire,” says Mitchell Lieberman, chief executive of One Way Furniture Inc., an online furniture retailer in Melville, N.Y., that had revenue of $17 million in 2010…”

“…His company’s website, onewayfurniture.com, saw its Web traffic from Google drop as much as 64% after the changes. Part of the problem, Mr. Lieberman suspects, is his company has relied on manufacturer descriptions for the 30,000 products it sells. He says many of his competitors buy from the same manufacturers and use the same write-ups….”

“…Mr. Lieberman has started paying free-lance writers to create original, more detailed product descriptions.”

Now I think the problem is as much about short web copy length (less than 400 words) as originality. I have personally written 100% unique copy for several clients. At least 2 have mentioned they believe their sales have been directly affected by a decline in search engine traffic.

In both cases while the copy I wrote was original for each website,yet none of the copy was long (over 400 words).

Plus both sites were written in a punchy, promotional style similar to that found in any traditional advertising sales letter.

I did things this way since both sites; one an art gallery and another a real estate agent are in the business of selling products.

First they changed their Google Adwords program in 2010 to squeeze out the little guys, now this? Apparently Google doesn’t like individuals, especially small business website owners to try and sell things anymore?

Now Google is a private company, and how they run and measure relevancy of websites in their massive databases, is their business. But as the saying goes, if you have great responsibility, then you need to take extra care with those responsibilities.

I don’t think it’s fair that Google has penalized small business owners because of what a few giant media content farms are doing or have done in the past.

Google should be more aware of the negative effect they can have on legitimate website publishers who aren’t gaming the system or involved in unethical practices.

Just honest business people working trying to make a living, trying to market themselves online. Whatever anti-small business trend Google is on, they need to wise up and be more careful about what they are doing.

Monopolies, even benign ones don’t last forever…should we start calling the folks at the search engine  “Google Dearest” after Joan Crawford’s evil mother figure.

But on other hand, this should be a lesson not only to me as a local internet marketing specialist but to small website publishers everywhere not to depend on Google as their sole source of traffic.

Takeaway Tips

• Don’t focus all your marketing efforts on Google. Use other channels of communications
• Branch out into Social Media
• Get permission and use email marketing wisely
• Use direct client communications and follow-ups to build lasting relationships
• Just because something’s free, doesn’t mean, it can’t be taken away.

I just got off the phone with a close friend to make amends. Three nights ago, I called to share with her what I felt were some very funny moments from one of those new oddball reality shows that keep cropping up.

But after a few moments, I realized that she not only wasn’t laughing with me but she was in fact getting very ticked off at me!

Oopsie – I had caught her at a bad time and she was upset at being disturbed (she had gone to bed way early that night in order to get up at 2AM the following day.) Ouch! Still after a few stiff words, I hung up but now I was a little bit pissed myself!

I knew she and her husband were slated to start an important project (they are both licensed roofing and building contractors) soon and I had forgotten about the early morning wake-ups so it was my fault –I still felt slighted somehow.

Which was a dumb way to feel, since this woman and I have been friends for almost 30 years (we met while selling vacuum cleaners door-to-door; a story for another time). But despite our long term friendship, I still had to “make” myself call her and apologize for bugging her before their big job.

This little story is an example of how a bit of wrong timing and a little miscommunication can easily blow up  between two people who know each well and like one another.

Just think of how the same story would end between with a small business owner and their online customers…

Nancy Needy is one of your potential customers. She doesn’t want to be a “pain”, but there is just so much stuff out there and she has to know about [insert the name of your product or service here] before she invests any of her hard-earned time or money.

She thinks she should contact your company to find the answers to a couple of quick questions, so she can make an informed decision as to what to do next. She goes online and surfs over to your company website.

Your website looks professional enough (not too outdated or hokey-looking) but not too “slick” looking either. A small company site with way too many bells and whistles always makes her think either scam artist or too big for her budget.

Poking around a bit, she is disturbed that she can’t find your phone number. She hadn’t thought to call you but she wanted it for her records just in case.

But all Nancy could find was one of those online “contact me” forms without any other information like a map or a street address to help her find your business.

Now Nancy is getting a bit ticked…she starts thinking…why don’t you have a phone number she can use? In this day and age, even junior high kids have phones. So where is yours?

And what about that street address? Even if you are a home based business, wouldn’t you have at least a mailing address or post office box if your company was legitimate?

Now Nancy clicks on your “about us” page and gets a generic, “We started this website because…” without any pictures or information about you, your staff or any details of why you do what you “say” you do.

And all the pictures or photographs, Nancy sees are slick, stock photos… where are the snapshots of your staff hard at work, your office building, a posed headshot or group photo or better still a photo of you with a happy and smiling customer?

Not to mention, there are no customer testimonials, thank-you letters or copies of any special events or press releases you have done. She can’t any new fresh content not even a lowly “free” blog at Blogger.com to tell her the details of your latest products or services.

She leaves in a huff, but next week after investigating other businesses in the area, she wanders back to your site, only to discover that it is down… suspended or deleted by the web hosting company for some reason.

Now, without you ever knowing it, Nancy Needful is pissed at you! She is also very disappointed since knows that your company is local and could have done a good job for her.

While she didn’t except you to compete with the big Fortune 500 websites, she does feel slighted that she couldn’t find what she wanted to know, in order TRUST you and want to do business with you.

Now you might think I am writing this story up completely from my imagination, but too often small business folks get so caught in the grind of making a living that they forget to market their businesses properly online!

Yes, I know it sound oblivious, but too often people think that word-of-mouth and a couple of yellow page ads provide all the “visibility” they need to keep growing their business.

Sadly, this is no longer true. In today’s new economy, many people (both mine and your customers) are using the Internet as way to save on gas, comparison shop and search out the best companies to work with or the best deals to buy.
We can’t stop this growing trend. We can only take the necessary steps we have to in order to keep our companies from being left behind.

Takeaway Tips:

Audit your own website – stand back and look at your website with fresh eyes. Is it still okay and aging well, or does it need a touch-up or even an extreme make-over?

Don’t trust your webmaster or web hosting company – They may or may not send you notification of your site being down. Keep aware of the status of your account and get any payment or technical issues resolved as soon as possible.

To you, your site being down is nothing, but to many potential clients or customers, a website that is down is almost as damaging to your sales as an out-of-order business phone number. It is a signal of either neglect or failure.

-
Check out successful competitive websites – Results don’t lie. If some company in your area is going like gangbusters and you hear they make a good use of the Internet, then go over to their site and check out what they are doing.

Ask your customers what they think of your website – Okay, I understand that your site is like your baby… but even the nicest of parents can give birth to nasty kids occasionally.

So ask your clients or customers what THEY think you can do to improve your online presence. Of course most people will be caught off guard and won’t have anything to say much…

But if you are lucky you will stumble across your very own Nancy Needful and she will let you have an earful – of creative ideas on things you never even thought of.