I recently finished Gary Vaynerchuk’s book “Crush It” and one the things he covered was the need for some kind of call to action button on your website as a way to create return visitors and further their interaction with your brand, among other things. These buttons don’t have to just be about buying products such as a book, they can also be links to your social networks or anything that will further engage your audience. It seems like such an obvious idea after reading it but for some reason I had completely left anything like this off of my own website. To remedy this, I decided to add a follow me tab with drop down links to my main social networking sites and my rss feeds.

This is where I get the part that I want to share with everyone. While trying to figure out how to implement this new button, I stumbled upon a new way to create drop down menus with out the use of javascript. Now I’m sure someone else has figured this out as well but I was excited that I managed to do it on my own and thought someone else might find it useful as well. If you would like to see an example of what I am going to describe, just hover over the “follow me” button on the left side of this site.

Before you read on, I want to preface this section by letting everyone know this is my first attempt at writing a technical code explanation so if something doesn’t make sense or I got anything wrong, let me know in the comments and I will do my best to clarify. So, Let’s get down to it and take a look at the code. The html is nothing more than a unordered list made up of the various links you want to display:

<ul id="call-to-action">
  <li><a href="http://twitter.com/patrickrhill/">Twitter</a></li>
  <li><a href="http://www.flickr.com/photos/patrickrhill/">Flickr</a></li>
  <li><a href="http://feeds.feedburner.com/AltVisionsDesign">RSS</a></li>
</ul>

The magic happens when you add the CSS. Basically all that is happening here is the content of the unordered list is being hidden and replaced with an image of text saying “follow me”. When someone hovers over this, the image is removed and the list full of your links is allowed to expand. You can then style the links however you see fit. Keep in mind though that if you want all of the links to remain symmetrical and line up correctly, you will need to display them as block elements.

#call-to-action {
		min-width: 30px;
		position: absolute;
		left: 0px;
		height: 120px;
		top: 457px;
		text-indent: -3000px;
		min-height: 50px;
		background: black url('images/follow-me.png') no-repeat center center;
}

#call-to-action:hover {
		text-indent: 0px;
		height: auto;
		background: black none;
}

#call-to-action a {
		display: block;
		padding: 5px 10px;
		margin: 10px 0px;
		color: white;
}

#call-to-action a:hover {
		padding: 5px 10px;
		margin: 10px 0px;
		background: white;
		color: black;
}

To finish up, remember that this technique doesn’t have to be used solely in this way; you can apply it to any type of navigation you like. I’m currently experimenting with some new ways to utilize this and I hope to share them soon. Well, that’s all I can think up for this post. I hope someone finds this useful!

More eye candy for you to devour:

Here’s another batch of my favorite design finds from the past week.

There was a lot of valuable information offered in this year’s 24 Ways articles but there were three posts that particularly struck me, reviving my excitement in web design and causing me to make fundamental changes in the way I create websites: Meagan Fisher’s Post on creating mock-ups in the browser, Andy Clarke’s Post on designing for modern browsers, and Drew McLellan’s Post on rgba color. My aim for this post is to simply explain what was covered in these posts and how it affects me. I will be writing a follow up post that goes into more detail about how I have begun to implement these things and what the results have been like.

I think Andy Clarke’s post affected me the most. I am pretty sure I have run across this idea before that we shouldn’t be designing for the lowest common denominator (IE) but Andy’s narrative just kind of hit home for me and pushed me to start practicing this method. To tell you the truth I feel quite liberated now that I can feel comfortable going to town using some of the CSS3 features like rgba color, box-shadow, and border-radius available in modern browsers like firefox, safari, and chrome and then just basically forgetting about internet explorer. Not to say that I completely neglect IE, but I’m just simply not going to bend over backwards anymore trying to use alternative techniques to make it look like other browsers. I now understand that it is okay for websites to look slightly different and that these new features will just work as a bonus to people who use more advanced browsers.

Drew’s post kind of went hand in hand with Andy’s because it simply explained how to use one the new features in CSS3 that IE doesn’t recognize. RGBA Color simply allows you to set a transparency value to any element in your html and it is incredibly useful. No more will I have to go into photoshop to create transparent tiles for every differently colored background element, I can just simply specify the rgb color value along with the alpha value in one line of css and voila, super awesome transparencies! Not only does this technique make life easier but it also speeds up page load times by reducing http requests and overall data transfer amounts.

As for Meagan Fisher’s post, I haven’t really had the chance to use her idea with a client yet but I have this feeling that it is going to make the design process much easier. Jumping over photoshop and actually creating my designs as I code is a brilliant idea. This method forces/allows me to start off creating clean base structures for my websites where I can focus on content layout and fundamental usability issues. This starting point also lets me bring the client in early on in the design process so that they feel included in the development, hopefully resulting in fewer dramatic changes 5 minutes before launch time. In addition, if there are changes, I will have the luxury, in most cases, of changing a few lines of CSS rather than recreating layers, drop shadows, rounded corners, etc in photoshop. I will, of course, still continue to start my design process in the sketch book and rely on photoshop and illustrator for graphic elements but I think the over all progression of the design will be greatly simplified.