Sitemaps

Sitemaps are always a little fun. You get to see just how many pages your site has and which ones are more important to you. But, they are really important for search engines. It helps the automated search spiders find all the pages you have and then they can gain a helpful perspective based on the last update and your priority ranking.

This is the website to check out if you want to learn more about Sitemaps: http://www.sitemaps.org/protocol.php

I usually do my sitemaps in PHP. So, I am going to break new ground here and drop some code on my blog. Since most of my sites are now PHP, here is what I typically use:

<?PHP header("Content-Type: text/xml; charset= UTF-8"); ?>
<?PHP echo "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n"; ?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
 <url>
  <loc>http://www.mydomain.com/</loc>
  <lastmod><?PHP 
     echo date ("Y-m-d", filemtime("index.php")); 
     ?></lastmod>
  <changefreq>monthly</changefreq>
  <priority>0.5</priority>
 </url>
 <url>
  same stuff here...
 </ulr>
 
 ... and add more urls as needed
 
</urlset>

Make sure you test the URL in your browser first, but then it should be good to go. You can let the search engines know about it in the webmaster tools or even add a reference to it in your robots.txt file ("Sitemap: http://www.mydomain.com/sitemap.php").

CSS: background-position

Today I discovered a new trick I can use for background images in CSS. It is based on the background-position property. This allows the designer to offset a background image used in an object (like a span or div).

I was looking at the images that Google uses in Gmail and noticed that some of their icons come all together in one larger PNG file. They form an array of icons. After some searching the web I landed on this article that explained how to select a single image from an image array: http://www.guistuff.com/css/css_imagetech1.html

Pretty neat. It reduces page load-time (because you load one image instead of multiple ones, and each file comes with overhead transaction data) and removes the need to pre-cache images for DHTML. A little bit of JavaScript and CSS and you're all set. It is going to be a handy thing to have in my design toolbox.