One thing that you may not know is that this website looks entirely different in IE6. That’s right, when I last performed a major redesign I said IE6 is going to look different – and not in a bad way. I did this to highlight how simple it is to feed IE6 any corrections… and I did it because I really believe the IE6 haters who just cut this browser off are misguided (even malicious).

Internet Explorer 6 Gets a Different Experience

IE6 is just another browser of many in the web landscape… sophisticated solutions try to overcome this impediment. Lacking a full page screen grabber for IE6 here is a header area screenshot of what IE6 users experience.

The IE6 Footer is also Different

And you will notice that the footer area is structurally and aesthetically different than the ‘better browser’ alternative.

Better Browsers Get a Better Experience

So this website after recent tweaks to the aesthetic (for those reading this in IE6 thinking I’m a mental patient) supports a totally different structural and aesthetic approach.

This Was to Prove Several Points

Developing in Firefox and then fixing IE6 after the fact is not only more logical and economical but you have more power as a designer to achieve a sophisticated solution. You’re basically playing with the shit that falls out of the funnel instead of hacking your way through the development hoping your spaghetti code isn’t too injurious to future maintenance.

Eventually if IE6 doesn’t appear on the commercial landscape I can just cut that IE6 stylesheet away like a scabby old band-aid. This is a real benefit of using web standards methodologies from the beginning.

Also, there is no rule that says a website must look the same in every browser – take mobile platforms as a good example.

Minor Changes in Recent Days

Regular readers of this website using better browsers will notice I’ve recently incorporated CSS3 opacity, rounded corners and shadows and I’ve changed the dark background image that caused the annoying flickering effect. You will also notice that I don’t much care if these are not supported by some older browser and that the luxury of not caring comes from ensuring that it gracefully degrades for lesser capable browser experiences.

None of this even affects the IE6 stylesheet so it’s simply not an issue.

Mobile Users (Hopefully) Get a Usable Experience

This website is also intentionally designed to degrade for smaller screen browsers so that it becomes a single column layout. For example put this URL into this iPhone emulator – http://iphonetester.com/ [If any iPhone users have feedback about the right of wrong of this simulator I'd really appreciate knowing if it's worthwhile or completely useless]. The website should be at least readable. I’ve got a few tweaks that need to be done again for Opera Mini but I’m leaving that for the next step in the experience evolution…

Enter CSS Media Queries

Rather than continue with the clunkiness of this approach to mobile browser experience, I’m considering the article published on A List Apart by Ethan Marcotte on Responsive Web Design which has inspired Simon Collison and Jon Hicks to pursue responsive web solutions. The trick is to incorporate CSS media queries… although I did read somewhere that CSS media queries have inherent processing inefficiencies. But there you go.

Ethan has a conversation about CSS media queries on the The Big Web Show episode 9: Responsive Design with Dan Benjamin and Jeffrey Zeldman. While I don’t agree with much of what they discussed about large file sizes on websites it does lend some insight into strategically pulling off the technique.

With the mad growth in mobile web experiences we’re bound to be drawn into mastering the mobile web design information space… it’s a part of the industry evolution we’ve all bought into as ‘web professionals’.

I guess like everybody’s weblog this one is just another work in progress. We’ll see how it goes in a few days as I find the time to rework the code. As always, expect a bumpy ride.

Update: 25 June, 2010
CSS media queries are currently partially implemented… highly recommended and not that difficult to achieve.

As a web standardista, my first and foremost response is that best practice web standards methodology is to separate content (HTML) from presentation (CSS) from behaviour (JavaScript) in web design. Moving presentation (CSS) to the behaviour layer (JavaScript), which is the fundamental idea underlying Less.js, is therefore something that I would never recommend regardless of any accrued performance benefits.

The benefits accrued through separation of these three layers far outweigh any performance response available by downloading yet another JavaScript file.

Best practice web standards methodology also puts forward the concepts of progressive enhancement and graceful degradation. This means you either start with the idea of building a basic user experience and enhancing it for those who have better browsers… or you build better users experiences that degrade well for users who have lesser browsers.

The benefits accrued from those two concepts are vital to providing high quality professional experiences to end users of any website. I would call them a baseline. Yes you can do great and wonderful things as long as the intelligence is in-built to adapt to the unexpected – because the crux of the World Wide Web is that we have zero control over user’s hardware / software / settings.

Even if the argument that only 5 per cent (or 1 per cent) of web browsers had JavaScript disabled that would equate to many millions of people on the World Wide Web. Add to that percentage the still huge numbers of lower end mobile devices, particularly when you look at developing economies. So I’m far from sold on the idea that everybody has JavaScript enabled.

