Blaze Blog

Archive For: Development

Nov9

Changing Domains with a 301 Redirect

By Andy in Development, Projects

When I moved from my old “cssdev.com” domain to “blazenewmedia.com” I didn’t want to lose my search engine rankings, indexed pages, or bust old bookmarks. Here’s how I did it.

301

Firstly, my biggest problem was I used Wordpress for my old blog. This site runs on Textpattern (for now), so all my old post archive links from Wordpress don’t match the same format as the their Textpattern alternatives.

Here’s an example. When someone visits an article from my old site, they might hit up the following address:

http://www.cssdev.com/archives/2006/03/19/css-tweak/

Now, in Textpattern this same article can be found at a much simpler link:

http://www.blazenewmedia.com/articles/css-tweak/

So, how can I make my old Wordpress installation forward people to a new Textpattern formatted link, while still saving my search engine rankings, and ensuring the new page gets re-indexed in the same position?

301 Redirects to the Rescue

By sending a “301: Moved Permanently” header to the browser, it’s possible to tell anyone who visits my old Wordpress installation that the content has moved for good.

Not only that, search engine spiders will follow this redirect and re-index all of my pages in place of the old ones. This preserves search engine rankings and prevents people from seeing a whole bunch of dead links when they find my old site on Google.

To get this to work with Wordpress, all I had to do was place a few lines of PHP code into the “index.php’ file in the root of the site. This file is the hub that all Wordpress pages run through.

Here’s the PHP code I used to send a 301 redirect:

header("HTTP/1.1 301 Moved Permanently");
header("Location: http://www.blazenewmedia.com/blog/");
die;

That solved redirecting, but that didn’t solve my problem with incompatible URLs between Wordpress and Textpattern.

To fix this problem, I needed to grab the page that the user had requested, reformat it so that it matched Textpattern’s formatting, then forward them to the new link.

This was done with the following code:

/**
 * Get the requested page: eg /archives/2006/03/19/css-tweak/
 */
$requestedPage = $_SERVER['REQUEST_URI'];

/**
 * Split the requested page
 * into and array of sections
 * using the "/" as a splitter.
 */
$reqArray = explode("/", $requestedPage); 

/**
 * Check to see if the second, third
 * and fourth sections (starts at 0)
 * are numbers, if they are we can
 * assume these are dates.
 */
if( is_numeric($reqArray[1]) &&
    is_numeric($reqArray[2]) &&
    is_numeric($reqArray[3]) ) {

 /**
  * Send the correct 301 header.
  */
 header("HTTP/1.1 301 Moved Permanently");

 /**
  * Send them to the new textpattern
  * formatted URL. We know that the last
  * section of the URL is the same (/css-tweak/)
  * so we can append that to the end of the URL.
  */
 header("Location: http://www.blazenewmedia.com/articles/" . $reqArray[4]);
 die; // stop anything else from executing.
}

I’ve had the new site up for just over a week now. Google has already almost completely re-indexed my new site. The links to my old CssDev site are reducing by the day. Soon, all the old CssDev links will be completely converted over to Blaze. It works!

If you’re looking to change your domain, or move your site, 301’s are definitely the way to go. With a little PHP knowledge you can also handle redirecting old bookmarked links, even if the formatting has changed. For me, 301’s have worked flawlessly.

Nov3

Targeting IE 7.0

I’ve only found a couple of ways to specifically target IE 7.0 in my code so far. It’s hard to work out how to fix something in a browser that is so new and I have very little experience developing for.

IE7The two main ones for me are conditional comments and the “first-child+html” fix found by Mark Hammond.

Conditional Comments

Conditional comments are small scripts that you place in your HTML. They check for the version of IE being used, and include whatever you put between the comments if conditions are satisfied. Here’s an example:

<!--[if IE 7]>
 Include my IE7 only stylesheet here.
<![endif]-->

Personally, I tend to stay well away from conditional comments. The idea of putting small scripts within HTML comments makes me shudder. It’s also basically a simple form of browser sniffing, and really, I don’t want to go back to those days thank you very much.

The “first-child+html” workaround

For now, my solution of choice is a little bit of CSS trickery to target IE7 specifically. I’ve used this workaround on this very site. I was having trouble with the logo being too close to the top of the window in IE7. What I wanted was to add an extra 20px of padding to the top of the logo in IE7 only:

#menuBar {
  float: right;
  display: inline;
  width: 240px;
}
   /* For IE7 */
   *:first-child + html #menuBar {
     padding-top: 20px;
   }

