No Mod Required

Archive for the 'seo' Category

An Explosion of Links.

As long as you’re happy with 5 being the definition of an explosion :)

Craftsmanship

Markup & Style Society Talk - Bokardo

“For my talk, I picked something I’ve never talked about before: web craftsmanship. I chose this topic because I’ve been thinking a lot more about it since going out on my own last August. I also consider both Dan and Ethan craftsmen, obsessed with doing quality work vs. gaining notoriety or getting rich. So I thought it would be a good fit for the audience as well.”

Not the greatest slideshare, but the very thought of it speaks to me as I’m trying to improve quality across the presentation layer at work and getting people to think in those terms is a key to getting the work I want to see produced on a consistent basis.

Wayback machine

jwz - Happy Run Some Old Web Browsers Day!

jwz has resurrected a ton of old Netscape/Mosaic history, including the old Mosaic Communications Corporation web site and some ancient versions of their software (with which to browse it.)

SEO

Free Firefox Rank Checker - Check Your Google, Yahoo!, and Microsoft Search Engine Rankings : SEO Book.com

Pretty self-explanatory, no? I took it for a test drive this morning and it’s a fine tool.

A New Blog I Love

The Leila Texts

When you send a text message on the Verizon network, you can address your text by choosing a name out of your contact list, or you can address it by typing in a phone number. You can also type in a name. And if you type in L-E-I-L-A, then– bizarrely– your text will come to me.
This is a blog about the texts I have received. All of them are from strangers, intended for other Leilas, but obviously they missed their marks.

Just read it. It’s not a big time investment and it’s interesting/funny/weird/cool.

Creative Wins at PR

Message to Daniel_K - Sound Blaster - Creative Labs

Description cribbed from metafilter:

“A geek named daniel_k wanted to help his fellow Vista users. He created a set of drivers that would get their Creative sound cards working under Vista — something beyond the ken and expertise of Creative’s engineering team. Creative VP Phil O’Shaughnessy, however, took umbrage. The results? A PR disaster with hundreds of users pledging to boycott. “

It made slashdot, digg, reddit, etc. Nice work Creative!

Yahoo! Posts an Interesting Illustration of the Lang Attribute.

In the post announcing that Yahoo! search results now has natural language support, the YDN blog offers up two audio samples that illustrate a screen reader reading mixed language text with and without the lang attribute. As you can plainly hear, the lang="fr" attribute makes a great difference in the performance of the screen reader when handling mixed language text.

As they point out, the attribute also allows search engines to more easily parse stop words, so there’s an SEO benefit as well.

The lesson here? Polyglots unite! In using the lang attribute.

(Now I run off to add it myself to all the French,Italian, etc. phrases I’ve got littered around the site.)

Matt Cutts talking about ALT attributes

This is the second in his series of video talks published to the Google Webmaster Central blog. I eat this stuff up. I love detailed explanations like this. I feel like I’m armoring up with knowledge :) There’s not much new in this piece for me, to be honest, but it’s still worth a look if you’re not sure about the mysterious use of the ALT tag*.

*everyone calls them “alt tags”, but they’re really an attribute.

A Three Column CSS Layout Using Just an Unordered List

Why? For fun, of course- and to expand on a point I made today at work…

Some background- I’m working with a new guy who is not so savvy to modern HTML/CSS layout techniques and today, while talking to him about some potential techniques he might use for an upcoming site, I remarked - “With CSS you can make practically any element do whatever you need it to do, so don’t always assume you need to wrap things in a DIV* to make a layout work.” The point related to the dangers of DIV-itis and my desire** to pare down markup to its absolute (meaningful) minimum. But it also illustrates a basic idea that, once fully understood, opens up all sorts of options for problem-solving.

So, anyway, chewing on the exchange on my way home from work I was struck with the idea of doing a simple three column layout using nothing but an Unordered List. My original comment was about a UL used as a menu and tweaking it to behave like a bunch of divs (which was his original idea for the menu) or something, so I thought it might be interesting to go all out use a UL for the entire layout, tweaking the LIs in a whole bunch of different ways to suit my needs. If that doesn’t illustrate my point, nothing will.