For example, 10-25 per cent of screenreaders are JavaScript disabled. [This statistic simply serves as an example that we can never strategically take 'JavaScript enabled' for granted in our work.]

I’ve probably got other more technical questions… but I needn’t go further within my rationale. This is a smart solution using the wrong tools based on unsound assumptions about user capabilities. I have enormous respect for Dmitry and his capabilities but on this one I have to disagree. Less.js isn’t a CSS obsoleter by a long margin.

The reason I am writing this article and stating my opinion (comments off) is that I think its an unhealthy mindset for other developers to emulate. We’ll just have to agree to disagree, I guess.

Update: 21 June, 2010
If I asked you this question then – would you build a JavaScript main navigation on a website assuming that everybody has JavaScript capabilities? Or a JavaScript shopping cart on your ecommerce website? I think we’re having the 2003 DHTML conversation again.

So my discovery of Web Standards was spoon fed from Mike through exposure to a huge number of resources that espoused a radical and unpopular theory – web pages should be quality products. While the web is a robust medium it doesn’t mean we should just create any old crap that works; we were all talking scientifically and justifying the business case (yes, I got caught up in it quite fast).

With revolution comes a certain passion. Web Standardistas seem to start out with a devout dogmatic passion of the inquisition to drag down and burn all the non-conforming everybody they can get there hands on. Right answers and wrong answers are black and white in that stage of the (R)evolution. I think we can all see a cringe-worthy moment from our past in that picture. At some point we commented on someone’s website telling them they were crap at their job. In fact, I’ve had a smattering of faymus web standards names tell me over the years, here and on other incarnations of this blog, that I’m a dumb anti-christ fucker upper of HTML and other sundry technologies… for example, John Oxton of the Rissington Podcast simply commented that the site was fucked. Brilliant. Take a lollypop and fuck off home, I guess… oh those were joyous times…

The next step of the evolution of a Standardista comes with a realisation of the true depth of the issues. There isn’t one way to do something in every situation. At this point it’s apparent that while we’re trying so hard to be perfect, and we actually know how to write POSH (Plain Old Semantic HTML) markup, there’s always something in our work that falls short of the ideal. Compromise exists. In our criticisms we move from the words must not ever to the words should not if possible.

The next step again in the evolution of a Standardista is maturation, the pragmatic stage. It’s a little less passionate. It’s a whole lot more effective. In the maturation stage the objective is to create working solutions within the constraints of real world problems (as opposed to idealic theories) and the medium for this embraces compromise. You simply cannot be all things to all people, and neither can your web application / page / widget / thingey. At this stage you might better appreciate the business case and the goals and objectives in the world of your client.

Another way of looking at these three phases are to replace them with the words ‘intolerance’, ‘intelligence’, and ‘creative compromise’. At stage two you’re aware of compromise; but at stage three it’s a part of your determination to be a better web professional. Web Standards aren’t about any one thing in isolation at the cost of everything else. But they’re about building web products in the best way possible – cutting edge professional products.

However, don’t mistake that third phase for the lack of an ability to provide valid critique and input into the conversation. That’s another story entirely.

Nate Koechley’s video explaining Professional Frontend Engineering (about 90 minutes) goes a long way to filling in those gaps. I’d also recommend listening to Bill Buxton speak about Design with a big D and the Design Ecosystem. The very nature of what we’re employed to do on projects is to minimalise most of those things you would have otherwise stumbled over.

The website you sit down and use is the tip of a very large iceberg, in fact. The better the team below that berg the better your user experience, the faster the rendering, the better the adaptability to other browser environments and platforms. If you don’t have to think then it’s probably because frontend engineers (whatever the job tag) considered the technicalities and implemented the solution. And when we’re really good you won’t notice our footprint at all.

In other words, when you go to the client’s website, is the intention to make the site visitor go WOW or is it to facilitate the site visitor’s mission for buying a new packet of pens, or renting a video or some other business process?

So, in most situations, good web design isn’t about making the most jaw-dropping portfolio piece for the web designer’s career advancement and positive peer review. The web designer is a facilitator and not the reason for the website – it’s about the business. It’s about sales conversions. It’s about making money. Often good design, even brilliant design, is in making the design invisible or transparent.

When you sit and think about that assumption for a while you should come up with the realisation that in most cases when you notice design it’s for the wrong reasons. Either the design got in your way or obfuscated information or functionality – that damned design, you’ll say! But when you get into something really well designed you have the smooth experience that only a transparent good design can provide. That’s what most people need in most situations.

