Website Makeover
At New Year I updated this website from the previous version (inset). The content of the site is the same and still uses WordPress but the structure and look are different and some technical improvements have been made. The previous version originated from June 05 when I first began using WordPress, starting off with the default 'Kubrick' theme then soon developing my own adaptation, but it was still basically a typical blogger's centred layout with a full-width header image and a standard sidebar with several categories of links.
I've felt for a while that filling the top of the computer's viewport with a large irrelevant banner-type image is bad design, especially for an 800×600 screen resolution when the image fills about a third of the space 'above the fold'. I'm also coming round to the view that a fixed width design is neater when placed at the left of the viewport, in which case it makes sense for the sidebar to be at the left of the content column so that the content is most prominent.
It could be argued in design terms that the sidebar should also begin as high as possible as well, but I've left it below the top-left image, which is currently just as irrelevant as the previous banner image but something I'll think about later as I think web pages do need images to help them come alive. For now, the image stays, but changes each day – I'm thinking of developing this into a 'percent for art' concept with a percentage of each page devoted to art, just as a corporate headquarters is often decorated with art.
'Suckerfish' CSS flyout menu
The structure of the pages now owe very little to WordPress Kubrick but I'm staying with WordPress itself (Version 1.5.2 for the time being), which I've become familiar with and still find very impressive having also looked quite closely at Drupal, Movable Type, and Textpattern.
I've built the sidebar as a single file with a complex series of php conditionals, and used the suckerfish CSS-driven flyout menu system so that every page is accessible from the homepage (see edit). A feature of the sidebar is that the button for the current page is highlighted and is not a link to itself. Also, suckerfish is replaced by a submenu on some page categories. It will be interesting to see what effect this navigation structure has on search engine results.
Edit on 2nd May: I've since altered the sidebar menu. The Suckerfish flyouts are still in use but the submenus on some page categories meant a very deep sidebar and people flicking down each page with only a few seconds in between and not bothering to read the content.
For WordPress users…
To highlight the sidebar button according to the page being viewed, php needs to detect the page.
For a posted entry I've used:
global $id; /* get post ids */
if ($id == ('78')) {
do something...
}
For a normal WordPress Page I've used:
if (is_page('page-slug')) {
do something...
}
or:
$lepage = (wp_title('', false));
// Check $lepage for strings
if (strstr($lepage, "Page Title")) {
do something...
}
For category archives I've used:
// Get the category
global $post;
$categories = get_the_category();
foreach($categories as $category) {
$cat_id = $category->cat_ID;
$cat_name = $category->cat_name;
}
if (is_category()) {
$le_page = $cat_name;
}
if ($le_page === 'Category Name') {
do something...
}
CSS hacks for Internet Explorer
Another technical change for the better is that most of the CSS hacks for Microsoft Internet Explorer's page rendering bugs have been removed from the main stylesheet and put into other stylesheets which are only called up in a conditional comment for versions of IE less than 7.0. IE7 is not yet generally available but when it is, the likelihood is that page rendering bugs will have been fixed and that some hacks will break the layout.
See also the call to action on the Microsoft Internet Explorer Weblog, where it is reported that in IE7 'major sites' are breaking due to the use of CSS hacks and the strict doctype.
In the conditional stylesheet for IE5/6 I am using the 'Holly/Tan hack' to correct IE's 'disappearing content' (Peekaboo) bug:
/* Holly+Tan Hacks to "give layout" to IE5 & IE6 */
/* hide from IE/Mac [backslash]*/
* html #example { height: 1%; }
* html h1 { height: 1%; }
/* end hide from IE/Mac */
The aim of this CSS hack is to 'give layout' to a page in IE, as it seems not having 'layout' is the cause of the disappearing content in certain elements. Another CSS hack I'm using for IE, and which I haven't yet been able to make work in the conditional stylesheet (so is the only hack I've left in the main stylesheet) is:
/* [backslash]*/
* html #example {
overflow: hidden;
o[backslash]verflow: visible;
width: 100%;
w[backslash]idth: auto;
he[backslash]ight: 1%;
}
/* */
#example {
clear: left;
width: 200px;
font-style: italic;
}
This corrects an IE5/6 bug which causes italic text to expand its containing box beyond the specified width.
The 'conditional' hacks for IE5 are mainly to replace the Tantek box model hack. Instead of using the hack, the IE5 conditional stylesheet contains width and height dimensions that include padding instead of allowing for padding to be correctly placed outside the width and height. The other thing I've had to do purely for IE5 is to add a border to floated but undimensioned images that are given padding – IE5 does not add the padding, so the border is added as a substitute.
Flash header
What remains of the header is now JavaScript-deployed Flash, with an alternative .jpg image for users with JavaScript or Flash disabled. I haven't yet decided what to do with the Flash header – all that happens at present is a ripple of light through the letters of 'PATRICK TAYLOR' each time a page is opened.
Update
[Wednesday, November 7th, 2007: this page is historical only, way out of date. I've since made many many changes to my WordPress theme]
Related entry: Patrick Taylor Web Design.
