An Unfinished Symphony

It's about the internet and stuff.

Redesign

Regular visitors to the site should notice quite a radical change of design here which I'm hoping will make it a bit more visually pleasing. When I first started the site it was, almost literally, just thrown together in a hurry and without a finalised design. This was basically because there were a number of people that wanted the blog up and running and, I think, for me to start posting on it. Some of you may still remember the original look of the site, which was far from complete and so a little bit broken to say the least. After a little feedback I decided not to continue working with that design and came up with a working temporary one instead. Even though it provided everything I wanted from it (functionality, flexibility and simplicity) it was a little uninspiring and I was never really happy with it, despite that it managed to survive for a couple of years.

Simplifying the Interface

What I've tried to do with the new design is keep the important concepts intact – it's still, I believe, functional; it's still flexible, though now within a set limit; and, importantly, it's still simple. In fact I've made an effort to simplify it further. I found certain aspects of the old design were slightly cluttered, notably the links sidebar. In order to de-clutter the link heavy sidebar I separated the archives and external links section into their own pages, with them linked via a new primary menu. I've also used a little PHP and hidden the MyBlogLog widget from everyone but myself.

All in all I think the sidebar is cleaner and more useful while still sharing things that I want to share. Also, perhaps the most noticeable change is the dropping of the third column from the front page. My original idea for that was to allow the front page of the site to show the latest post in full whilst also showing the next 5 or 6 most recent posts, but rather than overloading the page with too much content these recent posts would just have excerpts showing on the front. The old design did achieve that fairly well, however the extra column meant that the front page would always seem a little cramped. It's also not necessary to have a third column in order to provide direct access to that content from the front page, so it got dropped.

New Sections

I've added a few extra sections to the site where I can provide supplementary information, such as an accessibility statement and privacy policy, including an about page. At the moment the about page is a bit bare; I do intend to put something in there at some point, hence its inclusion, however I haven't decided on what exactly I want to say. I've also extended the subscription page to include information about my feeds, feed readers and feed aggregators along with the original email subscription option that I've carried over from the previous version. There's also a contact form, just in case.

Ironing out the Issues

