Archive for the ‘Web Design’ Category

Happy New Year

Wednesday, December 31st, 2008

2008 is over, and 2009 is here. Happy New Year! For the night that’s in it, here are a couple of desktop wallpapers for you to download.

(more…)

Just for Kicks

Wednesday, December 10th, 2008

I was playing around with Seashore, and created this:

Click To Enlarge

Click To Enlarge

Yes, I know there much better images out there, but remember, this was something I did to try and learn how to use the program – so be nice!

Centring Images Using CSS

Wednesday, December 10th, 2008

While working on my latest theme, I wanted a way to centre images. CSS 2 doesn’t have any native way to centre align an image. But there is one way to force the image to be centred:

img.centred {
display: block;
margin-left: auto;
margin-right: auto;
}

This CSS code specifies that the image should be displayed as a block and the left and right margins are automatically sized, forcing the image to be centred.

Installing Multiple Versions of Internet Explorer

Monday, October 27th, 2008

Usually when I check my website templates, I do so in the main browsers, Firefox, Opera, Safari, Camino and Internet Explorer (via my desktop machine running Windows XP).

As my XP system uses Internet Explorer 7, that’s the only version of IE that I’m able to check with. However, according to my stats, on average 10% of my visitors are using IE 6, which is more than are using IE 7. (BTW, if you are still using IE 6, I recommend that at the very least you upgrade to IE 7, or better still, a better browser – *cough* Firefox *cough*) So, while testing for IE 6 is a bit problematic for me, it’s something that I need to do.

Luckily, there is a solution. Thanks to TredoSoft, it’s possible to install IE 3, 4, 5, 5.5, and 6 in one go. Get Multiple IE here. If you need to check your site in these versions of IE, then Multiple IE is a must have.

Another New Theme

Monday, October 27th, 2008

I’ve done up another WordPress theme. This one is based on the popular Sandbox theme. As the number of themes that I create has grown quite a bit, I’ve added a widget to the sidebar that allows you to try each one out.

Ban target="_blank"

Wednesday, June 18th, 2008

Today was a free day for me so I spent it browsing the web, writing posts and just general faffing around. Spending so much time on the Net today prompted me to write about one of my pet hates – web sites that open new windows when you click on a link.

First a bit of technical background for those of you that don’t use HTML. If you know this stuff already, then feel free to skip this bit. A link is created in a web page by using the anchor tag. It looks like this:

<a href=”http://www.example.com”>link text</a>

Clicking on “link text” would bring the user to the web address specified in the href part of anchor tag. (In this www.example.com). In some cases developers want the page to open in a new browser window, in which case they write the anchor tag like this:

<a href=”http://www.example.com” target=”_blank”>link text</a>

Now when the user clicks the link, a new browser window is opened to display the web page specified. It’s the target=”_blank” part of the anchor that tells the browser to open a new page. The thinking behind using this type of behaviour is that the user is not forced to navigate away from the website that spawned the new window, thereby making it easier for them to return.

However in doing so, the web developer is removing control from the user. From a Human Usability point of view, loss of user control in this way is a Bad Thing. The user should always have full control of their browser window, and removing that control will actually lead to an increased risk that they will either move on elsewhere and not come back, or will be unable to find the original site that spawned the new window. That is, it’s easier to use the back button to browse back through your history then it is to find the one window out of ten that have been opened on your desktop.

In order to ensure that websites can be properly displayed by any browser, there is an industry body that provides standards for the various web languages. This body, the W3C, is currently working on a new standard for the most basic web language – HTML 5.0.

At the moment, the current standard is HTML 4.01. In the full specification of this standard, there is no place for the target=”_blank” attribute. It’s not allowed, and technically, including it in your website breaks the standard.

The reason we still so many links opening in new pages is that there is not just one version on the current HTML standard, there are actually 3:

  • HTML 4.01 Strict,
  • HTML 4.01 Transitional, and
  • HTML 4.01 Frameset.

Only the HTML 4.01 Strict version of the standard prohibits the use of the target=”_blank” attribute, so designers can still use it by telling the browser to use one of the other standard versions. (How this is done is a bit beyond what I’m trying to get at, but suffice to say that each page on a website has to contain a Document Type Declaration which names the version of the standard being used.)

Even if the web developer specifies the HTML 4.01 Strict version and uses the target=”_blank” attribute, the browser will still open the link in a new window? Why? Because the browser doesn’t have to follow the specifications. It is up to the browser to implement the specification as it sees fit, and to try and interpret the web developers intentions as best it can. This means that although a page may not comply with the specifications, it will still display and work as intended.

This type of behaviour is not going to change any time soon. No browser is going to go down the route of refusing to display a website because it doesn’t exactly comply with the W3C standards. Few enough web developers care about these standards, and even fewer Internet users are aware that they exist. In fact, you’d be surprised how badly most of the the W3C standards are implemented in modern browsers.

