Pint Sized Sites

Web Sites for Your Small Business

You are here: Home / Archives for Kelli

Kelli

Columbia River Institute – Branded Package

by

This is where we get to celebrate the launching of a new website, complete with breaking champagne bottles on the bow, marching bands, cutting ribbons, and party hats. It’s also where I get to share a little peek under the covers of why I made the choices and ended up with the final website design.

Announcing: Columbia River Institute of Massage Therapy

This is a new massage therapy school based in Wenatchee, WA (the dry side of the state where the cherries and the wine come from). The client, Annie LeCroix, had a very clear idea of what she wanted and was able to articulate it.

The end result is a great example of what is possible with a Branded Package.

Design Requirements: clean & green

The design brief started with the customer’s logo and color scheme of green and dark gray, keeping the layout clean.

The logo image, which is combines a drawing of the human body with a sense of movement and fun, was incorporated into the header:

Columbia River Institute logo & header

Repeated element:

I liked the logo so much, I decided to use it as a watermark for the body of the page, which was done in green. To keep this from looking cluttered, the watermark is not repeated.

Sidebars:

[tooltip content=”You might call these “columns” – they are the small columns along the side of a website.” url=”” ]Sidebars [/tooltip]on the right were left white and all text was dark gray. We thought this looked a little flat, so an accent color of a complementary burnt orange was added for some contrast. Social media icons, in dark gray, were chsoen from A Life in Pixels Icons.

[tooltip content=”This looks like the item is hovering above the surface and the shadow is dropped below the item” url=”” ]Drop shadows[/tooltip] and inset shadows were added to the main body and sidebars, respectively, to give the appearance of depth. The [tooltip content=”This is the stuff along the bottom, or foot, of the page” url=”” ]footer[/tooltip] was left white.

The final site, Columbia River Institute of Massage Therapy:

 

Tooltips – How to add them to your WordPress website or blog

by

Have you ever been on a medical website and come across a term that you weren’t sure of? I was checking a prescription medication for side effects and came across the word “febrile”. Que? I said to myself. I thought I knew what febrile meant (something along the lines of feeble), but as it turns out the word means “feverish”. I had to navigate away from the website and do a quick Google search. Most normal people use the term fever so it would have been nice if they had a definition of the word right there.

This kind of thing happens all the time. Think back on the last time this happened to you. I’ll bet it was within the last week. Wouldn’t it be nice to have a quick, simple way of including this kind of information on your website? There is – and it’s called tooltips.

What are tooltips?

An example of a tooltipTooltips are a wonderful way of providing extra clarification around a term, word, or clickable button without having to type it all out. Many software manufacturers use them on their toolbars so that they can use a small graphic instead of the actual words. This leaves space to add more controls and buttons on the toolbar but can be confusing to the user.

By adding little explanations that popup as you hover over the control, the software company can maximize the number of buttons available and still provide clear explanations of what the control does.

How Tooltips can make your WordPress website easier for your visitors

If your business industry uses jargon, abbreviations, or technical terms tooltips can provide quick definitions without forcing the visitor to do an internet search. This has two big benefits:

  1. An internet search will usually mean that the visitor LEAVES your website. They may end up getting distracted by all the pretty/shiny on the internet and <squirrel!> what was I talking about? Oh, yea, they’ll forget where they started and end up buying from someone else.
  2. Learn a piece of jargon which makes them feel like an insider. Face it, didn’t you feel a little special the first time you explained what a blog was to someone? Side benefit – people who already know it won’t have to wade through a paragraph of definitions to get to the meat of your article.
  3. It adds more ‘zest’ to your website.* The website feels just a bit more interactive. “Hey what the heck is a mnemonic – oh, never mind, the author answers it right here. Isn’t that cool? I wonder how that’s done?”

* Bonus 3rd benefit. I’m all about going above and beyond for you!

With WordPress, adding tooltips is as simple as installing a plugin. The plugin I’m using here is WordPress Tooltip. The plugin adds a little graphical thought bubble icon to the post edit box. Adding a tooltip is as simple as selecting the text you want, clicking the icon, typing in the information you want in the popup, and clicking add.

The standard formatting is to add a dotted gray line below the item. It’s very subtle. A little too subtle for me, so I added some quick [tooltip content=”Changing the formatting is done in the custom.css file.” url=”” ]formatting[/tooltip] to make it stand out a bit.

Adding the body.custom required for Headway, add this to your custom.css file:

body.custom .wp-tooltip {
   border: 2px solid #c5f1a6;
   padding: 0 2px;}

This adds a green border, 2 pixels wide around the text. I’ve added some padding to the right and left so that there’s a little breathing room. You don’t need padding top and bottom.

Very quick to install, very quick to customize, and very easy to use.

