Multiple Matte Colors for CSS Sprites

Here’s the problem: I want to use CSS Sprites for transparent images, and they require different matte colors.

The promise of CSS Sprites is great: you can combine many small images into one bigger image, and use CSS to reveal only the revelant parts. But what if you have a background image, and the background changes color on :hover? When trying to save the smilies, you can only choose one matte color. I need multiple matte colors!

The issue really is a pain when you have already given your object a stroke. Using the Appearance panel, we’ll make everything happy in the world again!

I want the three smileys to be combined as one

Continue reading “Multiple Matte Colors for CSS Sprites”

How to "Hack" VonageMe™

Integrating Call Me Link into Your Website

VonageMe™ is a new service from the VoIP service Vonage. If you have service from Vonage, you should have a VonageMe account.

How to set up click to talk using Vonage

Vonage uses a simple form to enable the calling feature. Instead of using their form, you can style your own…or you can create an anchor link using the following pattern:https://me.vonage.com/username?fromnumber=12223334444For me, that code translates to https://me.vonage.com/303zachary?fromnumber=13035551212

Three steps to VoIP fun!

  1. Go to me.vonage.com and sign in using your Vonage account login (this is to confirm you have the service).
  2. Fill in their information if you want, but it’s not necessary—you will see why next.
  3. Create a HTML form on your website with a text input with id/name “fromnumber” and the form action as https://me.vonage.com/username, with username being your Vonage username.

The final code:

<form action="https://me.vonage.com/username" method="post">
<fieldset><legend>Call me now</legend>
	<div>
		<label for="fromnumber">Your phone number</label>
		<input type="text" id="fromnumber" name="fromnumber" size="12" />
		<small>( 1 + area code + number ). No dashes or spaces, please.</small>
	</div>
	<div>
		<input type="submit" value="submit" />
	</div>
</fieldset>
</form>

Next steps for even better results

Using simple form validation Javascript, you will be able to weed out people who use dashes and spaces in their phone numbers, or even better, create a script to automatically reformat them. View Update below.

You can try the code out on my website as it’s currently formated. It uses the exact code from above, but replaces username with my Vonage username, 303zachary.

Update:

I’ve used the Adobe Spry Validation Widget to make sure that the phone number is properly entered. Below is the code to ensure proper number formatting:

var sprytextfield1 = new Spry.Widget.ValidationTextField("sprytextfield1", "phone_number", {format:"phone_custom", pattern:"10000000000", hint:"Sample: 13033620451", useCharacterMasking:true});

Posting consistently

Set up a blogging schedule that aligns to your slacking habits 

If you find yourself not posting to your blog and letting your website stagnate, set up a schedule that fits your cycle of procrastinationWe all know how hard it can be to do anything consistently, but we manage when the results are immediate. 

  • Take out the garbage
  • Shaving/showering/washing dishes
  • Cleaning
  • Waking up!
Blogging is not as immediate.  Posts don’t always get comments, and there’s often no immediate gratification to blogging.  So how does one motivate themselves? I recommend this: in order to avoid “blog rot,” set a time aside on your calendar or during your day. 

When are you least productive? 

In order to find your blogging sweet spot, a great way is to do a little investigating. One way to tell when you are least productive is by answering this question: what time during the day do you read the most blogs? If you use Google for any services (Gmail, iGoogle, Finance, etc.) you have a Google Account.  With that account, you can enable a service called Google Reader. Google Reader lets you compile all of your favorite websites’ articles into one easy to use format. 

Least productive Fridays

My blog reading by hour of the dayMy reading by day of the weekBy looking at my Web History chart, it’s easy to see that:

  • I waste the most time from 10-11am, and 2pm.
  • I waste the most time on Tuesdays (by far!)

So, based on these statistics, I know that I should schedule a time for me to post on Tuesday around 11am each week.  Also, I should pencil in a daily posting time at 2pm to remind myself to post. Note: I started writing this post at 2:30 pm.  

 What about you?

How do you allocate time in your day to blog, and how effective is it? 

How blogging helps your search ranking

 Ignite Matchmaking SEO Ranking Chart

Why blogging helps your rank 

  1. The more you write about relevant content that is interesting, informative, and helpful, the more people will link to your blog.
  2. Consistently updating your website shows search engines that your site is active.
  3. Using keywords in your posts on a regular basis adds rich content to your site that a static page would not have.

Setting SEO goals you want to achieve 

When you are doing search engine optimization, it helps to have a goal.  For instance: my goal is to get to the #1 spot for “Denver Web Designers”,  “Denver Web Design.”, and “Colorado Web Design”

Analyze your competition 

The top two or three sites for my preferred key phrases have been ranked there for years.  One way to catch up is to analyze why they’re ranked well.  Today, I will look at external links.A simple way to see how many external links your site has is by searching Google for link:www.example.com 

  • External links — Right now, KWD has only 13 external links counted by Google.
    • Greenchair.net has 93 external links  
    • Lighthousewd.com has 53 external links
    • Fusionbox.com has 75 external links

It’s important to note that I have nothing against these companies, and you should never take things personal online.  They’re at the top because they’ve worked hard to get there.  I look forward to meeting the people behind these companies. There is plenty of web business to be had out there, especially in Denver, so although we are competitors in the search engines, I see all web designers as colleagues.  

Ignite Matchmaking Complete

Ignite Matchmaking is a professional matchmaker in Denver, Colorado. Sheryl Williams, President of Ignite asked Katz Web Design to increase the effectiveness of her website. The Previous Ignite Matchmaking Homepage was not visually interesting, had little information about the matchmaking process, and was not well constructed (using XHTML and CSS).

The new home page has a graphic that outlines the five steps and calls users to action with a simple choice: I am a Man or I am a Woman. The site now has a blog that will entice visitors to stay longer.

New Ignite Matchmaking Home Page

So I've finally given in…

The cobbler’s son has no shoes

One aspect of being a web designer is that when you create websites all day for other people–and get paid to do so–making your own website seems to fall by the wayside.

I have so many great things to share with people, lots of really helpful web design resources, and plenty of opinions!

Eventually, I’ll move everything over to my real website (www.katzwebdesign.net), but for now, this will do!