As with any project, there have been issues to resolve (I'm talking specifically about coding issues at this point).

PHP Issues

One of the things I wanted was for the archives page to show each category with all the posts for that category, to be able to reorder the categories, to be able to show the date of each post adjacent to the link to the post and to be able to structure markup how I wanted. One of the great things about WordPress is its ease of templating, and to that end the codex provides details of the variety of template tags available for this, however those available for templating category listings didn't quite meet all of my requirements. This is where Sarah came in with a bit of help, well a lot of help, providing me with the PHP needed to pull the required information from the database in the way that I wanted. She also helped me write the PHP for my contact form, in the process helping me to add in fields checking for spammers, and also code to check that those fields had been completed appropriately.

The site used to use an old version of the Subscribe2 plugin which I held off from upgrading to the amount of work it would have taken to get a newer version to work with the existing theme. A new theme has meant that was no longer a consideration, and so I upgraded to the latest version of Subscribe2. It was only when I uploaded, and set live, the completed theme and upgraded plugins at the weekend that a few issues came to light. Basically the plugin only partially worked on the live site, with new subscribers receiving an email containing a link to confirm the subscription, but the link going to a blank page and the subscription not being confirmed. After a lot of reading through the plugin code, and with Sarah doing a number of tests, we found that there were three functions responsible for the confirmation process – commenting out the call to one of these functions allowed the confirmation to go through and the appropriate confirmation page to display – just in a very broken state as a number of scripted components failed to work on the page. It had, by that time, occurred to us that it was an issue with using customised permalinks on the site along with the way the plugin takes over an existing page that it rewrites with the confirmation – instead of doing this successfully the page was being redirected to the real permalinked page, causing the confirmation to fail. Once we had tested that this was the case, by resetting permalinks to the default method, it didn't take much to discover the real cause – a conflict between Subscribe2 and the Permalink Redirect plugin. This issue hadn't existed with the previous version of Subscribe2 that I'd been using, so something that has changed caused the conflict – the process of taking over an existing page from the database, rather than using its own dedicated one like the old version did. It's probable that the new method makes it easier for the plugin to be integrated with a theme and so it's an acceptable change in the grand scheme of things, but unfortunate that it results in a conflict. To fix it I dropped the other plugin.

CSS Issues

While differences in browser rendering continue to exist there are always going to be display issues when switching between those browsers. The star browser was Firefox, getting things right first time and according to standards. Internet Explorer 7 had a few minor issues, and IE 6 a few more, however these were relatively simple to fix with a few changes in margin, width and position settings in their own respective style sheets linked via conditional comments. In Internet Explorer 5.5 it looked like a bomb had hit it; that browser couldn't handle a fair bit of the CSS and rather than spend too much time on an obsolete browser I changed a number of things and fixed the width. I basically just wanted to make sure the site would be usable rather than trying to precisely reproduce the design.

Quite surprisingly I had a few strange problems in Opera 9.20, surprisingly because Opera is at least as standards compliant as Firefox if not more so. However there were several oddities that didn't seem to have an easy fix, or at least not a fix that could be achieved simply by tweaking the CSS without those tweaks affecting other browsers. Those issues included:

  • displaying the sponsor links at the correct size until the page finished loading, then the text mysteriously shrinking. As these used the same markup and CSS as the other links in the sidebar there was no easy or logical way to fix the problem without affecting the other links.
  • text marked up as paragraphs within the content area would magically jump to the right once the page loaded, leaving a small fragment of text behind (a few characters from the last line of each paragraph, chopped off at the top). Again, there was no simple fix without it affecting the positioning in other browsers.
  • text link styles were overridden with the browser default ones, again without any logic that I could see. It's possible that one of the settings in my browser profile caused this issue, but I'm not familiar enough with the browser to track it down – so I needed to find another fix.

It's likely that the first two issues were caused by the combination of scripts used on the page, for example the sponsor links are generated by scripts. However as it wasn't feasible to remove those scripts anyway I decided not to test the theory by disabling them on a live site (the issues weren't apparent in my local testing copy). Due to the prospect of a CSS fix affecting other browsers I had to find a hack or filter for Opera, much as it pains me to use them now that it's clear we can control the real problem browser (Internet Explorer 6 and under) using conditional comments. However these issues needed an Opera specific fix and, after a bit of searching on Google, I found a way using an @media declaration to target Opera:

  1. @media all and (min-width:0px) {
  2. head~body p {
  3. margin-left : 0;
  4. }
  5. #content a, #content a:link, #content a:visited, #skipper a:link, #skipper a:visited {
  6. color : #00303e !important;
  7. }
  8. #content a:hover, #content a:active, #content a:focus, #skipper a:hover, #skipper a:active, #skipper a:focus {
  9. color : #870000 !important;
  10. }
  11. #sidebar #links55315 a {
  12. font-size : 11px;
  13. }
  14. }

The combination of the "@media all" and the "and (min-width:0px)" in line 1 of the code above targets Opera fairly specifically – apparently it has also been shown to target Pre-release versions of Safari too. I had no way of testing this, however I felt it was safe to use the method as I was just emphasising already existing styles rather than trying to impose different ones. Line 2 very specifically targets all paragraphs, overriding any other rules that may be conflicting. Line 3 sets the left margin for all paragraphs to zero (even though this had already been done in the main style sheets), while Line 4 closes the rule set opened in line 2. A quick test in Opera showed that the method worked successfully. Lines 5, 6 and 7, and lines 8, 9 and 10 were used to fix the link colour change, while 11, 12 and 13 were used to fix the resizing of the sponsor link text – using a pixel unit instead of ems was what was needed there. The final line closes the whole thing. That discovery came courtesy of the Tanrei Software blog where there's a useful article on using media selectors for browser targetting.

Other Issues

Rather than use a mass of extra markup and images I chose to use Alessandro Fulciniti's NiftyCorners Cube script for the curved corners, so users without javascript enabled will see the site with square corners. Users with javascript may also have some issues, there's a slight lag in the page load time as the script runs through the targeted elements in order to set the curved corners. It's also possible that the script contributes to the paragraph jumping in Opera, though I've never seen this happen in other sites that I've used the script on.

