Falling Leaves: the Ardes blog

Archives filed under "design"

Web Design: A Look Back

Ray Drainville

Serge Keller has compiled a series of screenshots of early websites. How far have we come?

Alta Vista in 1996 wasn’t a million miles away from Google today. Visually speaking, that is. Apple in 1997, however, shows how much things have changed:

It’s been a while since I’ve seen this. I think it interesting the lack of change for “harder” information gleaning, à la Alta Vista & Google. Only recently has Google been modifying its look. Information services is clearly a very conservative field.

Implications of Responsive Web Design

Ray Drainville

Web designers who are interested in providing an optimal experience for viewports of widely-varying width—I’m looking at you, traditional computers, iPhone & iPad—will be very interested in responsive web design.

A term coined by Ethan Marcotte in a revolutionary article (and compelling read), responsive web design takes together a number of elements that have been rattling around recently—CSS3 media queries, fluid grids, flexible images, in particular—and Marcotte showed how they can interact with one another to provide a powerful web presence across widely varying viewports. Since then, he’s expanded upon the subject by publishing a book. It’s the single best place to go in order to get up-to-speed on the subject—although, like all “A Book Apart” titles, it’s woefully small & at best a very general introduction to the subject.

I’ve just completed the process of converting a site I’ve been working on to a responsive design. This site is an ideal candidate for a responsive web design approach in that it’s an academic site & the participants, the prime candidates to access its content, are all around the world. The site provides information about upcoming workshops, meaning that the target viewers (participants in the academic project) are very likely to access the site’s content while using handheld devices such as the iPhone or iPad. As such, I received a nice introduction into the subject, particularly with the real-world repercussions.

Janus Cascade

One thing that I didn’t notice in Marcotte’s article or book is that by wrapping our designs in media queries, a style’s cascade is now two-facing. There are massive implications with this approach, and if you take a pixel-based approach, as opposed to the percentage-based approach Marcotte takes, all hell breaks loose. Here’s an example to show what I mean:

