wheresrhys

Cherry Oh Baby by Eric Donaldson

Audio clip: Adobe Flash Player (version 9 or above) is required to play this audio clip. Download the latest version here. You also need to have JavaScript enabled in your browser.

Also, I’m not a fan of twitter. It seems to be an enemy of introversion, and introversion has been responsible for a great many good things in the history of humanity, and good times in my life too.

Anyway, here is some pretty good twitter-bashing.

Biz Stone: It’s the messaging system we didn’t know we needed until we had it

Stephen Colbert: That sounds  like the answer to a problem we didn’t have until I invented the answer.

I’ve just spent a  little time adding some useful sounding plug-ins (initially prompted by wanting an effective backlinking plug-in), one of which was the WordPress Automatic Upgrade plug-in. So, with that installed I finally got around to upgrading wordpress and, to both my delight and dismay, wordpress has changed its admin screens layout since the last version I had (2.3 I think). It’s a much better design, but it does break toolbarize. In fact, it renders it unneccessary as the layout is much more user friendly and screen-space efficient, with scrolling not being no nearly so disruptive to the postying process.

However, it has inspired me to write a plug-in which makes perfect use of screen space by hiding things I very rarely use… or putting them in the footer. I could even make it so users can customise which screen elements are hidden.

Well – here it is. As promised earlier, my first ever software release into the open source world is an adaption of Eric Meyer’s MW adminize plug-in to give the wordpress admin interface a fixed toolbar along the top of the screen and so that the publish post box is always visible on the right. Scrolling up while posting to your blog can finally be consigned to the past.

The plug-in works on all modern browsers, (Safari, Opera, Firefox, Internet Explorer 7, and almost certainly all others with good CSS support). It will however leave everything unchanged in ie6 as it has poor support for position:fixed.

Here is the download: toolbarize.zip.

Simply unzip it into your plugins folder – no additional setup required.

