Archive for the ‘Web Design’ Category

I’ve spent the evening playing with ArtRage 2, a great little painting application which I discovered via Bzangy Groink. It’s purely a painting program as opposed to a Photoshop wannabe, and does a brilliant job of creating paint effects.

Thick paint smears and blends, pencils and chalks smudge, and markers work just like they do in the real world. Many of the tools can be adjusted to give different effects. You can paint with thinned oils, use wet or dry markers, soften your pencil and control the hardness of the crayon, and much more.

The program enables you to import images to ‘trace’, and can automatically load your brush with the correct colour from the underlying picture. I especially like the option of washing out brushes in the jar of water.

The interface takes a bit of getting used to, but UI designers at Adobe could learn a thing or two from it (for example, palettes moving out the way when you paint near them, and the zoom tool, which I found really intuitive).

ArtRage is available for Mac and Windows and, best of all, there’s a free version as well as the full version (which is a steal at only $20!).

On an unrelated note (well, perhaps a tenuous ‘free things for computers’ theme), the Streetmap Firefox Extension is pretty handy - highlight a UK street name or postcode and right-click to launch a map of it from Streetmap, Multimap or Google Maps.

Well I’ve finally taken the plunge and updated my iBook to run Tiger. Don’t want to tempt fate, but it seems to have gone smoothly. It’s definitely more memory-hungry than Panther, but does feel slightly faster overall. Spotlight’s a welcome addition, although I think it needs a little more work. I feel fairly ambivalent about Dashboard—not sure how much I’ll really use it once the novelty wears off (the Magic 8 Ball widget has proved quite useful: Shall I do any work today? “Definitely not”. OK then!). Early days yet though…

Time to have a bit of a clear out of my web design-related bookmarks — you’ll have to excuse their rather random nature…

• Doug Bowman wrote a little piece about using flags to help organise your CSS, which John Oxton followed up with a nice example of how he does things.
• Scott McDaniel demonstrates how much fun you can have with definition lists and a little CSS.
• Chris Heilmann’s written some nice tutorials on enhancing the usability of web pages using Javascript without sacrificing acessibility.
• Unordered lists have become the standard way of marking up site navigation menus nowadays, but there are umpteen ways of styling them with CSS. Which method to choose? Max Design have put together an incredibly useful collection of approaches for both single lists and nested lists, complete with example code and a browser support chart. If you want a quick and easy way to generate accessible, nice looking navigation lists, List-o-Matic and List-u-Like CSS Generator both make it a doddle. (the latter was created by Brothercake, whose cool docking boxes have been generating plenty of “Ooh”s and “Aah”s lately.)
• 29digital carried out a review of the accessibility of UK bank’s web sites, and the results make for depressing reading. For starters, of the 19 sites tested, only one contained valid HTML, and many failed to get even basic stuff like alt attributes right. Nationwide was “Top of the Class”, until HSBC redesigned their site and showed the others how to do it.

We had a call from a client the other day regarding the e-commerce site we’re developing for them. They had a query about the page that shows all the top levels of product categories, and the conversation went something like this —

Client: Are you going to put product thumbnails for each of the main categories on that top-level page?
Us: Er, yes, we did about two weeks ago…
Client: Well I can’t see them….
[We quickly fire up IE to check]
Us: They’re definitely there….

The client sent us a screenshot, and sure enough, no images. So after making sure it wasn’t a caching issue, we asked them to view source on the page. Instead of having a couple of dozen divs, each containing a heading and a thumbnail image, all they were getting were the divs and headings, with no sign of the HTML for the images. Weird.

Clearly something was blocking out those thumbnails at their end, but leaving all the other images in place. When we asked about their firewall, they told us they were using Norton Internet Security. It was the only possible explanation, but why was it filtering out those particular images? Neither the image markup nor the URLs they were linking to contained any suspicious words (e.g. banner, ad, cgi, popup etc.) or any javascript/Active X, and the thumbnails were all being loaded from a directory on the same server. What could it possibly object to?

After a quick Google I discovered the answer: Norton thought they were adverts, and blocked them automatically. Now being one of the largest security software companies, you’d think that Symantec/Norton would have developed some complex algorithm for recognising adverts. But no, this sophisticated software blocked images based purely on their dimensions. Because our product thumbnails were 180px high by 150px wide, Norton removed them from the markup altogether, without alerting the user that it had done so.

It turns out that with ad-blocking turned on (the default setting), Norton will block any images that match some dimensions commonly used by adverts. The blacklisted dimensions seem to be:

• 120 x 240
• 120 x 90
• 468 x 60
• 234 x 60
• 120 x 60
• 125 x 125
• 180 x 150