How would you use tooltips on your website or blog? Take a look at your site from a beginner’s point of view. How could you make your website easier for your customers to use? I’d love to hear some practical examples – so leave a comment in the space below.

Tooltips – I’ve got them!

by

What’s with the words surrounded by the green boxes?

I’ve added a [tooltip content=”a set of software components that adds specific abilities to a larger software application – from Wikipedia” url=”” ]plugin[/tooltip] that will display extra information about a term. When you hover your cursor over that text in the green box, a little popup will appear that explains what the term is all about.

That little popup is called a tooltip. You’ve seen them already in computer software you use. I decided to add tooltips so that I don’t have to use as many parenthesis (which I seem to love almost as much as I love commas).

What are tooltips?

A tooltip is a graphical element that appears when you hover your cursor over an item. You don’t need to click on it and it will fade away a couple of seconds after you move your cursor off of the item.

I’ve setup my items so that they are surrounded by a green box. This should make it obvious that the item contains some extra information.

I use a lot of unfamiliar and geeky terms on this blog and I don’t want to force you to have to do a web search on their meaning or wander away in frustration. For more advanced users, you won’t be stuck reading through information you already know in order to get to the meat of the post.

No ads

I hate the tooltips that pop up an ad for a product and obscure everything I’m trying to read.

No audio or video

My biggest pet peeve now is when audio starts playing just because my cursor wandered over an ad. Those people must die! (are you listening msnbc.com? Yea, I’m talking to you!)

Do you like the tooltips or do you find them annoying? What kinds of terms would you like me to use this with? Let me know in the comments below.

Passwords, Usernames & Website Security – a primer

by

A great question was posed on the Why WordPress? post regarding the security issues of using WordPress.

Part of my answer (long winded as always – sorry about that) was:

Frankly, any website can get hacked, and WP is no exception. I had someone call because their Joomla website got hacked (Joomla is another website software similar to WP). There are steps you can take to make it more difficult to hack your WP site: have a strong login password and a username other than “admin”, keep the WP and plugins updated (this is very easy to do via WP admin page), and a few other tricks that are a little too technical to explain here. You should also log into your hosting account and check your logs for unusual activity. I found a German site trying some crap on one of my websites, so I simply blocked that IP from being able to see the website.

Today, I’m going to talk to you a bit about the biggest step you can take to protecting your website, email, bank accounts, facebook account, and any online profile you might have.

STRONG PASSWORDS & UNIQUE USERNAMES

The most common password used on Facebook? “Password” Well, duh, of course it’s easy to hack your account and start all kinds of mischief.

The most common username used on WordPress? “admin”. There’s half of the information I need to break into your page and screw things up.

What you need is a password that’s hard for a machine to guess and easy for you to remember. Something that includes:

  • Upper case letters
  • Lower case letters
  • Numbers
  • Symbols (within limits)

An easy way to remember something hard

While it’s easy to generate a strong password, it’s not so easy to generate one that is easy to remember. Here’s a little trick: make it a [tooltip content=”A learning technique that aids memory, such as a very short poem” url=”” ]mnemonic[/tooltip]. A common mnemonic is “Every Good Boy Does Fine”. Those are the note names associated with the lines on music staff paper: E G B D F.

So let’s try an example. A strong password is going to be a minimum of 8 characters long and preferably more than 14. We’ll use this lyric to generate our password:

What the world needs now, is love sweet love

The first letter of each word would give us the following 9 character password: wtwnnilsl

Well, it’s long, but it’s not strong. Let’s do some substitution of numbers for letters. The letter “l” looks a lot like number “1”. The letter “S” looks a lot like the symbol “$”. So making the password: wtwnni1$1

Better, but still not strong. Let’s emphasize the words “World” and “Needs” by making them upper case letters. Our password is now:

wtWNni1$1

Now that’s pretty, although it could be longer. As it is, it would take approximately 299 days for a computer to guess. And it’s easy to remember. If you need a reminder, just write the mnemonic you used.

What about a strong username? WordPress allows for numbers and symbols in the username, but not all accounts do. Some will only allow letters and numbers. Do what you can, but don’t make your user name your name – it’s too easy to guess.

If your name is Marty Black and your dream car is a 67 Mustang, you could have a username: M@rtyB67. Here, we’ve used the “@” to substitute for the “a”. This would take 162 days for a computer to guess.

The point of making strong usernames and passwords is make breaking into your account difficult. Many automated hacking programs simply start with the most common: admin, password, 1234, etc and then start generating them in numerical sequence.

Your task: make your passwords stronger!

Why WordPress?

by

One question I get asked by potential clients is: why do you use WordPress to build websites? There are 4 reasons I use WordPress to power your website.

