Yet javascript opens up a world of exciting behavioural options to us. It enables us to bring our pages to life with all the wizzy and cool stuff that clients love. Things swishing in and out of view, dropping down, sliding, expanding and contracting. Javascript brings our flat designs to life. But it’s difficult. That’s one reason why jQuery was invented — to make life easier for web designers. If you’ve already mastered HTML and CSS then you’ll find jQuery a logical next step. It uses a similar code style to CSS rather than the all out alien language of raw javascript. Learning jQuery 1.3 from Packt Publishing (ISBN 978-1-847196-70-5) is the only book you’ll need to get started with the library if like me you’re a web design who wants to add a little extra umph to your designs.

You’ll realise that this is definitive tome when you see that it contains a glowing foreword by John Resig, the creator of jQuery. He praises the authors, who he knows personally and gives Karl Sedberg a particular thumbs-up for his excellent knack for the English language. Indeed the themes in this book are relayed to the reader in accessible chunks of to-the-point tutorial that will immediately have you eager to boot up your PC and get cracking with showing and hiding, fading, bringing content into the page by the power of AJAX, sorting tables and all manner of glittering delights that were hitherto beyond your mortal reach.

I was in the process of building a new website using the usual solid webstandards that have kept me in work with my current employer for the last seven years when this book landed in my in-tray. One chapter in and I was hooked. My original pretty and functional site was soon awash with plenty of little jQuery effects and goodies. Probably overkill for what was actually needed but once you start playing it becomes pretty difficult to leave alone. Remember when you discovered all those photoshop layer effects? Remember how you used them in earnest way back when? You’re going to do the same again here. But as time goes on you learn to use where appropriate and go throwing everything including the kitchen sink into a design. JQuery is another set of tools to add to your ever expanding web design toolbox and this is the manual.

Learning jQuery 1.3 by Jonathan Chaffer and Karl Swedberg is published by Packt Publishing (ISBN 978-1-847196-70-5) and has a recommended retail price of £24.99.

Read a sample chapter or buy it direct from Packt Publishing.

Induction web sites (for both undergraduate and postgraduate students)

My team first created induction websites for students way back in 2001. Back then they had grand plans of creating reusable chunks of XML code to be splatted onto various different course sites using XSLT. These grand visions never really worked as planned as the OU never did get their CMS of the time, Tridion to work properly.

I’m heading up the project to create an offering for the largely ignored postgraduate students as well as those undertaking undergraduate study. As you’ll imagine, the stakeholders are wide and varied for this one but I’m hoping to get some some social web stuff in the sites from the get go. OU staff want to buddy up? Students with ideas? What should we be doing? Let me know.

Study at the OU (phase two)

We launched the latest version of the online prospectus earlier in the year. Now we have the opportunity to finish the job. Expect a new and more exciting homepage, better designed and functioning course descriptions as well as some refinements to the information architecture.

Student Services Intranet

This site is getting so old and creaky now. The Dreamweaver/Contribute workflow still works remarkably well and seems to suit the staff. However, it would be nice to evolve into using a proper fit-for-purpose CMS like Drupal where we could properly separate the content, design and development layers to make technical updates less of a headache.

We’ve got the opportunity to do some decent guerrilla usability testing with staff in order to truly establish their needs in the various areas of the OU that call upon Student Services.

Services for Disabled Students (redesign)

A site that ought to be a shining example of the OU’s approach to web accessibility. At the moment it falls a little short of the mark with it’s confusing navigation systems and lack of respect for basic design principals. We’ll be sorting out the information architecture, giving it a fresh coat of pain and getting the Plain English folk in to address some of the institutional gobbledygook.

OU web standards, styles and guidelines website

Something that I’ve been working on sporadically as time has allowed. So far we’ve got a wiki which details basic requirements of all OU websites from a business, accessibility, usability, SEO and brand perspective. It covers things like the standard header and footer, fonts, colours, grids, photography, illustration, writing for the web and the like. We want to encourage more people from the OU to get involved in this so if you’re up for it, get in touch.

