IETab for XHTML Traps

March 19, 2008

You’d think I would check. First rule of web design and all that. I mean, we extensively test our web design components against all the platform and browser combinations out there, and Andrew and Greg are constantly redefining CSS elements so that we maintain a consistent style, whatever you’re using to connect to us.

But that can’t save me from being a lazy arse. I like to put images in blog posts to illustrate points, or just to make myself less uninteresting than I am. I also like to have them aligned left or, usually, right, with text wrapping around them. This is from the HTML 1.0 handbook, right? So I was rightly ashamed of myself when I installed the IETab add-on for Firefox the other day and took a look at some blog postings. Initially, I’d installed IETab to try and sync up PicLens with a thumbnail folder view of an enormous image directory as presented as a windows explorer view. That didn’t work, but I thought IETab was kind of interesting, so I duly went away and ‘IETabbed’ my bookmarks.

Oops. seems that that old align=right hspace=8 vspace=8 ain’t what it used to be, and probably hasn’t been since about 2003 or something. For blog templates written in HTML 4 (of which there are tons out there I’ve used or written), this old syntax is just fine, even if it’s like the ‘Hello World’ of web design, but, you know, if it ain’t broke. Except it is broke. In XHTML 1.0 (correct me if I’m wrong, but only in your head), those handy attributes are deprecated, so if your doctype declaration contains the XHTML 1.0 string (like this blog template), the page rendering is undefined. No problem, then, if you’ve been using Firefox since forever, because Firefox just understands that some people out there can’t code for toffee and gracefully deprecates on your behalf. Internet Explorer, however, throws its toys right out of the pram. Because we always gave IE a hard time in the past for being rotten with supporting web standards, it gets all fussy if you make mistakes these days. At least, mistakes in the way IE wants to implement XHTML.

Suffice to say, align=right translates to something like align=centerwithnowrapanddoitrightnexttimeidiot. Meaning this whole blog has looked a right old mess on IE since I started. My fault really. I should have checked. How authoritative I must have appeared, spouting on about web design standards, customer experience journeys, usability and everything, when the very page I was writing looked like someone has thrown up a flickr photostream at random in between the passages of pompous rambling prose like this.

Anyway, you’re probably reading this, if anyone is, through google reader or something, so it really doesn’t matter. A new class in the CSS for those images fixed everything pretty quick. In case you’re using FireFox, and you’re now thinking “oh, I might just take a look at my blog to see what it looks like but I can’t be bothered to start Internet Explorer which I can’t anyway because I’m on Solaris and I don’t happen to have a virtual version of XP running somewhere”, then try IETab. It eats memory like children eat cakes at a birthday party, but its worth it.

Listening Post: Sleater-Kinney: The Fox

Sun.com for SMBs

March 18, 2008

We’ve got a new place for Small and Medium Businesses on sun.com. Take a look. It’s called “Sun’s Place for Small and Medium Businesses”. And guess what. It’s full of stuff for Small and Medium Businesses.

Why is this significant? You’d be correct in thinking this would be very old news for some of our competitors, who have their entire portfolio of products and services arranged by business or audience, right from the home page and throughout their sites. Sun, however, never ones to follow a trend, have always adopted a product-oriented information architecture and stuck with it through sea-changes in marketing and sales. Whatever our key messages are, and however they are woven into the fabric of sun.com, you know you can always find our products by following predictable and consistent paths. There have always been logical groupings of products as solutions, or as part of selected promotions, but, you know, they’ve never really done the job of speaking to a particular market segment.

So that’s why the Small and Medium Business section is important. It’s a first step into supporting customers that might share common business needs, rather than providing a bunch of great products that might fit together as a discrete solution package. Of course, what’s important for a specific market is how our solutions enable them to solve their business problems, but previously, you’d be looking for the solution yourself, rather than having your own space, where Sun is able to highlight those that we already know will be important to you.

It’s only a start, in terms of designing for addressable markets, but the change in focus for the information architecture is hugely significant, so it’s an exciting development. You are still reading this, right?

Listening Post: Half Man Half Biscuit: Breaking News

Creative Suite: Au Revoir, Bonjour

March 14, 2008

