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.

PDF Creator

Whenever posting documents to the internet (or emailing them) it is always best to use PDFs. Using a PDF ensures that the document will look exactly like you intended it. If you use Word or Excel or something similar, there is always the chance that someone else wont have the same version or same fonts and that the end result will look very different. And, not everyone has the same software programs--Microsoft Office is expensive. But, Adobe Acrobat Reader is free! Also, it is generally more professional to send documents in PDF, such as invoices or proposals.

So, how do you create these PDFs without dishing out all the cash for Adobe Acrobat, the not-so-free version? I have been using the free PDF creator PrimoPDF for some time now. I really like it and it has not given me any problems. It creates great looking PDFs very quickly. It installs a new printer on your computer so that you can create a PDF from any program. But instead of something being printed physically it creates a PDF file that you can save.

Works great and it is free. Two things I value, as is apparent by previous blog posts. :)

Images

Images are very important to the construction of an appealing website. I wrote before about the use of great image software, like GIMP. But, we still need to get those great stock photos to round of a site.

There are some great sites for this, even for free pics. Flickr, for instance, is one of these free picture sites. But not all pictures are available for all purposes. Use Flickr's advanced search to find those that you can use. On the bottom of their search page, you'll see options for creative commons licensed images. You can search multpile sites at once using everystockphoto.com. Or, if you want the easy and high-quality route and are willing to pay a small fee, check out iStockphoto.

New Site - Search Engine Submission

Do you have a new website? Is it time to let the world know about it? Then submit it to the major search engines! And don't be fooled, this is not something you have to pay for. There are a lot of people out there trying to make money by submitting your site to search engines for you. You don't need to do this because it is really easy and straight forward.

According to Hitwise.com, the top 4 used search engines are Google, Yahoo, MSN and Ask. Almost 97% of all searches done on the internet are through one of these engines. So, these are the guys you will want to inform about your new website.

Visit each of the links, and you should be good to go:

• Google