#1 – WordPress has a large installed base

  • There are over 40 Million websites using WordPress. In fact, 13% of the top websites in the world are built on WordPress. (these statistics come from WordPress.com)
  • There are over 900 books listed in Amazon on WordPress, including WordPress for Dummies (a pretty good text for most users), Teach Yourself WordPress, Beginning WordPress, WordPress 24 hour trainer, and others geared for the beginner to the Uber-Geek.
  • WordPress is open source and free to use. It has thousands of code warriors writing, testing, and documenting the latest updates.
  • Even though WordPress does not generate any income for the developers (they make their money in other ways), they have spent many thousands of dollars on usability studies to make sure that the user interface is intuitive enough that novices can get comfortable with it rather quickly.
  • Because it has been widely adopted and heavily documented, the number of people competent in providing ongoing support is huge. In other words: if I were to win the lottery (I don’t play, so no worries there) and immediately retire to a beach in the Carribean, you could easily find someone to come in and take over your WordPress website. (I’d probably head to New Zealand first because I’ve never been there but the pictures sure look nice)

#2: Search Results

Google loves to see fresh content. It also loves to see quality content (changing your banner image every week is not an SEO strategy). Google also loves to see order in websites, good tags, semantically written code, and a lot of other terms that make no sense to you. Just know this: WordPress delivers the code in a format that is Google (and Bing and Yahoo) friendly.

WordPress also allows you to create new, meaty content on a regular basis which gives the search engines a reason to come back on a regular basis. My other blog, Massage Therapy World, is indexed almost daily and my posts will show up in the top 2 search results less than 5 minutes after posting. A static site just won’t achieve those kinds of results.

#3: Empowerment

One of the other reasons I chose WordPress: it allows the client to make updates and edits without needing to contact me. Over and over, I hear from clients that they can’t get their web designer to return their calls (thanks for all the new business, guys!) or that the firm is too busy to put up the client’s holiday specials and take them down.

What if the client could do that himself? No more $80 maintenance charges. No more scheduling your updates months in advance. Have a handful of last year’s product sitting in the back room you don’t want to inventory next week? Post a a quick blurb about a clearance sale that day, take it down next week. You can do that on your own without having to contact your web designer.

It’s not Rocket Surgery

It has always made me a little crazy when technical experts hold their secrets close to the vest so they can remain ‘the smartest person in the room’. This is usually a misguided attempt at getting job security or ego stroking. It’s your website and you should be able to update it on your own. At the same time, if the client breaks something, I’m here to put it back together. Or, if they’re are simply too busy, I provide the manpower to add new content.

And this brings us to item 4:

#4: Cost

Because I’m not developing custom websites from scratch, and because I’m starting from a template or framework, I can shave months and thousands of dollars off of the average website project. We’re not staffed to do custom work; all of our time goes into quick, cheap websites for businesses on a tight budget.

While WordPress, or templated, sites is not the right solution for every business. For the micro-business, kitchen table business, pint sized business, solopreneur, or whatever you want to call your small business, it can be the best solution to getting your business on the web when you don’t have a big budget.

How to write an elevator pitch

by

As a small business owner, you are probably a member of a business networking group or the local chamber. All of the networking you do is to try to make connections, get referrals, and drum up business.

Every week, I get up and tell the group, in less than 60 seconds, all about my business and how they can help me with referrals. It took me a while to figure out how to craft a 60 second commercial, but I’ve found it very helpful.

Now I’m never at a loss when someone asks me what I do.

My networking group has monthly training days and a few weeks ago, it was my turn. The group wanted a refresher course on crafting their 60 second sales pitch and we wanted to give our newest member the training, as well. I got so much positive feedback on the training, I thought I would make it available to anyone who feels a need for this information. So, I spent some extra time and made the 4 page step by step guide into a full fledged 14 page workbook.

Then I thought, I’ll offer it free! Why? Well, it’s not enough to have a great website, you need to be able to tell people about that fantastic product or service. And to do that, you need to have an effective elevator pitch.

A step-by-step guide to crafting your elevator pitch.

In fact, this is actually 2 pitches:

  1. One for use in your networking group
  2. Another for use when you meet someone who asks “So, what do you do?”

How can you get your copy? Easy, just head over to the Cool Stuff page and fill in the form. You’ll get an email with a link to download the file (it’s a pdf file, so it’s virus and malware free).Writing an Elevator Pitch that Kills

I’d really like to encourage you to check it out and give me your feedback on how helpful you found it. I’d also appreciate any suggestions for improvements. If you find it useful, forward the link to your friends or tweet this post.

This is a great workbook, and it will walk you through the process of writing a killer elevator pitch for your business. But it won’t help you unless you print it out and do the exercises.

Is this kind of thing helpful? Would you like more tools to help your business? Let me know in the comments.