About My CSS Zen Garden Submission | September 29, 2003

I'm pleased to say my submission to the CSS Zen Garden has just been accepted, so following in a grand tradition, I thought I'd say a few words about how it was created.

I've been meaning to do a submission for a while, but work, skillswap, my photo site and new blog have been keeping me busy. However my girlfriend was away a few weekends back, so in between sessions of Neverwinter Nights, I had some free time on my hands.

I started off with a layout pretty much in mind. I wanted a centered panel that stretched from the top to the bottom of the page and was surrounded by a drop shadow on both sides. The design would have a header block and then blocks for the content. Usually I'd sketch these initial ideas out on paper but in this case I didn't feel the need.

Not being a naturally talented visual designer, I get a lot of inspiration from other well designed sites. I have a big bookmarks folder of great looking sites, and for most projects this is one of my first destinations. Two sites I kept referring to were hicksdesign and jeffcroft.com. When I first saw these sites I really liked their colour schemes and decided I wanted to use an orange and green colour pallette on my submission. The CSS Zen Garden already had a very nice submission using a strong orange and green pallette so I wanted to make sure that the colour pallet I used was a lot more muted.

Layout wise, there were two regular sites and two other Zen Garden Submissions I kept coming back to. I liked the header layout of mckendall.net, especially the thin white lines between blocks (something that also appeared on jeffcroft.com ) and the block at the top of the page that bled to the edge. Indesain Studios was another beautiful site that used a general layout similar to what I wanted to achieve. The other two zen garden designs that most influenced me were Not So Minimal and Erratic Blue. I liked the overall content layout of both these designs and borrowed heavily from Dan Rubin's headline treatment. Finally I liked the logo Didier had created on his Release One submission and wanted create something with a similarly modern feel.

So with all these sites to inspire and influence me, I opened up photoshop and started working on the design. Everything took shape fairly quickly and I had my first draft ready in just a couple of hours. The main focal point of the design was a central image. After looking though my own pictures and not finding anything suitable, I did some searches on stock xchng and came across this picture. I actually didn't think the picture would be suitable for what I had in mind, but the colours were right and I didn't want to spend hours looking for an image. I decided to use this image for now and possibly think about alternatives later.

I bought the image into photoshop and immediately pixelated it to help create the colour palette. I really liked the pixelated image and after playing with a few variations (smaller pixels, fading from pixelated to solid etc) decided to settle on the original big pixelated version.

From here I came up with the idea of calling the design either sublime or subliminal. I liked subliminal because I thought the pixelated image of the limes was quite subliminal. However I ended up choosing sublime, because of the meaning of the word and also because I thought the image was no longer a picture of limes, it was somehow below or preceding being an image of limes, or sub-lime (wankey bit now over).

Once the design was finished, I chopped it up in fireworks, which I find much more intuitive than image ready and then started thinking about building the CSS. At first I thought I'd probably want to see how other people had built their CSS files. However once I started coding, I realized that I probably didn't need to. The design I'd come up with was pretty simple and I ended bashing out about 95% of the code in around an hour.

Like most CSS I do, I take a progressive enhancement approach, slowly building up figurative layers of style, step by step. I started by laying out the container, then moving on to the header, main copy and nav areas. On my next iteration I started styling the text, adding font size, spacing and padding. Finally I added the headline images and sorted out the styling of the nav area.

I tested this on Safari (My browser of choice), Explorer, Netscape and Opera on my Mac and was relieved that everything worked fine. I'd normally fire up Virtual PC to test on windows, but had stupidly deleted all my disk images the day before when trying to clear space on my hard drive. So I ended up having to wait a few days before I could test the template on a PC. Luckily, while there were a few IE problems, they were mostly related to the box model and were easily (if a little inelegantly) fixed. There was also one weird issue, which I won't bore you with now, but is documented in the CSS, that kept me stumped for an hour or so.

In total the design and template build probably took me less that 10 hours. Basically 2 evenings work. This was something I was particularly please about as I rarely spend less than a couple of days on a design and a good week or more building and then testing/debugging a CSS template. However in this case I think having the HTML already built and not being able to touch it was a big help.

Considering the speed at which I did my submission I'm pretty happy with it. I like the colour scheme, and the simple blocky layout works well I feel. I had some really positive feedback last week when I posted it up for testing/feedback, but am always interested to hear what others have to say.

Andy

Comments (10)

An open letter in defence of "tableless" recoders | September 27, 2003

At the moment there is a bit of a trend happening amongst web standards enthusiasts. A number of talented web desingers have given up their free time to build standards compliant versions of their favorite sites.

Along with this has come the appearance of redesign competitions like WThRemix and more recently ReUSEIT. By encouraging people to recode and redesign a well known and well loved web site, the idea of these competitions is to provide "a design challenge for coders, and a coding challenge for designers".

I think this trend is a good thing. That's why I've highlighted some excellent redesigns on this site and was more than happy to become a judge for the ReUSEIT competition.

Unfortunately not everybody agrees.

In a recent open letter to tableless recoders, the author questions these peoples motives and suggests they are doing more harm than good.

However I really think the author has missed the point. He naively assumes that the only reason people are recoding sites is "to show off how good you are at CSS". However I don't believe people are doing tableless redesigns for such base and cynical reasons.

The truth is, the majority of these redesigns are done by CSS enthusiasts for fun and as a personal challenge.

These enthusiasts pick a site because it's a site they love. They are not deliberately trying to antagonize the site owners. After all why would you spend days/weeks of your precious time into a project who's sole intention was to rub the original designers nose in their work. People are just not that spiteful. In fact I'd assume most people would be rather unhappy if they found out their work had upset the original designers.