Aside from a few bits and pieces here and there, that’s me for the next few months. I’ve decided that I’m going to report my progress on the projects here now that I’ve retired my OU blog (too restrictive for me I’m afraid). I’m hoping I might be able to encourage some comments here and there so don’t be shy.

Level one – Apple Time Machine (daily)

Pros

• Hourly backup when iMac turned on.
• On-site, attached to iMac.
• Backs up everything
• Effortless
• Relatively cheap

Cons

• On-site – will be destroyed in fire
• Could be stolen along with iMac
• Disc will fail at some point

Level two – DVD backup (weekly)

Pros

• Archive quality disc
• Less likely to fail than hard drive
• Stored off site with friends and family
  
• Relatively cheap

Cons

• Harder to manage
• Labour intensive

Level three – online backup (monthly)

Pros

• Backed up to scalable server
• Taggable

Cons

• Expensive
• Prohibitively expensive to backup music and video
  

What I’m backing up

1. Priority one
   1. Photos (iphoto)
      
   2. Music (itunes)
      
   3. Video (my flip video)
      
   4. Documents
   5. Websites / portfolio work (mamp / htdocs)
      
   6. Application serial numbers
      
2. Priority two
   1. Applications
   2. Settings

I had recently attended the first Future of Web Apps conference in London and had been fired up by Tom Coates‘ talk about the future of data mashups (owning ones own data and reusing it in various contexts) and was looking forward to building on this philosophy. Of course my main problem was that a massive institution such as the Open University is was very wary about sharing data and integrating with third-party applications and the project seemed to want to recreate apps like Flickr and Delicious rather than use their API. Hitting this brick wall was a bit of a setback but I soldiered on regardless with the design, hoping that the aesthetic approach might rub off on the development side and push the boundaries of what was possible with an ePortfolio.

Rather than document my progress here, I started posting to my OU blog instead. We went through various iterations of the design, building on user feedback and testing. The biggest problem was that ‘user’ was defined as the course teams who would prescribe the software in their courses rather than the students who would use it. So the whole thing was designed and built by committee and I ended up a little dispirited by it all. I still have some conceptual design work that I hope might be used if the project is ever revisited in the future. For now, MyStuff is available to OU students and it will be interesting to see how they cope with it.

I was also involved with many other interesting projects at the Open University. I was asked to find out how the OU could support students using mobile phone channels such as SMS and the mobile web. I undertook some research and carried out a pilot SMS alert service with a small group of 450 students. The reaction was very positive and I’m now looking into the ways in which the OU can adapt to provide a similar service to all students given its rather complex business model.

I worked on the redeveloped OU online prospectus, Study at the OU, with my ex-colleague Stephen Turvey. We were asked by the Head of Online Services, Ian Roddis, to create a fresh, usable and accessible design that could be user tested to death in order to create an experience that would help recruit and retain students in a era where government funding for students doing a second or equivalent degree was being withdrawn. We came up with something minimal and easy to apply to the complex existing systems. The project is ongoing and we’ve yet to move into the second phase where rich media and interaction is applied to the course descriptions but we’re certainly moving in the right direction with this very rewarding project.

Stephen and I also worked on the OU Careers Advisory Service website redesign which earned the award for AGCAS HE website of the year. We put a lot of hard work into developing a subtle yet appealing design with intuitive information architecture.

My ongoing work at the OU is now to create a community of practice for online web standards. The OU is a huge community and there are many web designers and developers. Until early this year we were a rather fragmented bunch but Twitter has brought us together. Not only web designers and developers but librarians, academics and support staff across the main campus and the regional and national centres. I’m talking to people in departments I didn’t even know existed and hearing about many interesting and exciting projects. I honestly think that we now have a critical mass to do some truly innovative projects. Take SocialLearn and OU View on YouTube as two examples of where the OU has now finally moved away from wanting to control all aspects of data, design and production. Even the non-official OU Facebook apps are gathering steady momentum and are seen as being useful student support channels. It looks as though 2009 might even see the OU drop the in-house bespoke web Content Management System for the open source goodness of Drupal. There’s an interesting time ahead at the OU that I’m really looking forward to getting stuck into on my return from paternity leave next week.