WOW and POP are all good in context, but we have to realise that none of this work is about us. We’re a service industry. The job is about the client, the client’s business case and their processes, and how to increase their return on investment. They definately don’t want to pay you to make a beautiful unusable distracting novelty nobody revisits.

A related question often never asked is – how are we going to measure the success or failure of the new website? In improved sales volume? Wider sales area (internationalising the business)? Improved exposure (advertising)? Increased target segment awareness? Increased referrals? Higher membership? What exactly defines success. Because you need to know exactly what it is you’re designing and building before you get out the hammer and nails…

So are AP the bullies on the art block? Probably. But is it also fair to say that on some level at least we’ve created an Internet enabled culture that expects anything you see online to be free? Whether an artist, or not. At one end of this thread is the reality that corporate copyrightism (to make up a phrase) has pushed IP (intellectual property) to an extreme – life plus 70 years after the death of a creator is extreme. That, without argument, is just about Disney’s cash cow Mickey Mouse and other big end of town investments. We need to save copyright for the people and for society. On that level, I do philosophically see the point that Shepard Fairy as an artist should be allowed to appropriate images under fair use. With a caveat – define art, artist, sharing, etc. Don’t expect black and white answers to any of this. More like, maybe. Sometimes. In that instance.

Sharing of content, the ability for everyday people to use and mashup things, is how we make and change culture. Currently we’ve put that culture generation mechanism of society into a headlock. Art, in many contexts, is exactly about that. Although the separation of art as an effective medium for expression and comment needs somehow to be separated from art the industry. There are pretty pictures that sell in galleries, that are art, that are produced for commercial consumption. All I’m saying is that art is a broad term, and it’s getting broader every day. Copying is easier than ever – how do we separate grey from grey? We do need art. But how do we separate art as a process from art as a commercial enterprise? Traditionally many artists survived by the patronage model not the commercial sales model, so the entire art ballgame has changed.

But we also need a limited protection for other artists like Mannie Garcia. It’s too easy nowdays with the size of the art industry for practically anyone to grab your work and on-sell it with or without change. The world is getting smaller by the day. And we’ve developed this culture of free.

So this is a large and very complicated issue. It leaves more questions than answers the deeper you go. I’m not entirely sure I agree with the street art idea of repurposing other people’s work, and in my mind a little theft is a lot of theft. But I have to admit that culture has changed and the culture of free is a part of Culture with a capital C.

The winners in this are actually the artists through increased exposure and publicity. HOPE will be an everlasting Che Guevera for the American people for many decades and the names Shepard Fairy and Mannie Garcia will both be remembered. This whole episode simply adds to the story of the image about the story of Obama. And even George Clooney, and for that matter Darfur, are a part of that larger story.

My apologies for babbling through this excessively long winded article. NPR have a couple of great interviews with both Fairey and Garcia worth listening to. It’s hard to disagree with either, and difficult to sympathise with AP. I look forward to hearing how this one turns out. Just don’t expect any black and white answers in that sea of grey areas.

Personally, I’d like to see these snippets in government stylesheets by default. No harm, no foul. But that’s another story about a large organisation obsessed with opening everything in a new window, and equally obsessed with not implementing anything that doesn’t fit the lowest common denominator (Internet Explorer). Should we remind everyone that Internet Explorer 6 was released on August 27, 2001? And it’s main competitor at the time was, what? While Netscape 6 came out in 2000 we’d have to say Netscape 4.5 was more the norm. Just some food for thought.

So back to the thrust of Roger’s article, which I’ll only breeze over now because he pretty much covered everything. Except to say that I use a Firefox plugin called Stylish to achieve user style control over sites I visit (particularly places like W3C specs or Jakob Nielsen’s useit.com). Sylish allows you to set global or local stylesheet fixes – kind of what Greasemonkey is to JavaScript (as they say in their rave). But, like I alluded to in the last paragraph, these snippets probably belong in our actual work as well if we’re forced to work within the confinements of new windows.

For the sake of keeping these snippets handy, I hope Roger doesn’t mind me putting them at the bottom of this post to pass around. Simple things work the best, no? When inserting documents, if we could also dynamically grab the size of the PDF or Word file and insert that inside the brackets it would be even more relevant to our objectives.

1. a[target="_blank"]:before,
2. a[target="new"]:before {
3. margin:0 5px 0 0;
4. padding:1px;
5. outline:1px solid #333;
6. color:#333;
7. background:#ff9;
8. font:12px "Zapf Dingbats";
9. content: "\279C";
10. }