As all good designers know these, you need lots and lots and lots and lots of hardware and software to do your job properly. I first started using Adobe Photoshop professionally at version 2.5, which I guess was about mid-nineties. Sun being Sun of course, back then, a Mac or a Windows PC was anathema, no, worse, the antichrist or something, so the version of 2.5 we had was actually the port that ran on Solaris. which was probably also version 2.5. Actually, that port was pretty good, I thought. Especially as you could run it on a Sun box. I think we had it installed on a few Ultra 2s with 1GB of memory, which was immense in those days, and so everything moved along very nicely. Mind you, without layers, there was only so much you could do at a time. You just needed a huge filesystem to hold those 50 saved versions of each file. Luckily, everything was networked to the nth and so that wasn’t a problem either.

Fast forward to 2008 then, as I sit in my home office, on a slightly creaky Windows PC, and I’m hitting some problems with my design tools. I’m still with Photoshop, of course, except now its part of Creative Suite 3 Design Premium, and all the good stuff that comes with that. What I also still have, though, after 4 years in this room, is a single-core processor, 1 disk, and only 2GB of memory. Doesn’t sound too bad? Ever run Adobe Bridge? Anyway, since installing CS3 a while back, things have not run smoothly. Most recently, I’ve had nasty problems with failure to boot or shutdown, and my suspicions have been aroused by the network activity icons blinking away in the corner as everything else fails to start.

As most good designers know, poking around in the innards of your operating system is never really a good idea, but some self-diagnosis was definitely in order. After an afternoon of software removal and starting and stopping of services, I, not surprisingly, could not find a cure. How serendipitous, then, that I should receive and email from Adobe, inviting me to join their user-to-user (“this is NOT adobe support you MORON”) forums, to share and collaborate with my designer community. I thought I might see if anyone was sharing my ‘Adobe Bridge 3 CPU 100% hang crash metadata read’ problems, when I stumbled upon multiple threads about something called the ‘bonjour service’. I had seen that in the services manager in XP and thought it was something to do with XP ordering croissants for me. I mean, its in Program Files, not under Adobe or (as it turns out it might well should be) Apple.

It seem that the bonjour service is installed as part of CS3 and is responsible for initiating network connections to Adobe Version Cue servers. Bonjour is Apple software and is also part of the iTunes installation, by the look of it, which is why it appears to be installed as a standalone product. This might be very helpful is you are actually using Version Cue, especially in a large organization with distributed servers for DAM. Its not particularly helpful if you’re not using Version Cue. Its spectacularly unhelpful if its actually hanging your computer and using shedloads of resource when its up and running. There are a number of ways to stop bonjour, if its causing problems. I found the most effective thing was to actually remove it. Since I have done so, I’ve had no problems with hanging startups or resource draining. I’m yet to try and use iTunes (which I hate anyway), to see what problems might lie there, but for now, I don’t really care. I can get on with crafting comps for category pages. Oh, and writing huge, sprawling blogs.

Listening Post: Bloc Party: Flux (Rev Terry’s Drone On You Flux-uating Diamond Mix)

Sun.com Works of Art

March 13, 2008

Not my words. Those good folks at siteIQ conducted a regular, in-depth, web site best practice review of sun.com towards the end of last year, and there were some great highlights. There were plenty of lowlights too, of course, and we’re already figuring out our way forward as we try and resolve some of those, but, as I have my trumpet out, I’m about to blow it.

We put a great deal of effort into how we support customers through the buying cycle. In the past, we’ve not had great success with integrating ecommerce activities into our product pages. Product buying has always been something of an uncomfortable appendage on sun.com – a kind of strange distended web version of the dead people in the Sixth Sense – but, in recent years, we’ve evolved our ecommerce capabilities into a compelling, well-rounded customer experience. Its very satisfying to see that the latest siteIQ report picks up on this and singles out the ‘Get It’ tab on our product pages for singular praise. From the report (referencing the Sun SPARC Enterprise T5220 Server):

“Kudos to Sun.com for a ‘Get It’ page that is truly a work of art. This page starts by putting SPARC servers in multiple contexts for visitors, including price, compute power and scalability.”
“This page leads to a short and well crafted e-commerce clickstream that allows buyers to quickly configure additional options and purchase the product in two additional clicks.”