The fact is, most people are doing this as a labour of love. Love of the site and love of CSS based design.

It's true, some people are also making a point. however the point isn't that the site designers should have done the site using CSS. The point is that the site could be done in CSS. The audience for the redesign isn't the designers and site owners, it's other CSS enthusiasts.


These kind of redesigns are also very community spirited. Big portals like those run by Yahoo and BBC are seen as integral parts of the web community. They have almost become web public services and people feel emotionally tied to these sites. As such I feel it's a great testament to theses sites that they engender such deep feelings in people, they actually want to get involved and help make them (and the web community in general) better.

It's not often you find busy people willing to give up their time and expertise for the benefit of the community. Whether they are passionate about a site, or about web standards, this is something that should be encouraged, not dissuaded. I want to see more people getting involved with the web not less.

Finally, rather than an egotistical display of peoples CSS skills, these redesigns are simply personal challenges. People do them because they are fun, because they are difficult and because it gives them a chance to try out existing skills and learn new ones.

So I think we should applaud this individuals and I personally hope to see more great redesigns in the coming months.

Comments (10)

My Zen Garden Design | September 26, 2003

Hi Folks,

I spent last Friday and Saturday evening coming up with a Zen Garden design.

Basically I wanted to create something clean and clear. Not too flashy or full of complicated CSS trickery. Just something simple that would inspire people to say, "hay, I could do something like that!"

I was also keen on getting the job done quickly (busy man and all) and not trying to impress people with my (limited) CSS knowledge. As such I wrote the bulk of the code in about an hour. I realise that it's a bit sloppy and uncommented. I've used the box model hack far more times than I usually would. However on the whole I think it's turned out quite well.

I've tested it on a few browsers and it seems mostly fine. However I'd really appreciate it if people could give it a once over before I submit it to the Garden, in order to catch any lurking bugs.

Also I'd really like to know what you think, and any suggestions you may have to make it better.

Cheers

Comments (19)

Google Redesigned | September 25, 2003

Continuing a common theme, Paul Scrivens has just created a standards compliant version of Google.com. The nice thing about this redesign is the lack of redundant <div>'s, something Richard Rutter would be pleased with.

While on the subject, Paul's new site whitespace, is a great little blog and one I immediately added to my RSS feed when I came across it last week. Well worth a read.

Comments (9)

User Defines Style sheets and Quirks mode | September 23, 2003

I've been trying to create an accessible user style sheet based on the default style of the BBC's Betsie program. I thought this would be an easy task but it's actually been proving quite tricky.

What I want to be able to do is linearize a table based layout. To do this I've been using:

table, tr, td {
  display: block !important;
}

However when I tested this on a number of popular sites like Yahoo or Amazon, the layout didn't get linearized at all. In fact it ended up getting severally mangled. It turns out that these popular sites don't have a doctype. This sends my browser into quirks mode and turns the layout to jelly when viewed using my custom style sheet.

The idea behind user style sheets is to give final control to the user. Unfortunately this breaks down if the browser/site has final say about the rendering mode. With so few sites actually having doctypes, this makes creating useful user style sheets a real hurdle.

The only way I can see round this is for browser manufactures to allow people to alter the rendering mode themselves (does any browser currently do this?). Otherwise user preferences are always going to be held over a barrel by web browsers and doctype-less sites.

Comments (3)

CSS Based Design - Matrix Style | September 23, 2003

Based loosely on a SkillSwap talk given back in March, Jeremy Keith's new CSS Based Design article is a joy to read.

The article is peppered with Matrix references to produce something that is both extremely useful and highly entertaining.

Who said learning had to be dull!

Comments (0)

Cool use for CSS attribute selectors | September 22, 2003

A while ago I wanted to remove the borders around all the text input boxes in a form, while keeping the borders around the submit buttons intact. The only way I could figure out how to do this was by setting classes for all the input boxes. It worked, but it felt rater unsatisfactory. Surely there should be some way to only apply styles to one type of input tag, but not another.

Well in fact there is, by using attribute selectors.

Attribute selectors are part of CSS2. They basically do what they say on the pack. You can select an element based on that elements attributes. So for instance, If I wanted to remove the borders around all the text input boxes in a form I could simply do this.

input[type="text"]{
  border-style: none;
}

Unfortunately, while attribute selectors are pretty well supported amongst most modern browsers, they aren't supported by IE5/Win. That meant in my case I was still stuck with using classes. Still it did open my eyes to how potentially useful attribute selectors could be.

Today I came across a cool way to use attribute selectors in order to hide banner adverts. The basic Idea is pretty simple. By using attribute selectors, hide any elements who's attributes look like they could relate to banner adverts. In the most simple for you'd do something like this.

img[height="60"][width="468"]{
  display: none !important;
}

Which would hide any image that was the shape of a regular banner ad.

However some people have taken this idea much further and have created user style sheets which aim to cover as many attribute permutations and combinations as possible. So if you're fed up of banner adverts, instead of using one of the many ad blocking programs around, why not simply set up your own banner ad blocking user style sheet.

Comments (10)

Slow iMac | September 21, 2003

My little iMac has been struggling of late. When I first got it, I couldn't believe how speedy it was. Aqua literally popped with responsiveness. However now it just crawls along. Want Dreamweaver and Photoshop open at once, may as well go and make a cup of tea if you want to switch between to two. It's not quite that bad, but it's getting there.

I'm not sure why things slowed down so much. I guess it's just the weight of OS updates, applications, game demos and mp3's getting too much for the machine. I'm sure there are things I can do to speed up performance but I'm not exactly sure what (answers on a postcard please!). There really is nothing quite like the speed of a new computer.

