The State of Newcastle

I’ve been a practicing web designer/developer/whatever in Newcastle for over three years now and about a year ago I set up a mailing list to try and act as a useful resource, shamelessly stealing from brightonnewmedia.org

So was born newcastlenewmedia.org.

The grand plan was to find other people like me with an interest. Anyone I could learn new bits from and hopefully the utopian dream of everyone getting something out of particupating in a community. It’s been, I guess, something of a partialy something. Traffic goes up and down depending on, well I dont really know. Hopefully it’s been useful on occasion.

One issue was I never really promoted it. So, with a little time on my hands rather than redesigning this site (again) I did a little work freshening up the website, adding a showcase of local designers personal sites in the process and the plan is to promote it a little. Hopefully get some more people on their and in particular some students from the local Uni’s – quite a few of which teach something along the lines of web design but approach it in wildly different ways – something I might write about next.

Anyway, I guess the main aim is to get a snap shot of the industry and in particularly the people who make up the industry, in and around the North East. Are their people in their bedrooms going crazy CSS zen Garden designs? Are their any DOM Scripting leviathans? British web designers seem to be the cream of the crop, or at least make up a decent percentage of the cream (why do Standards based design analogies always end up being cake related?), but where are the Northern designers, never mind the North East.

Anyone else think differently? Let me know. Send me sites of designers and developers in and around the North East and I’ll post them into the newcastlenewmedia.org site and we shall see.

unobtrusive javascript

Lots of talk around at the moment about unobtrusive javascript on the usual websites and discussion lists. However alot of people, maybe outside the inner circles, are still finding old school examples of inline code on out of date pages.

So here’s my tuppence. I guess the more websites that post new, up to date, examples and reasoning the better?

The premise is pretty simple. In the same way as controlling formating with tables and having everything being mixed up in one .htm file is frowned upon as simply being too much work – dealing with lots of inline snippets of javascript raises the same problems. Namely being time consuming to update and maintain.

The solution is to keep ALL your javascript in separate .js files, and that includes removing things like href="javascript:" or onclick=. The first question is therefor how – when I started looking down this route I found a simple answer hard to come by, having to look at more complex examples and reverse engineer them.

The following is the method I’m using at the moment. It may have issues I’m unaware – if your a javascript guru let me know. The examples are from the fluidflash page on this site, see it in action at www.morethanseven.net/fluidflash

We first I set up an initialisation function:

function init() { if (!document.getElementById) return false; liquid = document.getElementById("iNavLiquid"); liquid.onclick = liquidChangeClass; }

This sets the onclick event on the element with the id iNavLiquid that will trigger the function liquidChangeClass. Next we define that function:

function changeClass( targetId, newClass ) { if (document.getElementById){ target = document.getElementById( targetId ); target.className = newClass; } } function liquidChangeClass() { changeClass("iBody","liquid"); }

The specifics aren’t too important to this example but you can see the liquidChangeClass function which is triggered by the onclick event handler.

And finally we need to trigger the init function when the page loads. Their are lots of ways of doing this which is probably a conversation for another time – I used a schedule function from themaninblue.com which you can find below:

function schedule(objectID, functionCall, iteration) { if (iteration == null){ iteration = 0; } if (objectID == "window") { var oldonload = window.onload; if (typeof window.onload != "function") { window.onload = functionCall; } else { window.onload = function() { oldonload(); functionCall(); } } } else if (document.getElementById(objectID)) { functionCall(); } else if (iteration < 300) { setTimeout(function(){schedule(objectID, functionCall, iteration + 1)}, 10); } return true; } schedule("window", init);

So their we have it, hopefully a simple enough example of how to move to unobtrusive javascript. As most of this is generic and used all the time it’s far simpler that it first appears.

How i came to love visio

I’m doing a lot more IA stuff of late and being in a Microsoft shop that meant getting to play with Visio. And I have to say it’s a great tool. It’s pretty simple to pick up, powerful, lots of options and customisations and even better – simple to get to grips with.

Quite a bit of work I’ve been doing has been around process and specification. I’d read The Elements of User Experience a while back but have been getting more into it recently, and the visual vocabulary stuff is excellent. Have a look on www.jjg.net/ia/visvocab/ if your into this kind of planning. You can download Visio Shapes as well and then it’s just a matter of dragging, dropping and drawing arrows.

Another good resourse has been boxesandarrows.com, a site I’ve read on occasion but found both more useful and more time to read recently. Documentation seems pretty key to getting projects working efficiently within team environments – and pictures say a thousand words (or something).

fluid flash v0.1

Their is nothing wrong with a nice header graphic. Clients, designers and customers alike love them. But I often see them used as an excuse for fixed width designs. Well no more I say (unless, of course you have a perfectly good reason for a fixed width design in which case you dont really need this technique.)

The plan was simple. Find a way of incorporating flash headers into sites using liquid or elastic designs in much the same way you might use lots of sliding doors background-image goodness.

A quick actionscript solution, courtesy of Mike Ord combined with some CSS and Javascript is presented for perusal on www.morethanseven.net/fluidflash .