The fact that this whole experience hangs together so well is due to some supercool customer experience and interactive design work in the web experience team, and some key collaborations with our publishing and engineering teams and ecommerce vendors. What we’re actually talking about here is the seamless integration of of the ecommerce platform, that drives the transactions, with the sun.com environment, where we’re supporting your decision making process. That Get It tab is part of the sun.com information architecture, of course, and navigating between tabs on a product page is a consistent and coherent design experience and all that, but its not actually on sun.com at all. Toot!

That last bit was my trumpet, by the way.

Listening Post: Beth Orton: Someone’s Daughter

Unified Web Feedback

March 12, 2008

If you really want to let us know what you think, there’s any number of ways you can let us know, but these days, we should expect you to chose the web as your primary channel. In other words, we should support you pretty well on Sun’s multiple web venues if you want to provide feedback on our products, services, or simply to let us know that the x4100 page has an apostrophe in the wrong place (which was probably something Iv’e done).

The truth is rather more sobering, as it is for many large-scale web sites. That’s not to say we score badly. Its just that there is room for improvement. In the last year, there has been a team at Sun dedicated to resolving all our customer interaction issues, whether it be from first contact on a sales phone line, or a click on an email link, or even when you get your hands on a piece of Sun hardware and open the box. They’re even looking at the box. One of the key components of that work is understanding the customer journey from first contact through to resolution. That might be manifest as a phone tree, or telesales lifecycle, or as a web feedback system.

One of our biggest tasks in understanding how to design a web infrastructure to support the wide range of web feedback we receive at Sun, is to map the customer journey from first contact, through task filtering and into an internal feedback system. Broadly speaking, this customer interaction can be categorized in three distinct phases; invitation, submission, confirmation. Within those phases, there are a number of related subtasks and subsystems that actually make the thing run (technical term there), but from a design perspective, we’re really considering how to seamlessly manage the transition between phases and ensure a satisfactory conclusion for our customers. In addition, of course, the whole experience should be simple, consistent and concise.

Its a challenging task, and we’re trying to accommodate multiple feedback types across multiple venues, and, naturally, tight project deadlines (which means I should probably be building wireframes instead of writing this). Where we’re focusing our efforts right now is on just how far we can go with contextually-driven feedback. If we’re able to categorize the invitation in terms of the customer task and the current context, we should, in theory, be able to cut a swathe through a task filtering navigation path and drive straight to the submission phase, where any options or forms are specific to the task. However, we can’t be completely confident that our invitations will always be contextually clean. We’ll often use a global navigation component to host a persistent link, and it wouldn’t be enough to simply assume that because a customer clicked on a link labeled ‘feedback’ in a footer on a product page that they are necessarily wanting to provide feedback on that product. They might just want to tell us the site is very slow today. It may also be true that even though they may have accepted an invitation to feed back on a particular product, what they really want to say is that we’ve actually speelled the product incorructly, which we might call a ‘typo’, which as everyone knows, goes straight to the jitterbug queue labeled ‘null’. Only joking.

Why is it unified web feedback? Well, feedback systems evolve, much like web sites evolve. In fact, feedback and venue, in a multi-venue operation such as we have at Sun, are inextricably linked, so we’ve nurtured distinctly different feedback systems on venues such as sun.com, developer.sun.com, java.sun.com and others. As we try to align operations across venues and increase efficiency for our customers, we’re just trying to get to a place where we can synchronize activities more effectively. As far as design goes, unification, even though I”m cursorily referring to it here, is a sizeable problem, so I’m hoping nobody notices that I haven’t cracked that nut yet.

Listening Post: Aphex Twin: Flaphead

PicLens for flickr

March 12, 2008

I was pointed to this by one of my excellent flickr contacts. If you’ve ever struggled through multiple pages of photo pools or even your own photostream looking for that particular image, or just to have a browse around, you’ll know that there’s still the page-at-a-time top-level filter to most of those operations. There are any number of aggregators out there which might do something different, and yes, you could probably just take an rss feed and roll your own viewing platform, but, you know, I’m not going to do that.

So hallelujah for PicLens. Not only does it do wonderous things with a photoset, pool, contact list, comments list etc., it also happens to manifest itself as a firefox plugin. Not necessarily a big deal you might say, but this is the most un-firefox plugin firefox plugin I’ve come across. It doesn’t just sit in your browser and do neat things, it takes over your entire screen and throws photos around in a 3-dimensional space, offering views of multiple images that you just can’t get otherwise. Honestly, it breathes a whole new life into an old photostream and makes you re-evaluate those photos you’ve seen over and over for the last 5 years. Brilliant

