mezzoblue

Where does one even begin. First. Haunani e–mailed me yesterday to let me know her team was inspired by the Zen Garden. They work on the official Burning Man web site, and the result is a just–short–of–validating CSS–based design. Viewing the source greets the user with a short hello from the production team, and if you scroll all the way down to the bottom, you’ll even see some remnants from the Zen Garden in their code. Pedants please note: the home page is still an older, non–xhtml non–CSS page, and the content areas of the rest feature older code that (presumably) was carried over from the past site design. Haunani tells me they’re working hard to complete the transition. Redesigns like this involve a lot of effort and commitment, and the Burning Man is volunteer–driven. Before you complain such–and–such doesn’t validate, consider that your participation will go further than idle words. Think about lending a hand instead of posting something derisive. Second. I had lunch with Tim Bray. (Yes, that Tim Bray.) After a great chat session about things like advertising vs. usability design, how interesting it is that 95% IE penetration a year ago has eroded to 90% today, and the digital vs. film debate, I noticed tonight a summary on Tim’s ongoing that just makes me grin with delight. He’s being entirely too generous though — my fastball only clocks at 92mph. Tim goes into far more detail about my situation than I’ve covered on here. This is quite alright, as I’ve had a post along those lines sitting in my queue anyway, for the sake of my somewhat sparse About page. It summarizes such non–starters as how I got involved in this web thing, my philosophy on design and coding, and why I have a hard time choosing one or the other. That’ll come at some point in the future, but for now, ongoing is a good spot to find answers to some of those questions you haven’t been dying to know about me. Third. I’ll summarize third tomorrow a.m. — it really deserves its own post.

Permalink › | no comments

If you have read Tim’s summary, you'll have discovered that I too am joining the growing ranks of those getting themselves committed wed this summer. After a year and a half of a long distance relationship, the countless flights back and forth between Vancouver and San Francisco, and way too much money given to our respective phone companies, April and I will finally be together. All things Zen and CSS and design and blue will go on hold for a few weeks. I’m off to enjoy the east coast weather, by way of San Diego. Keep the world spinning for me, and stay your lovely selves. Ta.

Permalink › | 21 comments

We’re stuck with Internet Explorer for the next 3 years bare minimum, most likely 6. Let’s start thinking about how we can move forward.

I’ve been considering enhancing my work somehow for browsers that can support it, and I’m not the only one. Steve Champeon, Mike Pick, and CodeBitch have all discussed the idea.

We now have a method and an example. View my latest Zen Garden entry, mnemonic for the example; carry on reading for my method, which I dub Mozilla/Opera/Safari Enhancement, or MOSe for short.

MOSe relies on IE6’s inability to pick up child and adjacent selectors, or > and + as they’re known by. As well, some basic CSS3 selectors are becoming more and more usable in everything but IE (see CodeBitch’s CSS3 support chart) so we can use these to our advantage as well.

The key to the method is somewhat similar to how NN4 page design developed as CSS became more prevalent — after creating a basic, functioning page in IE, you add extra functionality with these selectors. While IE can’t render them, at least it doesn’t make a half-hearted attempt to and come short. And that’s way better than what we had to put up with to make things work in NN4.

I’ll leave application of MOSe as an exercise to the reader. Pick apart mnemonic and see a few ways it can be done. You can start at the spec, but for the sake of your Googling, here is a non–exhaustive list of CSS2 selectors you’ll want to pay special attention to, thanks to their support in MOS and non–support in IE:

• Child Selector, eg. #content>.introduction
• Direct or Adjacent Sibling, eg. #footer + .bottomLink
• Attribute Matching, eg. img[border]
• Attribute Value, eg. acronym[title="Document Object Model"]
• Attribute Substrings, eg. acronym[title="Object"]

And a few CSS3:

• Substring Prefix, eg. a[href^="http://www.mezzoblue"]
• Substring Suffix, eg. a[href$="mezzoblue.com"]
• Substring Match, eg. a[href*="zoblue"]

There are bound to be more that are MOSe–friendly. :root, :first-child, :focus, and possibly :not look promising, although the latter is buggy in IE5.

The point is to provide IE a way out by using CSS it has no hope of understanding. This is the only way we can keep moving forward in the next few years. Let’s embrace it.