So if in doubt, throw RAM at the problem. I own one of the first 15" flat panel iMacs which came with a puny 256MB RAM. Yesterday I decided to drop into Cancom and get an extra 256MB RAM. I would have got more, but at £120 for 512MB it was pretty pricey just for my home computer. However even the addition of 256 megs seems to have improved my OS's responsiveness considerably.

Comments (6)

The big printer cartridge scam | September 21, 2003

I bought a Epsom printer a while back. Just a cheap £70 job. I don't really use it that much, just printing the odd web page. I did think I'd use it to print photos, but the quality has been so poor I gave up after the first attempt. So I was mightily surprised to find that I've just gone through my second colour cartridge since having the thing.

I have no idea why my colour cartridges run out so quickly as pretty much everything I print is in b/w. I noticed that whenever I print something, the settings always default to colour (something I know I can change, but even so!). I really can't believe the printer can be using the colour cartridge to print in black, when it's got a perfectly good black cartridge to use, but it does make you wonder?

What's most annoying though, is the printer seems to want to force me to go out and buy a colour cartridge. It won't allow me to print a page in black and white even thought there is ink in the black cartridge, insisting that I've got to go out and purchase a colour cartridge first. Now this just seems wrong. The printer forcing me to buy a colour cartridge before it'll let me print out a b/w page!

This may just be an oversight by the manufactures, but I can't help imagining a planning meeting at Epsom, where somebody comes up with the bright idea of disabling the printer when any cartridge runs out in order to force people to buy their overly priced, monopolistic peripherals.

So I guess it's a trip to Dixons today to spend £40 on a colour cartridge that I don't want and don't need.

Comments (9)

That time of year again. | September 19, 2003

Shiver my timbers, I can't believe it's that time a year again. It only seems like a few months ago that all ye scurvy dogs were talking like pirates, but it's come round again, so it has. To celebrate talk like a Pirate day, Jeremy (Blackbeard) Keith has created his talk like a pirate application.

So heave to, batten down the hatches and prepare to be boarded, arrrr...

Comments (3)

Playing with Dreamweaver MX 2004 | September 18, 2003

I've been playing around with DWMX 2004 today to check out it's new features. I started off by opening up a few CSS based websites to see how they rendered. The WHSmith site I just finished rendered fine. Much better than in DWMX. However the message website looked pretty much as bad as it did in DWMX. Considering they are both very similar in terms of layout, I was a little perplexed about the differences. So the CSS rendering is a little better than before, but by no means perfect.

Next I had a look at the new browser bug checking feature. This was something pushed at the recent Macromedia event in Brighton, despite this functionality having been in GoLive for some years.

Running some (validated) sites thought the browser checker came up with some interesting issues. Firstly apparently Netscape 6, Opera 6.0 and 7.0 and Safari don't support the title attribute when applied to an image, something which surprised me a little. Secondly apparently the name attribute is required for input tags in Mozilla 1.0, Safari 1.0 and Netscape 7.0. Again, I thought name was deprecated in place of ID's but I guess not.

I then had a play with the CSS code hinting feature. I've bee a longtime actionscripter, so love the code hinting in Flash MX. I was looking forward to CSS code hinting and wasn't disappointed. It's a great memory jog if you cant remember certain styles/attributes and it takes some of the grind out of typing. Generally very handy. I basically use DWMX as a glorified text editor with a built in FTP client and a really good find and replace mechanism, so this is the feature I'll get the most use out of.

The revised CSS panel is nice. Now, when you click on a style it opens up the relevant stylesheet and jumps to that particular style. It's a small thing i know, but quite handy. In DWMX I'd find myself constantly going to the site window to open up a stylesheet, making an amend and then closing it down again, so being able to do this from the design panel will hopefully speed things up a little.I quite like the fact that the body properties panel now sets styles rather than display specific html attributes. However it's a shame that all this is written into the page and not as an external style sheet. The same is true when adding text formatting. It's now all done using CSS (not font tags) but it's still all done in the document and not in an external style sheet. This could end up being a big pain, especially for people not used to CSS as they could end up with styles all over the place.

I have to admit that I was a little disappointed in performance. It was actually a lot slower than using DWMX. This may have been because I had the browser bug checking feature on but still there were times when it was painfully slow. However it hasn't crashed my OS once yet (touch wood) so that's a big improvement on my 1-2 daily crashes on DWMX.

However overall I liked DWMX 2004. Not a major upgrade and no real killer features. The UI has been tweaked to improve workflow. CSS support is better, but by no means perfect. A few nice little touches have been added. I especially like the fact that the file browser has been integrated into the main panel set's rather than floating around on it's own (I think this was just a Mac thing though).

I probably wouldn't advise people to rush out and buy it, but if you currently use DWMX and do a lot of CSS work, it's probably worth getting the upgrade just for the code hinting and marginally improved rendering.

I'd give it a 6/10.

Comments (10)

Web Standards and Tableless Design | September 17, 2003

I belong to a number of web design related mailing lists and see quite a few people asking if they should start doing tableless design. I think it's great that more and more people are starting to design sites this way but feel that these is a bit of a misunderstanding about tableless design and web standards.

CSS based tableless design and web standards are actually 2 different things but are often chunked in together. It's perfectly possible and acceptable to create standards compliant sites that use tables for layout. The idea is to eventually faze out the use of tables for layout. However as long as browsers support tables and the standards say it's OK there is no real problem with using simple table based layouts.

However tabeless design is undoubtedly the future of the web so it makes sense for people to start working towards that goal and upskilling themselves. There have recently been a number of high profile tableless sites launched and this is only going to increase in frequency. So if you're new to CSS layout it really makes sense for to start exploring it as a possibility.

