mezzoblue

It all started when I worked for a large retailer in the entertainment industry years back. They had the right to use movie posters, box–art, and generally copyrighted material for the purposes of promotion. However, they didn’t have access to source material. Solution? Go and steal from the web. The legality might seem shady, but the assumption was that anyone else using these materials had the right, so it wasn’t much different than grabbing them from the distributors. With a real need to get the job done, I didn’t question it. I used these low–resolution JPGs and dithered GIFs, and eventually mastered the art of Stealing Other People’s Source. Since that point, I’ve found the skills I developed have come in handy almost daily. Whether clients don’t have any material other than what’s on the current site, or their print designer is uncooperative, or heaven forbid you have to scan printed material for source, there are times when you just don’t have a good starting point. So you fire up Photoshop and flex your image–editing skills, because it’s gonna get ugly. Luckily we don’t have to go to quite the lengths the print industry has to. The general solution in their case is to re–create a logo or wordmark. Photographs must be provided, or substituted, there’s no way around it. We don’t need the resolution they do, so it’s often times possible to fudge it with the existing image and some tweaking. Masks, colour adjustments, blending modes, and the good old–fashioned Eraser tool all have their part to play in this method. Creative level adjustment can drop out almost the entire background. Selection strategies can reduce the time it takes to mask and guarantee no stray fringe pixels. But you have to be really comfortable with Photoshop to do it. Over the next little while, as I have time (and as I catch myself using the techniques!), I’m going to start putting together some basic intros on cleaning up low–res GIFs, fixing harsh JPG artifacts, and generally using Photoshop for good. Er, and evil, if you’re so inclined, but don’t say you learned it here. First up: Creative Masking, Part I. Coming late next week.

Permalink › | 2 comments

Long lauded in the list of benefits in living in Canada is the so–called “free healthcare” we enjoy. Any dissertation on how ‘free’ or even ‘useful’ it currently is will be left as an exercise for the reader, but here’s why I bring it up. The Province of British Columbia is overhauling their system, and long story short you have to register your income with them by April 31^st, 2003. As in Thursday. I know this because our benefits provider at the day job has just informed us. We were given a URL and a phone number, both of which enable us to register. Given that it’s crunch time, you’d expect both to be busy, right? It’s worse. The phone number has been a busy signal for two days. The web site is spotty, and even when you DO get through, you have at least 4 steps to the other side. This might be an inconvenience, if hitting Refresh a bunch of times were to do the trick, but it doesn’t. Some asinine Javascript functions are running to make sure you can't use the back or forward buttons. When a click of the “next” button induces a “Page cannot be found” error, it means you have to start all over again. My favorite useless message so far has been “This page can’t be displayed due to an internal error. The server may be busy, or you may have to adjust your settings.” No mention, naturally, of how the settings should be adjusted. This is terribly poor planning. A system that is literally unusable three days before a deadline effectively means the deadline passed three days early. Here’s hoping the Ministry graciously extends the deadline, since they completely failed to account for the rush before the end of the month.

Permalink › | 3 comments

It’s been bothering me all day, because I can’t figure out a good way to say this without coming across as a total usability geek obsessing over the least little thing. Whatever, here goes. Slashdot, the archetypal “News for Nerds” site has long posted news items with small icons next to each story. These were great because they were topical, and a quick scan of the page could let you know which stories to read or not, base on your particular interest in the topic. As far as I can tell, these are no more. The best attempt at categorization right now is a throw–away line following each story title, “from the such and such department”, usually a joke. What a step backward. No more quick scanning, now you actually have to read a bit into each story to see if it’s one you've read before, or even if it's one you’re interested in. There. I’ve spoken my piece, and I’m satisfied now.

Permalink › | 9 comments

It never hurts to have plenty of digital photos kicking around that you’ve taken yourself. Sure, they’re nothing professional, but at least you don’t have to worry about licensing. It was a good weekend to be outside, so I made the most of it — I cleared my 64MB Compact Flash card and went for a 2+ hour walk around town. Unfortunately I didn’t get as many photos as I wanted because I filled the card at about 100 shots. But there were some great ones which should come in handy in the future. Here are some.

Permalink › | 2 comments