This worked a treat, and is perfect for the small fixes I need right now.

Mark Hammond goes on to note that this fix only reliably works when your page starts with a doctype and html element together (which is 99% of the time I would bet).

This of course exploits a bug in IE7, so there is no guarantee it will work in future updates. For now though, it provides the quick fixes I need until I can explore the browser further.

Who knows of any other workarounds for IE7? I’d be interested to hear how you are fixing your sites up to work with Microsoft’s latest.

Oct23

Using CSS Tweak for Deployment

A few people have asked me recently how and why they should use CSS optimization tools like CSS Tweak.

I think there is a general misunderstanding about when these tools should be used, and how they can benefit your site overall. The issue for most people is that once they have optimized their CSS, it is completely unreadable and impossible to update. Optimizing the local development copy of your CSS isn’t really the right way to use the tool.

The idea of CSS Tweak is to provide optimization for deployment. So, this means you would keep a development copy of all your CSS files on your local machine. Then, when you are ready to upload your site, run the CSS through CSS Tweak, and upload the optimized files. This way, you have a perfectly maintainable copy on your own machine, and an identical copy on the server, only fully optimized, reducing your site load times and bandwidth usage.

That’s all really, I just thought I’d talk about this briefly, as it seems to be a recurring question. I don’t think I made this all that clear when I first released CSS Tweak, so really it’s my own fault! Has anyone been using CSS Tweak in this fashion already?

May31

CSS Tweak Dashboard Widget

The first release of the CSS Tweak dashboard widget is done! Now you can optimize your CSS from the comfort of your Mac’s desktop.

Screenshot 1This is the first widget that I’ve ever made, it’s been really great to get into the guts of how they work.

For those of you that have never seen inside a widget, they are simply a combination of HTML, CSS and Javascript. So if you are a web developer, you most likely already have the knowledge and skills to make a fully functional dashboard widget.

Actually, I cheated a little with the CSS Tweak widget. Well, not so much cheated, but I didn’t code the whole thing in Textmate. I managed to be one of those lucky people who had an installed version of Dashcode on their new MacBook Pro. I used Dashcode to develop this widget from start to finish and I really only have great things to say about it.

Despite the program crashing a fair bit (which is understandable considering it is a pre/non-release version) it provides wysiwyg and debugging features that go a long way to help you set up your widget and get it working exactly how you want it. Plus, it has a gorgeous interface as you would expect from an Apple developed tool. ;)

Anyway, more about the widget itself. The widget will accept CSS files dropped onto it (which is annoyingly unintuative, but Apple fails to provide file input any other way). Once you drop a CSS file in, you are presented with tweaking options. You can choose to enable or disable any of the options, just the same as on the CSS Tweak website. Once you hit tweak, the CSS file is sent to the CSS Tweak server, tweaked, and then sent back and saved in the same location as your original file.

I hope that people find this tool useful. It will definately save time not having to visit a website, you can simply drop your file in from anywhere and you’re done.

This is of course the first version, and there will no doubt be a few bugs to iron out. Please let me know via email (andy [at] this domain) if you find anything out of whack. I should mention, you do need to be connected to the internet for this widget to work.

Download Download Widget

May17

Durable: Best Overall Design!

Durable has been named the best overall design in the Wordpress Theme Competition.

Arena WPI am very honored to have been named the winner by the judges as the field contained many great designs this time around.

Well, actually to be honest I am a little surprised. There were designs in the competition that are aesthetically far more pleasing than Durable. I was sure that those designs would have the extra edge over the themes that concentrated on function over form. I guess that was where the multiple categories came into play, my personal favorite was Derek’s very beautiful Foliage Mod Theme which won “Most Creative Design”. Well done Derek.

That begs a question though, are people beginning to pick themes based not solely on the look and feel, but also the bundled functionality? I can’t help but think that people’s feelings towards what makes a good Wordpress theme have changed quite a lot since the Wordpress 1.5 competition. The boundaries of what theme authors can do with Wordpress has been pushed since 1.5, simply because better documentation is now available, and we’ve had more time to fiddle around with the Wordpress code.

Anyway, that was more of a brain dump than anything. It’s just great to see that judges really took time to look at the themes, judging functionality just as much as the look and feel.

Thanks to everyone who put in their free time to make this competition possible, your hard work is much appreciated.

Update: I have released a minor update to Durable. Version 0.2.1 is available for download and decreases page load times by 25%.