The challenge

When creating a WordPress theme you can use a number of individual template files to control different types of content. However, very little often changes from page to page. You end up retyping the same code into each template. When you want to make a change to your theme you have to go and edit the code numerous times across different templates. A better solution would be to have a few template files as possible and apply a different output based on certain conditions. WordPress offers us conditional tags to do this very thing.

Imagine my scenario. I have blog posts published in full on the front-page of my site. Each of these posts contains a link in the title which takes us to the full, permalinked article plus comments. I can use the same WordPress loop for the homepage as for the single articles save for a two things: 1. The link in the title isn’t needed on the single post as it would self-link. 2. The link to the comments isn’t needed for the same reason.

The solution

<?php if (is_single()) { ?>
<?php the_title(); ?>
<?php } else { ?>
<a class="bookmark" href="<?php the_permalink() ?>"
rel="bookmark" title="Permanent Link to <?php the_title(); ?> ">
<?php the_title(); ?> </a>
<?php } ?>

The code above illustrates the syntax to use. The emboldened bits provide the conditional logic and the bits between are the code I want to output. And there you have it. Simple really.

What you see here is a skeleton of a site with basic functionality and a so-so basic design. I’ve upgraded WordPress to the most recent version. I was on 2.02 or something like that. Now I’m on 2.6.1 and managed to lose my categories along the way. I think I’ve managed to recover them thanks to some useful advice.

I’m now thinking about how to make use of the WordPress (WP) tags. I always used WP categories before but now I’ve got a bit of a conflict with my taxonomy. Hmm. I’ll see how things go as I write new posts.

Design-wise I’d like to do something different. I want to avoid gradients, drop-shadows and other web2.0 cliches as much as possible (they’ve never featured in a GuyWeb design yet though). I do have something of a penchant for large text though so that particular feature is likely to stay. I always find designing my personal site to be the hardest design to do. Perhaps because it’s such a personal artifact, something that represents me and my work. It’s the essence of the man.

In the past I’ve toyed with hand-drawn illustration, type-writer text and as much organic, grubby real world enhancements as I could cope with to try and make the site feel less computery. But the web is digital however we try to conceal the fact. So for the time being my header contains a throwaway block with a bunch of random blocky fills. I’m going to replace this with something more meaningful later.

The two-column layout is ideally suited to weblogs and I don’t see myself messing with that particular convention. in the past I’ve created homepages that use a different layout from the rest of the site, giving a window onto the delights inside (blog, photos, portfolio, about, cv) but having visited other people’s personal sites I discover that I much prefer to get straight to the content and mosy on from there. So it’s likely that although I’ll be trying to do something a little different, I’ll follow the basic layout of a typical blog. Whatever I do, it will continue to be a flexible, elastic percentage / ems layout.

I’ve decided to use the Blueprint CSS framework to underpin the typography and, more importantly, to reset the browser defaults. I see Blueprint as a rather useful tool and starting point to build upon and that’s what I’m doing.

I’ll also be using the jQuery Javascript library for any behavioral embellishments. I’ve grown to love Javascript through my experiments with jQuery and have used it in a number of professional projects over the last few months. It’ll be nice to use some subtle user-experience enhancing techniques here.

I also intend to use microformats where appropriate. At the moment I’m using the Atom microformat for the posts and POSH markup. I will be adding hcard, hreview and various other useful bits and bobs as I go.

Most importantly in this redesign is to publish some new content! I’ve got a massive list of topics to discuss that I’ve just not gotten round to. I never felt compelled to write whilst my site was so undesigned but once it gets a fresh lick of paint I’ll want to fill it with suitably rich content.