Wow, I never made the connection before. Those guys ripped me off! Ha, no, not really. In fact I’m pretty sure the current incarnation of their site (which I find far less attractive than the last) pre–dates my latest redesign by a few months. Still, it makes me wonder if my emboldened choice of a bright red over baby blue colour scheme was subconsciously affected by their site. Inspiration can comes from odd spots sometimes. Shortly after I launched this redesign I noticed the pale blue bar of Irish Spring Sport juxtaposed on the bathroom light shining through my maroon plastic shower curtain matched up my new colour scheme perfectly. I suppose it could be argued that was equal an influence on my palette selection.

Permalink › | 1 comments

When it comes to absolute positioning, you are stuck aligning everything to the left or right of the browser. There is no way to align from a center axis. I was faced with that a few days back, and it turns out it’s entirely possible, actually, given a bit of monkey work. Here’s my solution, which holds up in everything I’ve checked it in so far. It strikes me that there’s a simpler way to do it, but the example I’m working with hasn’t duplicated when simplified. I’ll update if I manage to get it. update: IE5-friendly example added.

Permalink › | 4 comments

It’s been lamented that most of the people using CSS for design are the people who shouldn't be designing in the first place. I have a theory about why the real designers aren’t jumping in. Building a site with tables, while tedious, is generally straightforward. You make sure your body margins are set to 0, you check that you have enough spacer GIFs, you chop accordingly, and you’re good to go. It’s refined to the point where there isn’t a lot of thinking involved anymore. CSS is still quirky. You have to remember to add your padding to your width instead of subtracting it, although in some browsers it works the opposite way. (I have to admit, IE5’s way of doing it makes far more sense to me) You have to test your expandibility and make sure that a smaller (or larger) window size doesn’t cause elements to overlap or position themselves completely differently. You have to carefully test your horizontal alignment, and you have to use hacks to get any form of vertical alignment happening. That’s just too much logic and problem solving for most left–brained types. When you consider most graphics applications, they are visual, and rightly so. You don’t create PostScript documents or PDFs from code, you use Quark or InDesign to preview your work, as you work. WYSIWYG editors are much–maligned by HTML purists. Given that there are, to my knowledge, no comprehensive and really good CSS–design packages available, the situation doesn’t seem to be improving. So code you must, and coding is something that designers do not do unless forced to. This is why cookie–cutter, GIF–free generic templates are the best CSS advocates have come up with so far. No tools? No quality design. And I wonder what the likelihood is that a really well–designed, flexible CSS building tool coming out any time soon is. When you consider the logic that goes into breaking up your page structure from endless DIVs, Ps, Hxs and so forth into two–column, properly aligned structures, it’s hard to imagine software replacing the good old human ingenuity involved in doing it right.

Permalink › | 25 comments

Of a particularly aggravating nature is the inability to recollect the brilliant idea for a post you had the night before as you fell asleep.

I could use one of these. Even one of these would do for my purposes.

When’s Movable Type’s neural interface due out, again?

Permalink › | 5 comments