This is a simple example, the header at the top is flash and writes to screen it’s current dimensions. Try resizing the screen (liquid layout) or text (elastic layout) and see for yourself.

I need a nice attractive flash movie to really show this off so anyone who wants to send something let me know – I’ll make sure to provide credit.

new designs with added width

Any previous visitors will notice something of a redesign which is pretty much finished – although no doubt their will be a few tweaks over the coming weeks as time permits.

The main reason was to bring in a liquid design that will allow more space – something I’m quite fond of as an idea.

The default for web pages, before we add any styles, is a liquid layout – where the site content fills the window whatever the width. This should be ideal for everyone, whatever resolution or monitor (or device) screen size. Why then do a great deal of sites use a fixed width design, my previous design included?

Design expediancy seems to me to be the main culprit in my view. Not always I’ll admit – lots of blog style sites use a fixed width centered column in order to get a readable number of words per line (whether they know it or not), which was my original excuse I’ll admit. For most designers, and most people, it’s simply easier to think in terms of thinks that dont change. Using percentages (in a liquid layout) or em’s (in a elastic layout) simply takes a bit of getting your head round.

It’s the web, not print, and that is something that from my experience (second hand I’ll admit) is something that isn’t drilled home on the majority of university or college courses.

Attractive header graphics is something that lots of sites, in particular commercial sites, employ – and with good reasons. It’s a great way of getting across a brand ethos in an attractive and eye catching manner. It’s also sometimes used as an excuse to use a fixed width design – the question is why? Try resizing windows and text on www.vivabit.com, www.thebgroup.co.uk or www.capgemini.com .

One outstanding issue I see is using Flash in a similar way. With broadband usage, especially amongst companies, on the up and up, using Flash (and video) in a similar way becomes increasingly more attractive. So something I’m going to have a look at is how Flash and either unobtrusive javascript or sliding doors techniques can be used to get the cake (attractive, flexible layouts which use Flash – without breaking the layout) and eat it. More soon.

Mobile Edition (sort of)

I’m something of a fan of mobile devices and really should do more mobile web stuff but hey, the support for mobile CSS is shody at best. Enter this article.

The idea is really pretty simple. All you really want when your paying for bandwidth on your phone (or you PDA connected to your phone via bluetooth) is the content. So lets get rid of everything (and we mean everything) else. The solution is fairly devious – using some PHP jiggery pokery, a sub domain and some text parsing.

Have a look at mobile.morethanseven.net for an example on this site.

In reality it’s a non ideal solution, but considerng it really does take two minutes I dont see that as a problem, and I think that was what the author of the article was getting at. We want to use mobile CSS but some browsers ignore it while others pretend they are grown up browsers and try and render the whole site CSS file.

I’m hopefully going to alter this a little, rather than removing all stylesheets leaving any mobile media sheets intact. Assign these to the main site and we have an interim solution. Fancy devices that make use of the correct style sheets can use the main domain fine, others can get the same design by visiting the mobile sub domain.

Musical Baton

For those like me behind the times, I was quite impressed to get passed the batton (thanks phil)

Total volume of music on my computer 19.51Gb Last CD I bought Foo Fighters – In Your Honor Song playing right now? Well the last song I listened to was The English Motorway System by Black Box Recorder

5 songs that I listen to a lot or mean something to me?

  1. Ash – Dancing on the Moon, Jesus Says B-side
  2. Johnny Cash – Hurt
  3. Easyworld – Goodnight
  4. Jimmy Eat World – The World You Love
  5. R.E.M. Strange Currencies

Note that that list probably changes every day but hey, that’s for today. I quite like Simon’s music monthlies idea but dont know whether I could ever really get round to it. Oh well.

Few bits of housekeeping

Been a little busy with the new job but had chance to do a few behind the scenes bits and pieces, including:

  • valid and formatted feed
  • blogroll from NewsGator
  • StripComments project
  • autocomplete on search box (type c, x or p)
  • added Textile formatting for posts

Should be back with more soon. I need to reply to phil (xlab) about my musical preferences, jot down notes on using NewsGator as an online feed reader and a web standards redoing of the QWikiWiki output layer that I’m part way through.

Design in Flight Magazine

\[UPDATE\] Visiting the website I now find out that after the next mini issue it’s all over for Design in Flight. I can see how it could take over someone’s life considering the quality but I for one would have paid more to keep it around.

I’ve just got round to buying all the back issues of Design in Flight (www.designinflight.com) magazine – which features articles on design, web development and similar fields.

For only 10 dollars (via Pay Pal) for the 4 issues it seems excellent value at about 150 pages or so, brimming with interesting information.

I’ve obviously not read that much as yet but so far so good and for the price you cant really go wrong.

all the news from @media

After a little work I’ve put together an app to keep up to date with all the news around `media. Based on the collection of feeds from kurafire.net it collects and filters for posts for `media references and displays them.

I’m hoping it will proove useful to anyone else who wants to keep up to date. Especially when details start coming up about next year and in the lead up to that.

Have a look at morethanseven.net/atmedia. If you have any more feeds just let me know – I want it to be as extensive as possible.