— tomauger.com

Archive
Design

I just had two real-world examples that I wanted to share on record to remind us all why, as much as we absolutely loathe doing it (as designers), we still have to design for the utter, most horribly worst-case scenario.

IE6 is dead?

We at Zeitguys jumped on the pyre and enthusiastically joined the IE6 funeral, referred customers to Microsoft’s own website encouraging users to switch to more modern browsers, and decided that in 2011 we would no longer be designing for IE6. Guess what? Every single site we’ve designed has had an IE6 version either from the get-go, or retroactively tacked on. Or we wished we had.

Case Study #1

We were designing a low-budget website for a non-profit community-level organization. Accessibility was our primary concern and we focused all our energies in a simple design and some pretty advanced accessibility stuff. I instructed the team to “forget IE6″. Then I went to present to the client in their boardroom, with all stakeholders present, on their laptop (big mistake). Guess what was the only web browser Corporate IT supported? IE6. The presentation was a disaster.

Case Study #2

We’re in the process of designing what will be our flagship web project for the interior specialist Amovo, full of all sorts of truly remarkable bells and whistles. We knew this was a high-end site for high-end clients and to do what we wanted to do we couldn’t be bogged down with IE6 concerns. At our initial training session with the client to bring them up to speed on a vanilla WordPress install we discovered that the CEO’s laptop was only equipped with IE6.

Sigh. The Moral of the Story?

This is 2011. IE6 is still out there.

As designers, you need to have a very frank up-front conversation (a conversation, not a line in your Statement of Work somewhere) with your client about designing for IE6, costs, timelines and limitations. Just remember that no matter how great the site looks on your high-end Macs at the studio, when the client is pulling the site up at home on his home laptop which was an office hand-me-down back in 2004, he is very likely running some out of date shit.

960… by what?

Ever since the 960 Grid System  became a household (or studiohold) term, and even before, we’ve all sort of settled down to a reasonably common set of minimum width guidelines for web design. In 1996 Jakob Nielsen answered the quintessential question of “What Screen Resolution should I design for” with 1024 x 768 and that hasn’t really changed all that much in the better part of a decade. Hence the popularity of 960 grid systems and the like.

At Zeitguys we use a 960 pixel width as our minimum worst-case scenario for width. This gives a decent margin for browsers, once you take into account the browser chrome, the scrollbars and the fact that the window may not be maximized.

But then there’s all this talk about “the Fold” and staying above it (and all the usability luminaries who attemptto debunk this myth), and we’re still left trying to figure out how much vertical content of that initial web page view your “average” user will see. Regardless of how you weigh in on The Fold, we all agree that as designers, it’s that initial view of the website when it first loads the ‘index’ page, that sets the tone and the first impressions of the site.

Case Study #3

I was at home, in a pinch, my laptop was at the office, the home computer is still fritzing out, so I flamed up my wife’s Acer laptop. Yeah, it’s a 1280 x 800 display from 2005 but you know, it still runs GuildWars (one) just fine. I popped into Explorer (8, thankfully!) to check out an update to this website we’ve been working on. Take a look at what I saw:

 

You’ll want to click on the image to see it full-size.

Is that 5 Toolbars?

Yep. Five. Plus a menu bar and a tab. Each clocking in at about 30 pixels apiece. That 800 pixel real-estate shrank down to just over 500 pixels real fast. And here’s the scary part: my wife is actually reasonably technical. She’s the “IT” contact at her office, and she’s a gamer (hence the GuildWars reference earlier). And yet. I totally blame companies like Adobe, who, when you install fricken Flash Player, sneakily also installs Google Toolbar (unless you notice and uncheck the option).

Double Sigh. The Moral of this Tale?

Just because we savvy, aesthetic-oriented designers (who, according to a recent article I read are 30% more likely to customize their browsing environments) like a nice, clean browser and have huge monitors, does not mean the same is true for our wives, clients or most importantly our clients’ clients.

So design for the worst case my friend. And then think of an even worse case than that.

Read More

I was just struck by the simplicity and elegance of this design: punchcut, who power typophile.com. Typophile is, unfortunately, pretty disappointing, but punchcut has come up with a great way of displaying their posts in a striking way that is, no doubt, very mobile friendly given their mandate.

Read More

It’s been a while so I’m forcing myself to post a couple of tips I learned today. Been using AI for nigh on 20 years, and there are still little tricks that I regularly add to my bag.

The polygon tool has always bitten my nards because it seems you have to option-click first, set the number of sides, press OK, then delete the shape, and then draw your shape interactively. I decided that this was just ridiculous and checked the Adobe help docs on the matter. Indeed – you can use the Up and Down Arrow keys (while the mouse button is still pressed) to change the number of polygon sides while in interactive drawing mode. After you’ve got the number of sides right, then you can go to town with the SHIFT key or whatever other modifiers you need to get the job done. Sweet.

Centering Objects

I’ve also always been pissed at AI with the way centering objects works – before I learned this (documented) trick. Ever have a big object and you want to center a small object inside it? So you select both of them and then use the Align Palette to center them – and of course they both move! Well, if you select them both as usual and then CLICK (but not SHIFT-click) on the one you don’t want to move (usually the bigger object) then it will become the “key” shape and it will stay locked in place while the other shape(s) jump into position. Sweeter!
Happy Illustrating.

Read More

DF Forge

Read More