And, yeah. I’m sure a bunch of people have already done this. It was still interesting for me to do so it was well worth the effort no matter how many people out there are yawning in my general direction.

And here it is, in all it’s List-y glory- A Three Column CSS Layout Using Just an Unordered List

Here’s the pertinent markup

<ul id="container">
<li id="header">header</li>
<li id="content">
<h1>Content</h1>
<p>Lorem ipsum dolor sit amet… Pellentesque in erat.</p>
</li>
<li id="right-sidebar">right sidebar</li>
<li id="left-sidebar">left sidebar</li>
<li id="footer">footer</li>
</ul>

And here’s the CSS

* {
	margin:0;
	padding:0;
}
li {
	list-style-type:none;
}
#container {
	margin: auto;
	width: 825px;
	border: thin solid #FF0000;
	position:relative;
}
#container #header {
	padding: 25px;
	height: 50px;
	width: 775px;
	border: thin dashed #999999;
}
#container #content {
	padding: 10px;
	width: 400px;
	margin-left: 200px;
	border: thin solid #0066CC;
}
#container #footer {
	height: 100px;
	border: thin solid #663300;
}
#container #left-sidebar,
#container #right-sidebar {
	border: thin solid #FF9900;
	position: absolute;
	width: 200px;
	top: 105px;
}
#container #left-sidebar {
	left: 0px;
}
#container #right-sidebar {
	right:0;
}

The sidebars are absolutely positioned- a technique I use because (a) I hate sidebars that stretch further than the content column and (b) I like to be able to push content further up in the source order so as to feed that stuff to search engines first. If it was an issue and one or both of the sidebars needed to drive the height and source order didn’t matter I could tweak it to satisfy those requirements. That said, this is my party so I’m going with the absolutely positioned sidebars :) Other than that, it should be pretty self-explanatory to anyone familiar with modern layout techniques. UL id=”container” takes the place of the traditional “wrapper” type DIV, the LIs take the place of the other section DIVs one might expect to find in any site that uses modern techniques and none of the actual CSS is all that different than what one might expect with a regular DIV based layout.

I know what you’re thinking- why is this even useful? To be honest, probably not. DIV’s are fine for this job. Separating sections of a site are what they’re designed for, so there’s no shame in using them for this purpose.

[devil's advocate]
There might be less “extraneous” markup with this technique since the UL is necessary as part of the list structure and the traditional div id=”container” or “wrapper” is only there for the purposes of layout. Also, the connection between the sibling LIs might be stronger semantically than the connection between the adjacent DIVs which don’t have any unifying structure. Other than those incredibly geeky points I’m not convinced there’s much to this beyond the thought experiment value of it all. Which is valuable. I’m just not sure I’m going to actually build any sites with this technique any time soon.

Or maybe I will.
[/devil's advocate]

Shout in the comments if I stopped making sense at any point in this post. I started yawning about thirty minutes ago so I can’t be sure of anything I’ve written in that time :)

*which isn’t to say I’m not down with DIV’s. I’m on the DIV train, I just know from painful experience that valid, table-less code with millions of nested DIVs can be just as miserable as any old school, nested table beast.
**which translates to the company’s desire since I’m driving the “how” of our front end practice

The Anatomy of a Search Result

Matt Cutts talks about how Google puts together their search results. Fascinating stuff (for me at least.)

via the Google Webmaster Central Blog

Layout update

Just a quick layout update here. The look is changed*, but more important to me are the adjustments I made to the source code itself and to the source order.

With the source order, I moved the sidebar that used to be over to the left way down in the source order- it used to sit at the very top of the source order. Now the first stuff that spiders (and users with screen readers) see is pure content. Those of you with the web developer toolbar can turn off styles to see the naked goodness of the site now. It’ll be interesting to see if the change enhances my search engine placement at all. Of course, I know the site is now a better, cleaner, experience for people browsing with screen readers and with text browsers, so that’s a bonus whatever Google thinks about my changes.

*honestly, this has been a to-do list item for something like six months. When I moved over to Wordpress as part of the site relaunch I didn’t put as much effort as I could have into the theme. As time went on and I started to really enjoy posting on the blog again, the shortcuts I’d made with the layout and with the blog markup started to drive me a little batty. Thankfully I was able to steal some time tonight to start in on getting this section straightened out.

More to come as the days go by :)