It does allow you to change views, so you can make it look like Adobe Bridge (on a day where Adobe bridge isn’t taking 99% CPU and crashing your computer), but its the flying-around-in-space views that really make it interesting. Of course, if you have a 1920×1200 desktop, you need something quite hefty to iron out the judders, but, being a designer, I’ve obviously got far more horsepower than I need anyway, so it flies along nicely. Do try it. Its not just for flickr, it works on facebook, yahoo, picassa, bebo, myspace, and much more.

I was using Firefox 2.0.0.12 on XP, for those of you who like numbers. I did notice as I was installing the plugin that it said something like ‘oh, um, Mac users click here’, but I didn’t investigate.

Listening Post: Go! Team: Get It Together

MySQL on sun.com

March 11, 2008

Although he refers to his ‘cage’ rather often, this vodcast/podcast from the senior engineering director for sun.com, Will Snow, is a great insight into the way MySQL is working on sun.com today, and how we’re looking at clustering and high availability enhancements with the 5.0 release. I really don’t know whether that last statement was technically correct, but that’s what Will said, so it must be true.

Will doesn’t just look after sun.com though, of course, there’s the super-popular subdomains such as blogs.sun.com, wikis.sun.com and a whole host of other Sun web sites, all hosted out of his ‘cage’ somewhere in a nuclear bunker somewhere under the sea, probably. Its obvious hearing Will speak about the set up that he knows his onions, and he also happens to be rather pleasant on the ear, in a kind of hypnotic ‘this is not the hardware you are looking for’ kind of way. I’ve known Will for as many years as I have fingers, and if there’s one thing you can be sure of, he knows how to put hardware and services together to create robust, scalable solutions. After all, there’s no better way to say how how dependable your products are than by running your own operations on them. At Sun, we run the whole company on them – and we always have.

Now for a gratuitous MySQL link

Listening Post: The Streets: Don’t Mug Yourself

Get Fed

February 20, 2008

Its sometimes the small additions to a web design framework that make a difference. Well, to me they do. As I went through the weekly process of trying out the latest feed readers the other day, just to say that I’d tried out the latest feed readers and decided to stick with google reader after all, again, I took some time to revisit the feeds & subscriptions (yes, they’re the same thing, but it depends who you talk to) that are available across sun.com, blogs.sun.com, developer, bigadmin, java.net and all those lovely places we call home.

Its thanks to folks like Lou and others that we’ve done such a good job of getting our subscriptions embedded all over our web venues – and there are a ton of them to choose from now. Sure, there are the occasional dead ends in the subscription paths, but in general, there’s a whole range of rss/atom/xml links out there for you to pick and choose from, whether you’re a java developer, a press analyst, a system administrator, or even all of those things and more. You might even just want to get a regular feed of the blogs here at Sun, notwithstanding the drivel like this that you might have to wade through to get to the NetBeans or Glassfish entries.

The fact that there are so many can be a challenge, however. From a web experience perspective, we want to be as consistent as possible in terms of the presentation of these available feeds and their context, so that when you’re at the place where it’s relevant, its an obvious and trivial exercise to to move from content consumer to content subscriber. Now, obviously, as web designers, we hate it when we spend 6 months on a design framework and then you just go and suck out all the content and read it in an application something akin to notepad on acid, but, if you’re gonna do that, we want to make even that customer experience a good one. We’re so good to you.

Which leads me on to the teeny tiny feed icon. If you snoop around sun.com or our developer site, you might have already noticed it. Its not big, but it is clever. It’s driven by metadata attached to the content, and the drop-down menu of available feeds is built dynamically as the page is rendered, so its always current and context-driven, rather than a ‘global’ subscription list. I mean, we have one of those, but you’re not targeting anyone by including that on every page. Check it out yourself on the top right area next to the social bookmark icons on the developer site or the sun.com download page. Simple, but nice.

By the way, as Andrew and Greg aren’t around at this time of day, I had to work all that technical stuff out by myself, so I’ll go and lie down now…

Listening Post: Beatles: Hello Goodbye

Design Specification Roadmap

February 15, 2008