Visually, I’d like to rehash how the publish box appears – it doesn’t sit well either where it is now or lower down, so a redesign may be in order. Also, I need to work out how to add some javascript to better resize the upload media screen (at present the close button is hidden, but you can just click off the screen to make it disappear.

Please let me know if you have any suggested improvements

Further to my post about the usefulness of position:fixed, in particular with regard to the .submitbox in the wordpress admin interface, I’ve continued to refine it all.

I came across Eric Meyer’s MW Adminize WordPress plugin (via the latest Sitepoint list of useful CSS links). Essentially what it does is compress the navigation and header of the admin screens into a smaller area by including an extra stylesheet.

“Hang on, ” think I. “Now that looks pretty much like a toolbar – why not use position:fixed on it”. Which is what I’ve done, and the effect is most satisfactory. There’s was a bit of ironing out to do as various page elements (which presumably have position: relative/absolute) overlaid it, but z-index:2000; soon sorted that out.

At present I’ve had to edit not just Eric Meyer’s CSS file, but also a couple of the php pages in order to insert a div with id=”toolbar”, but in a future iteration I will painstakingly go through each page element that needs position fixed and then remove the containing div, thus making it a candidate to be a branch of the original plug-in.

Watch this space.

I always found it annoying when websites got an element (normally an advert) to stay on the screen even when you scrolled up and down athe page. But recently, with the advent of web applications, position:fixed could start to be more commonly used. Facebook’s messaging/notifications bar is the best (and only, if I’m honest) example I can think of; it’s discreet and contains features that it’s quite resaonable to expect you will always want to have to hand.

Along similar lines, I’ve edited my worpress template. Adding .submitbox{position:fixed;top:100px;} to your wp-admin.css means you never have to scroll around to publish a post.

I’ve been planning a short busking holiday with Mike – to Provence to wow crowds with our Irish-Folk fusion sound, but travel on the cheap is not as easy as it might seem.

Ryanair, advertising flights for £10 each eventually wanted to charge us £80 in total, with at least 3 layers of hidden extras. Remarkably, everything apart from taking yourself and one item of handluggage is a billable extra!

The main poin of this post though is to lambast the design of the eurolines website. Tobook a coach you have to go to the country you’re departing from’s subsite, and to do this you have to click on an image map of a map of europe. This map lacks:

1. Country borders
2. Hover over effects

It took me a few goes to select The Netherlands successfully. I’m just grateful I’m not leaving from Luxembourg or I’d still be desperately nudging the mouse around the damn thing!

My advice is to use ecolines whenever feasible. They have this very cool graphical feature, a map with hover over effects that show which cities you can travel to from which cities, which very quickly confirmed they don’t travel a route that’s useful to us, but should I ever head to Eastern Europe..

If, like me, you subscribe to a number of web-related blogs in an effort to keep abreast of what’s happening in the world of websites and the internet, you’ll have heard all the chatter about Chrome, Google’s new web browser. I reckon it sounds good in boring, but important, ways – more stable, faster javascript, ability for certain components to crash without crashing the whole browser. They say they’ve re-thought the web browser from scratch, and it seems they have addressed some important issues that maybe no-one else, committed to extant browsers, would have been able to – but from the point of view of allowing people to use the web in new and exciting ways it’s a bit of a dud. Firefox’s add-ons, and even IE8′s anticipated new features are far more innovative, flexible and of use to users.

One immediately obvious attempt by Google to break new user interface ground is the positioning of their tabs. All existing tabbed browsers (Safari is the example in the picture) put the tabs below the address bar. Chrome, on the other hand, puts them above.

This makes sense, as the address bar is the address of the web page in the tab – the address of the whole browser doesn’t actually make sense when a browser supports multiple tabs.

But does it make the browser easier to use? I think not (although one has to assume the people at Google have tested it thoroughly and found the opposite, or at least inconclusive evidence either way).

Often I open up numerous tabs for the sole reason of wanting to hop between them. In this situation I can imagine the address bar getting in the way, both physically (you have to move the mouse further to get from hovering over the page and clicking on the tab), and conceptually (In these days of super-doopa search, and long, dynamically generated URL’s a website’s URL doesn’t take on the de facto role of “page title” it once did. It could be argued that putting the address bar physically within the tab adds semantic clutter rather than information of high priority to the user. Putting it outside the tab makes it less of a distraction).

So to sum up, I think it’s a good example of when the logical, ideal way to set up a user interface doesn’t necessarily equate to the most ergonomic way.

I can make a ball bounce up and down in flash, and that’s about it. And my javascript is rapidly improving, but still leaves a lot to be desired, but simple animation effects using flash or javascript can really enhance a design.

For example, one of my favourite site-designs, http://www.futurelab.org.uk/ (I love the classy, formal look, aimed at senior teachers, but also with splashes of colour and animation to suggest innovation and fun), uses flash to create a subtle bouncing navigation effect.

So what’s a boy to do?

A week or so ago Sitepoint published a cute little tutorial on how to make surprising animations react to browser resizing… and the magic of it was that it only used a gif and a jpeg to achieve this. Inspired by this, I decided to make the futurelab navigation using just animated gifs, and the results are pretty good I reckon. And it only needs a couple of 1 pixel wide gifs per navigation item – less than 1kb in total. (I also only learned how to make animated gifs in photoshop this afternoon, using this tutorial).

A note of caution: my navigation items are all the same colour, so you’d think I could use the same gifs for each item… but not so. Something to do with how firefox renders animated gifs means it doesn’t animate the hover-off image if it’s used on another navigation item too. The solution is simple: make a few copies of the hover-off gif with different names.

As this blog is merely a pretext to fill a web design portfolio website with regular content, I suppose I should knuckle down and write something related to the day job.

Jakob Nielsen, as well as being a good candidate for a Bond villain, is, according to many, the world’s leading authority on website usability, and as such I reckon he’s a good egg.

Contrary to what you would expect his website isn’t – in my humble opinion – very easy to use. The trouble is there’s very little sense of hierarchy, or use of visual clues. One of the golden rules of usability is that sticking to conventions tend to make things easier for the user, and he doesn’t make his navigation look different enough to ordinary content.

Also, despite writing a regular column on web usability, it’s infuriating that he does not publish a feed of this column, thus making his website more unusable still for RSS reader user s (which surely make up a higher percentage of his readership, given the subject he writes about appeals to people with an interest in all things good and webby). (Fortunately, somebody has used their initiative and put it right for him with this feed).

Anyway, one of his latest columns, on whether to put ok to the left of cancel or vice versa on web forms (the dilemma is that non web applications on apple put the buttons the other way round to windows) got me thinking about whether it’s possible to detect he operating system of a visitor, and change whether the buttons are floated left or right, depending on the OS, which would eliminate the problem.

And it turns out it is possible. One day maybe I’ll follow this post up with some example code.