Using CSS for layout has some wonderful benefits like improved search engine friendliness, better site accessibility and potential bandwidth savings. It can ease site maintenance and potentially make site redesigns a simple process.

Good CSS based layout can be a complicated thing to achieve and requires a solid understanding of CSS and browser quirks. Some people fear that because of this complexity, you may have one CSS guru who does all the layout for a site, but unless everybody working on the site are also very knowledgeable in using CSS, tableless design would be unworkable.

Personally I believe that by separating the style from the content, it actually makes life easier for the developer. They no longer have to worry about breaking a sites design because they never have to go near it. No more having to add font tags all over the place and escape lots of tag attributes, or work out complicated routines just to echo out some info in a multi column table layout. So using CSS to control layout can greatly simplify the job of the programmer/developer.

Fundamentally the argument shouldn't be whether to use tableless design or not. The argument should be to adopt web standards, and design to a standard, not a browser version. Then, when it comes to designing the site, make a considered decision about the general design layout. If you think you can do it using CSS (i.e. it's a simple layout and you've got the in-house skills) then go for it. However it's just as valid to use tables to control the basic layout (doing your best to cut out complicated or overly nested tables) and use CSS to control everything else.

This is the way vendors such as Macromedia are moving. DWMX2004 now uses styles by default to control text appearance, page colours, margins etc. However they realise that table based layout will be hear to stay (for a while at least) so have updated their table editing mechanisms as well.

So if you're struggling about whether you should start designing sites using CSS layout instead of using tables, don't (struggle that is!). We're living in transitional times. By all means have a play with CSS based design, but don't cut yourself up if you have to use tables occasionally.

Comments (5)

Mmmm.. Sexy | September 15, 2003

eos300d.jpg

The new Canon EOS 300D Digital SLR. One damn fine looking camera. I have no plans of swapping from film to digital, but if I did, this would be the baby I'd choose.

Comments (6)

Mac browser/plug-in detection woes | September 15, 2003

I'm sure most Mac users have been to websites that sniff for browser versions and end up falling over on certain Mac browsers. Usually you're redirected to a page saying that you either have an old browser or don't have the right plug-in, even if that's not the case. Sometimes, if people are aware of this issue they'll sensibly offer a get out clause, saying something like "If you know you have the Flash 6 player, click here". However more often than not, this isn't the case, and us Mac users are left out in the cold. Sometimes URL guessing works, but usually you're just buggered.

Macromedia is a big culprit in this. The Flash detection script that gets output when you publish a movie just flatly failed to detect the plug-in on Mac browsers. They did produce a more advanced version in a developers kit, but few people seemed to use it. (btw if you want a good flash detection script have a look at Colin Moocks one)

A while ago, somebody on the BNM list mentioned this problem happening on the Marks and Spencer site. A big discussion ensued prompting a number of people (including myself) to contact M&S to complain. They said they were on it, but several month later it's still a problem.

Now while I can understand why the M&S developers may want to warn Safari Users that they may experience some problems while using parts of the site, I feel it's a bit rough just to ban them for entry altogether. After all it's probably just a minor display problem or a bit of javascript that doesn't work as expected. I guess some companies would prefer to create a negative experience and loose customers than give in to the fact that on the web, you cannot guarantee a site will look and act the same across all browser versions.

Well luckily, if your a Safari user and you get bounced by an overly strict browser detection script, there is still help at hand. Simply download the excellent Safari Enhancer, turn on the debug menu and you can change your user agent. That way you can get into sites like M&S that insist you need to use a different browser, when in fact apart from a few minor display quirks, the site seems to be OK.

Safari Enhancer also has a couple of other cool features like the ability to permanently turn off your cache, something every Safari user who is also a web developer should consider.

Comments (2)

Not just Listmatic | September 15, 2003

The link to the excellent Listmatic CSS list styling site has been doing the blog meme rounds for a week or so. As such I wasn't going to post it up as I guess most people will have already come across it.

However I did a bit of poking around the people who wrote its site and came up with this interesting little presentation. Not anything ground breaking, but if you know somebody who knows little about web standards, it's probably worth pointing them too.

What's more interesting is that the authors, Max Design, seem to be one of the few web design companies I've seen who exclusively do CSS based design. Most of their work seems to be for one client, The Australian Museum, but some of the sub sites they've done for them are really very nice.

Comments (0)

BD4D | September 13, 2003

Wired Sussex put on a very impressive BD4D event last night which went down extreamly well. Huge display screen, free beer and lasers. What more could you ask for?

Comments (0)

Graduate recruitment site live | September 12, 2003

The last couple of weeks we've been busy building a small site for a well known high street brand, which went live yesterday. This job was purely a production job, the design having been executed by a partner agency of print designers. I did all the CSS work, Jamie did the project management and production while Jeremy did the PHP programming and Database work.

We decided that the site needed to have a high level of accessibility so we chose to build it using CSS layout. I started by building an XHTML template and making sure the code was logical and valid. Then I created a basic stylesheet to serve to NN4 and from this imported other relevant style sheets.

The first main stylesheet I created was layout.css which not surprisingly controlled the layout of the page. I built this stylesheet up step by step, starting with the main elements then slowly getting more specific. Like most of my CSS work I try to keep the flow of my CSS files similar to the flow of the document, as I find it easy to locate styles this way.

Once the layout started coming together, I created a stylesheet for the text styling and then a separate stylesheet to handle the CSS rollovers in the site nav.