And to insert PDF or DOC after relevant links:

1. a[href$="pdf"]:after,
2. a[href$="doc"]:after {
3. margin:0 0 0 5px;
4. font:bold 12px "Lucida Grande";
5. content: " (PDF)";
6. }
7. a[href$=".doc"]:after {content: " (DOC)";}

However, this redesign marks a phase of development here that should be noted – pixel perfection between browsers is a MYTH and as such if you are looking at this site in the better browsers you’ll see a predominantly darker design. That’s how it’s meant to be. But if you happen by in Internet Explorer the pages are a lot lighter. You might find you prefer the Internet Explorer experience, it’s not a shabby one, but it will never be the same one. That will apply to some extent for much of our work into the future.

We’re moving from support for the lowest common denominator towards a support for providing enhanced browsers with a better user experience, while also providing quality experiences for our shabby cousin Internet Explorer. The old school methodology made me bored because we were stuck with only basic techniques due to the lesser browsers failure to support even CSS 2.1 correctly. We need to get this industry unstuck and moving forward.

In this strategy the lesser experience should not even be aware of their deficit. That’s imperative. But by providing you with two contrasting designs it’s hoped more people will understand the simplicity of this newer strategy and start adopting it in your own work. It’s faster because you don’t have to resolve cross browser bugs and it’s simple enough to override in an IE6 stylesheet. The thing to let go is that askew idea that pixel perfection across multiple browsers is feasable, desirable or even economical. The reality is that browsers and screens vary so greatly now the 800 x 600 and 1024 x 768 resolutions are a thing of the past. It’s our job to advance techniques to meet the newer market.

The layouts on Redesign Schmedesign are still the same old floats with their obvious shortcomings. I’m not that happy about it but because Internet Explorer 8 will support CSS tables then that will be a major fork in our methodologies in the near future anyway. In the meantime we keep the floats.

This site is valid XHTML 1.0 Strict delivered as text/html and valid CSS 2.1. It may be old fashioned of me but having valid code is essential best practice and provides a solid working platform for stable code. It makes life easier for everyone.

First, the screenshot taken in an advanced browser on 1680 x 1050 with a maxed out window. This should give you an overall idea of the home page. Check out other pages that show interesting elements like illustration or the rewritten about page. The emphasis was on breaking the box. At the same time I’m not a fan of the (chuck) gradient / helvetica / web 2.0 rounded corners so you won’t find that here. Styles come and go, right?

Second, the screenshot taken in Internet Explorer 6 on 1680 x 1050 with a maxed out window. You’ll note the lighter design and the floats are treated a little differently but it’s pleasant. So let me ask you about the myth of cross browser pixel perfection? Is Internet Explorer 6 getting a lesser experience? Later this morning when I get the chance I’ll open Internet Explorer 7 and deal with any issues there too. Maybe I’ll introduce some subtle elements simply for those users.

So while there are some tweaks and improvements that will affect the site over the next few weeks there won’t be much more to the graphic design. Now, just as a parting comment, it’s not uncommon for me to be accused of being a coder like it’s a dirty word. It’s been said that I’m not a visual person and that a certain web design team needed another creative. Does the illustration page or the photography blog at all negate those statements?

Where does one come to that people actually say you’re a designer? Mmmm…

Oh and of course if you think it’s crap then fuck off in the nicest way. Bug reports are more than welcome as long as they’re politely pointed out. I appreciate the heads up. And I have to confess my CSS is a bit stale so sunglasses on for those stylesheets. Remember, this is just a patch job.

If you’re using an older browser don’t forget to update it. The Browsehappy website has easy to follow links and instructions. Why settle for half the experience?

Update: 15 December, 2008
The quick fixes were as follows. The links from the first paragraph of articles were elevated into the header in Firefox 2, but this was cured by swapping p:first-child:first-letter to be first in order and then p:first-child.

The second fix involved IE 5.5 Mac having a broken layout on the page of the most recent article. This was because only one previous story existed in the #navigation2 links. Applying clear: both to the .post solved the issue. But a third fix also involved IE 5.5 Mac which failed to display background images. This was because the background url was surrounded by single quotes. I changed them to double quotes. While it does not display perfectly IE 5.5 Mac is usable, the imperfect look would be a combination of an imperfect box model and buggy support for z-index. In short, it’s usable and not worth chasing down. Again, pixel perfection is a myth and if you use IE 5.5 then change. Simple.