(okay, I realize I say right on the Garden that it's not about “the latest bleeding–edge tricks,” but you can see how this is an exception. As well, I realize that some things might be funky on Mac browsers — I hear it renders alright, but I can’t guarantee there’s no weirdness going on.)

Permalink › | 38 comments

Anyone who says CSS is easy hasn’t had enough experience with it. It is easy if things go right; it is a bottle of Tylenol if things do not.

Example 1 — precisely the sort of thing I’m talking about. Take this simple block of code:

<div id="main">
	<span>
	<p>multiple paragraphs here</p>
	</span>
</div>

Try to give the span a border, if all the paragraphs are floated. It can’t be done, even if the span is a block–level element.

This should be possible, block level or not. Unless the text is removed from the document stream via absolute positioning, it should be contained within the span, which means it gets a border. However, and this is a problem amongst every browser, the floated text is treated as independent of the document stream. Hence: no border.

This is inconsistent behaviour. Floated items are not supposed to be removed from the document flow — you’ll notice how nicely the non–italicized paragraphs in example 2 wrap around the italicized text. This is expected. So why no border in example 1?

CSS is powerful, but with great power comes grea… strike that. Let’s just say it’s not easy and leave it at that.

update: Simon pointed out that my example is actually invalid, since block–level elements shouldn’t be contained within inline elements. The span is invalid when surrounding the paragraphs. But! Even when corrected, the problem holds — see example 3 for a div in place of the span.

Permalink › | 23 comments

There should be a law. Well maybe not so much a law as a stipulation of employment. This law or stipulation should force designers to work with the systems, product, or sites that they build. I’ve been doing some adjusting on this site recently, and the more I start using it myself (to refer back to old posts, to comment on fresh posts, and so forth) the more I see ways where things could be done better. The comment sections have seen the most change recently. I’ve bumped up the font size in the comment boxes, and increased the height by a few lines. Why? Beause they were too hard to use for longer comments. I added a numbering system to the individual comments. Why? Because I was noticing it was too hard to scroll the list and keep track of where I was after so a few pages of comments. (And I should digress here — there have been some excellent threads recently. I’m very impressed with the thoughtfulness I’m seeing, and I’m still thrilled every time I get another reply.) My archives are pretty klunky right now. I spent some time a few months ago putting together the current calendar system, which is fine I suppose, but what I really need is a way to browse by subject. Dates aren’t nearly as important as what the post was about. This I’ve discovered only by having to go back to find a reference, and actually being forced to use the system I’ve built. I’ve been working on a few site managers and planning systems lately where interface and usability are crucial to the process. Unfortunately, the budget and time constraints are such that usability is planned in advance, but once the system is built there is no further refinement. This is a problem. The best possible usability feedback comes not from the designer looking at a database and figuring out how the tables and forms interact, but from the users who spend significant amounts of time interacting with the system and actually trying to get things done with it.

Permalink › | 18 comments

The Hack Hotbot contest winners are slated to be announced today, so it’s time I tell my tale. Where to begin… A longish summary of the story thus far is found in parts one, two, three, and four. But a quick summary because that’s a lot of text to get through: Terra Lycos ran a CSS design contest open to US residents only. I complained on here and linked the contest. An employee found the link and e–mailed me, telling me I should enter, but obviously didn’t bother reading that I was Canadian and therefore ineligible. I responded. They told me to enter through a US citizen. I did. And I won. Grand prize was a huge TV, and two ‘first place’ prizes were 20GB iPods. I took one of the first place spots. I was informed back in the beginning of May, and the past month has been spent figuring out what in the world is going on. A big thanks to Lincoln Jackson (yes, the same Lincoln mentioned in part two) and Corey Matthews of Terra Lycos, and Douglas Bowman of Stop Design for helping me out, but their legal department decided I wasn’t allowed to win. Naturally I’m disappointed. I spend a lot of time working on various projects with no expectation of compensation, so when something like this comes along that I throw myself into, I figure it’s a way of getting something in return. But not this time. Maybe I should have known better. I had a bad feeling about the contest from the start. A World Wide Web design competition only open to US citizens — bad move. An employee spamming me to enter without reading the front page entry on why I couldn’t — bad move. Code that was hard to work with and offered little to actually ‘hack’ about the design — bad move. Changing the code after the contest ended, thus breaking the entries — really bad move. And the past month of dwindling communication pretty much cemented that they weren’t going to award me the prize, so now that I know for sure, it’s no surprise. The silver lining in all of this is that while not directly inspired by it, a by–product of my discontent with the contest was that we got a Zen Garden out of it. And the Zen Garden seems to be leading to some exciting opportunities for me, personally. So I can't help but take a Zen–like approach and realize that in the grand scheme of things, I won anyway. It would have been nice to have an iPod, but I suppose it wasn’t in the cards. update: I can’t believe I missed him, but Joshua Kaufman also deserves some credit for the CSS work he did on the project. While his code didn’t end up in my final submission, he did some great work as we hacked away together at this difficult challenge.

Permalink › | 11 comments

As previously mentioned, expiring today is the patent on the LZW compression scheme which forms the basis of the GIF file format. Well, at least if you reside in the United States. Canadians, Europeans, and others are stuck with it for another year.

Kuro5hin has a great eulogy on the highs (and lows... mostly lows) of Unisys’ ownership of the format. From the creation of GIF87 in 1987 on, Unisys was content to sit back and let people use it. In 1994, I suppose their lawyers caught on. Any developer using the format was shocked to learn that, come Christmas of that year, we’d have to pony up a huge licensing fee just to include GIF importing and saving capabilities in our software.

I use the inclusive ‘we’ because I was writing a DOS–based image editor at the time, if you can believe it. I may even still have the Unisys licensing papers kicking around somewhere. I took one look at the $2000 initial license, considered I was writing shareware and lost all interest in GIF support.

So what does a public domain GIF (assuming that expired patents are released into the public domain — on this point I’m not clear) mean to the web developer? All praise of free data formats aside, not much. In this case, it means we don’t have to pay Unisys thousands of dollars per site we create.

Didn’t hear about that? At one point they were looking to bill any site owner using GIFs upwards of $5000US for a license. It was a big deal at the time. Hindsight says that would have been a great day for PNG had they gone ahead with the plan. It didn’t happen though.

So here we are today. GIF is 16 years old, while PNG is 8. They’re now both free file formats, which means the only reason to use one over the other is technological — Have another look at some of the technical issues involved in using PNG if you need a refresher.

Happy GIF Freedom Day. Ironically celebrated with a PNG banner, just cause I’m that kinda guy.

Permalink › | 5 comments

Mike Pick posted an article about Flash today that reflects my thinking on the subject rather well. Flash isn’t 99% bad, but it sure ain’t 99% good either. As a designer I’m supposed to be awed by great Flash work, and thrilled at incricately detailed interfaces that invite me to explore. And from time to time I am. But I can’t be bothered to browse PixelSurgeon or SurfStation day in and day out to keep up with the latest design work, because it all starts blending in together. You can only see the same transitional effect or same illustration style used on so many sites before its common–place. The goal of ‘experience design’ is flawed. When I’m on the web, I am generally looking for information. I don’t browse for the sake of browsing, and that’s unfortunately what those aiming to provide an experience expect me to do. It’s funny: I’m a visual person, and I know great illustration, photography, and animation enhances content. But when used as an end result? I just don’t get as much out of it. They say content is king. There might just be something to that.

Permalink › | 40 comments

Pleeeeenty has been going through my head the past few days. Consider this a brain dump if you will. I’m probably very wrong in my conjecture and conclusions, but we all need to vent from time to time. So Microsoft killed Mac IE this weekend, if you were living under a rock. There has been a rather high volume of coverage. I figured it was inevitable as soon as it became apparent that Microsoft’s strategy involved bundling the browser and the OS. Obviously they can’t touch Mac OS, and whether that’s valid reasoning of not, it spelled out IE’s fate on the platform. Microsoft was initially caught off guard by the web, spent years playing catch–up, and now wants to kill it. The browser in use by the majority is effectively dead, or at least quickly dying. What’s the future, according to Microsoft? Proprietary services. MSN, .Net, and so forth. Conveniently these all will make them far more money than IE ever did. Fine, good, whatever. Where’s the comfort to be taken in all of this? What good can Mozilla, Opera, or Apple hope to inflict upon the web given their abysmal collective market share? What possible reason do they have to continue any development when Microsoft has so clearly won? Let’s all pack our marbles and go home, because play time is over. The consumer doesn’t care about the browser, and ends up using whatever takes the least effort. IE wins. Microsoft wins. They can do whatever they want now. Okay, get ahold of yourself. Have we gotten the pessimism out of the way? Good, now let’s try and figure out — constructively — what all this means and what happens next. Let’s think like each of these companies for a moment, and see what happens: Opera is a browser company. They make and sell a browser (and variations thereof), no more, no less. This is great news: their biggest competitor has literally decided to stop competing. Opera is in a good spot. Now all they have to do is get someone to start bundling their product with hardware. Hello wireless. A market Microsoft doesn’t own. Apple is largely a software company. They sell a variety of products, the most important being their operating system which competes directly with Microsoft. John Gruber has a great write-up on what must be happening over in Cupertino right now. Here’s another thought to add on to the heap: we’ve seen how crummy browser–detection scripts lock out fringe browsers — how successful is Microsoft going to be in locking Apple out of their future plans? Their market share may erode awfully quickly if you can’t use the internet on a Mac. They just got forced into a committing to Safari. That’s a ray of light for developers, and we’ll all be sure to thank Apple for it, won’t we? Go tell Dave Hyatt how much you love him. AOL has more options. They just won the right to license IE free of charge for the rest of the decade. So will IE6 live within AOL’s software until 2011? Not likely. Their long–term strategy must involve Mozilla to some degree. Netscape’s days may be coming to an end, maybe they aren’t, but one thing is abundantly clear — AOL needs to continue developing their own software and break the Microsoft habit. They just collected three quarters of a billion dollars from Redmond: they just used up their Get Out of Jail Free card. The gloves are off. And lastly, let’s not forget the consumer. I have a collection of sites I visit frequently in my bookmarks. I’m sure every single person with a web browser has a similar collection, regardless of their technological expertise. The publishers of these sites will continue to publish, which means they will continue to require a medium to publish. People like the web. They like their Google, and Salon, and ESPN. You like developing for it. Because Microsoft has decided they don’t, doesn’t mean Microsoft gets their way. What could they possibly provide that would convince hundreds of thousands of web developers world–wide to a) re–learn, b) re–build, and c) re–develop their entire skillset and toolbox? On any other day we groan about the inherent human nature to stick with what it knows, but today let’s take solace in how many developers have yet to truly embrace web standards. These are the same people Microsoft has to convince. The web’s not going anywhere. (This originally started out as a post on wireless technology, if you can believe it. It’s one more angle to consider — the desktop browser may be locked, but mobile devices, set–top boxes and the like are still anyone’s game. The web is far from over, and while things might be at a stand–still for a few years, standards are more important now than ever.)