Once the basics were done, It was time to start browser testing. If you look at the stylesheets you'll see that each one has a version number (currently 0.9). Basically during the testing phase I'd fix an issue, save a version of all the files and then move on to tackle the next issue. It's a minor thing, but keeping template version numbers in the CSS files helped keep track of which files were the most recent, and which XHTML templates they related to.

Once the final XHTML and CSS templates were done, everything was looking rosy. I came across a few issues, mostly involving mysterious gaps appearing in IE/Win because it couldn't handle training whitespace in the code. However I was surprised that all the bug's and tweaks were very minor.

The CSS code was looking quite nice at the template sign-off point. However the production schedule on this job was really quite tight, so when it actually came to building the pages, lots of page specific styles had to be created and unfortunately the nice structure of my CSS files broke down a little. Also these later additions were fairly poorly commented.

Some pages needed their own specific styles and I was initially planning to create a few separate stylesheets. However Jeremy suggested writing an ID to the body tag, allowing individual page styles to be controlled by the main stylesheets, making his programming job a little smoother.

Overall I think the site has worked well. It validates, is relatively clean and reasonably semantic (considering the time pressures we had). Apart from one or two omissions (e.g. no skip nav links or form groups) the site is reasonably accessible and would pass a Bobby AAA check if you've got a fairly open mind (and don't read the user checks too literally).

What I'm most chuffed about is having the ability to do a site for a well known brand in CSS. There are so few big brands out there building sites using web standards, I'm fairly pleased that we've released another one into the wild.

[site and client details removed at the request of the client]

Comments (2)

Boxes and Arrows | September 12, 2003

Some interesting new articles on the Boxes and Arrows site

The last link is particularly interesting as it deals with a method of selecting colour pallets first suggested to me by Jeremy Keith. It's a really good idea and one that i'll definitely start to use.

Comments (0)

MX2004 Studio Tour | September 11, 2003

I was quite excited about the launch of Dreamweaver MX2004 after reading about some of the new features on the Macromedia site. Also being into my Flash programming and enjoying building Flash games, I was looking forward to the new version of Flash MX2004 and in particular ActionScript 2.

When new bits of software come out, MM usually go on the road and today they came to Brighton to show off their new applications. Usually I quite enjoy these events. You get a chance to see the new software in action, ask question, do a bit on mingling and at the very least get a couple of hours out of the office. However I felt todays event was a bit of a letdown.

The main areas I was interested in were DWMX2004's improved CSS/Accessibility support, and Flash MX2004 being split into two version. However considering that MM were talking to a room full of developers, the talk seemed to be aimed at a much lower level than I'd expected. They focused far too much on cute little gimmicks which new or inexperienced users would probably get a kick out of, but nothing that was of much interest of a professional web designer.

For instance, I've always quite liked the idea of adding effects to Flash and this has appeared in MX2004. However from what I could see the effects were so simple and nasty, that apart from a few Flash newbies, I couldn't imagine anybody actually using any of them. If your trying to brand something as a rich application development tool, creating a fairly nasty, amateurish "explode" effect is probably not the way to go. There have been third party tools around for years that create much more sophisticated "text effects" than anything I saw today.

I was also a little concerned about how they were selling the whole CSS integration thing. They started off saying that the reason people didn't use CSS was because it was difficult to code (from a language point of view) and then went on to show what came across as being an extremely complicated way to manage page styles. In fact it made me fear that we'd suddenly see a rush of sites with huge bloated style sheets simply because people didn't really get CSS, in the same way as older WYSIWYG editors used to produce hugely bloated HTML files.

In general I felt It was far too focused on features and not benefits. I hope MX2004 studio is as a significant improvement on MX as the MM site makes out, but I couldn't help leave feeling that the new MX2004 studio was being aimed much more towards content creators and managers rather than professional web designers.

Here is another Brighton residents impression of the MX2004 studio tour.

Comments (6)

My dark little secret | September 10, 2003

It's funny how peoples pasts comes back to haunt them. You file your dark little secrets away in a distant corner of your mind, hoping nobody will ever find out. Yet they always creep out in the end. Some things are just impossible to hide.

It started when I was 12 or 13, although luckily it didn't have hold of me for too long. My big brother got me into it as is often the case. Him and all of his University mates were doing it and it seemed so cool at the time. How little did I know the social stigma that would later become attached to such a thing. I was the first person in my school to get hooked but soon everybody was doing it, from the school bully to the class nerd. I started out just using the bare basics, but quickly wanted more. I needed more variety to keep me interested and ended up spending all my money on exotic paraphernalia.

However after a while I realized the error of my ways and exchanged my former adiction for more healthy teenage pursuits (fashion, music, girls and drinking). However I've never really faced up to those dark times, and as admission is the first step to recovery, I'm going to lay bare my sole and hope you can forgive me.

My name is Andy, and I used to play Dungeons & Dragons.

Now I thought I'd left this demon safely in my past, but I recently downloaded a demo game from Mac Game Files and found myself secretly enjoying it. I'm not a big computer games player. I only own 2 games, Medal of Honour and Jedi Knight 2, but today went out and bought a third. That's right. I've let Dungeons & Dragons back into my life, and bought a copy of Neverwinter Nights. I just hope to god my girlfriend doesn't find out.

Comments (2)

Jerry Springer the Opera | September 10, 2003

Talking of Jerry Springer, if you get the chance you really have to go see Jerry Springer the Opera. I saw it at last years Edinburgh Fringe Festival and could not believe how funny it was. I pretty much laughed the whole way through. In fact I laughed so much it hurt. It was just so wrong!

It's now on in London and I hope it will make it's way over to the states at some stage. However I have my suspicions that it may be a little bit too strong for American audiences, what with a chorus of KKK members signing "This is my Jerry Springer moment" and some religious gags that make The Life of Brian look reverential by comparison.