• Yahoo (you'll have to make an account)


• MSN Live UPDATE new URL for Bing


• Ask (you'll have to make a sitemap)

Site Search Engine

This is my last post about free Google services (for now). This one is about Custom Search by Google. Searching is a very important tool for a website to have, especially for sites with a large amount of content. You can not have visitors getting frustrated and leaving because they can not find what they are looking for.

The problem is, search engines are not easy things to create. If you have ever seriously thought about the prospect, you know it takes a lot of time and energy to implement a good one. Instead, why not use the great search technology that Google has created right on your site?

Google allows webmasters to install code that will allow your visitors to search your site. They constrain all search results to the domains you choose so the results are specific to you. And you can integrate the search results directly into your own template, so it all has a very coherent look and feel.

PS. "Custom Search" is similar to but not the same as "Site Search," a commercial (i.e., not free) service offered by Google.

Google Calendar

The third blog post in my series of great Google freebies is Google Calendar. Google calendar is great for my wife and I. We both share a calendar and we can setup events to remind each other of upcoming appointments. It helps us communicate about our shared schedule.

Beyond this, Google Calendar is great for non-profits for two big reasons. First, everyone involved with a non-profit can have a shared calendar. This way everyone is on the same page and they are totally up-to-date with what is going on. You can also manage assets and room reservations through it, if you wanted. Just like with Outlook exchange server, you can see the busy/free calendar of your invitees when you try to find a good meeting time. And it is all free!

The second reason is that you can embed your calendar in your webpage. This is great for web designers. It takes a lot of programing to get a good calendar back-end up and running. Why not use what Google has done instead? You can do a simple embed of html calendar code (like this one) or you can completely customize the front-end while using Google's back-end. There are just so many options!

Google Calendar has worked well for me and saved me a lot of time. It is worth considering, especially with its low price tag (its FREE, if you missed that).

Free Email

The next Google service that I would like to highlight is hosted email. This is a lesser known service offered by Google, I believe. However, it is probably the most powerful and most beneficial free service available to non-profits! Google offers free email service for any domain. Non-profits also get enhanced services that businesses have to pay for. You can get as many email addresses as you want, the SPAM protection is amazing, and each account gets over 7 GB of space!!

Once you set it up you get an administrator panel where you can manage all account information. And even though it is Gmail, all of your email addresses will reflect your domain name (e.g., name@your-domain.org). You can also customize it a bit and use your own logo. Additionally, you will get chat and other Google applications automatically. It can really boost in-office communication and efficiency.

I have used this service on multiple domains. I have set it up for the First Baptist Church of Los Angeles, and it has been a dream for them. Major universities have also started using it. Fuller Seminary, for example, uses it for all their student accounts.

Check it out. I really think you'll like it.

Analyzing Traffic

Google has tons of great tools for webmasters. And the best part is that most of them are free! So, I decided to spend some time mentioning some of Google's free services. They are perfect for non-profits, ministries and whoever else is trying to save some money. This is the first post in a series on free Google resources.

The first Google service I want to mention in Google Analytics. It is a great statistics and web traffic analyzer available to the public. It has all kinds of nifty features and abilities. For instance, it will produce multiple world and country maps of your visitors, it outlines traffic flow, it details traffic sources, records visitor browser information and tons more. You can also set it up so that periodic PDF reports are sent to email addresses you provide--perfect for that monthly report.

It has one drawback: it is javascript based. This means you can only track web page hits, not image loading or anything else. It also means that anyone with javascript disabled will be invisible to the reports. However, with this in mind, Google Analytics is still an amazing resource that everyone should know about.

Virtual PC

As a web designer, I want to make my web pages look pretty in any browser people may use. And, one of the hardest browsers to test for is Internet Explorer 6 (IE6). Unfortunately, my Google Analytics show that a little under half of all IE users use version 6. A slight majority have switched it IE7. But not enough to forget about IE6 users.

To really be certain that my page will look right in nearly every visitor's browser, I test in Firefox, IE7, Safari and IE6. I figure this will cover 95% of my visitors, plus if it works in these there is a good chance it will work in the others (e.g., Opera, Mozilla, etc.).

The problem I ran into is being able to test a site in IE6 and IE7. You can't have both versions installed on your PC at the same time: Microsoft forbids it. To help us designers out, Microsoft has virtual hard drives (VHDs) available with IE6 installed. So, if you download Virtual PC (free) and the install the VHD for IE6 at http://go.microsoft.com/fwlink/?LinkId=70868, you can easily test your design with IE6 on the same computer that has IE7 installed.

There you go. But, this would all be a lot easier if everyone just upgraded to IE7! What are they waiting for?

Transfering Websites

I have transferred a few websites and domain names lately. Here are two tips that I think are worth writing down for now.

First, do things in the right order. If you are switching both the web host and domain name service, doing things in the right order will eliminate any downtime. Begin by starting your new hosting service and transferring your site's data there from the old host. Next, change your DNS to point to your new host. Then you can initiate the transfer of your domain. Doing it in this order will cause the switch to be seamless. I learned this the hard way. I found that after you initiate a transfer of a domain name it takes 5 business days and the DNS is locked during the period--no updates or changes allowed.

Second, there is a great tool that can help you change a site's script code from ASP to PHP. For instance, I had a site hosted on Windows Server and wanted to transfer it to a Linux server. The tool is free and it is called ASP2PHP. I have used it a bit and had some good successes. There are a few bugs, but it is a lot better than hand coding everything all over again.

That's all for now...

Image Editors

There are some good, free image editors out there. If you are on a short budget but want to produce some top quality images, check these out:

• Picasa2 - This is a really easy program to use and it is great for basic photograph edits. It handles some otherwise intensive tasks with easy (like shrinking and emailing images, exporting at reduced sizes, creating HTML photo albums). I also noticed that its file type compatibility is impressive (it was able to open a raw image file from my SLR).


• Paint.NET - This is a more advanced image editor that is really easy to learn. It has a lot of features, is constantly being updated by its creator, is pretty powerful, and anyone can learn to use it. There is also an online library with extensions if you want even more graphics tools. When I first got into web design, this is the program I used.


• GIMP - Now this is my favorite. It is even more powerful than Paint.NET and can create some amazing pictures. It rivals Photoshop in many ways. And, just like the others above, this one is free! There is a drawback, however. It is a hard to learn. It took me some real quality time before I felt comfortable with it. I suggest going to YouTube to watch some free tutorials on how to use it. This will give you a much needed head start on the learning curve and reduce some of the frustration that many experience. This is the only image editor I use now for web and graphic design.