Permalink › | 10 comments

Questioning the W3C's intentions, and coming up pleasantly surprised. Come and theorize with me for a moment. You’ve no doubt seen Owen Briggs’ Design Rant. Keeping in mind that it was written in 2001, the concepts are more relevant today than ever. The World Wide Web Consortium, he says, is taking the long view. Rather than duplicate past experiences like NASA’s Viking mission, the data for which is no longer readable by machines, the W3C is planning for the future now. Each new spec coming out is considered in a historical context, as new features added extend existing capabilities, instead of replacing them. An evolving language, each baby step along the way has to set the stage for the giant leaps to come in future revisions. So as not to break stuff. So what’s up with XHTML 2.0? No more <img> tag? That little doozy alone wipes out almost every single page on the existing internet. XHTML–based browsers can “process new markup languages without being updated”, oh sure, but that doesn’t really do much for existing sites, now does it? It strikes me that in their quest for semantic purity, they’re casting off the primary goal of future compatibility. But then… then the sound of a flick of a switch as the light turns on. They’re doing this once so that it never has to be done again. The goal of XHTML is to transition people from HTML, a non–extensible (and if you’d like to argue this, I present the case of IE4 vs. NN4) subset of SGML to the prior–mentioned XML which, again, can “process new markup languages without being updated.” HTML will die. Today’s internet is obsolete, and anyone still coding in HTML 4 is planning the obsolescence of their own code. The big picture says that if, and this is a big if, but if we can move to an XML–based internet, then revisions to markup languages, existing and new, don’t require browser updates. Once we have user agents that fully support an eXtensible Markup Language, and the style sheets used to format it, then it doesn’t matter anymore if we lose the <cite> tag, or if <img> gets dropped. We create our own damn subsets that include them, and everyone else can use our subsets without downloading a new agent! Wouldn’t that have been convenient 5 years ago… I’m late to the game. Or early, depending on where you’re coming from. This is a big thing, and it’s taken me a while to see it for what it is. If you approach recent announcements from the Consortium keeping this in mind, it all begins to mesh. However. It’s an ideal, and years and years down the road. Coding for today’s web means you can’t afford not to create sites that will be obsolete when the dream takes off. Browser and developer support for even the next transitional technologies like XHTML and the absolutely critical CSS is not nearly enough to start coding these future–friendly sites today. As we’ve moved from presentational HTML to semantic XHTML separated from style, some have come along for the ride but most haven’t. The next few phases are going to be even more difficult to get to, since at least today’s transition is still very backwards–compatible. The big leap is going to be far tougher, since killing HTML for good simply cannot happen in today’s climate, or tomorrow’s, or any time in the next 5 or 10 years. Will it ever happen? Hopefully. I’m excited about the prospect. I realize this is something to look forward to, and not something to even think about using in the near future. But they’ve giving us our training wheels in XHTML, and that’s a good start.

