Don’t get me wrong, Blogger was great to use as I began my blogging journey. A freely-hosted blog is probably the best way to test the waters, so you don’t spend $10 on a domain and who knows how much on hosting for a blog that’ll be dead in a few months. It’s just that hacking functionality into Blogger, when that functionality can easily be gained through a WordPress plugin, gets old after a while. And besides, I had to do something with my new server .

The main problem with moving is that free services like Blogger give you very, very little control over the server. The best way to maintain whatever incoming links and “Google juice” you’ve built up, assuming you’re moving to a new domain, is to set up a 301 Permanent Redirect to the new blog. And, well, Blogger doesn’t like that idea .

The next best thing, though nowhere near as desirable, is to setup various client-side redirects, and hope that at least one of them works. This, of course, pretty much leaves behind whatever link juice you may have, but it’s better than users coming to a seemingly dead blog without some way to find the regularly-updated version.

Here’s what I did: throughout the course of using blogspot, I’ve been using “post pages”, which is essentially a permalink. You can setup self-hosted WordPress to use the .htaccess file to redirect users from the old URL version (with year, month, and trailing .html) to the new version used by WordPress. For details, see BlogBloke.com’s article (currently under construction, see the google cached version). To test if your implementation works (after importing all your Blogger posts), pull up an article on the blogspot blog, replace the blog.blogspot.com in the url with your WordPress blog’s base address, and hit enter. You should be redirected to that same article on your WP blog.

As for performing the actual redirect, there are several ways to go, including javascript, meta redirects, and plain links within your pages. I set up a simple javascript redirect that goes in the head of the blog template. This takes the current URL, replaces the blogspot part with the new blog’s URL, and sends the user there. Instant client-side redirect, provided the user has javascript enabled.

<script type='text/javascript'>
// < ![CDATA[

document.location.href=document.location.href.replace(/oldblog.blogspot.com/, "newblog.com");

// ]]>
</script>

I put this directly under the title tags, so it would be executed as soon as possible. Then, it occurred to me to move the Google Analytics tracker code above that, so that I would still receive stats from that site.
Note: The CDATA tags are from the fact that New Blogger templates use XML. Occasionally, I would get issues with using my javascript without CDATA tags surrounding the code. These may or may not be necessary.

In addition to the javascript redirect, I put a Text widget above the main blog content, alerting users to the new location, in case they’ve disabled javascript.

I wouldn’t recommend using a meta tag redirect, unless you can somehow incorporate the current article’s URL into it. You don’t want to auto-redirect the user from the article they want to read to the homepage of your new blog, even if you give them a 6-second warning. It’s just downright inconsiderate. If you can’t “seamlessly” redirect them, tell them how they can get to the new place, and leave it at that.

