The topic of the segment was “Monetizing Your Blog”, which interests me as I have a project in early stages that could potentially sell ad space in the future. Here are some notes I took during the interview. I missed the last 10 or so minutes.

• You need to figure out how to build a site that brings people back for the quality content.
• Once you drive the traffic, then you can open up your master spreadsheet.
• Google Adsense is easy to drop in and you can potentially make money the next day. However, it looks tacky and can reduce a site’s trust.
• Charging a flat rate tends to bring in more serious buyers who will commit for a month than the CPM crowd who can be fickle.
• If you aren’t part of an ad network, you could use Paypal Subscriptions.
• [Question from chatroom]:
  Personally, I use the OIO Publisher plugin to manage my advertising. I set it up and forget about it. All I gotta do is approve ads when they are purchased and I keep all the money. Why would I use BuySellAds?
  With an ad network like BuySellAds, you get network value. Not only are people finding you from visiting your site and advertising with you directly, they find you through a reputable network.

Hear the archived interview at http://www2.webmasterradio.fm/press-this/2009/09/29/monetizing-your-blog/

• On my XP machine, I saw smooth text in IE7 but not Firefox
• Coworker 1 (XP) saw smooth text in IE7 and Firefox
• Coworker 2 (XP) saw smooth text in IE7 and Firefox
• Coworker 3 (Vista) saw smooth text in both IE7 and Firefox
• Friend (not in office) with Vista saw smooth text in IE7 but not Firefox

What is ClearType?

ClearType, according to Microsoft is:

an unprecedented innovation in font display technology that dramatically improves font display resolution and marks a genuine breakthrough in screen readability.

Sounds great, but Apple had very similar technology in 1976 with their Apple II computer – so it ended up being a lot of overhype for something that had already been estalished. In a nutshell, ClearType is a type of subpixel rendering. Instead of filling a pixel with a solid color, ClearType takes advantage of 3 sub-pixels within each pixel, and fills it with RGB values. So essentially you can think of an 800×600 monitor resolution as 2400×600. When rendering certain characters of a word that do not use all subpixels, ClearType will leave those su-pixels empty. My XP machine doesn’t any font-smoothing enabled, so the characters I see are jagged.

Notice that each pixel contains red, green, and blue subpixels.

So who has ClearType enabled by default?

• Users with Windows XP who purchase a new machine or perform a fresh install will not have ClearType enabled by default (Internet Explorer 7 and Microsoft Office 2007 will use ClearType)
• Users with Windows Vista who purchase a new machine or perform a fresh install will have ClearType enabled, but if they purchase the machine from a manufacturer, they may choose to disable this feature – most likely to save on processing bandwidth.
• Either of these might be blown to shit by an IT worker who may have good reasons to choose one or the other

Sources and further reading

Wikipedia – ClearType

Why Do My Windows Vista Fonts Look Horrible?

Enable ClearType on Windows (video)

Display Type & the Raster Wars

• Internet Explorer 74.04%
• Firefox 20.24%
• Safari 4.80%
• Chrome 0.32%
• Mozilla 0.27%
• Netscape 0.14%
• Opera 0.11%
• Mozilla Compatible Agent 0.03%
• Camino 0.02%
• Playstation 3 0.02%

Essentially, RSS is the “original” family of web feeds developed throughout the early 00s with the Atom specification being the “fresh face”, offering even more clarity around things like content types and date formatting. So really, there’s no difference that you should be concerned about. Many big sites will only offer their content through RSS 2.0 but Atom is technically the “better” solution going forward.

Credit to the web feed Wikipedia page for relaying most of this pretty useless information.

The default font, Monaco isn’t all that bad but it was time for a change. I’m now at 10pt arial but I will probably end up back at a small monospace face soon (Dreamweaver was onto something when they made Monaco the default).

It felt good to finally change that fucker.

Why do I consistently see Helvetica and Lucida Grande used for body copy on websites? Do these people not have PCs? Am I missing something here? They might look fine on a Mac but they look like doodoo on a PC with browsers that don’t give aliasing.

Look at Apple’s store as viewed in Firefox on a PC:

That looks terrible. Please use Arial or Lucida Sans Unicode so I don’t vomit when looking at your website.

Thanks.

Want to optimize your website but know nothing about how to go about it? Stop feeling like a bird-brain and start reading the rest of this post – the fundamentals are easy.

Since I work a 9-5 as a front-end developer with little SEO experience, I couldn’t really own any SEO projects. I could barely fill in the gaps when it would come up in conversation with coworkers.

Thankfully, my friend decided to let me use his business’s website as my guinea pig to learn and test things out. They are a dumpster rental company called Eric Z Disposal. The only rankings they had were from Google Adwords (paid), which is great but it burns up cash and anyone can compete with you at anytime by opening their wallet.

So I started implementing things I knew followed by things I learned along the way:

1. Use Hubspot’s Website Grader SEO tool - This is a good starting point that will point out such things like your lame meta info, lack of a 301 redirect, lack of incoming links, Google page rank, all the while comparing you with competitors. It’s free and takes mere minutes. Do it.

2. Create a sitemaps file. This is an XML document that makes it easier for search engines to cruise through your site. Here is an example sitemap, create the sitemap.xml file and put it in your root. Then tell Google
, Yahoo, Ask, and whoever else you did it.


<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
<url>
<loc>http://www.yoursite.com</loc>
<lastmod>2008-05-18</lastmod>
</url>
<url>
<loc>http://www.yoursite.com/about-us/</loc>
<lastmod>2008-05-18</lastmod>
</url>
<url>
<loc>http://www.yoursite.com/our-bitchin-tool</loc>
<lastmod>2008-05-14</lastmod>
</url>
<url>
<loc>http://www.yoursite.com/blog</loc>
<lastmod>2008-05-14</lastmod>
</url>
</urlset>