Permalink › | 17 comments

A good design column, an eerily familiar concept, and reflections on Quark’s recent news.

Sherif Tariq has started an on–going column titled ‘ Design Matters .’ The concepts he touches on are basic building blocks of design, and yet they’re too frequently overlooked by designers. Well worth a read. I’m particularly fond of his demonstration of white space . § And from the odd coincidences corner comes news of a project similar to the Zen Garden , both in theme and intent. Ken Boucher’s NoZen has apparently been around for a few years, and exists as a place to “get lost in the moment.” Offering a smattering of koans, or musings as you may prefer, NoZen also allows the user to change his or her style sheet while browsing. The call is made for users to submit their own, too. Similar projects revolving around a Zen theme — how very, um, Zen–like. § So we’ve got Wired , ESPN , and now Quark . Coupled with the recent announcement of QuarkXPress 6 for OS X, Douglas Bowman has discovered their site’s redesign was done in valid XHTML 1.0 Transitional and CSS . Another beautiful CSS –based design to add to the ‘good list’. XPress and Adobe’s InDesign are page layout programs. The ability they offer in positioning text and imagery on the printed page is very similar to the way CSS is used to position those elements on a web page. If you consider absolute positioning and hard pixel values for everything, though arguably not the best way design for the web, the two methods are virtually identical. Will Quark’s web development team recognize this after their experience redesigning the site, and convince the product development team to make a push towards CSS –exporting options in the next version? Empowering print designers, who often just don’t get the web, would start a new trend in high–end CSS –based design. These are the people that expect a site to render with nary a pixel out of place. These are the people that still need convincing the web doesn’t have to be a mess of single–pixel spacer GIF s and horrendously complex tables. If Quark or Adobe can make publishing a visually solid, standards–based web site as easy as a printed brochure, from the same program, then designers don’t have to be convinced; they will just start doing it . A final note on Quark’s site: they fall susceptible to a minor oversight that a lot of designers still miss today. Their body background colour is left to the browser’s default, though it should obviously be white. When an attentive (retentive?) user like me comes along who has purposely set his browser’s default background to a glaring yellow, this bug has a tendency of being rather annoying. § ]]>