Say you have a DIV & when the viewport is a desktop size, you want it to be 100 pixels & float left; but on an iPad’s portrait mode, you want it to remain the same size & float right; and finally, on an iPhone portrait mode, you want it to be 300 pixels & display as a block. Here’s how you might go about that:

  @media screen and (min-width: 1040px) { /* For Traditional Computers */
    div { width: 800px; float: left; }

  @media screen and (min-width: 810px) { /* For iPad: Portrait Mode */
    div { float: right; }

  @media screen and (min-width: 320px) { /* For iPhone: Portrait mode */
    div { width: 300px; display: block; }

If you looked at the page with the DIV in question in your various viewports, everything would seem to be OK. But for the sake of experimentation, on your desktop machine, resize your browser window.

You’d be in for a shock if you resized your browser window. When the browser’s wide, then the DIV is big & floats left. Shrink the window & the DIV floats right. What happens when you make the browser really small? Well, actually, it’ll still float right because you haven’t overridden the iPad portrait mode declaration. Now refresh your tiny browser window & you’ll see that the DIV now displays as a block. That’s because it’s not cascading the iPad portrait mode’s float declarations, because that condition hasn’t been met in your refresh. As Keanu Reeves would say: Whoah!

Now start resizing the window from that tiny width. You’ll notice that your floats aren’t floating, but displaying as a block; and furthermore, your box has not jumped to 1000 pixels in width, but has remained at 300 pixels. Again, it’s because you’re inheriting the display: block from the iPhone portrait mode declaration. See? Cascades now work two ways, depending upon how you resize. Double whoah! The solution here is to explicitly state in your iPad portrait mode that you want the div at 800px & also declare in each case where you want the DIV to float & how it’s to be displayed in the document flow.

Go With Percentages, Not Pixels

The other implication that I’ve only grazed above: working in pixels is a bad, bad idea. This is the reason why Marcotte exclusively refers to items in percentages: it’s a more elastic approach & won’t fall apart quite as thoroughly as pixel-based approaches. And in my experience, when I switched from pixels to percentages, the site coalesced really quickly.

Go Forth Warily

Freaky deaky responsive web design: you probably have a lot more testing to do now. And for Internet Explorer (prior to version 9, which is very good), you’ll need some help for reading media queries.

Make no mistake: responsive design is the future of web design & with the explosion of handheld devices, it’s very much worth it: no longer will you have to design multiple sites for different classes of devices. In fact, the first non-personal site, the Boston Globe, has just launched as a responsive site, and the power of this unified approach is self-evident.

Beware Mac MS Office 2011

Ray Drainville

So Microsoft has released a new version of Office for Mac Office 2011. I’m a heavy user of Office, in particular its email package, so here I’m concentrating upon things that effect email. For any Mac users out there who are thinking of upgrading, here are a couple of warnings:

Outlook Only In “Home & Business” Edition

Entourage is no more, Microsoft’s only option is Outlook. However, the “Home & Student” edition doesn’t contain it. To get Outlook, then you have to purchase the “Home & Business” edition. Perhaps this is a reflection of the success of Apple Mail, but it seems rather miserly to me.

No More Multiple Serial Numbers

The “Home & Student” edition no longer contains multiple serial numbers, as Mac Office had in at least the past couple of iterations: in fact, you could have it running on three machines. If you want to run Office on your desktop & laptop, you’ll have to plump for the dual-license version of “Home & Business” edition. Again, this is pretty tight-fisted.

Bye-Bye, Project Centre

Unremarked-upon by any reviews I read: Outlook no longer supports Entourage’s Project Centre. All your projects have been converted into categories. I’m not sure which outrages me more: the fact that Mac journalists didn’t highlight its loss (as they did when Office 2008 dropped AppleScript support) or that MS dropped Project Centre in the first place.

Dropping support of Project Centre may not bother you in the least. In day-to-day usage, you’ll probably not notice much difference, as assigning a message to a project is virtually indistinguishable from assigning it to a category. But if you were a heavy user of this feature, you’ll feel its loss keenly.

When you are searching for specific information associated with a specific project, which might be in any number of folders, tasks or notes, then the lack of a unifying Project Centre feature will hobble you significantly. I know that Outlook supports Spotlight, but frankly that’s not good enough: I for one get too many false positives in Spotlight, and the whole point of using Project Centre was to help you find items where you can’t quite remember the details well enough to search for it.

Worse, the removal of this feature is destructive. Upon occasion I used the built-in Notes feature within individual projects in the Project Centre to write meeting minutes. They’re all gone. Thankfully, I didn’t use it often: most often I wrote notes in Word & sometimes in TextMate. Nowadays all my notes are covered by Livescribe, which is pretty awesome.

Practical Advice on Upgrading

Importing your old mail can be problematic. Back up first (but you do that already, right?). When I first imported, Outlook crashed—and upon reimporting I found I had duplicated mail folders & categories. And when I started deleting some of the duplicate categories (that is, categories that were once projects), I found that Outlook started to delete thousands of messages associated with those categories. Which repeated category should you delete? Well, it appears to be a crap shoot, so tread lightly. Fucking hell.

Bugs, Omissions, Weird Decisions

  • After I finished importing, I went to the preferences to see what was new. You have the option to hide items on your computer. If you tick that, your local folders are hidden. Now untick it. Your folders don’t show up again until you quit Outlook & restart it.
  • Did you make any Junk Mail rules? Sorry, they won’t work any more.
  • Did you keep a list of your completed tasks? Perhaps so you can verify that you did X or Y? Well, at first I thought they were gone. But don’t worry, they’re just hidden. I’m not sure who thought that was a good idea, but it set in a little bit of panic for me.
  • You know that “Notes” feature? The one you probably didn’t use much because of the notes in Project Centre? If you relied upon the dates in which they were created or modified, get used to the fact that they are now marked by the date when they were imported into Outlook.
  • Even if you choose to use Plain Text for your email, the options for using HTML in your messages are still on the screen.
  • Any sound sets you have have used previously no longer work. For example, I used a sound of someone clearing his throat for when a notification popped up: gone.

All in all, this software doesn’t feel finished & I feel cheated. I’m severely disappointed in my purchase. I’ve not been a Microsoft-basher: in fact, I think they used to make good Mac software. But no more. I’ll be looking into converting to Apple Mail & using Daylite to manage projects. Now who do I talk to about getting my money back?

Update: I’ve also discovered that calendar events no longer support linked files. This is a another big problem—for example, I would attach electronic boarding passes to a travel event, so I wouldn’t have to root around for them.

I can see why they made these disastrous changes: it’s clear they want to have absolute compatibility with the Windows version of Outlook, which doesn’t support projects & linked files. While I don’t like their design decisions, my real problem here is the lack of clear announcement: we were left to find out all on our own. It’s really fucking shoddy.

The Universe in Chromoscope

Ray Drainville

The University of Cardiff’s Chromoscope is a fantastic way to visualise different wavelengths—visual, x-ray, radio & more—in the universe. Use the slider to see the differences: you start to see some of the interactions between them.

Sitepoint Podcast

Ray Drainville

On Friday, Sitepoint posted its latest podcast (MP3 link) with a discussion unfortunately germane to a lot of developers’ work: what to do about Internet Explorer 6. They linked to one of my articles as background material (as if I’m an expert or something).

I found the discussion somewhat strange—as I do all podcasts, really, because instead of a “proper” media show where the participants research before presenting their views, podcasts are the equivalent of nattering around the water cooler.

Much of the discussion whipped around why on earth people don’t upgrade their browser. I mean, c’mon. There are lots of reasons for this & if you’ve ever worked in a large corporate atmosphere as I did a very long time ago, you can come up with a few more. The prime users of IE6, I’d wager, will be first: those using ancient machines—they’re people who either cannot upgrade or don’t know how to upgrade. The second and far larger user base: those behind corporate intranets, where everything’s been tested in the simplest way possible, with one browser only & one version of that browser only. Lots of corporate intranets use ActiveX & will restrict its usage to IE6 because, well, that’s what they restricted it to. It’s the lazy path to information design, but corporate IT departments—trust me on this—are often filled with lazy people.

But corporate IT isn’t the only lazy culprit out there. Lately, some banks have been caught out using lame browser-sniffing techniques & have thereby excluded the latest browser on the scene, Opera 10, from using their websites because “it’s too old”. (For those interested in why the sniffer didn’t work, it’s because the browser sniffer doesn’t parse more than one digit, so Opera 10 is classed as Opera 1. That’s practically the dictionary definition of “lame”.) And don’t think that standardistas are exempt from laziness: one of the podcast’s participants stated he “didn’t even test in IE6 any more” (albeit for personal sites), which to me is pretty scandalous. After all, the whole point of the web is its inclusivity: the more, the merrier.