Once you’ve got the web-based redirects working, you need to take care of your RSS readers. If you used Blogger (which, since you’re reading this, I assume you have), check out their RSS redirect service. If you’re using FeedBurner, it’s almost as simple. FeedBurner has acquired a FeedBurner WordPress plugin called FeedSmith. Simply install the plugin, re-burn your FeedBurner feed (”Edit feed details” from your feed’s dashboard, and enter your WordPress feed, which should be at http://blog.com/feed/), and enter your FeedBurner URL in the appropriate field in WordPress’s Settings → FeedBurner page. Your existing readers shouldn’t notice any change (they may receive duplicate entries of your recent articles), and any future subscribers will be redirected to your FeedBurner feed.

I find this to be an interesting approach to multi-column layouts. Better yet, the author claims that it works in all major browsers on the three major operating systems.

However, are ordered lists the proper elements to use in this case? Is it “semantically correct”? What about unordered versus ordered lists? It’d be terribly simple to convert the layout to work with unordered lists, but which is more “correct”.

Regardless of correctness, though, “no floats, no divs, no clears” is rather appealing.

The last two times I’ve seen it used were in articles about creating a tableless photo gallery and making a CSS block nav menu. In both instances, the br was used to drop down the descriptive text to the next line. In both instances, a span surrounding the descriptive text, and with its display set to block, does the exact same thing.

I suppose an argument could be made about users with CSS turned off. In my opinion, though, if you have CSS turned off, you’re willing to deal with a few minor inconveniences. If you’re that worried about them, throw in a space before the span for readability. And if you really insist on giving them the extra lines of text — there’s always the naturally-block-level <div>.

And what about screenreaders? I doubt they’d be affected either way (it is whitespace, after all — right?), but I really have no clue. Perhaps someone who uses a screenreader could tell me, after chewing me out about my own blog’s (actually Blogger’s) screenreader-friendliness.

The idea behind this event is to promote Web Standards. Plain and simple. This includes proper use of (x)html, semantic markup, a good hierarchy structure, and of course, a good ‘ol play on words. It’s time to show off your <body>.

While I would love to participate in this, I wouldn’t recommend it for Blogger users. The building blocks of Blogger blogs, widgets, produce all sort of irrelevant divs and such that are used exclusively as CSS hooks. Aside from the fact that the underlying code is NOT semantic, disabling styles on Blogger sites (well, this one anyway) is NOT pretty (or, for that matter, usable). If you must see the results of such an inadvisable act as disabling CSS, you can (using FireFox) go to View -> Page Style -> No Style. This will disable styles for the current page (or the current tab, I’m not exactly sure).

So, to reverse Dustin’s little play on words — sorry, you don’t get to see my <body>

Don’t have Photoshop? Check out the GIMP! I’m hoping that the PSD file is GIMP-compatible. You could try to convert it one way (using an online service) or another (directly in the GIMP),but there’s always the issue of unsupported layer effects getting messed up.

And, no, this is not an AFD trick. At least, I hope it isn’t…

Why have a favicon? Kiseki.co.uk puts it well:

A favicon can help people identify your site quickly and easily in, say, a long list of bookmarks….It is only a small detail, but it can be useful for people to recognise your site.

A favicon is an instant visual cue that, when a visitor sees it, conjures your website in their minds. As AbstractPromotion.com says, “If you don’t have a favicon, your users will forget about you”.

Making a favicon is fairly straightforward: churn up your creative juices, fire up the gimp, create a new 16×16px or 32×32px image, brand away, save as an ICO, GIF, or PNG file, then upload the image to a file hosting site. I personally enjoy Village Photos’ free account, though there’s always PhotoBucket, ImageShack, or Google’s own Picasa service. After the image is web-accessible, add the following lines to the <head> section of your blog HTML template:

<link href="http://host.com/path/to/image.png" rel="shortcut icon" type="image/png" />
<link href="http://host.com/path/to/image.png" rel="icon" type="image/png" />

And, voila! You should obviously replace the href and type attributes to fit your situation. For type, use image/png for PNG, image/gif for GIF, and image/ico for ICO, in case you were wondering

Why two nigh-identical tags? To answer a question with a question, what browser has, in decades past, caused us all so much pain? That’s right. It seems that older versions of IE need the “shortcut icon” link just to see the favicon image…whether or not they decide to display it.

According to the W3C, the rel attribute’s value should, “officially”, be “icon”. Interestingly, they also recommend putting a “profile” attribute in the <head> tag, “to define what the ["icon"] value means”. Their version:

<head profile="http://www.w3.org/2005/10/profile">
<link rel="icon"
      type="image/png"
      href="/somewhere/myicon.png" />

Though I don’t know for sure how well this will make IE6 behave…if such a thing is indeed possible.

Enter BrowserShots (currently version 0.4 beta 2). What is browsershots?

Browsershots makes screenshots of your web design in different browsers. It is a free open-source online service created by Johann C. Rocholl. When you submit your web address, it will be added to the job queue. A number of distributed computers will open your website in their browser. Then they will make screenshots and upload them to the central server here.

The process is very simple: point your browser to BrowserShots.org, enter your website’s URL, check off the browser/OS combinations you want to check it in (there are a LOT of choices!), set any optional settings, and click “submit”. Optional settings include screen size, color depth, javascript support, java support, and flash support. Once you click submit, your requests are placed in a queue.
In my experience, the wait time to receive all requested snapshots (mainly using the top browsers on all three platforms) varies between 3 minutes (last night) and 30 minutes (estimated time as I write this post ), though for $15 (10€), you can get priority processing. The snapshots are available for 30min (or more, if you want to extend it), and can be viewed as they are taken (you don’t have to wait for the whole batch to finish). Refresh your “Website Overview” page to see screenshots as they are uploaded. On the Website overview page, you also have the opportunity to download a zip file containing all snapshots that have been taken so far.

Once a screenshot has been taken and uploaded, you can click on its thumbnail to view the details of the browser and OS the snap was taken on, as well as a full-size screenshot of the page. Details include browser, engine, javascript capabilities, java capabilities, flash capabilities; “factory”, sponsor, hardware, and OS of the machine that took that snapshot; dimensions and file size of the screenshot; and various timestamps related to the screenshot.

Granted, you can’t check website behavior (javascript animations, interactions, and such), but for those without access to different operating systems and different browsers, this is a very useful tool for cross-browser compatibility checking.

Browser Shots

Over my spring break, I decided to spruce up my blog a bit (read: redesign). Unfortunately, I am design-challenged and too cheap to pay someone to create a new design for me. So I started perusing the designs available at OSWD, and found a nice template called Blue Spring.

After finding, downloading, and familiarizing myself with the template’s HTML and CSS, I set about hacking it into Blogger XML submission. It was mostly an effort of looking at my existing template, as well as the generated HTML, and revamping the CSS to support the structure produced by the Blogger widgets (mainly the Blog and Header widgets).

After combining HTML and CSS into one XML file and making sure the CSS supported all the widgets one might want in the sidebar, I set about “making it customizable”. Not everyone likes to muck about in the CSS code — some (most?) prefer to use Blogger’s “Fonts and Colors” tab to do what they can. Supporting this was a simple matter of pulling out all the major colors and fonts into skin variables. After that, I made sure that all the widget sections had the proper settings.

Now, a “how to” on usage. In the original template, there were designated spots above and below the header for links, namely “navigation” and “other”. I have left these as two empty sections, with a limit of one widget each. They are optimized for the “Link List” widget, but, as you can see by the search bar I’ve placed at the top, you may be able to fit other widgets in them. Beware when putting something other than a LinkList widget in the bottom slot, though — it can seriously mess up your layout (and can usually be fixed by removing the widget).

The “Page Elements” layout is slightly a mess; as I have no clue how to modify the XML file to fix this — without melting the layout — you’ll just have to deal with it The “edit” link for the top LinkList section is hidden by the logo. To get around this, move the widget to the lower slot (or a slot on the sidebar), edit it, then move it back.

Before uploading the template to your blog, be sure to upload the images to a hosting service, and replace all images used in the template with the appropriate URLs. Searching the XML file for “images/” will show you the images to be replaced. If you have a favicon for your blog, find the following section:

  <!-- link href='#favicon-url-here' rel='shortcut icon' type='image/gif'/>
  <link href='#favicon-url-here' rel='icon' type='image/gif'/ -->

Uncomment it, and replace “#favicon-url-here” with the URL of your favicon. If you want a small RSS icon to the right of the bottom LinkList section, find this section:

        <!-- span id='feedlink'>
          <a href='#your-rss-feed-here'>
            <img alt='Subscribe' src='images/rss.gif' />
          </a>
        </span -->

Uncomment it, and replace “#your-rss-feed-here” with the URL of the feed you want visitors to subscribe to.

As the devil is in the details, you will, more likely than not, come across issues if you try to add custom or third-party code to the sidebar (or any other part of the template, for that matter). The CSS has been tweaked to make most of the official Blogger widgets look good; anything unofficial is just that, unofficial. Please keep in mind that I am not your personal HelpDesk, nor will I likely have time to help everyone “fix” their blog. There are Blogger help forums, as well as HTML/CSS help forums, that will be more than happy to help you, if you ask.

For you web standardistas out there, I don’t know if the Blogger engine puts out standards-compliant code or not, but almost any Bloger blog you try to validate will turn out hundreds of errors as such, I didn’t quite worry about making the template standards-compliant. If it is, it’s completely on accident The theme does NOT render properly on IE6-. Seems to work fine on IE7, IE8 is unknown.

As always, with anything remotely related to technology, BACKUP!!! Go to your blog’s layout, select the “Edit HTML” tab, and click the “Download Full Template” link. Save the XML file to your computer, so you have a backup to restore from if you prefer your old template.

The template’s footer (and some comments in the CSS) credits the designer, DCarter, and the one who converted it into a template (Templater?), me. If you do use this template, please leave this info intact.

[ 5/11/08 ] Update: Turns out the first version would break when text size was increased, if you had menu items. Fixed by adding overflow:hidden; to the first #main-wrapper declaration. Still doesn’t work in IE6. Also added overflow:hidden; to the #sidebar declaration, and the layout now mostly works in IE6 (there are still a few quirks, but it’s usable). The sidebar is strangely displaced in IE5.01 and slightly off in IE5.5 and IE4.01 according to browsershots.org, but the template now supports “all major browsers on all major operating systems”.

Additional links:
Download the Blogger template
OSWD: Blue Spring template
Blue Spring WordPress template
Open Source Web Design
The header image I use

This template featured at The Blogger Templates

Section targeting allows you to suggest sections of your text and HTML content that you’d like us to emphasize…when matching ads to your site’s content. By providing us with your suggestions, you can assist us in improving your ad targeting. We recommend that only those familiar with HTML attempt to implement section targeting.

To implement section targeting, you’ll need to add a set of special HTML comment tags to your code. These tags will mark the beginning and end of whichever section(s) you’d like to emphasize…for ad targeting.

The HTML tags to emphasize a page section take the following format:
<!– google_ad_section_start –>

<!– google_ad_section_end –>

So, essentially, to super-target your ads, just wrap the relevant content in these special HTML comment tags. For Blogger blogs using the XML templates, however, it’s a bit trickier. More likely than not, you’ll want to target your ads to the content of your blog posts. To do so, it would appear obvious to wrap the <data:post.body/> Blogger tag with the appropriate comment tags, like so:

<!-- google_ad_section_start -->
    <p><data:post.body/></p>
<!-- google_ad_section_end -->

The problem is, Blogger’s template engine strips out all HTML comments contained within <b:includable> tags. Fortunately, Blogger themselves have a solution to this issue: <data:adStart/> and <data:adEnd/>:

<data:adStart/>
    <p><data:post.body/></p>
<data:adEnd/>

These tags will be expanded by Blogger into the desired HTML comments, allowing you to super-target your AdSense ads.

Beware of being too specific in your targeting, however. Google has put in measures against “keyword spamming” your ads:

Include a significant amount of content within the section targeting tags; including insufficient content may result in less relevant ads or PSAs. Please also be sure only to emphasize significant sections of your site’s relevant content, since it’s against our program policies to the ad targeting to result in ads that are not relevant to the content of your pages.

That means no exclusively targeting your post titles or post tags.

Also of use are the “ignore tags” that go hand-in-hand with the targeting tags:

You can also designate sections you’d like to have ignored by adding a (weight=ignore) to the starting tag:

<!– google_ad_section_start(weight=ignore) –>

This is good for topic-irrelevant content that appears on pages, specifically the content-ridden sidebar(s) that almost every Blogger blog has. Simply wrap the sidebar div in these tags to de-emphasize its content.

The way I set up my ads was to enable per-post ads (blog layout -> page elements -> click “edit” on the “Blog Posts” element -> check “Show ads between posts”), then move (only!) the <data:adCode/> line to the desired position within my post template, after the fashion of an article on Woork. I then removed all Blogger-added adStart and adEnd tags, and placed my own around my <data:post.body/> line, as specified above. I’ve found it works rather well on the individual posts’ pages, though it seems to get a little confused on the front page. This is understandable, since there are multiple targeted content sections to process on the homepage, all with different content.

After specifying the targeted sections, I wrapped my sidebar content in the ignore tags. In my template HTML (no need to “expand widget templates”), I searched for the sidebar section:

<b:section class='sidebar' id='sidebar' preferred='no'>
...all the various widgets...
</b:section>

And wrapped the entire section in the ignore tags:

<!-- google_ad_section_start(weight=ignore) -->
<b:section class='sidebar' id='sidebar' preferred='no'>
...all the various widgets...
</b:section>
<!-- google_ad_section_end(weight=ignore) -->

And, voila, ads that are more relevant to my content! Enjoy!

“What makes a well-designed website?” That’s quite a question.

As a dabbler in web design, I would say a well-designed website is “good-looking”. It should look somewhat elegant. The “Web 2.0 style” — glossy buttons, spacious openness, minimalistic simplicity, and copious use of gradients — comes to mind. I can’t think of any sites that strictly adhere to all these points, but DynamicDrive is a good-looking site.

As an HCI-minded individual, a well-designed website is made by more than its layout. A well-designed website makes it obvious what the site’s purpose is, what can be done on the site, how to go about doing it, etc. Again, simplicity is king, and clutter is sin. Content is easy to skim and understand. The layout does not make it difficult to navigate. If a feature breaks, the site will either gently tell the user so, and make it easy for the user to report the breakage; or the site will function in such a way that the user doesn’t notice the difference, and the developer will be alerted. I think Digg is a fairly usable, well-designed site.

As a web developer at heart, a well-designed website is all in the code. Separation of structure, content, presentation, and functionality is something to be strived for. It should be built as follows:

1. First build a mock page (with the final site’s design in mind) which contains either mock or real content, and only structure-oriented HTML markup. Presentational markup is sin This page is not design-oriented; its only purpose is to structure the page’s content in a semantically meaningful way. Any tags that do not directly relate to the structure and/or content of the page should be struck down with a flaming sword of death. Organize things in such a ay that they flow logically along the page.
2. Develop the CSS in an externally linked file. Introduce any design-specific images through the CSS, if possible (and it should be possible). Strive for cross-browser compatibility within the CSS, making the site look as similar as possible from one browser to the next. If any additional markup is required for the design of the site, the CSS should be developed to make the site look good without it; if still necessary, the necessary markup can be added through the next step. Use what you have to get what you want.
3. Develop the functionality (using JavaScript) in another externally linked file. Nonintrusive javascript should be used, progressively enhancing the site after it has loaded. Nonintrusive javascript should also be used to add any necessary additional markup to be used by the CSS. Again, use what you have to get what you want.
4. If possible, convert the finished page layout into a template, and use a server-side language to fill it with dynamic content.
5. Finally, when all is said and done, pull up the page in a browser, and make sure everything works. Turn off javascript, refresh, and make sure everything works. Turn off css, refresh, and make sure everything works. Then browse the web for a while….and see if it works

According to these steps, a well-designed website will work across browsers, degrade gracefully in older browsers, respect the wishes of those with Javascript turned off.
There are lots of websites that use this methodology (using only semantically-meaningful html, etc). One well-designed website in this case is Dynamix Labs. It doesn’t seem that they use any javascript, and if you turn off CSS, the site is still very readable.

As a user, I want information, and I want simplicity in doing what I want to do. A lot of the time, I want information that I can talk about in my blog. I use google as my main go-to source for finding things. If I find a site that gives me good information on a regular basis, I want to be able to subscribe to its RSS feed, or something similar. If I find a site that I come back to on a regular basis (whether I be forced to, or do so of my own free will), I want to be able to customize my experience on that site. I want to be able to change the colors, the landing page content; anything and (usually) everything, I want to customize it to better serve my way of doing things.
One service that I use on a daily basis is Google Reader (you’ll have to sign in to your google account), a web-based RSS aggregator. It features “folders” that you can use to organize your feeds, drag-and-drop re-ordering of feeds, and very easy-to-use methods of subscribing and unsubscribing from feeds.
Another service that I use regularly is Netvouz, a social bookmarking site. I chose Netvouz over other bookmarking sites because of its folder organization feature. You can organize your bookmarks according to category (and sub-category) and make certain bookmarks private. It’s also easy to delete or edit my existing bookmarks, and really easy to add new bookmarks using the Netvouz firefox extension.

I must say, though, that my most frequently used and favorite thing is FireFox. It is customizable in (almost) every way possible; its functionality is infinitely extendable through extensions, which anyone familiar with XML and Javascript can write. It has excellent support for standards; the upcoming FireFox 3 is said to have passed the Acid2 test, which is huge for web developers.

As you can see, from my point(s) of view, a well designed website can and should be many things to many different people.

So, what do you think? What makes a website “well-designed”? What are some examples of well-designed websites?

Note: References to certain things “being sin” should not be taken literally. Putting presentational markup on your page will not send you to hell. Nor will avoiding clutter send you to heaven. These are just my personal pet peeves