Permalink › | 6 comments

Eleven days from now, the patent on LZW compression forming the basis of the GIF file format is set to expire, according to C|Net. They question whether this means the death of the PNG file format.

Not hardly.

PNG and GIF are not two competing file formats in a situation where you have to choose one or the other. They’re not black and white; they’re regular and extra strength.

PNG was created in reaction to the draconian licensing scheme Unisys imposed: creators of any software supporting GIF had to cough up a $5,000 surcharge whether their software was free or otherwise. This from a previously–open file format that was theoretically free to use. PNG was built in part to provide a free alternative, but also to better meet the needs of designers.

Now the licensing bait has been pulled out of PNG’s arsenal, so the only reason to adapt is technical. As we are all well aware, Microsoft’s Internet Explorer is the only modern browser that doesn’t support the alpha transparency that PNG offers. This, however, is not a reason to shun PNG until the situation improves. In a bout of ‘the grass is always greener’, I believe we’ve forgotten what it can and can’t do today. A brief summary is in order.

PNG, pronounced ‘ping’, is available in 3 flavours: true colour, grayscale, and palette–based. The former is better known as PNG–24, the latter as PNG–8 (24 and 8 bits per pixel, respectively) and these are the two that will concern us for now. 1–bit transparency means every pixel is either completely transparent, or completely opaque. 8–bit transparency means every pixel has an opacity value from 0 to 255, where 0 is completely transparent and 255 is completely opaque. Also see the accompanying PNG test suite.

PNG–8

PNG–8 is the GIF replacement. Allowing for custom–palette images ranging from 2– to 256–colour, it also offers a 1–bit transparency. This is exactly what GIF does, minus any hint of animation. File sizes are smaller, and support is consistent amongst all modern browsers. If you are using GIFs, there is absolutely no reason not to consider using PNG–8.

However, after considering it, there are still reasons why you may not want to actually use it. If you are exporting your images from Photoshop, you will consistently notice that your file sizes for equal PNGs are larger than the comparable GIF. This is a limitation of Photoshop, and highlights weak PNG support rather than any problem with the format itself. Work–arounds are possible by exporting from another more capable program like Fireworks, but that adds an extra step to the process.

See the first couple of comments to this article for plug–ins and third–party applications that get around Photoshop’s flaw.

PNG–24

Now we come to the heart of the matter. PNG–24 is the one we all want to use. Internet Explorer doesn’t support alpha transparency properly as we’re aware, which renders the main reason we wish to use it null and void. Such a great loss, we lament.

Except that we forget to consider also that PNG–24 is a lossless compression format, and in most cases we wouldn’t be able to accomplish what we’re dreaming anyway. Why? File sizes, my friend. If you compress a 400x200 image into a 25k JPG, you’re reasonably happy. That same image as a PNG with an alpha channel might hit 150k if you’re lucky, while 200k is more likely. A lossy PNG–24 will never exist either, because an alpha channel with compression artifacts would lead to randomly transparent pixels – something that is definitely not desirable.

PNG–24 is certainly great for some effects, and allows for amazing visual eye candy. But you will never build whole sites with it, not while bandwidth is a concern. It will remain a niche format even when widely supported, to be used only in situations when the 1–bit transparency of PNG–8 or GIF won’t quite suit the bill.

Other PNG Features

PNG offers plenty of extra features including gamma correction, lossless compression, 48–bit colour, alpha transparency, and even multi–image files (animations, anyone?) via the MNG extension to the format.