So where do we go from here? As I said before, the W3C are currently working on HTML 5.0, but that in itself is not going to stop web developers from opening new windows. Even if browsers ceased supporting the target=”_blank” attribute, there are other ways to open a new browser window using scripting.

One possible solution is that the browser developers recognise that this is a bug-bear for some people and add an option to disable this behaviour within the browser. One setting that allows the end user to decide how these type of links should be handled. Thankfully with Firefox it is possible to do this, though it does require a bit of manual editing of the Firefox preferences. Here’s how:

  • Open a new tab, and in the address bar type about:config and hit enter.
  • In the filter bar, type browser.link, you should be left with 3 settings:
    • browser.link.open_external
    • browser.link.open_newwindow
    • browser.link.open_newwindow.restriction
  • Double click each one in turn and set the values as follows:
    • browser.link.open_external: 3
    • browser.link.open_newwindow: 3
    • browser.link.open_newwindow.restriction: 2

The changes should take effect straight away. This won’t completly solve the problem, as new windows will now open in new tabs instead, but at least they’ll all be contained within the same browser window.

You can test whether it works for you or not by clicking this link: Google in a new window

Theme Finished

Wednesday, June 18th, 2008

I’ve finished messing around with the new theme, so there shouldn’t be any major changes for the next while.

The theme was built using the blank themes found on Refueled.net. These themes are made available under a Public Domain license, so in the same spirit, I’m releasing my theme under the same terms. You’re free to use the theme for personal or commercial use. You’re free to alter any part of the theme that you wish, and you are not required to link back to this site. (Though I won’t mind if you do.) As this theme is completely free, there is no support provided – you’re free to use it as you see fit, and I’m free to not help you if there’s a problem.

Download the theme here.

WordPress 2.5 and Page ID’s

Saturday, June 14th, 2008

I’m currently working on a small project for a local business. As I’m under pressure for time, I’m using WordPress as a CMS.

Because I use pages for the site content, there are times when I need to know the page ID. For some reason the developers have decided it would be better that the admin interface no longer shows the page ID.

According to this thread on the WordPress forums, the solution is to mouse over the page link and check the URL in the browser status bar. Not a very elegant solution if you ask me. Help is at hand. Thanks to Nick Ohrn, there’s a plugin available to restore page ID’s. You can grab it from the official Restore ID WordPress plugin page.

WordPress and Page Templates

Monday, February 18th, 2008

I’ve been doing a lot of work recently on my employers website. I had been using Joomla as a content management system, but it was overkill for what I wanted, and I found that it wasn’t the most stable of platforms. (Frequently, and for no apparent reason, pages that were published would suddenly become unpublished.) It was more hassle than it was worth, so I got rid of it and installed WordPress instead.

I decided on WordPress as I’m familiar with it, and with a couple of tweaks to the settings it no longer resembled a blog. It was relatively easy to design a simple template, and get the site up and running, but I did have one major issue. I needed an Events page and a News page to display what would traditionally be considered blog postings . The idea was that each page would be linked to one specific category and one category only. In other words, posts in the Events category would only appear on the Events page and posts in the News category would only appear on the News page.

While WordPress does allow you to specify a static page as your “Front Page” and another page as a “Posts Page”, there doesn’t seem to be an easy way to force Wordpress to use two Post Pages, or to restrict a Post Page to just one category. One idea I played around with was to edit the header.php file and manually add the links to the actual categories. WordPress would then display the resulting page using archives.php. It’s then a simple enough matter to edit the file to display the posts as needed. It’s a quick solution but it does pose two problems:

  • The links are hard-coded into the header.php file. If for some reason the links are changed, or if the theme is updated, then the links have to be manually changed again.
  • Using links in this manner doesn’t give the same flexibility as allowing WordPress to manage the navigation, Pages and Posts.

The answer I found was to use Page Templates. By putting the code to retrieve the posts from each category into a Page Template I was able to bypass hard-coding the links and I could display only the category I needed on each page. If your interested, you’ll find a sample Page Template here.

My next thought is to expand this into a plugin in order to make easier to select which category should be displayed, and which page it should be linked to. I’ll have to think about how to go about it some more though.

BBC Homepage Gets a Web 2.0 Make-Over

Friday, December 14th, 2007

The BBC have completely redesigned their homepage. It’s now customisable, full of widgets and more blog-like. It’s currently in Beta, but you can have a look for yourself here.

I’m not so sure that I like it. For some strange reason it just doesn’t fit in with my mental picture of what the Beeb website should be. The new look comes across as playful and, for want of a better word, child-like. For some reason it doesn’t carry the same sincerity, austerity and gravitas as the current site design does.

While the current design is not exactly a paragon of design perfection, it does have a certain feel. A feel that commends a certain amount of respect and trust. While the content of the site hasn’t changed, the feel of the website has, and that’s just as important as the content. For me anyway, this new design just doesn’t feel right. Maybe it is just me, but I much prefer the current look.