On The Road with Vicky Lamburn

Quick post this one as the web dev type will clearly poke around the code (I want you to!) — this evening I have created some very quick but potentially very usable code that progressively uses Javascript to create a ’sidebar’ element on a webpage for widgets that you could change the order of, and potentially close or add to depending on your preferences.

http://www.sunshinesista.plus.com/worthing_test/sortables.html

This code creates a page and if Javascript is enabled creates the sidebar and a cookie that is stored on your PC for 7 days. This notice will pop up just so that privacy with regard to my code is transparent.

The sortables are then set up in this floating side bar and then you can re-order the examples and exit the page, browse away, whatever. When you come back, the order you created will be restored neatly.

By all means use it yourself I know I will be… (I’ll add ‘remove/hide’ and ‘add’ code but that’s it)

Hope it’s useful. It uses jQuery, an absolutely superb Javascript library.

Well it’s here and it’s – looking interesting even though the standards mode seems to be doing peculiar things. Have we been doing our job wrong or is IE8 still teething in this department? My guess is a lot of the conditional code and CSS hacks used for IE are causing issues for some. I look forward to continued investigation with IE8.

Woah nelly, hell has just dropped below zero (or 32F)!

http://blogs.msdn.com/ie/archive/2008/03/03/microsoft-s-interoperability-principles-and-ie8.aspx

This is fantastic news and a brilliant example that Microsoft does listen when something makes sense. That’s right: it seems IE8’s default behaviour will now be IE8 (ACID2 compliant) standards mode, with IE 7 Standards (read IE6 interoperable) mode being switchable.

In one policy decision, in one line of code probably — Microsoft is effectively ‘fixing the web’ to borrow some of their parlance.

This is a fantastic bit of news and may even make me consider IE 8 as my main browser if its good enough on my Windows XP box/partition.

As a veteran web developer now, I am so happy. Microsoft deserves kudos for this; even though they should have been consistent with standards from day one. But I won’t hold a grudge, even when half of my working week is spent with my mind taunted with Internet Explorer 6 compatibility.

Oh whatever can she mean? Has she in fact held hostage a talented and qualified web designer under her desk whilst passing off the work as her own? Or is she in fact stealing all of her designs from somewhere else? Maybe she has only been making websites since 2000 and not 1995?

Well none of those are the case. My first web sites were developed and tested using NCSA Mosaic on my Amiga in 1995, and all of my work is my own (except for the snippets of fixes that I occasionally need for Internet Explorer 6…)

My secret is in fact that very reason I have used a blog as my main website. I rarely come home these days and sit on my computers to do further website development. I get my quota at work 5 days a week. That’s not to say I am not interested in it really, far from the truth. I think the web is just about the most fabulous thing in the world. (Just think how different out lives are in the past decade because of the Internet and specifically the web.)

You don’t need a moving eulogy to the web though. What I mean is that since mid 2006 I have not maintained my own website, I use the blog as good way to get my work out on the web with minimal effort. I don’t run a CMS system (it’s only me after all, bit overkill) and I don’t run a web server.

Shadowplay Design Specification

Anyway I have knocked together my website over this weekend using a killer style that I have developed which I am going to be putting to good use elsewhere. This is my so-called Shadowplay design. It uses a number of things that I have wanted to achieve:

• Accessible design: First and foremost navigable easily with mouse, keyboard and other input devices.
• ‘Scalable’ in two senses:
  • Just as suitable for small sites and large sites alike
  • Increasing/Decreasing the font size yields a gracefully shrinking/enlarging ‘zoom’ as found in IE 7 and Opera and soon Firefox 3.  (NB: This is based on my flex CSS design idea but this is slowly becoming redundant with the majority of browsers having page magnification instead of vanilla text size increase. This is a back of a fag packet calculation that ~40% of users use IE7 and soon 15% of the public will use Firefox 3.)