48–bit colour is absolutely useless on–screen. Your monitor displays 256 levels in each red, green, and blue channel per pixel. Each channel is represented as a single byte, hence 8 bits (1 byte) times 3 channels equals 24 bit colour. The next jump up to 48–bit colour involves doubling the bits per channel. A 16 bit red channel does not mean 512 levels of red though, it actually means 65,536. No monitor on earth displays that many levels per channel, and any advantages of having the extra colour are only realized when working in different colour models (which does us no good on the web).

I question the need for per–image gamma adjustment (as opposed to per-page) but I can see some practical applications of it, when considered outside of the context of the web page. Not every application of a graphic file is web–oriented. You may never use some of these features, but other graphics professionals may be hard–pressed to ignore them.

Conclusions

So we’re in a funny spot. We can use PNG on the web, but not fully. With a bit of elbow grease we can start using PNG–8 as the GIF replacement it was always meant to become. But that bit of extra work means it’s almost a sure bet that most professionals will avoid the challenge for now. A valuable addendum to the alpha transparency pressure on Microsoft might be found in calling on Adobe to work better optimization techniques into their software for PNG–8. Both issues are equal hindrances for PNG adoption.

PNG may gain dominance sooner or later, but despite it all, the 16 year old GIF file format is going strong. And while the patent news is good for the Free Web, it doesn’t mean PNG is going anywhere.

Comments are open on the Second Edition of the PNG specification until June 23rd, 2003.

Permalink › | 32 comments

Reasons to quit your job, and an explanation of absence.

Overheard:

“Well since it doesn’t handle proper markup, can’t we just have our CMS wrap that paragraph with an <h6> to hack the text’s formatting?”

So if anyone in the Vancouver, BC area is looking for a designer who’s up on the latest standards, we should talk. I’m not quite ready to move yet, but getting there.

Off to San Francisco for the weekend. Get out and enjoy the weather. Back Monday.

Permalink › | no comments

Why coding and design don't mix, and news of two new Zen Garden submissions. Time for a breather, I think. The focus on browsers lately has been good for thinking about what’s important for users and developers, and what lies ahead, but you can only prattle on so much before realizing it’s just an intellectual discussion. While the technology may change, it’s only a means to an end and what really counts is how you use it. Moving on to another subject near and dear to my heart: design. I recently did an interview for zlog in which I stated that coding is counter–intuitive to a designer (and I just noticed that Ronan has a new one posted with Ben Hammersley — I’m in good company.) Scott Steffens posted a thoughtful response to the interview that bears consideration. He argues that the designer is the best person to plan the layout and interaction, and one of his strongest points is that a designer who doesn’t know the code can’t possibly know what is or isn’'t possible to achieve. I believe to a certain degree, he’s right. When designing for a technological medium, you have to consider the technology and make sure you understand its strengths and limitations. This holds true for any medium — if you paint a picture with oil paints, you study concepts like fat over lean and get used to working with malleable paint that doesn’t dry for days or weeks. If you don’t know any of this going in, and all you’ve used in the past are watercolours, you will quickly get frustrated in your efforts. The result won’t be pretty. Different methods of creation have their strengths and weaknesses, you need to know what they are before you can use them effectively. But the problem, jumping back to the coding focus, is when you start adapting your layout to fit a design you know you can code. The tools are getting in the way of your creativity. Consider old–school table layouts. The laborious process of chopping up images for each cell, then tediously aligning them row by row and adding up colspans and the like is a very mechanical process. Tools are available that allow a designer to accomplish almost anything they need to with these methods. A good handle on the code will only improve this process, and while there are surely layouts that cannot be handled effectively through these automatic tools, for many purposes they get you 80 or 90% of the way there. The remaining few percent is what will distinguish a good web designer from a pixel–jockey. The former understands relative font sizing, window scaling, and clean code. The latter cares more about the visuals and can satisfactorily call their work complete without ever having to touch that last 10%. Some will say that's good enough, others will deride them for leaving the job unfinished. Currently no such choice exists for CSS–based design. Which, some argue, is a good thing because it prevents those who fall into the latter category from mucking with it too seriously. Which, I’d argue, is precisely why a project like the Zen Garden was necessary, to show the latter category what they’re missing out on. Having a visual CSS editor isn’t going to make the world a better place. It will enable people who code improperly to continue doing so. It still won’t make better designers of the coders using CSS now. But it will make life easier for people who wish to have it both ways. §

---

And speaking of design, do not miss the two excellent new Zen Garden submissions: “Wrapped in Burlap” by John Simons and “What Lies Beneath” by Micheal Pick. You may remember Mike’s previous submission, “Dead or Alive”. These two designs are phenomenally creative examples of how radically different the same designer can approach the same problem. There’s some incredible talent in this one, and if you’re in the New York area, do peruse his portfolio. §