A fourth issue, the avatars on these comments are floated left and it turned out that a single line comment caused the heading to move up the side of an 80px comment avatar. Not in IE, just in better browsers obeying the spec no doubt. Because of the structure it took a lot of fiddling about before I bit the bullet and just went to the better browser toolbox of CSS 2.1 selectors ol[class=commentlist] > li > p:last-child { min-height: 30px; }. Again, IE 5.5 can suck eggs and feel good knowing they can still enjoy the issue.

Veerle’s post in defence of 24ways.org’s design innovation definately comes from the graphic designer as is clear from her comment reply regarding usability. I’d put forward tentatively that just because something is accessible doesn’t mean it can’t be beautiful, and the same should apply to usability. When we step beyond the user’s importance to weigh in with our trump card of design as art – that’s a particular kind of design arrogance. But that’s another discussion entirely, so back to 24ways.org.

The problem is that in the great web tradition of trolling and flaming the comments about the redesign are often acutely negative. Part of the relationship between a popular site and high traffic will mathematically transpose to a higher number of negative comments, right? Well, sort of. The problem is that rather than critique, which very few of us are professionally trained to provide, we give opinion. As time short as we are that opinion can be reduced to a series of caveman grunts – don’t like, is shit, pull in your head. Personally, I’d consider just pulling those out in moderation simply because they don’t add to the conversation – water off a ducks back. But Veerle has a valid point, we ask for innovation but bowl anyone over in an instant who dares move outside the conformist circle (remind me tomorrow to do my graphic design post, by the way – I have similar issues with a lot of graphic design).

Personally I find the current design of 24ways.org difficult to use because it’s hard to read. There seems to be some disconcerting level of grey overlay that is purposefully trying to make my life more difficult. Usability, from my user perspective, is more important than beauty. After all, it’s an information site.

So let’s cut to the chase. What makes a successful website? Accessibility? Usability? Beauty? Functionality? Is it the slickness of the commenting system? Rather than criticism of the design I’d be interested in the statistical results and how those results meet the business case. Because web sites aren’t artistic silos, they’re business solutions to business problems. Does it make money? Does it meet it’s goals?

The criteria for 24ways.org would be reasonably simple. Has traffic increased or decreased this year? Are users staying to read the articles or bailing out? Next, ask yourself what is the purpose of 24ways.org – disemmination of contemporary best practice information? Is it about raising the profile of the website itself?

I’d suspect I’m far from the only person who finds the interface difficult to negotiate. But I’d have to concede that from a business perspective as long as the statistics are supporting this year’s design and the information is being effectively spread throughout the designer / developer community then it’s meeting those underlying goals. And, oddly enough, the controversy around the design itself can be (although a risky strategy) enough to raise the profile of 24ways.org to reach more of our industry radars. It’s better to be talked about than not mentioned at all. Right? So without knowing the brief it’s a bit hard to see if Tim’s met it – or pushed convention too far.

It’s always a little dangerous when the user is placed behind the importance of the graphic design. If that weren’t the case we’d be praising small grey on grey text along with mystery meat navigation, we’d have animated gifs and blinking text – try to read that man! Cool. But I think 24ways.org is a little more sophisticated than that.

The short answer to Veerle’s post would be that I agree, trolling and flaming are an industry bore. But it’s the web in a nutshell. Anonymity breeds a prolific audio-vomit we don’t meet in regular life. Delete those comments that don’t contribute critique, and move on. However, the design consciously impacts my ability and desire to read the articles. The page has been open on a Firefox tab for a week and I haven’t completely read a single one. That might not be so good a sign that it’s a great redesign.

At the end of the day market forces will determine the business answers to 24ways.org. They’ll survive for another year, the content ensures it. But for a lot of people expecting best practices it might eat at the street cred. That’s the innovator’s risk.

The impressive part of Dan’s book is the approach he’s made to explaining what can be confusing new ideas by simply showing three or four alternative choices to marking up specific content such as blockquotes or lists or forms. Rather than showing the reader a dogmatic set of rules that must be obeyed, this journey is more about educating the reader on a very basic level to be able to make those contextual choices in everyday work. Because a lot of these decisions in the trenches will be about weighing up the pros and cons of any given situation. So this was an aspect that I particularly see as valuable – and sectioned logically enough to become a reference.

Admittedly, this wasn’t a book aimed at me and it didn’t contain the holy grail of granular secrets that someone familiar with complex web standards solutions might look for in a book. But it does fill that invaluable gap between the person with no web standards knowledge and the full blown standardista. With a foreward by Jeffrey Zeldman this isn’t a bad place to start your journey.