Books 2007 #13 Search Engine Optmization

O’Reilly Media — Search Engine Optimization More of a monograph than a book, this intro to SEO is a nice little primer on the sorcery that is Search Engine Optimization. A lot of it I knew already, but it’s still nice to get a complete overview like this. If you’re not familiar with the techniques and concepts, then I heartily recommend this thin download.

Display: inline-block is the bee’s knees. CSS 2.1

I was looking at the CSS 2.1 Candidate Recommendation today and notices that there’s a New ‘display’ value- ‘inline-block’. That caught my eye as I’m long actually familiar with the inline-block display value. I’ve used it a couple of times for IE-specific browser hacks and I’ve always thought it would be cool if it were picked up by Firefox. Hopefully now that it’s made its way into a candidate recommendation and, presumably a real specification, they’ll add support and then I’ll be happy- in a really nerdy way.

Oh… you want to know why?

Basically inline-block does what it sounds like it does. It’s an inline element (it’s displayed within a containing block and flows in the same line) that behaves like a block (which in practical terms means it can have explicit height, width, padding and margins, etc.) The one place I would use it all the time is in the all-too common “logo inline in a corporate footer” situation. Here are a couple of examples of ones I’ve implemented recently, so you know of what I speak.

From MSLifeLines – Offering multiple sclerosis (MS) education & support:

mslifelinescom.gif

From EForAllExpo.com:

eforall.gif

As you can imagine they’re both implemented with an image and a link. In the case of the EForAll site, something like this:

An <a href="http://www.idgworldexpo.com/"><img src="/themes/idg_assets/images/idg_world_expo.gif" alt="IDG World Expo"></a> Event

With inline-block, I could instead do something like this and I would have a nice computer (or human with a screen reader) sentence instead of some text with an image rammed in the middle obscuring the actual meaning:

An <a href="http://www.idgworldexpo.com/" id="idg-link" >IDG World Expo</a> Event

Here’s the CSS:


#idg-link {
background:url(idg_world_expo.gif) no-repeat;
display:inline-block;
width:150px;
height:60px;
text-indent:-9999px;
}

It’s a very typical image replacement, but with inline-block you can have an image replaced anchor behave just like an image. That’s useful to me. I approve.

Here’s a sample. IE6/7, Safari 1.2+ and Opera 9.+ should see this work (with some variation in Opera.) Firefox? Not so much.

Quantcast and Compete report similar findings, why is Alexa so far off?

drunkenfist.com ranks 105,631 with Quantcast

Interestingly, they also provide demographic information:

“This site reaches approximately 14,368 U.S. monthly uniques. The site attracts a more African American, more affluent, slightly more male than female, teen and young adult audience.”

Compete ranks me 92,116 with 15,802 US visitors.

Those numbers, at least in terms of visitors, are reasonably close to my actual numbers (according to Google Analytics.)

So why does Alexa rank me 525,696 (290,588 latest. But the above numbers are for May anyway and my traffic has increased since)? What are the other two sites doing that Alexa isn’t? Is it something to do with the demographics of the Alexa user?

Why, after over half a year, hasn’t Ask updated their index with my new URLs and content?

If you search for my site in the Ask.com search engine you get all of the old URLs and old content from the previous version of my site. Lot’s of .shtm and .htm extensions show up in the results.*That’s in spite of me (a) setting up permanent redirects to my new URLs and newly structured content and (b) setting up a valid sitemap.xml file and seeding my robots.txt with the proper autodiscovery instructions. Supposedly they support both, but I get nothing. The only stuff that does show up from the new site is my blog. Which is all well and good since I like this place, but my blog is not the focus of drunkenfist.com, so getting Ask to look at my newly formatted/updated content would be extremely beneficial for me.

Check it out and pray for me as I research this little snafu**…

drunkenfist.com site:www.drunkenfist.com - Ask.com Web Search

*That’s especially lame as the .htm files haven’t physically existed for probably 6 years.)

**Truly one of the great acronyms: Situation Normal: All Fucked Up