I use a plugin that dynamically adds classes to various links in order to add an icon to identify the target type (such as an arrow pointing away from a box to indicate external links). One of the icons used was for links to Wikipedia which consisted of a small icon of the Wikipedia logo. However it was hard to distinguish that icon from the surrounding text, so it was removed.

I wanted to use an image of an upwards pointing arrow for my back to top links, but without all of the images being background images (otherwise there would have been no actual content for the links). I achieved it using a combination of foreground and background images with the following markup and CSS:

The HTML
  1. <div class="up">
  2. <a href="#skipper" title="Back to top">
    <img src="http://www.ap4a.co.uk/wp-content/themes/mannequin/images/up.png" width="16" height="16" alt="Up arrow" /></a>
  3. </div>

The markup simply creates a div as a container element for the image used as the default-state up arrow and the actual link back to the top of the page.

The CSS – part 1
  1. div.up {
  2. float : right;
  3. margin : 5px 10px 0 0;
  4. padding : 0;
  5. width : 16px;
  6. height : 16px;
  7. }

The first part of the associated CSS sets the dimensions of the container div to match the size of the image it contains and positions it where I want it on the page (relative to its own container).

The CSS – part 2
  1. div.up a, div.up a img {
  2. display : block;
  3. padding : 0;
  4. margin : 0;
  5. }

Part 2 of the CSS sets both the image and the anchor around it to be block level. This corrects Internet Explorer 6's behaviour of adding a 3px space beneath inline images (which is the space preserved for text descenders). It also allows the full area taken up by the image to be a clickable part of the link.

The CSS – part 3
  1. div.up a {
  2. background : url(images/up2.png) no-repeat center bottom;
  3. position : relative;
  4. width : 100%;
  5. height : 100%;
  6. text-decoration : none;
  7. cursor : pointer;
  8. }

This code sets the link to 100% width and height of the container div to complete the process started in the previous rule set, which allows the full area of the image to be clickable. It also sets the positioning to relative to allow the contained image to be absolutely position within it, and the first line sets the background to be the hover state version of the image. The final 2 lines turn off the underline added to links and ensure that the proper cursor style is used.

The CSS – part 4
  1. div.up a img {
  2. position : absolute;
  3. top : -5px;
  4. left : -5px;
  5. border : none !important;
  6. }

Part four positions the foreground image within its containers so that it precisely and completely covers up the background image. It also makes sure that no border is added.

The CSS – part 5
  1. div.up a:hover img, div.up a:active img, div.up a:focus img {
  2. visibility : hidden;
  3. }

The final rule set is responsible for removing the foreground image when the link is hovered over, revealing the hover state background image. It works as intended in Firefox, IE 7 and Opera 9. In IE 5 and 6 the change in state doesn't work, and IE 5 also needs a slight change in the positioning to cover the hover state image.

No doubt there'll be other issues to find, and they'll be fixed when they are. I'm expecting there to be one or two in Mac browsers, but as I haven't been able to test in them (the Mac testing services I normally use have been broken when I've visited recently) I haven't been able to find them. If you're a Mac user and do find issues, please let me know and I'll do my best to resolve them, thanks.

Up arrow

Comments on 'Redesign'

RSS feed for comments on this post.

gravatar
CJ says:

Hi David,
The rebuild is looking great, I love the use of gentle colours on the eye, and plenty of white space. Looking forward to catching up with you, and of course you posting more 😉

gravatar
sarahG says:

You could always set the front page to show the latest post in full and then excerpts of a further 5 posts.

gravatar

Thanks CJ, and yes I'll be posting a little more 😉

Sarah, that's how I had it previously and I may go back to doing it that way again. It just depends on whether or not future posts are quite as long as this one turned out to be 😐

gravatar
Jane Levi says:

Redesign looks great, nice use of colouration. Very professional feel to the site. Good work.

Jane

gravatar
Steve says:

Looks nice, clean lines and clutter free. Ease of use should always be a top priority.

Steve

Sorry, the comment form is closed at this time.