In the end I had two options to get round Norton’s idiocy — resize the existing thumbnails by a pixel or two and modify the CMS so that any images added by the client would be OK, or change the way the CMS output the HTML for the thumbnails. I opted for the latter:

<img src="foo.jpg" alt="bar" height="180" width="150" />

became:

<img src="foo.jpg" alt="bar" style="height: 180px width: 150px" />

Not particularly elegant, but as soon as I did it, the client was able to see the images again.

I don’t have anything against people blocking adverts (I’ve done so myself using the hosts file), but really I think it should be done at the request of the users, on a per-domain basis. If a piece of software is going to blanket ban any image that it thinks is an advert, then surely it should make that decision based on something more concrete than the its dimensions. I wouldn’t trust any program that stupid to look after my security.

Norton Internet Security quick capsule review: piece of shit.

I’ve been up to my eyeballs in Flash lately so haven’t really had the time to post. Thankfully the project’s almost finished, as I’ve had about as much Flash as I can take for now. Yes it can do some quite cool stuff, but Actionscript still seems frustratingly primitive compared to a proper server-side scripting language like PHP. Anyway, let us not speak of this Flash thing ever again.

On a non-work note, I couldn’t stand calling my cats Sugar & Spice any longer, so henceforth they are officially called Patty and Selma.

Oh dear, Mcromedia has been bought by Adobe - don’t suppose there’ll be any getting away from Flash and PDFs now. Sadly it’ll probably mean the demise of Freehand, which I’ve been using since version 3 (back when it was owned by Aldus) and generally find much more useful than Illustrator. I just hope they don’t try to integrate Fireworks into Photoshop too. Less choice is rarely a good thing.

With all the work we’ve got on at the moment, I’ve not really had the time to post lately. Of course my new iBook’s consumed quite a bit of my free time as well: learning how best to do things in OS X, getting the necessary applications set up how I like them, and generally being all “Ooh, shiny new toy!” about it.

My new cats have been keeping me pretty busy too; if I’m not playing with them, feeding them or changing their litter trays, then I’m trying to stop them causing havoc around the place. For instance, this morning I caught one of them trying to climb inside the combi boiler – I managed to grab her just as her backside was disappearing through a previosly undiscovered small hole in the top of the boiler.

Incidentally, althhough I keep referring to them as “the cats”, their names are actually Sugar (black and white, complete cuddle cat) and Spice (all black, fluffy bundle of energy). Not really my sort of names, but that’s what they were called when I got them, and I thought I’d stick with those as it’s what’s down on their Blunkett-esque ID chips (I’d probably have gone for Patty and Selma, or maybe Sherri and Terri). Anyway, it’s meant to be bad luck to rename a ship, so perhaps the same applies to cats too….

A couple of people have suggested I post photos of the cats, but to my mind that’s just a little too sad. I mean, really I’d have to go the whole hog and put together a garish page dedicated to them on Geocities, with perhaps a mawkish poem about how great cats are, along with 30 animated gifs of cartoon kittens chasing balls of string.

As for work, I’d love to whinge about some of it, but I my thin veneer of professionalism prevents me from doing so. That said, the last couple of weeks have been a bit more interesting as I’ve been doing some work in Flash for the first time in ages. My Flash skills are somewhat rusty, not having used it since version 5, so it’s taken me a while to get up to speed with the changes in MX 2004. Thankfully the Actionscript is all fairly object oriented nowadays, which makes life a lot easier.

I’ve got mixed feelings about Flash after a fortnight of using it; on the one hand it’s got some really useful, powerful features, but on the other hand it makes other fundamental tasks difficult or impossible. For example, one’s made to jump through hoops in order to query MySQL – presumably Macromedia are trying to push their commercial remoting products.

I also find it surprising that there’s no way to generate an image using Actionscript. For the project I’m working on it would be great if users could design something using the .swf, and then export the frame to their browser as a .png file. But sadly there doesn’t seem to be any way to do this. Perhaps I need to invest in Director… Pah!

I’m also having to resist the urge to use Garage Band to create a soundtrack for the Flash file. Surely my freeform jazz odyssey could only enhance the user experience?

There’s an interesting article over at Wired suggesting that the Wall Street Journal is in danger of becoming irrelevant because it charges people to view its articles online.

Because you have to subscribe to access both current news articles and the archive, the Journal is leaving only a faint footprint in cyberspace… I googled “Enron” — an issue the Journal covered exhaustively, and which two of its reporters even wrote a book about — and not one article appeared within the first 25 pages (250 results.)

…

Since most people refuse to pay for WSJ stories, most bloggers are reluctant to link to them. It also has an impact on anyone who uses the web for research — and there are a lot of us. As importantly, the next generation of readers is growing up by accessing news over the internet, and one place they are not surfing to is WSJ.com. With their habits being formed now, there is little chance the Journal will become part of their lives, either now or in the future.

