Revised CSS Flyout Menus

Last month, I posted about a method to generate vertical multi-level suckerfish css dropdowns by revising the code from HTML Dog’s Son of Suckerfish. Well, this week I have been working to implement this code into a build that I am doing, and I figured out that my original css worked great in Firefox and Safari but not in Internet Explorer 6.

Looking at this in IE6, I saw there were gaps in the list items in the first and second tiers of the navigation, but not in the third. If you click on the example here in IE6, you should see what I am talking about. After much testing, it still does not make sense to me why that would happen in the first and second tiers but not in the third. But I basically figured out what is going on.

In IE6, although the nested lists are using position: absolute to remove them from the flow of the document, a 3px space appears at the bottom of each list item, where there should be no space at all unless a margin is being set.

To correct this, all I had to do was set margin-bottom: -3px for the specific list items in my IE6 only stylesheet. However, this creates another problem because as I said the problem only occured in the first two lists but not in the second nested list. So this fix causes the second nested list to be 3px shorter on every list item.

Luckily, all we have to do to correct this problem is reset margin-bottom: 0 in the list items of the second nested list in your IE6 only stylesheet. Now you will have flyout css menus that look as good in IE6 as they do in Firefox and Safari!


NoFollow = No Love?

Since the creation of the nofollow tag, there has been much debate over the validity of it. But, lately many SEO professionals are speaking out against it. Add Loren Baker’s rant against nofollow to the against pile. Loren gives 13 great reasons not to use nofollow, and he is absolutley right. I’ve never really said what I think about this, but I agree with him. I do not intentionally use it, but I use Wordpress so I guess my blog comments have it. I moderate all comments anyway, plus I have Askimet, so as Loren says it’s irrelevant.

Google created the nofollow tag with good intentions of stopping comment spam on blogs. Two years later, it hasn’t worked, and Google is now using fear tactics to get webmasters to use it by basically saying “use nofollow or your links won’t count.” This is the equivalent of SEO blackmail. (Hey, cool idea for a domain name!)

It’s time for a new solution. Google has a history of solving problems with software. So why are they relying on webmasters to solve a problem they should be trying to solve on their own? I would guess that the non-SEO educated has no idea what nofollow is anyway. Come on Google, wise up and listen to us. Nofollow does not work. Do what you do best and use the data you are already collecting to make your own determination on the authority of links.


How to Submit Your Site to Digg

Friday night, I submitted my first blog post to Digg. The next day it made it to the popular page and then proceeded to rack up over 2700 diggs in one day. As I write this, the post has over 3000 diggs and almost 300 comments and counting. It got as high as the number 3 technology story of the day. It is still on the Top in 24 Hours page. The post itself has 67 comments right now. So basically in this blog post I am going to tell you how I did it. It has everything to do with what you write about and knowing Diggers likes and dislikes.

Your Writing is Crucial

Now when I started writing it, it was not my goal to make the Digg home page. I never really even expected that to happen. However, once I began organizing the ideas in my post, I realized it was perfect diggbait.

To really get people to respond, you need to write about something controversial, and the more controversial it is, the better. Knowing what diggers like and dislike really helps you here. Among their likes are Google, Apple, Steve Jobs, Firefox, Linux, etc. Among their dislikes are Microsoft, Bill Gates, Internet Explorer, SEO, President Bush, “The Man,” big corporations in general, other than Apple and Google, etc. They also love conspiracy or the appearance of a conspiracy. That’s how I figured out that my topic was perfect for Digg.

Once you have your topic, write a title that makes a bold statement and back it up with the article itself. Remember that it’s the title that gets people to read the article, so be creative here. The information in the post itself should be factual, but you shouldn’t be afraid to suggest things that may or may not be true. Posing a question is a good way to appear controversial while not saying anything definitively, and it gets people to participate in the discussion and add their own ideas. It doesn’t have to be very long either, just long enough to back up your claim and get people interested.

In the digg submission itself, I made the title even more controversial. The title in your submission can be different from the article itself, but it still needs to relate to the article. They will not allow you to deliberatley try to trick people though, and if you do, you could possibly have your account banned. My point is I made the title on Digg more controversial than the title on the actual blog post, and it paid off big time.

The day of the week may also have something to with the success of your Digg. I submitted mine on a Friday night. On Saturday, it got 2700 diggs. I don’t know for sure, but submitting it on Saturday may have had something to do with it since it was a weekend and most people are not working.

The Newly Popluar Page

Once your submission is done, it goes to the upcoming stories page. From here you really only need about 30 or 40 diggs to make it to the newly popular page which is on the home page. That is what you have to do to really get it to take off. If it is good enough, it can really skyrocket, like mine did.