3. Create a robots.txt file and again, tell Google that you did it. This file will tell SEs what directories and pages NOT to look at. These could be private pages, bin directories, etc. An example:


User-agent: *
Disallow: /cgi-bin/
Disallow: /stats/
Disallow: /inc/


4. Use good Title tags. This is crucial. Don’t make all your Titles identical on each page. Target some rich keywords in there but don’t oversaturate it.

5. Always create new and interesting content that will be spidered. SEO is an ongoing task and a blog can help facilitate this. People will link to your content if it’s great and this will help Google recognize you as a site of authority.

6. Get inbound links with rich text in the anchor tag. See how I linked to my buddy’s website in the beginning of this post?

7. Use Google Analytics. It’s free and you can get a great read on who is coming to your site, from where, what keywords they’re using, if they’re a new visitor, connection speed, browser type, time on each page.

8. Create good URLs and directory structures. If you’re trying to optimize an antique car website, dont use structure like http://myantiquecar.com/website/index4.html. This is no good. Use some descriptive words in there – http://myantiquecar.com/dual-ghia/antique-resorations

9. Use CSS to reduce your front-end clutter. While it isn’t a big deal now (is it?), you should be building your website without tables but using XHTML and CSS. I revamped my buddy’s design in XHTML Strict 1.0. The less front-end garbage you have in your structure the better. This probably isn’t a big deal, I just wanted to say I wrote the site in strict 1.0.

10. Text always wins. Search engines can’t read images or flash (very effectively anyway. There are ways to include your content in flash, but try to stay away from heavy flash-use if you need to rank). If you must use a particular typeface for headers, use Sifr by Mike Davidson.

11. Leverage social media sites. Even if you start with the annoying ones like MySpace and Facebook. Mike Davidson wrote a good article on hacking a MySpace layout. Make your page match your branding. You might think it’s a bit dumb for your business, but it’s free advertising. Get your brand out there.

If you’re ambitious, you can then jump to StumbleUpon, Twitter, Virb, LinkedIn, del.icio.us, Mixx, and so on. But that’s getting more down the marketing road and that’s another post for another day.

How am I doing? Suggest some more tips for me? Correct errors I’ve made? Thanks.

The web developer toolbar Firefox addon by Chris Petrick is by far the one Firefox extension I would hate to be without. If you’re a developer, designer, user experience analyst, or an SEO, I highly suggest checking it out as it will ultimately save you loads of time. Here are my favorite uses.

1. Scenario 1 – Disable JavaScript
2. Scenario 2 – Disable Styles
3. Scenario 3 – Editing CSS on the fly
4. Scenario 4 – Populating Form Fields
5. Scenario 3 – Outlining Block Level Elements

First off, here is what the web developer toolbar looks like in your browser. It’s a short bar that appears below your navigation toolbar . You have the options to display only text, only icons, or hide the toolbar altogether.

Scenario 1 – Disable JavaScript

A good developer will always keep accessibility in mind when implementing applications. There are a good chunk of users out there who might not use an A-Graded web browser or just might browse with JavaScript disabled. The Disable >> Disable JavaScript option can help you test your development efforts to ensure a good experience for such users. User Experience analysts might use this tool when doing a website audit for a client – to check on accessibility.

Use this tool on digg.com‘s homepage to see it in action with its login. When JS is enabled, users get a slick experience when attempting to login. The text inputs fade into the page. When JS is disabled, users are taken to a login page.

Scenario 2 – Disable Styles

The CSS >> Disabling Styles feature is not necessarily a powerful resource, but rather gives me a quick assessment of the integrity of a website’s UI. If I notice plenty of left-aligned text, headines, and bulleted lists, I can make a fairly safe assumption that the UI was built with web standards and accessibility in mind. If I see numerous amounts of spacer and foreground images and text laid out in grids, the website is probably poorly coded or even worse using a table-based layout – not much forward-compatibility in mind here.

Style comparison for the The Market Theme’s website:

The Market Theme’s website degrades nicely, showing plenty of linked text and content.

Style comparison for the Papa Ginos website:

As you can see here, there are too many images files, no headlines or text in view. If you want to make your site as search engine friendly, do not use the Papa Ginos website as guidance. SEs need to read text – alt tags just won’t cut it.

Scenario 3 – Editing CSS on the fly

This is definitely one of my favorites. Don’t edit your css, save and then preview – see it all happen on the fly with the CSS >> Edit CSS feature. This is a great time saver. If I’m doing a lot of editing via this method, I always make sure to back up my changes in a text file on the side just incase.

Scenario 4 – Populating Form Fields

Ever make a long form and then have to test it, find yourself typing in every input/textarea/etc? Let the Forms >> Populate Form Fields do this for you. The only downside is the tool not knowing to input certain formats to appease validators like phone numbers. Laziness for life.

Scenario 5 – Outlining Block Level Elements

The Outline >> Outline Block Level Elements feature gives me a quick visual when writing XHTML. I can see what might be too wide or too short or what might have too much of a margin.

There are a lot more excellent tools such as:

• Display alt information for every image on the page – helpful for SEOs during a site audit
• Edit HTML on the fly!
• Outline custom elements – outline only the specific elements you want (a, i, div, etc)
• Resize window to mimic other resolutions
• One click links to XHTML and CSS validators

What’s your favorite Web Developer Toolbar usage?