• Little to no CSS ‘hacks’: I detest with a passion CSS hacks using commenting side effects. I respect these were once needed if you wanted your site to work on Gecko based browsers (Firefox/Netscape 6+), IE 5 (Mac and PC) and IE 6 but these days–no need if you know what you’re doing and your target is:
  • Internet Explorer 6+, Safari 2.0/Konqueror, Firefox (Gecko based browsers) and Opera.

  That is pretty much 99.9% of the web browsing platforms in use today (according my statistics.) The only ‘hacking’ is PNG transparency for IE6 via Javascript and the DirectX filter, and a couple of selective comments for IE6. That’s it.

  This is good because it means the core CSS file for screen output is clean and when IE 6 dies (hopefully a slow painful choking death…) I won’t be batting my CSS styles into shape with drastic surgery removing obscene looking CSS comment hacks that I will have long forgotten their function.

  That said I am still catering for IE6 as it’s the most modern Internet Explorer browser that can be run on Windows 98, 2000 and NT 4 (Of which cumulatively makes up ~10% of the browsing market) although I’m really hoping it’ll start to dwindle into 2008 allowing me to leave some of the slight IE6 glitches ‘unfixed’ as I think there needs to be an element of carrot in front of the horse here.

• Modern design that leverages the best of CSS based design, contemporary web design trends (the dreaded 2.0 aesthetic which on the whole is downright gorgeous in my book) and using ‘progressive Javascript’ that doesn’t break the site in its absence but subtly improves things without interfering with accessibility. (jQuery)
• Be a design that doesn’t shout about how good it is, but subtle and something you just appreciate its aesthetic without necessarily consciously acknowledging it as such. The same could be said about the commodity value of Helvetica as a beautiful design that’s just there.
• Small nimble size: How does 90KB in its vanilla form sound including jQuery! This includes all the graphics including gorgeous transparent PNGs.
• Valid XHTML 1.1, CSS 2.1 and up to WCAG 1.0 AA (Priority 2) spec.

As you can see the design brief was quite a tight one. And I am glad to say that I have met all the things I wanted to with this design.

Open Source

The other great aspect is that I developed it using open source free software. Virtually everything worked as well as it has done on proprietary systems in fact in most respects it was better as my humble T40 just soldiered through the work without missing a heartbeat. Whereas I would usually use Notepad, Adobe Photoshop and Illustrator I used GEdit, Gimp 2.4 and Inkscape. Apart from one minor skirmish which infuriated me in Gimp it worked a treat. In fact I do have virtually whole hearted praise to the Gimp team as 2.4 is such a vast improvement in my book as a Photoshop user that it’s just not funny. It’s like using a new program with all the annoying as hell bits ripped out of it. The new design uses graphics generated solely with Inkscape and Gimp.

GEdit does some funny things though on occassion, pasting doesn’t always happen at the cursor insertion point but I just kept an eye on this and I was fine. I don’t know whether this is a bug or not?

Summary

Anyway I’m going to quit jabbering on and I’m going to upload my new website (which will be a companion to this blog, the blog remaining my main area of concentration online) and post the link here and then you can decide for yourself

The other good thing is I have a website of my own to brandish at Barcamp London 3 next weekend Fancy that, was I the only web developer at Barcamp Brighton without my own personal website that I had designed?

At last the new Worthing Theatres website is online.

It’s a cracking little site. Lots of very snazzy CSS wizardry and not a bit of Flash or the likes in sight. A bit of Javascript for the calendar and title image rollover text but that’s it. Plus it also works in Internet Explorer 6.

I’m very happy with it. And I know a lot of other people will be too. Hopefully this will answer all of the problems we had with the old site which was just not a good website.

Also–it’s an entirely static website apart from some ASP glue; no database driving it at all. That’s not necessarily a good thing but we have managed to keep most of the ‘dynamism’ a database driven site naturally has.

I’m such a happy bunny Three months hard work have paid off.

Now on to the next one.