si-blog: September 2003

September 2003

22 » Switched back

I've switched back to text/html while I try and iron out the problems. Bugger.
20 » Satisfying Hixie

With the help of Anne van Kesteren, I have created my first genuine XHTML 1.1 page. Although I have been authoring in it since I began this blog, I have failed to follow the World Wide Web Consortium specifications, and the advice of Ian Hickson. Thus far, I have been serving up my XHTML 1.1 as text/html. I have now implemented a PHP solution that will serve up the si-blog index page as application/xhtml+xml to those user agents that are looking for it. Such agents will also get <?xml version="1.0" encoding="iso-8859-1"?> slotted in before the document type declaration. Others, such as Internet Explorer, get text/html and no XML prolog (which forces Internet Explorer 6.0 into "quirks mode").

To achieve this feat, I have an include file, called mime.php containing this:
```
<?php
$charset = "iso-8859-1";
if(stristr($_SERVER["HTTP_ACCEPT"],"application/xhtml+xml")) {
    $mime = "application/xhtml+xml";
    print "<?xml version=\"1.0\" encoding=\"".$charset."\"?>\n";
}
else {
    $mime = "text/html";
}
header("content-type:$mime;charset=$charset");
?>
```
I then add an include statement to the very top of a page, before the document type declaration, like this:
```
<?php include("/export/home/scjessey/www/process/mime.php"); ?>
```
It was easier than I thought, but I find the process of altering all my pages rather daunting. I am therefore going to use this new technique from this point onward, and leave my substantial archive alone.

Update: Strange things are happening since I implemented this change. From time to time, the content of my page, which resides within an unordered list inside a div element, is being rendered lower than it should be. Instead of falling in line with the home link on my main navigation bar, it is being dropped to appear in line with the portfolio link instead. In what might be a related problem, the validator is occasionally failing the page, saying that it was "not able to extract a character encoding labeling from any of the valid sources for such information." I see four possible reasons for this problems:
1. My PHP is flawed
2. The installation or delivery of PHP by my hosting company is flawed
3. My markup is flawed
4. The validator is flawed
My inclination is to think that the second case is true, which leaves me essentially powerless to do anything. Remind me not to use the words "it was easier than I thought" ever again.

Back to top
18 » Redesign failure

I have paid the price for a hasty redesign. It make look pretty, but the page has a flaw that remained undisovered until I started receiving various emails from people about it. It seems that the permanent links (and Back to top links) do not function properly on the nice browsers.

The problem lies with my generous use of position:fixed. By fixing the position of the banner, I have set the top of the page to zero. That means that the permanent links jump the archived page to a position where the first few lines are obscured by the 75 pixel high banner. No amount of margin/padding jiggery-pokery seems to be able to resolve the situation.

So despite receiving positive noises from the likes of Russ Weakley, Richard Rutter, and Matthew Mullenweg, it seems that I'm going to have to go back to the drawing board for a little while. Hurricane Isabel will trap me at home for the next 24 hours, so perhaps I'll be able to have the problem licked before the Sun comes out!

Update: Problem solved. Well, sort of. I have confined use of position:fixed on the banner to the blog home page, but not to the archived pages. The Back to top links have been fixed by applying id="top" to the h2 element instead of the h1 element. Since the h2 element is not fixed with respect to the viewport, the links function as expected. This is the most elegant solution I can come up with. I would welcome comments from regular readers.

Back to top
13 » Redesign explained

For the benefit of those that asked, I just wanted to briefly explain the process of the redesign. I set out with the following goals:
- Retain the original theme to a certain extent. Don't fix what isn't broken!
- Update the banner/title, because the existing one looked dated and boring
- Design a logo for the si-blog, because the existing one didn't fit the design at all
- Simplify the code underneath a teeny bit, remove some of the pointless div elements
- Simplify the style sheet somewhat
I started off doing the redesign in Dreamweaver, but my inexperience with the software frustrated me so much that I returned to hand coding. I used Photoshop for the graphics. The banner was just a couple of blue gradients covered in clouds created with the heavy smear wax crayon brush. I started off life at 1280 by 75 pixels, but Matt Mullenweg said he was getting a hard edge with his screen resolution (1400 wide). Rather than doing a gradient edge, I simply stretched all but the jessey.net layer out to 1600 pixels wide. Anyone running at a higher resolution can kiss my furry butt.

The si-blog logo was created by transforming an image of a fountain pen and adding some transformed text. I use a child selector to feed Internet Explorer with a GIF file, and real browsers get fed a nice PNG.

I had both the left and right nav bars set to position:fixed, until I realized that anyone running 1024 by 768 or less would not be able to access all of my external links. The si-blog logo now slides over the banner, and the links themselves pass underneath. This seems to work quite well.

From concept to completion, the whole design only took me a single evening to create. I had some creative input from my wife, who came up with the idea behind the si-blog logo. I'm pleased with the result, because it signifies a change in style for me. Until now, all my designs have been very boring and functional, but now I am allowing a little bit of design flair to creep in as I gain more experience with Photoshop. For the first time, I feel ready to create real-world websites for individuals and organizations. I'm eager to find some work.

Back to top
12 » New look

As you can see, I've performed a minor visual design tweak. There are quite a few changes underneath, but they are mostly just to make life easier. I had intended to try and redesign with hardcore semantics in mind, but after recent discussions about web standards and semantics, I decided to just try and make it look nice. I'd be very interested in comments.

I will write more this weekend, but for now I need a break from the screen!

Back to top
06 » Redesign news

Another nice redesign has appeared. Anne van Kesteren has breathed new life into his weblog with a funky new theme. A bold logo (which cries out for a favicon) and an orangey feel serve to add spice to what was already a very interesting place to surf to. My one bugbear is with the hyperlinks. They don't jump out at me as much as I'd like them too.

From a content standpoint, Anne continues to push the envelope as he delves into the inner workings of XHTML and CSS. He recently joined the ranks of Evan Goer's XPhiles, who serve XHTML 1.1 they way it is supposed to be served. I have long considered going this way myself, but for several reasons I have not done it. Part of the reason is my fear that we will be stuck with Internet Explorer as the most prolific browser for a long time to come, which makes the conversion rather pointless.

Back to top