Anyway, as the show says

"Bring on the Chicks with dicks"

"Jerry, Jerry"

"Jerry, Jerry"

Comments (0)

Being ill sucks | September 10, 2003

I've been off work the last couple of days with a cold, and have to say it's sucks. I always quite like the idea of being off ill. It brings back memories of not going to school, lounging around the house watching old Basil Rathbone movies, eating soup and not having to do any homework. It also brings back memories of being a student, getting up late, watching daytime TV and playing computer games all day.

Unfortunately the reality is just so far removed from the romantic image I possess, its laughable. There are no cool Black and White movies on TV. No cool 70's reruns of Starskey and Hutch or The Professionals and no completely nutty folks on Jerry Springer having affairs with their underage transvestite cousins. In fact with 30 channels of shite to choose from, there is absolutely nothing to watch at all! My head hurts far to much to use the computer for more than 5min, let alone play any games. About the most I can do is sit on the couch, groan a little and feel sorry for myself!

Oh, and eat soup!

Comments (6)

Recent Accessibility Links | September 9, 2003

Talking about the RNIB site, while the site provides lot's of very useful information to web designers on how to make sites more accessible, the site's designers seem to have disregarded many of the RNIB's own suggestions. When the site relaunched in June, it caused a bit of a storm amongst the accessibility/CSS web logging community.

Technical problems aside, one of the main issues I have with the RNIB site is it's design. One argument I hear all the time against accessible design is that accessible sites are ugly. While this doesn't need to be so, the RNIB site does nothing to disprove this widely held belief. While it's relatively easy to teach web designers the technical methods of making a site accessible, until web designers start to see accessibility and creativity are not mutually exclusive, things will continue to be an uphill struggle.

Maybe what we need is something like the CSS Zen garden but focussing on accessibility instead.

Comments (1)

Tableless design is big in Brazil | September 8, 2003

A while back these guys emailed me to let me know they'd featured the message website on their Brazilian site about tabeless design. The site looked really useful but unfortunately was all in Portuguese so I didn't understand a word of it. Then last night I had the bright idea of running the site through Bablefish and hay presto, the site now makes some king of sense. The translation is a bit sketchy but the site makes a hell of a lot more sense than it did before.

One of the things that most impressed me by this site was the large number of CSS makeovers they featured. These included tableless versions of the Adobe, Google and Apple websites.

Well woth a look if you've got 5min.

NOTE: was going to knock up a quick Bablefish bookmarklet but then came across these two:

Comments (1)

Using a Wiki as a CMS | September 8, 2003

Matthew Haughey explains how he modified phpwiki to produce a simple, updatable website.

Comments (0)

BBC web site makeover | September 6, 2003

Inspired by Doug Bowman's recent version of the new Yahoo search page, Pidster went looking for a likely target to test his CSS makeover skills. He didn't have to look far, selecting the BBC's news page as a worthy target.

In a homage to changing rooms, Pidster took up the mantle of makeover superstars Handy Andy and LLB, and set about turning BBC tag soup into valid mark-up. At the moment Pidsters version of the BBC news site is only in phase one and he himself admits that the CSS is a bit *nasty* and the page needs more testing.

However being a paid up member of the W3C, I hope this will be one makeover the owners will not go ballistic about.

NOTE: A recent article said that the majority of W3C members sites didn't validate, so if you want to get on the web site makeover bandwagon, This would be a good place to start.

Comments (1)

Installing PHP and MySQL (and Apache2) on OSX | September 5, 2003

A while ago I wanted to install PHP and MySQL on my Mac, so I could develop locally rather than have to use a remote web server. Now I know a bit of PHP, and MySQL but my UNIX knowledge pretty much sucks. I can do basic UNIX tasks, but anything even slightly more advanced sends me into unknown (and quite frankly scary) territory. As such I was keeping my fingers crossed that installing PHP and MySQL would involve little on no need to use the command line.

When I first wanted to install these apps, there was no info on the Apple site. However I did come across a couple of articles on the O'Reilly OS X Dev Site detailing how to install PHP and MySQL on OS X.

I gave it a stab but very quickly got lost. I was following all the UNIX commands step by step, but things just weren't working so I eventually gave up. A while later I found details on the apple developers site about installing PHP and MySQL. These Instructions were much simpler to follow, but still caused problems and again I gave up feeling rather stupid and dejected.

Then a few days ago I came across this site offering painless installs of Apache 2, PHP and MySQL. They were not wrong. The whole download and install process took less than half hour for all 3. What's more the Apache and MySQL installs came with preference panes allowing you to do a lot of tasks you'd normally have to do in the command line.

So a big thanks to Server Logistics for making these packages available for the UNIX'ly challenged.

Comments (10)

Friday Fun | September 4, 2003

Jeremy Keith has created a fun little application that turns any serious news article into a spoof reminiscent of a story in The Onion. Good for poking fun at anybody from your least favorite politician or that bloke that really bugs you on your local mailing list, to your friends and relatives.

A few months ago, Jeremy also created this great little application for randomly generating names for web design companies. Scarily, many of the name generated actually sound like real Brighton web design companies. However it's the tag lines that really do the business for me.

Very funny.

Comments (0)

Displaying cover art in iChat | September 4, 2003

I recently downloaded iChatStatus, and have been playing with the various scripts that came with it. Wanting to see what other scripts were availible, I came across this iChat Script Collection which includes a cool script for displaying iTunes artwork in iChat. Unfortunately I didn't have any artwork, but luckily came across Fetch Art, a nifty little app for downloading artwork from Amazon.