I really don’t know the secret to getting to the newly popular page though. I am fairly new to Digg, so here is what I did. I started searching for people that had submitted articles that were similar to or had covered topics in the past related to mine. I began adding those users as friends. I don’t know if that’s what did the trick or not, but adding someone as a friend lets them see your diggs. If they have similar interests, they are very likely to digg your story as well.

I think the crucial thing though was being the first one to the table with my story. No one else had pointed out what I was going to, and that seems to be the clincher to me. You need to search Digg before you post to be sure. Digg also alerts you when you submit stories that may be similar. They also won’t let you post something that has already been posted. If someone else has written about your story, you need to be substantially different to stand out. Usually that just requires a little thinking and is not too difficult if you try.

Digging Your Own Stuff

Remember that it does not hurt to digg your own stuff as long as you are digging other people’s stuff as well.

The Effects and Benefits of Digg

As to what the benefits to being on Digg are, I’m not sure there is a definitive answer to that. A big benefit is traffic, but sometimes your site can crash under the weight. Mine stayed up, fortunately. Also, the traffic is only temporary. But, you can see other benefits, such as an increase in the number of links to your site. This will increase the authority of your domain and could potentially drive future visitors through resulting search engine traffic.

In addition, you may see an increase in your site readership. Most diggers will just go to your site to read the post and then leave, but if someone really likes your site, they may become a regular reader. So you could notice an increase in repeat visitors, but nothing like the original traffic spike you will receive.

In conclusion, I think to do what I did, you need to be controversial, you need to cater to the digg community and you need to be first. If you do that, you may just have what it takes to be a Digg superstar. Really though, I did not find it that hard, and it may not even be that beneficial in the long run. I have to admit, it sure was fun though!


Adding a “Digg This” Button to Your Site

There are all kinds of ways to allow your users to submit your site to Digg. Digg itself even has a section with tools that allow you to do that. One of the ways is adding a “Digg This” button to your site.

Adding the Digg This button is pretty straight foward. All you have to do is add this piece of code into the page you want to get dugg.

<script src="http://digg.com/tools/diggthis.js" type="text/javascript"></script>

For blog users, this can be tricky. The reason is that you want the post to be dugg, but not usually the main url, so that people can go directly to the post itself. Every blog software displays the most recent posts on the front page. If you have this button on your blog post and it gets dugg, it will display how many diggs the post has. But when you look at the home page, it will show 0. This is because nobody has dugg the homepage, they dugg the blog post.

Digg itself provides a way to fix this problem. All you have to do is add an extra line of javascript with the URL of the dugg post in it, like this.

<script type="text/javascript">
digg_url = 'WEBSITE_URL';
</script>
<script src="http://digg.com/tools/diggthis.js" type="text/javascript"></script>

When you do this on your blog, the home page will show the correct number of diggs on your post, and it will display correctly on the actual blog post as well.

However, you may have a problem adding this code to your post in wordpress, as I did. I added the code to the post editor in wordpress, but it kept automatically escaping the single quotes in the javascript by inserting a backslash in front of them. This causes the javascript not to work once it is posted.

To correct this, I added double quotes instead of single quotes. This fixed the problem, and it now displays as it is supposed to.

On a side note, I would only add the “Digg This” button to your post after it has recieved more than a few diggs. It looks stupid if it only has one digg, and you were the one that dugg it.


No Boston PubCon 2007?

Okay, so I’m going to guess and say that it looks like there will be no PubCon in Boston this year. I know that the Boston PubCon is not really an annual event like the Las Vegas PubCon, but I went to the Boston PubCon last year. I really enjoyed it, and I was hoping there would be another one this year.

Last year’s was in April though, and I remember that by February it had been announced. Now that we are in February, and it has not been announced yet, I don’t think it will be unless they are planning it for sometime later than April. With the big one most likely being in Vegas again in the fall, I don’t think it will happen. I imagine that Webmaster World will be putting all their energy into that one. Well, maybe I will go to that one this year since it is supposed to be the best one.

I wrote about my experience at Boston PubCon last year, here.


Wal-Mart Does Not Support Firefox

On Tuesday of this week, Michael Arrington of TechCrunch pointed out on the TechCrunch blog that Wal-Mart had mistakes in the code of their brand new video site that prevented the CSS from loading in Firefox. The blog post has a screenshot of what it looked like. It would appear that whoever designed the site did not even check it in Firefox before launch, and reportedly the mistakes were easily fixable.

Well, today I just went to the site and found something that you will not believe. Not only has Wal-Mart not fixed the site, they put in a browser sniffer to shut all other browsers, except IE, out completely. Now if you go to the site, http://www.walmart.com/videodownloads, you see this message:

Our website requires the browser Internet Explorer version 6 or higher. It appears that you are using Firefox, Safari, or another browser that Wal-Mart Video Downloads doesn’t currently support.

So, rather than fix their mistake, which was apparently easily fixable, they decide to just say screw it and support no other browsers except Microsoft? I guess I should expect this from them, but come on. Wal-Mart is not living in the stone ages here. They are trying to compete with the likes of Netflix and iTunes. This is in effect a slap in the face to Firefox and Safari users, who in fact just might be the types of people that would use an online video downloading service, the very people you would think they would be trying to target.

Maybe the question we should be asking here is Wal-Mart somehow in bed with Microsoft on this?

Update: It appears Wal-Mart has taken the site down altogether. Now if you go to the site it says,

Site Temporarily Unavailable
The Wal-Mart Video Downloads store is currently unavailable due to temporary site maintenance. We apologize for any inconvenience.

Please try again later.

It looks like all this attention provoked some action on their part. It will be interesting to see how this plays out.

Update 2: Now it’s back to what it said at first when you look at it in Firefox.

Unsupported Browser
We’re sorry …
Our website requires the browser Internet Explorer version 6 or higher. It appears that you are using Firefox, Safari, or another browser that Wal-Mart Video Downloads doesn’t currently support. Click here to get Internet Explorer for free from Microsoft.

Thank You


SEO Profile Redesign

If you are not reading this blog through a feed reader, then you may have noticed the redesign. I just did it today, live on the site, in case you were clicking around on the site while it was going on.

It’s not very fancy, but then neither was the old one. I wanted to redesign it because I just recently started blogging more and I was getting tired of the old design. Plus, the blog has been live for over a year now, and I believe you should redesign your site every 1 to 2 years to keep it fresh. Anyway, I hope you like it. If you have any thoughts either way, let me know in the comments below. Thanks!


Use ColorZilla Firefox Add-on

If you use Firefox and you are a designer, you should be using ColorZilla, which is an add-on for Firefox. ColorZilla adds an eyedropper icon into the status bar at the bottom of your browser. When you click on it, the arrow turns into a crosshairs while you move it around on the screen. The cool part is that it displays the hexadecimal values in the status bar for whatever color the item is you are hovering on. In addition, it displays the RGB values, plus the CSS selector for the item.

It’s very useful because it will tell you color values right from from your browser, and it even works on images and backgrounds. There are many times when I want to color match something, or I am too lazy to fire up Photoshop and use the eyedropper tool. It really is a huge time saver. So, download ColorZilla today and get using it, if you aren’t already.


Simulating Position Fixed in IE

Good CSS designers know that one of the faults of Internet Explorer 6 is that it doesn’t recognize the CSS property position: fixed. This is a CSS property which allows one element on a page to remain stationary while the other element scrolls, resembling frames in a browser.

Our company launched a web site for Ty Pennington last fall. For this site, the footer, along with the transparent logo at the bottom of every page, not only needed to be stationary, but also always needed to align at the bottom of the page no matter how long the content or the browser window. This is a desgin challenge for any CSS designer.

Luckily, I found a kickass CSS hack that not only allowed me to simulate position: fixed in IE but also solve the other problem I had by always keeping the footer at the bottom of the page. It worked perfectly, but it currently breaks in IE 7. It may be fixable, but I haven’t taken a look at it yet to try and fix it.

Ty Pennington is a site we are really proud of. It uses lots of other tricks with Javascript and CSS to create a beautiful, branded work of art. So go on over there to see how it was done. Also click on the example above and bookmark it so you can do this in the future.


Free Keyword Discovery Tool

Saw this post on SEO Buzz Box about the free keyword tool from Keyword Discovery. This reminded me of the recent post I made about the new free keyword tool from Wordtracker, so I thought I would link to this one as well.

I haven’t used Keyword Discovery as much, as I don’t have a paid subscription to it. I have heard a lot of good things about it though. Currently, if you have sign up for a free account on their web site, you can get already 10 results for free with some functionality of the paid tool, similar to the version of Wordtracker’s tool which offers 15 results for free. The new tool is similar to Wordtracker’s new tool as well, also offering 100 results for free. One difference is that the KW tool has a “capcha” to prevent automated use of the tool.

After trying it out, it is very similar to the new Wordtracker tool. It seems to be very useful though. Plus, now you can directly compare results from Keyword Discovery and Wordtracker to see which tool you might prefer before you buy. And, it’s free. What’s better than 2 free keyword research tools in one week? You got it, 3 free keyword research tools in one week! Okay, so I don’t have a third one. If you hear of one, let me know.


« Previous Entries |

Most Popular Posts

Pages

Twitter Updates

Profiles