Permalink › | 8 comments

Why the Luxury Web idea wasn’t destined to work, and more questions than answers.

There’s nothing like a good talking to by Zeldman to make you reconsider your ideas in a real hurry.

Right on the money as always, he draws parallels to the Apple ‘Switch’ campaign. If they’re not having luck, given their marketing budget and that they cater to an audience who responds enthusiastically, then a loosely gathered group of volunteers trying to lure people away from their current browsers won’t make much of a dent.

It’s tempting to call this particular comparison apples and oranges. Switching or upgrading an Operating System requires a hell of a lot more commitment and money to upgrade apps, not to mention the difficulty in rollbacks if things go awry. In reality, the scope is different but the underlying mindset is the same. “This is what I use. It’s what I’m comfortable with. Leave me alone.”

I believe he’s dead on about browsers: the end user really can’t care less about which browser they run. Which is why the Luxury Web concept focused on selling features, rather than selling browsers. But since, as Zeldman points out, this is precisely what others have tried and failed, then even that rudimentary thinking on the subject must be flawed.

My original thought was a reaction. It was a ‘well we can’t just sit here and take it, we have to do something!’ The percentage of the population that fails to vote each election have no right to complain about their elected leaders if they don’t speak up when they have the chance; it was my attempt at voting.

So what do we do now? No one but Microsoft is going to be content with letting the situation stand. Rapid evolution and occasional revolution have been a given in the computer industry for decades. When they slow down, we react. It happened last time; it will happen again. The question is: how?

And just for the sake of having it out there one more time, I don’t, in fact, think we’re in that bad of a spot right now. “…be thankful we’re even this far. Being stuck with IE6 for the next 7 years is way better than being stuck with NN4.” It could always be worse.

Permalink › | 11 comments

The first plagiarized Zen Garden submission, and a Dave Winer–style list of thoughts and links. And in this corner, the first plagiarized version of a Zen Garden design spotted in the wild. Unfortunately, this will not be the last. While I know you, dear readers, would never steal someone’s imagery, it’s important to note that the Zen Garden designs were created in the spirit of sharing. The code is meant to be studied, dissected, picked apart, and used for absolutely anything you want to use it for. The graphics, however, still belong to their respective owners and any use without proper permission, accreditation, and compensation as the case may be, is theft. I’m lenient, personally. I’ve authorized use of my images in other work. But that’s my own policy on my own image work, and each Zen Garden submitter may have different (but valid) thoughts on the matter. I think it’s time to re–evaluate the standard header/license in each .css file. update: the design has been removed, so I’ve dropped the link from this post. Michael grabbed a screen shot though. §

---

All complaining about Microsoft’s current focus aside, much praise is due Tantek Çelik and his team for this. That is a lot of green in the MSN/Mac OS X column. Way to go! § Douglas Bowman followed up his recent Zen Garden submission with an incredibly in–depth look at his design process. This is a must–read article. § Seamus Leahy adds an offering to the recent CSS–2 pseudo–class tricks that have been going around, and ups the ante to CSS–3. While we’ve been focusing on :hover, he decided to explore :target. Take a look in your favourite Mozilla deviant. (Oddly, it doesn’t seem to work in Firebird.) It works just fine in Firebird, but not, as I’ve discovered, Phoenix. Someone needs to pay more attention. Whoops. § Welcome back Mark. Glad to hear the inbox didn’t get jammed, it gives me hope for my own upcoming excursion. § Speaking of Garden entries, I’m about 60% done the Photoshop monkeying of my next one, which means I get to start coding soon. If I can build this one, I think it may be one of the first that absolutely couldn’t be duplicated in tables. (although there are some close calls up there now) That’s a rather significant if because I have yet to figure out how I’m going to do a few things. Give me a week or three. § A brief thought about the AOL/Microsoft settlement — if AOL rests on this decision and relies on Microsoft to keep upgrading Internet Explorer for the next 7 years, they are cutting their own throat. They’ve read the same news we have and must realize that Microsoft just gave them a dead product. That all forthcoming revisions of IE are considered to be integrated into the operating system gives Microsoft a convenient little loophole to keep them from ever having to license anything past IE6. “Sorry guys,” they’ll say. “We can’t give you this new one without divulging Windows code. That wasn’t in the deal.” AOL is hemorrhaging cash, but they can’t afford to let Mozilla/Netscape die. All this deal does is buy them time.§

Permalink › | 6 comments