How well do you know your brands? I can’t get A D E F N O R Y. I blame it on my being Canadian, and not exposed to American brands on a daily basis. (although I KNOW what E O and R are from, they’re at the back of my mind, and I just can't pull out the rest of the logotype to make the connection) 4/20 update — it's been solved, thanks to the help of Dale, rhapsodie, and swimunderground.

Permalink › | 5 comments

I find it pretty easy to take for granted the amazing feats computer engineers pull off these days, mainly because they’re too small to be visible. It often helps my understanding to have an analogy on a larger scale. For example, according to this article, a new portable storage device for digital cameras / MP3 players has improved efficiency by shrinking the space between the reader and the media. Their analogy is that this increased shrinkage is akin to a Boeing 747 flying a millimeter above the earth’s surface. Think about the control here. A device moving quickly enough to read data is so amazingly close to the actual media that the slightest deviation would be enough to cause the two to collide and probably destroy them both. But instead, the technique is reliable enough to allow for consistent data storage. A 747 flying a millimeter above the ground. Now that’s pretty amazing.

Permalink › | no comments

Yeah, everyone's talking about XHTML 2.0 this week, but it’s such a non–issue. The W3C pumps out good specs for useful technologies, but widespread use just ain’t there. Look at PNG. A patent–free image format to replace GIF, it expands on the 16–year old technology by offering full Alpha transparency. It is 8 years old now, and we still can’t use it. Why not? The most popular browser of all, Internet Explorer, won’t display the alpha transparency properly. Which makes it all but useless for regular development. While there are some great things coming out of the W3, adoption is slow, if it happens. A very large time is needed for anything to come of a new technology from them. XHTML 2.0 may catch on in, oh, 2010 or so. Until then, I’m sticking with my 1.x.

Permalink › | no comments

So Chimera recently rebranded as Camino. Now Phoenix (the Mozilla derivative) is getting a name change too, and will become Firebird, and the mail client is being renamed Thunderbird. So where’s the next stop? Internet Explorer becoming Camaro? Netscape 8 being released as Mustang? (added) Hah, here’s the definitive list.

Permalink › | 1 comments

It says a lot about CSS–based design when you run your first check on a complete draft, and it comes out as valid XHTML, CSS, and hits Section 508 accessibility guidelines without any changes needed. It’s also rather gratifying when only a few slight revisions are needed to get a triple–A from Bobby. It is, however, a pain in the ass that adding a simple link to an accessibility validator will break your XHTML. I find it excessively picky that “url=myurl&content=” can’t simply be copied and pasted into an href. Instead you must re–format that to “url=myurl&content=”.

Permalink › | 5 comments

I’m having a rather difficult time believing I’m the first one to encounter this, but some pretty deep Googling and searching of the Bugzilla database isn’t turning up any prior mention of it. When using a transparent GIF as a background image in an absolutely–positioned div, Mozilla does some pretty radical colour shifting. I’ve had this happen on more than one occasion, but I only looked into it a little further today. update (4/14): — it’s been brought to my attention that this bug has been fixed by Mozilla v1.4. Great news for future releases, but Netscape 7 is still buggered unfortunately.

Permalink › | 6 comments

This is rather odd. I had a message waiting for me this morning to call a guy named Michael. I hadn’t heard a thing about the project he referenced in well over 6 months, and I had no idea who the guy was, or what his company did. But, hey, it was in association with a past job so I figured he must have a reason for wanting to talk to me. So I called back. Introduction, company name, etc. etc. He asked me if I’d heard about what’s happening in the past two weeks, and I said, no, to be honest, I haven’t heard a thing about it since October or so. He kind of laughed, and then asked me a few more questions. Am I an investor in the company? No. Do I use the company’s services? No. Do I invest in general? Uh, for the sake of argument, no, but what business is it of yours, Michael? And then he dove into a spiel on phenomenal growth and unprecedented earnings and so on and so forth. I stopped him and said, hey Michael, if I didn’t know any better I’d say you were trying to sell me something. Hemming and hawing, he confirmed this was in fact a marketing call. Okay, what? I was a developer in a very vague sense for these guys. Their branding company contracted my company who put me on the job, which was actually the job referenced here. It was a tenuous connection at best, and now my name is on some guy’s marketing list. Wonderful.

Permalink › | 4 comments

Building a web site using paths (/about/) instead of filenames (/about.php) for sub–pages: a good idea. Carelessly uploading a minor change to your ‘About’ page which is also called default.asp into the root of your web server thus replacing your home page with your grinning mug and making you look like an arrogant bastard: not so good an idea. phew. I think only a couple of people caught that.

Permalink › | no comments

The bottom line: transitional, table–based layouts work, and will continue to, no matter how ugly a solution they seem. The table tag isn’t going anywhere due to the continuing (valid) need for tabular data, and let’s face it, we’ve long worked out the bugs in table–based design. We’re only beginning to knock off the bugs of the more popular CSS configurations. This is an area where standards advocates shoot themselves in the foot. “Code for the future,” we say. “Drop the tables, and you’ll never look back. Er, no, I’m not sure why IE5 is doing that. Um. What was I saying again?” Table–less design gets lumped into the standards argument as if the only way you can write valid XHTML is with divs. This is not intentional in many cases, but the overwhelming impression is that if you’re going to bother with validation, you’d better be using CSS positioning to build your document. Which simply isn’t true. Well–formed tables are entirely valid markup for any flavour of XHTML 1.0. The code is always larger than it needs to be, and it looks horrible in alternative browser, yes. Anyone who has spent a bit of time gritting their teeth and figuring out how to throw together a CSS–based layout realizes that after the learning curve it’s a far more elegant and desirable way to build a document. But it’s not the only way. Transitional layouts have the advantage of working in older browsers. Nobody in their right mind tests in a 3.x browser these days, but if you’re building an e–commerce site that gets even a few thousand 4.x visitors, you’d better be damn sure they have a way to buy from the site. It’s far less important to target users of web–enabled cell phones, for example, since they stand very little chance of buying a product based on a text–only screen. Still, there are other ways. I recently built a table–free site for a small non–profit group. (they were getting free work out of me, they’d better not complain about my markup choices, after all) The original design was tested against the major standards–friendly browsers (IE 5/6, NN7, Opera 6, Mozilla), and then it was time to deal with the old, ugly Netscape. It was a mess, as you can well expect, but by moving key elements into an @imported .css file I was able to target NN4 a little more. After shifting some text around, dropping some background colours, moving some images… it actually worked. It looked only vaguely reminiscient to my original concept, and as a design it didn’t hold up very well on its own. But the layout worked. Netscape 4 got one thing right, believe it or not: absolute positioning. With some creativity, this can be used advantageously to create table–free site foundations that work in almost every browser being used in the wild today. (see Craig Saila’s site for an example) So it is possible to build table–less layouts that work back to 4.x browsers, if design can be compromised for that 2% of the market. In 2003, it’s awfully hard to make a case that 20% of a site's budget should be spent on these browsers, 1.5% of the market, but some people still just don’t get it. Today we have choices; we can go in either direction. Both ways are correct. CSS positioning is a far more elegant solution, and provides more flexibility for later upgrades and alternate browsers. Table–based design is a relic, but one that is tried and true, and remains valid markup. Both are perfectly justifiable in their own right, and will continue to be so for time to come. (In response to Keith’s response to my response to another article...)

Permalink › | 10 comments

There was a good intro to this post at one point in time, but thanks to a Safari caching bug when using Movable Type and comment spam, it's long gone. Hopefully the rest of this will make sense without the introduction. Oh well.

Now, about forward compatibility. The recent flap about the XHTML 2.0 draft says a lot about this. Things are deprecated to the point that no site built using valid 1.0 will work if I switch doctypes? So what am I gaining by supporting 1.0 now?

Sites from 5 years ago still work in today’s browsers (aside from those that took advantage of browser–specific quirks back in the day) so why change coding practices? What works is what matters, isn’t it? It is, and it isn’t. It is because it is what we’re used to. We know the quirks, we can code around them — the path of least resistance. It isn’t, because by now we all now how much more elegant a good CSS–based layout can be.

CSS hacks are what’s killing the argument. The fact that the default font size for each browser is different and that box models are broken for a large percentage of users is why people used to the four horsemen of the body tag, marginwidth and so forth, don’t exactly see the grass as being greener. Can you blame them?

The bottom line is that people use what works. And right now, both work, with their own quirks. Some stay in the past, others are looking to the future. We’ve started seeing the shift from the one to the other, and this will continue, that’s not in question. So the question you have to ask yourself is if you’re going to be stuck behind, a relic of the dot–com boom, or if you’re going to evolve with the rest of us.

It’s been a slow transition. But it’s a transition, and we are moving forward.

Permalink › | 6 comments

I don’t eat breakfast cereal. Or at least, I don’t anymore. I grew up with Rice Krispies and Cheerios, like any other kid, but I’ve long tired of it. In conversation this week I was reminded of my all–time favorite breakfast cereal, Cinnamon Toast Crunch. I had to have some, it was that simple. So I was in the grocery store this afternoon, visting the cereal aisle for the first time in how long. And you know what they’ve started doing while I wasn’t looking? There were DVDs on the front of almost every box. The one I picked up, for example, contained “Reflections of Olympic Gold”, Episode 3. Three episodes of this [deadpans:] serial so far, with undoubtedly more on the way. With licensed content (maybe even commissioned?) and a few cents of cheap plastic, General Mills has begun selling entertainment along with their product. If you’ve read the wonderful No Logo by Naomi Klein, this shouldn’t be a surprise. Corporate sponsorship and patronage of the arts has recently repositioned so drastically, that events are no longer about the artists but the brand behind them. Is this the future of entertainment? Will creative endeavours be forced to partner with a product, selling licenses to their material instead of selling the material directly to the consumer? Will I need to buy a bag of Doritos to get my Simpsons fix? The ever–pervasiveness of marketing is starting to take some really strange forms.

Permalink › | 5 comments

A guy conducting a research study on weblogs e–mailed me this week. He wanted to discuss potential commercial applications. It wasn’t a question I really had much interest in, since I’d rather not see weblogging become a corporate thing. But I guess it’s as inevitable as the .com rush so I’ll likely have to grin and bear it. The exchange got me thinking, and spurred by my reply to a recent comment by Kris, I clarified my cynicism a little more. Weblogs have been touted as an alternative to traditional, mainstream reporting. The eye on the street for the people, by the people; Sallam Pax being the latest big story. So if they start becoming muses for the corporate world (as is, inevitably, inevitable) then what happens to this resurgent vox populi? I see the old media embracing the new form, and while it may stay fresh for a while, we’ll inevitably see a lapse right back into the old habits. I think traditional journalism is looking rather shaky, with the publishing power that average Joe now has. Given corporate sponsorships and almost willful censoring, the internet is casting a lot more doubt than ever on old–school reporting techniques. But they’ll find a way to survive; through homogenizing, no doubt. Their livelihood depends on it. That’s why everything popular goes commercial, when it comes down to it. The Old Ways of doing things have the pockets to adapt to the New Way. Without the ability to adapt, they’re dinosaurs that sink into the mire of their obsolesence. Keeping a finger on the pulse of pop culture is the only way to predict new trends. Beginning of the trend: Project Blogger, and the Raging Cow debacle (who have given in and resorted to a more traditional marketing site, if you haven’t noticed yet.) It’ll get worse. Personal sites will take on ghost writers, corporate sponsorships, and I can see one or two selling their voice to the highest bidder. Jason Kottke, in the words of Nestle, anyone? Just wait, it’s coming.

Permalink › | 6 comments

I was asked just recently why I chose to design this site for screen resolutions greater than 800x600. I was wondering when I’d get called on this. The current design for mezzoblue features a luxuriously wide 900x45 pixel header graphic, and the rest of the site follows suit below it. If you compare to my previous narrower design, you’ll see I was still targetting 800x600 at that point. With this revision, I realized that my target audience knows better. I write about what I do for a living — it’s a small community, but an educated. I can’t imagine a web designer running at 800x600, and even 1024 is too small for the clustered palettes of Photoshop, Illustrator, and others. (ImageReady is a complete mess, for example.) That’s not to say I don’t get spill–over traffic from other folks — the odd Google search brings in people running systems that make me cringe. I have NN3 in my log file, for heaven’s sake. But these people are not my primary audience and in most cases I don’t expect them to stick around due to dry content, not incompatible resolution. You will notice however that my content area is on the left, and only incidental links are on the right. If you come in at even 640x480, you’ll still get the entire content area in the main window without having to scroll. As well, I threw together an ultra stripped–down version for the same reason (as well as to save bandwidth for anyone who choses to use it). These are my concessions, and they are good enough for me. I have to admit, since I’m forced to run 1024 on my laptop and LCD at home, I sometimes kick myself for making it quite so large. I don’t need a full–screen window but I’m getting used to having extra desktop poking through at work, so filling most of the screen is an annoyance. Maybe I’ll do something about this in a future revision. Maybe not. My answer, in short, is that by using what I know of my audience, I can take certain things for granted and target my site a bit further. I have the room to play with the ‘rules’ and have some fun — so that’s what I plan on doing.

Permalink › | 4 comments

Considering the spin jobs performed by the modern media to appease advertisers, I find the L.A. Times’ moral high–road a bit strained. However, journalism is about reporting the facts, not making them up, and I’m forced to agree with their decision to dismiss photographer Brian Walski for digitally manipulating a front page photo. It’s a minor change to adjust composition, but any editing of news imagery is deplorable. ‘Breaking news’ should not be edited for the sake of a portfolio.

Permalink › | 3 comments

Part four of the on–going series. I fully expect there to be a part five when the finalists are announced, sometime in mid–May.

Two days early, I’ve finally finished my entries, or at least gone as far as I’ll go. Many frustrations were encountered along the way, some having to do with browser incompatibilities, but most pertaining to the quirks of the original source material. As has been perviously mentioned on this site, it wasn’t very friendly.

Nevertheless, I’ve come up with a couple of what I think are pretty strong skins. Dying to see them? I didn’t think so. Here they are anyway, you heartless bastard.

There are only two days left in the contest. If you’d like to use the CSS as a base and whip up a last-minute entry, feel free. I may have already solved some big headaches you’d otherwise struggle with. However, please use your own images. This is about creativity, after all.

Permalink › | 1 comments