So there you go, a pledge. Subscribe to the RSS feed to find out more.

A full and expanding todo list is available, should you be interested.

I’ve been using my Nokia e51 to browse the web on a daily basis for the last six months or so. A lot of the sites I visit have mobile versions of their content: Twitter, Facebook, Flickr, BBC, Amazon. These mobile versions are not just about mobile stylesheets but entirely different templates with different navigation systems which often put a wall around the core features of the site so you can’t stray into areas that haven’t been optimised for mobile or simply aren’t suitable. The majority of websites don’t have mobile versions of their sites but are still viewable in most modern mobile phones and small screen devices that support HTML and CSS.

There’s an oft-debated argument about fixed-width -vs- fluid layout. It usually revolves around the need of the designer to have control of the canvas, to be able to absolutely position elements on a page so that the design comes together as a cohesive piece. Whilst this approach might look rather nice if the user has the same display / browser setup as the designer this is rarely the case. A lot of web design is about just letting go. Maybe accepting the loss of control is the mark of a good web designer? So we should all be using fluid layout designs, where possible, in our website design. But what about mobile or small-screened devices?

Viewing a liquid layout website on my Webkit-powered Nokia browser is not a pleasant experience. Imagine a simple layout with the main content occupying 60% of the viewport with the remaining 40% given over to peripheral sidebar style navigation elements. 60% of an 800 pixel viewport is 480px, leaving 320px for the sidebar. This seems reasonable enough. Large screens, with max-width techniques for line-length legibility employed can look good too using this ratio.

Switch to a small screen of 240px and the story is rather different. 60% = 144px / 40% = 96px. Whilst we have no horizontal scrollbars in this instance, the columns are extremely narrow are difficult to read. This is a simple two column layout. Imagine what happens when we throw three or four liquid columns into the mix (4 x 25% = 4 x 60px)! I’ve actually found that fixed-width layouts optimised for 1024px widths render much better on my mobile phone. Granted I get a horizontal scrollbar but Nokia’s browser is intelligent enough to recognise blocks of content and to wrap them within the viewport for me. To get to the sidebar I need to scroll right but, once there, the content wraps nicely. The same is true for liquid designs where a min-width is defined.

So for me, on my Nokia e51, fixed width websites work better than percentage-based liquid designs that don’t have a min-width defined. I don’t have an iphone so can’t comment about that but would be interested to know of your experiences on a range of different small-screened devices that attempt to render HTML and CSS.

So, in addition to the excellent advice from Roger Johansson on setting a max-width, I’d like to suggest that all liquid layouts need a defined min-width for viewing on small screens.

To understand what I’m talking about, make your browser really small for the following liquid-width websites:

• Meyerweb.com
• Adactio using the hirnlego theme
• Vivabit

for the time being..

• Photos on Flickr
• Friends on Facebook
• Bookmarks on Del.ici.ous
• Music on Last.fm

It’s still very rough around the edges but I’d say it’s at about alpha stage now, ready for a bit of testing. Needs a lot of tidying up and severe usability testing before going anywhere near the general population though.

It would be interesting to see how some of the target audience for the system get on with it. What I’ve seen is quite bewildering – many many features to get you head around! No idea how many stakeholders were involved but it shows that there were a hell of a lot!

I still think there’s a need for a ‘MyStuff lite’ that starts with a single feature and does that amazingly well before moving onto the next one (which would be what the majority of the end-users were crying out for). But that couldn’t really be defined as an ‘ePortfolio’ I guess. Having scouted about the net looking at other ePortfolios I’ve yet to find one that makes any sense to me.

On a purely aesthetic note, the cut and shut design (metal topbar?) is looking pretty ugly but I’m sure that can be bashed into shape with a bit of time. There’s no scope for me to do anything like that at this point though – I’m simply doing some work to make the form output a bit more presentable.

Will be interesting to see it evolve. Are you using MyStuff? What do you think?