Attn: Webmasters | Stop using Helvetica and Lucida Grande!

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.

SEO beginners – take action. It’s easy.

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.

How the web developer toolbar can help you cut corners

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?