There should not be a Browser Upgrade Campaign v2, and something we might consider instead. Reaction to the latest Internet Explorer news has been very one–sided: this is a bad thing for developers, and we have to do something about it. I’ve been meaning to gather my thoughts and post something more in–depth, but that will have to be put on hold. A meme was started that appears to be gathering steam. Ronan ( zlog ) first suggested it in this post on my site, a few people agreed, and commenters on webgraphics have picked up on the idea . Run another Browser Upgrade Campaign , they’re saying. No, guys, don’t. My reaction has been posted, but it’s worth repeating here. The BUC was a success because it aimed to move users off of ridiculously old browers. One of the suggested upgrades was Internet Explorer 6, precisely the browser that will be targetted by this new campaign. Repeating the same campaign would be disastrous for any credibility the web development community has garnered in the past few years. All the new campaign would serve to accomplish is to portray developers as whiny, never–satisfied ingrates who can’t make up their mind about which browser the end user should use. The WaSP ’s efforts would be completely undermined. And what happens in 3 years when we have to start getting people off of Mozilla’s 1.x code base? Let’s think more long-term on this. Destructive reasoning against IE isn’t going to solve any of our problems, it’ll only work against us. Instead, let’s address why a user might want Opera, or Mozilla. Sell a new browser to them by luring, don’t shame them into upgrading. Start a marketing campaign. Run ads for the new browsers that point to ‘how to upgrade’ pages. Play very nicely, and don’t let any of the vitriol you’re prone to casting on IE creep into your efforts. And for heaven’s sake, be thankful we’re even this far. Being stuck with IE 6 for the next 7 years is way better than being stuck with NN 4. § My very first reaction on Friday was that in our day jobs, some of us have to use advertising and marketing techniques to sell our client’s products. We’ve got the collective skills, so why not use them to start selling high–end browsers? Unfortunately my thinking hasn’t progressed passed the ‘basic inkling of an idea’ stage yet, but I started throwing out a few of my thoughts above. But, as rough as it is, here’s my full pitch — the ‘Luxury Web Experience’ or something better worded. It would be an elegant site, with high–end design that evokes imagery of haute–culture, jewellery stores, luxury cars, and so forth. Instead of making the hard sell, it would focus on the lifestyle that everyone wants, and the message would be a gentle ‘you can have this if you download Mozilla/Opera/Safari/etc.’ There would be some supporting documentation on the site, steps for installation and focusing on features, but the main page itself would only mention a few of the finer features, and let imagery and imagination sell the rest of it. There would have to be a supporting ad campaign, which is where the rest of the development community can really lend a hand. The first selling point, and one of the big ones because I’ve had luck getting people to switch on this alone, is that you no longer have to put up with the annoyance of pop–up windows that the common man has to suffer. Very rough thinking, and I’m sure some people will want to take a more pragmatic approach. But since we’ve used up our shot at the hard sell, this is one direction we’d be better off pursuing. § 6/4/03 update: Further thinking inspired by Jeffrey Zeldman’s Daily Report .]]>

Permalink › | 8 comments

Gathering support for the yet-to-be-conceived campaign, update after Zeldman weighed in on the matter. Anyone wishing to eventually participate in this still vague idea may reply to this post. A name and link to a contact form will do, or just fill out the e–mail field in the reply box (it won’t display publicly). You may also want to mention your specialty — coding, technical writing, translation, design, and so forth. This is just for reference right now so you will be contacted eventually, but probably not immediately. I am going to be seeking WaSP council on the matter once we’ve defined a clear strategy, so any WaSPers reading, don’t worry — you’ll be in on this too. We’re not doing it without your blessing. update: consider comments on this topic closed. (I haven’t yet built that function into my MT templates, so the form remains) Jeffrey Zeldman gives some very considered reasons why this campaign wouldn’t have had the effect we’d all hope for. What do we do instead? I don’t know yet.

Permalink › | 19 comments

The zlog interview, thoughts on Magnatune, and music–industry monopolies. Ronan’s interview with me was posted to zlog this morning. I think I managed to give a few rather good answers. What I’ve been noticing is that the more I talk to people about certain issues, the clearer my views become to me and in my answers. Not to say that I’m right, or even close to it, but there’s definitely a refinement process happening. Very soon now I’ll perfect the art of the sound bite. § After looking at Derek’s CD Baby a few days ago, I’ve discovered another store doing the same thing. Magnatune goes a step further and eliminates the packaging costs associated with shipping CDs and just lets you download the music. They split the profits 50/50 with the artists, and even let you decide how much you’d like to pay for each album. It’s this kind of innovation that the RIAA simply will not come up with on its own terms. We need to start supporting stores like CD Baby and Magnatune to keep the soul of music alive, and stop treating art like a business. Note to Canadians: Magnatune lets you get around the heavy customs fee you will pay if you order music from an American store. No physical object means, for now anyway, no additional tax on your purchase. update: Via Slashdot comes this great article comparing today’s recording industry and their strong–arm tactics to the world of Thomas Edison and his own anti–trust suit. Funny how things can stay the same in a century, no matter how much they’ve changed. § ]]>

Permalink › | no comments