On opening up Fetch Art, it scans though your iTunes tracks and then goes off to Amazon to get the cover art. It couldn't find cover art for around 20% of my collection, and got another 20% wrong. Also because it's getting the art work from Amazon.com and not Amazon.co.uk, some of the art work is different. However now around 60% of my iTunes collection has art work, so if you happen to be one of my buddies, you now not only can see what I'm listening too, but you can see the cover art as well.

Comments (1)

Another useful web development bookmarklet | September 4, 2003

Inspired by a link on Zeldman.com about Web Page Analyzer 0.80, I knocked up this handy little bookmarklet.

Web Page Analyzer

I'm actually building up a nice little collection of Safari compatible bookmarklets/favelets, so when I get time I plan to add a Safari Bookmarklets section to this site.

Comments (0)

Amazon bookmarklets that work in Safari | September 4, 2003

I created a couple of simple bookmarklets/favelets tonight to search for books and other products on Amazon. There are a few similar bookmarklets around but I couldn't find any that worked in Safari so decided to knock some up myself. I'm always checking things out on Amazon so thought somebody else may find them useful as well.

To install the bookmarklets simply drag them to your bookmarks toolbar or Links bar.

To use them just highlight some text on a page, then click on the bookmarklet to search for that text on Amazon. Simple as that!

So far I've only tested these bookmarklets/favelets on Safari so I'd be really grateful if people could try them out on other browsers and let me know if they work.

Comments (5)

Anti-Spam email address encoders | September 3, 2003

Dan Benjamin of Hivelogic has just updated his Anti-Spam Email Address Enkoder.

I first came across the idea of email encoders through an article by Dan at A List Apart a while back.

The idea is basically an attempt to fool email address harvesters by converting your address into HTML characters and then printing this out using javascript.

If this method starts to become popular, which it looks like it is, I'm sure the spammers will up the arms race and this method will become less useful. However with the amount of spam bots kicking about these days, if you run your own site it's probably worth protecting your email address one way or another.

Comments (2)

Spell checking MT posts | September 3, 2003

As I mentioned in my Blogging from the SEO SkillSwap intro my spelling is pretty sloppy. Up until this point I've taken to writing my posts out in a text editor, spell checking them and then pasting them into MT. It works but is not very productive. However in the comments to my SkillSwap post, Oli mentioned an OSX application called Kung-Log which includes an spell checker. I've just downloaded a copy to try it out and on first impressions it looks really nice.

Kung-Log looks really handy for posting from home, but it isn't much use for posting on the go. What i really wanted was a spell checker for MT. I did some Google searching and came up with a possible suggestion. However it involves installing a couple of scripts and a perl module, all of which is probably a doodle, but still a bit of a pain. Further more however it involves changing the MT templates which I'm not really sure I can be bothered to do. So if anybody knows of another, simple MT spell check add on, please let me know.

In the mean time here are a couple of other MT posting application I found but haven't tried.

Comments (7)

Blogging from the SEO SkillSwap | September 1, 2003

Just to let people know that I'll be blogging from tonights SEO SkillSwap event. I've never blogged live from an event befor to please bare with me. My spelling is really poor and I'm not a fast typer. So sit back, relax and if your reading this live, remember to hit your refresh button every now and again.

SEO is the art of getting high rankings on the major search engines and directories for relevant search terms. The main gola is to drive site conversions.

Need to think about your potential users and what search terms they will be searching for. Also look at your competition to see what search terms they are targetting. Rosie shows CityFruits.com as an example. She goes through the source to examine what search terms they are targetting. In this case it's "fruit baskets".

Need to make sure your search terms are targetted. "Computers" for example is not very targeted. "Buy new computer" is much more targeted.

Number to tools for search term research:

Rosie explains how to use each tool and goes into some detail explaining wordtracker. It provides a host of info about terms like how many searches are done on a particular term, how many compeating pages there are and which keywords are the best to target.

Try to pick search terms that will be easy to build into the content of your site.

Rosie has got everybody doing a short 20min excersise. People are researching their keywords using the tools Rosie has mentioned.

A hush silence has decended upon the room!

With the task now finished we start to look at what to do with these search terms.

The main factors to consider are:

Textural content is the most important part of SEO.

Put the search terms as high up in the page as possible, and preferably above the main nav. Spiders don't want to trawl though loads of code to get to the content

Try to optimise each page for no more than 3-4 searhc terms.

Have around 250-500 words per page and place the search terms every 200 words. Very difficult to write good copy and stay within these rules.

Use the search terms in different ways, e.g. page titles, headdings, em tags etc.

Common problems incluide:

Not enough text on the pages. Content needs to actually be text, and not flash or graphics. Harvey Nichols is a nice looking site but is all in flash so has no textural content that the SE's can happily index. Harvey Nichols has tried to get round this by having a text version of the site.

Hidden text is a big no-no. Tiny fonts, text of the same background colour etc are all out. The SE's are getting wise to these tricks. Anyway it's much better to have a page of relevant content than to hide content and use tricks.

People are now doing another 20min task, writting a page of copy, 250-300 words long, using the above rules in combination with the search terms researched from the eairlier task.

While people are writting their copy, I wrote a simple SEO bookmarklet a while ago which measures the keyword density of a page.

Now we're talking about how to make a site search engine friendly. First off the SE's like to find sites via following links. It's a good idea to use text links in your nav, especially as link text is taken into account by the SE's when ranking.

Try to keep the overall search term desnity across the whole page high. This means keep things like complicated nav bars to a minimun.

Jeremy Keith designed the G2Blue site. The Nav is a very good example of a well made SE friendly nav bar.