There is always something nice about creating milestones and to-do lists in Basecamp, when you’re not quite sure what to do next with the incoming design specifications. In truth, of course, defining what I am expected to do next is a neat way of putting off what I’m supposed to do next, but at least I know in what order I’m not getting around to things.

I do find that, even though the end result can be reasonably consistent, the way I set up each project is usually markedly different. This is normally because I’m putting milestones in the order that someone else’s project plan has them laid out, and then I’m building the to-do lists to align with those milestones. In actual fact, this is probably the best way for me to work, as I am a completely hopeless project manager. I’ve done a course and everything, but I fear it’s application to the task that makes a good PM. Thankfully, I’m able to bank on the support of any number of project managers around here who are scarily efficient, so I’ve not yet dropped the ball completely.

Needless to say, as I’m writing this, I’m supposed to be checking a box marked “complete audit of user stories & user flows”, but this is multitasking. Well, its multitasking as I know it, which is doing multiple tasks, but not necessarily at the same time. Or in the correct order. Or today.

Listening Post: Shelby Lynne: Where I’m From

Rolling Over & Dying

February 13, 2008

We just recently resolved an implementation issue that had been going back and forth between Greg, Andrew and me for a good few weeks. It wasn’t a big thing, but sometimes the simplest things push the boundaries when I try to do it myself.

For a long time, we’ve had invitations to talk directly with sales advisors on sun.com, whether you want to chat, call, email or even have sun call you back directly. These invitations have been reasonably prominent in the right-hand navigation of specific pages. More recently, we’ve been able to embed these invitations by deploying inline rollovers, at the point where customers commit to a call-to-action, making the invitation much more relevant and immediate. You can see the current deployment on some of our promotions, like the Uniboard Upgrade Promotion (until April 1st, which happens to be my birthday, by the way). As you rollover the ‘Start Saving Now’ call-to-action, our rollover appears, with all the options you might need.

Nice as this is, its actually a pretty cumbersome implementation. When I say cumbersome, I mean, its elegant code (as all our web components are), but the way in which we had to deploy it in the short term left a bit to be desired. Our ever-patient publishing team reluctantly agreed to hard-code the components into specific pages, knowing that that was a huge backwards step, and a potential maintenance disaster – they know we’ll change our mind about what’s in the component and expect them to find and update it in all the places we asked them to deploy it but never actually kept a record of ourselves. What we all really wanted was a separate source file for the component itself, which could be referenced by a standard piece of code that would be provided to content owners to use as they require.

This, unfortunately, is where I, as usual, said “I can do that, don’t worry”.

I do know my way around html, CSS, javascript and most other basic web technologies (I expect someone will now point out that it should be HTML, as its an acronym, and JavaScript, or something, just to prove, before I even get to where I’m going, that once being a developer, doesn’t mean always being a developer, and in terms of knowledge assimilation once you gravitate to marketing, all your code is belong to us), but sometimes, when you put them all together, and then call it ‘Ajax’, then I start to lose the plot. What I actually needed to accomplish was quite simple, from an abstract view. I have a self-contained web component (snippet of sun.com source), that exists in 1 source file, say, source.html, and I have a parent page, say, parent.html that contains a reference to that source file as part of an Ajax call which renders the component code so that it can then be referenced by a CSS-implemented rollover and magic fairy dust scatters over the page and the share price goes up or something. If you’re still with me, and super-interested, I was actually trying to include a K02v1 DHTML Popup Component, saved as source.html), by calling it from a G32v0 Onload Ajax Include (in parent.html) and then invoke the Popup by using the Popup div id as a class attribute of the invoking anchor in parent.html.

Needless to say, despite my best efforts, I simply could not arrange 10 lines of code and a couple of hash references in the correct order, and ultimately I prostrate myself at the altar of the web design church for forgiveness. Happily, for me, they couldn’t either (for about 10 seconds), but eventually resolved the issue with a flourish of staged content, and I took their code and stuck it into my development site. Of course, it didn’t work when I tried it, but another couple of hours (and a few gin and tonics by now) later, everything was as we wanted it to be.

The trouble is, it took me so long that Neal probably doesn’t even want the rollover any more, but, you know, its useful to ‘keep your hand in’ with this stuff (not for the developers and publishers who have to clean your mess up, naturally, before they point that out).

Listening Post: Outlaw: Nothing Else To Say

Things what I writ