Breadcrumb Navigation, Rich Snippets, HTML5 MicroData, and Google

Google has added an experimental HTML5 rich snippet / microdata format for breadcrumb content and hierarchy on a webpage that will enhance identification and search presentation on pages in Google search results. Google already includes breadcrumb navigation in their SERPS (since November 2009); this enhancement has GREAT potential for enhancing website usability and SEO.

Continue reading

Testing Your Site in Multiple Browsers and Browser Versions

In a perfect world, you could peacefully write the code for your site, knowing that it will look consistently beautiful and work perfectly no matter what browser or browser version you are using.

Sadly, in the real world of changing and inconsistent CSS standards implementation by the various web browsers and browser versions, it doesn’t work that way, so your site that looks great in Safari looks broken in Internet Explorer 7 and 8, maybe a little off in Firefox 3.5, and we won’t even go there about the train wreck that happens in Internet Explorer 6.

Testing for this can be a challenge without the right tools, and setting up multiple machines or virtual machines with multiple installs of web browsers just makes you want take some aspirin and go lie down somewhere quiet.

Fortunately there are some useful tools out there to help. A favorite of mine for testing Internet Explorer is the IETester, which can be downloaded at www.my-debugbar.com. ETester is a free WebBrowser that allows you to have the rendering and javascript engines of IE9 preview, IE8, IE7 IE 6 and IE5.5 on Windows 7, Vista and XP, as well as the installed IE in the same process.

Another great tool I found is at www.spoon.net This site allows you to run multiple web browsers and browser versions from the web, without having to install them. It looks like a nice tool for testing. Currently it offers the ability to test against multiple versions of Internet Explorer , Firefox, Chrome, Safari, and Opera.

And it’s free. Totally awesome.

Search Indexing and Rankings with Sub-domains and Load Balancing

Google treats subdomains differently based on how you treat them. If you treat the sub domains as separate sites with distinct and non-duplicated content, Google will treat them differently and index them differently.

You can see this on sites like wordpress.com, in which many people have unique domains, all with the variant subdomain names structured as yourblogname.wordpress.com. However, if you have a subdomain with unique content, such as for example a blog as a subdomain on your primary site www.yourblog.yourprimarydomain.com but you link heavily back to your primary domain’s content, Google will treat this as part of the main domain, the same as it would treat the content in a sub-directory like www.yourprimarydomain.com/yourblog/

To minimize the dilution for sub-domains that are not mirrors of the parent domain, each site or subdomain should contain as much unique content as possible, including meta-tag content, and pages targeting different keyword strings.

If there is duplicated content as a result of load balancing using www, www1, www2, and so forth, then this can adversely impact search results for both site sub-domains. This is because such uses introduce URL canonicalization issues and split page rank. Continue reading

Awesome css classes on a minimalist site design

This site is awesome and just chock full of win: http://noahstokes.com/
First: view the page and read the promo copy. Then view source, read the source, comments, and somewhat non-web-standards based CSS classes.

After a day spent working on a white-paper on coding HTML newsletters, that site was a breath of fresh air, and good for more than a few giggles. :)

The site author is actually the owner of a Web Design / Development shop in San Francisco, but that makes it even better.

@font-face, Access-Control-Allow-Origin and Cross-Origin Resource Sharing in Web Typography

Suppose you have a site, and you want to use a beautiful and awesomely shiny font that you have purchased on the site, but you also want to put that font on a separate domain or  server instead of in a sub-folder on the same domain, and you would like it to work on multiple browsers and browser versions and maybe even use the font on several sites, but restrict access to it to only those sites (ambitious, I know).  At this point, you will need to use additional code besides @font-face.

Note: You can view my demonstration page for this at http://coyotecreation.com/code/cross-domain-typography.php

Continue reading

HTML5 tutorials: Flamingos, Palm Trees, and Canvas. How can you go wrong?

So this weekend presented a choice: write a white-paper on coding electronic newsletters, or play with HTML5′s <canvas> feature. Tough decision. After much internal struggle and torment the choice was resolved in the following manner:

  • I’m drinking coffee out of my favorite summer coffee cup (with flamingos on it, and I love flamingos and beach scenes).
  • It’s summer, and I’m looking at my computer wallpaper of a beach (with flamingos on it).
  • I can play with code and make a picture of a beach with a certain pink bird on it, or I can write about coding nested tables and line-height. Now, nested tables do have a certain aesthetic appeal (hey, I’m a UI and electronic newsletter coder with a taste for “old school” concepts and, ok, so I have “issues” <joke>), but seriously. Let’s go with the bird.

You can see it’s development here: http://coyotecreation.com/code/html5-canvas.php

Continue reading

Code, Coyote Code Bits, and CoyoteCreation.com

Welcome to the  coyotecreation.com CodeBits blog. This is where I will be discussing this site redesign and recode, and adding links to my favorite resources for the languages and tools I use as a web designer.

The  front end of this site is being hand coded in HTML5 and CSS3…This began in the summer of 2010, when I realized that I had not updated the site in YEARS (busy on other projects)…. and the original site was… horrors…a splendiferous example of table based design, and a nice specimen of a site designed and coded in the first half of the 21st century…yikes…

Anyway, HTML5 is awesome, and is here NOW. You can already use it on your site , with the caveat that currently it is still being developed, and of course not all browsers fully support it (you will recognize the most egrarious offending non-standards-compliant browsers by the pretty blue “e” in the top left corner, plus a number between 1 and 8).

Coyotecreation.com is designed to degrade somewhat gracefully, which just means that if you are using a browser that does not fully support HTM5 or CSS3, you will have a less shiny experience with the visuals, such as square corners instead of rounded corners on some pages, and entirely missing content here and there.  So you might want to explore using a compliant browser, just to get all the pretty stuff.  If you are using  IE6 (or is it IE6.66?), I do not guarantee that ANYTHING will work, as I no longer support that travesty of a browser.