However the Stenaline site has a very complicated nav bar.

Dynamic websites can cause problems with some search engines as they can't follow complicated links. SE's generally don't rank dynamic content pages highly because the page content changes on a regular basis. To combat you can either create static versions of the pages or use thinks like apache's mod rewrite to create spider friendly URL's.

Automatically generated doorway pages can be a bit of a pain. An example of this would be this doorway page.

Informational pages are better. Here is a good example of an informational page. It's important to have informational pages linked to from elsewhere in the site.

Content in a frameset is not very good for search engine. If the site must use frames, use the noframes tag to add relevant content.

Another common problem is excess coding. Complicated table structures, javascript etc can be a problem. Keeping Javascript external and using CSS for design can help keep filesizes down, and thus search term density up.

Your top level domain is important. If you are promotiong to UK search engines, choose a .co.uk domain name. If promoting globally use a .com. SE's like google may be able to tell where a site is hosted and may take this into account when indexing your page.

Title tags are very important. Meta Description tags don't really help your SE position but some Se's still use this as a description when displaying your page in the results. Meta Keywords are less important. They were once used heavily by spammers so aren't that useful now. Try not to repeat search terms in your keywords more than 3 times.

Alt tags are a useful place to put keywords, but don't stuff them with keywords.

Much better to promote each page for only 3 key search terms. This will give you much wider relevancy on each page. Rosie promotes the more general search terms on a home page and the more specific search terms on deeper pages.

Anything created for a search engine and not the user will be considered as spam by the search engines. This includes redirects, tiny text, mirror content and cloaking.

Link popularity plays a major roll in the popularity of your website. They will drive extra traffic to your site and will improve search engine ranking.

SE's will take into account the link text you use to link to internal pages of your site. As such it plays a huge importance to your page rankings. The same rules apply to incomming links comming from external sites. Getting incomming links is important. Outgoing links is also important. Links to good quality sites mark you as a hub site and this can increase your ranking.

Search using your search terms and create a list of sites you would like to link to. Any site with a page rank over 4 is worth linking to. Also consider submitting your site to industry related directories.

Start by adding a link to your targets site. Contact them, explaining the benefits of linking and ask for a link. Some people these days are paying people to have links to their sites.

If your site has lot's of inbound links, it will probably get found by the SE's. However it could take some time to be found. You may have to submit your pages manually.

When submitting to directories, make sure you have search terms in the title and description.

You must manually submit, otherwise you risk being droped or banned. Only need to use the top search engines. Don't fall for people offering to submit your site to thousands of SE's.

DMOZ/open directory is probably the only free to submit directory worth submitting to. Yahoo and Looksmart are pay-for-submission directories and in the UK it's a one off payment. Make sure you follow all the directories submission rules. Read how a directory editor lists sites and use a similar language. It cut's down the chance of your description being edited. A listing in Yahoo will increase your link populartity and can be the difference between a first page and a third page ranking in a search engine.

Using subdomians may allow you to submit more tan once to a directory. Multiple sub domains could alos help your link popularity.

Many SE's still have a free to submit often. However many have paid submission schemes which can speed up spidering time and frequency.

As stated above, link popularity is important. Use your URL on emails and posts to newsgroups and forums. Also consider writing articles.

Pay per click schemes are good for short lengths of time, but are costly over the long term.

It's a good idea to track your position on the search engines and keep an eye on what search terms people are using to get to your site.

Phew, and that's it!

Hope there are not too many spelling mistakes and that you've found it useful.

Big thanks to Rosie Freshwater from G2Blue for a really interesitng talk.
If you're interested in future SkillSwap events, feel free to drop by the SkillSwap site and sign up to our newsletter.

UPDATE: Rosie's notes are now available to download on the SkillSwap site.

Comments (8)

Macromedia.com | September 1, 2003

Just had a look at Macromedia.com this morning and was surprised to find that it's using CSS layout.

Last time I looked the nav on the home page was in CSS but everything else was table based and the nav on other pages was still done in Flash, something pointed out by Todd Dominey.

As yet the pages don't seem to validate as XHTML but this mostly seems down to not closing a few br tags.

Comments (0)

Great commercial CSS site | September 1, 2003

Ryan Carver has done a really good job with his latest project, One True Fit for Lee Jeans. The site is a great example of a well designed, commercial site using CSS/XHTML. If you want to find out more about the site, Ryan has put up a page explaining the techniques he used to create the site.

Nice work Fella!

Comments (0)

Natty Threads | September 1, 2003

If you're looking for some cool new designer t-shirts but don't want to be waring the same stuff as everybody else, I'd suggest having a look at knofler.co.uk. A relatively new label set up by a local Brighton designer, you'll only fine these quality T's in a few select stores so wont have to worry about bumping into somebody wearing the same threads. At the moment there is no e-commerce facility, but I'm sure if you drop Pete an email, he'll be able to sort something out.

On the subject of T-shirts, If your looking for t-shirts of doe eyed manga-esque characters doing themselves with a double ended dildo, then look no further than wrongclothes.co.uk. Set up by the self styled sickos from Kerb, the illustration is predictably great. Just don't wear the tops to visit your grandmother.

Looking for more cool designer clobber? Have a look at a few of these:

If you know any more, please add the url's in the comments.

Comments (1)

Naughty, Naughty | September 1, 2003

What would you do if you wanted a nice loooking blog but was afraid you wouldn't make it to the beach this weekend?

Well, if you're anything like Eric Ness, you'd simply download this sites stylesheet, leaving youself plenty of time to grab your bucket and spade and head for the beach.

Tut tut Eric. Go to the back of the class.

Comments (4)