I think there’s definitely something in this argument, and I wish the Independent would take note. I often buy the paper and read something that I think is worth mentioning here (I think their coverage of the Iraq war has been particularly good), but since they’ve started charging for access to lots of their articles, I usually end up instead linking to similar pieces at the Guardian, their rival, who don’t charge. I wonder, now that online advertising revenues are supposedly picking up, if the subscription model really does benefit the paper more than the expanded readership and profile that free access funded by advertising brings about. Maybe a decent compromise would be to charge for access within the first two days of an article appearing, then make it freely available after that.

So we’re going to get a new version of IE before Longhorn - IE6 SP3 IE7. To misappropriate a Bill Hicks line, great, now there’s another version of IE I won’t be using.

I can just imagine the scenes at Redmond -

Steve: Loads of home users are ditching Explorer ‘cos it’s so buggy and insecure, and now some of the corporates are talking about switching to Firefox too. We need to make it look as though we’re not stagnating until Longhorn!

Bill: You’re right, we’ve got to combat all the bad publicity that we’re attracting now the mainstream media is picking up on how crap our products are… Hmmm, so how can we make it look like we give two shits about our end users?

Steve: Well, we could cobble together a few security patches for IE and release them as SP3…

Bill: No, we’ll call at IE7! Guaranteed good publicity, and it’ll be weeks before anyone twigs that it’s just a bug fix for a four year old browser!

Steve: Brilliant!

Well, maybe I’m just being too cynical, but I’d be amazed if IE7 actually introduced any major rendering improvements over IE6, such as support for png alpha transparency and CSS2.1. I suspect its CSS support will either remain unchanged, or there will be a few minor improvements that introduce a slew of new bugs for us to deal with. Still, at least it’ll give the web design bloggers something to do, coming up with yet more hacks to workaround yet another buggy Mircosoft browser.

As for your average, non-developer user, I can’t see it really improving on Firefox in terms of features, security and usability.

On a related note, the Register published a great little rant about MS’s attitude to interoperability by Hakon Lie a few days ago.

With my purchase of an iBook looking imminent, I’ve started thinking about Mac equivalents for some of the software I use on a regular basis. There’s no problem as far as PHP is concerned, as Zend IDE is available for the Mac too, as are the usual suspects from Macromedia and Adobe. However for MySQL administration and development I use a nice, simple GUI front-end called SQLyog (free), but that’s not currently available for Mac.

After a bit of Googling, I got somewhat sidetracked by EMS MySQL Manager (free trial / $134) which, although only available on Windows, is a fantastic program, packed full of nice features and tools for MySQL development.

I did find Navicat (free trial / $95) which is available for Windows, Linux and Mac. Although not quite as feature-laden as EMS MySQL Manager, it’s not too far behind, and includes lots of similar tools (such as a visual query designer).

On the subject of applications, here are two free programs I recommend to anyone wanting to analyse their Apache logs offline rather than on the server.

Funnel Web Analyzer by Quest Software is available for Windows, Linux and Mac, and produces really comprehensive, attractive reports (and graphs) on just about every aspect of visitor activity. Also worth a look is Relax, a free log analysis tool for referrer information processing.

I was having a bit of a clearout of my bookmarks today, hence the fairly random nature of these web design/development links:

• Panic Goods has got a lovely little drag and drop shopping cart interface — I particularly like the puff of smoke when you drag an item out of the basket. Sadly it doesn’t work with javascript disabled though. (via adactio)
• Looking for inspiration? How about looking at some images of great 1970s design, from fashion and interiors, to Jane Fonda in Barbarella.
• This is quite an interesting twist on the Inman-Flash-Replacement technique: intergrating two images using flash, which degrades nicely for users without Flash or CSS (more info here).
• Luke Wroblewski has written an article on Web Application Form Design which is well worth a read.

When it comes to laying out forms there’s a lot to be said for tables. However, it can be done using CSS, for example using the method outlined by Peter-Paul Koch at Quirksmode. Now I’ve just stumbled across Anthony Eggert’s way of laying out valid, accessible forms too – very impressive. The javascript to hide optional fields is a nice touch too.

Elsewhere, Eric Meyer’s kicked off a little discussion on techniques for coming up with memorable passwords. I rather like the algorithm idea by Isil Flynn (comment 6), which makes it pretty easy to remember lots of different passwords.

Atomic Playboy has written a great little article on using Apache’s mod_security to block blog spam. Also worth a read is another article on reducing referrer spam using htaccess.

The Register has an interview with a professional blog spammer, if you fancy seeing someone failing to justify their actions.