bureau

It means “desk” or “work table” in french : how metaphoric for a blog discussing what my work's about. Get the RSS feed.

i

I'm Thibaut Sailly, an independant interface designer based in Paris. Say hello on twitter or by email at bonjour ✉ tsailly ◦ net.

Topics

Archives

© 2010-2014 Thibaut Sailly · Powered by Movable Type · RSS

October 2010

Choose your tools

Any builder, wether he builds a house, a cabinet or an interface, needs an absolute minimum set of tools which will allow him to prepare his work, get through it, and then check it along some given milestones.

Having spent a fair amount of time in a metal workshop, I have learned to love and identify good tools. To a point that getting in a hardware store feels as exciting as going in a nice restaurant. Good tools for metal work are expensive, so you have to take your time picking the right ones and prioritize your purchases.
The first thing you need is to be able to measure correctly. Without parts having the correct dimensions, you're going nowhere. The logical second is to mark what you've measured, so you can process it. Then you need to position correctly and check the parts of an assembly against a design.
The quality of these tools will determine how long you'll be able to use them. And because with time you'll learn to manipulate them and read them better, it is important to choose durable tools. Your work will be more comfortable, you'll save time and worries, because you have practical and reliable tools.
An expensive scriber - swiss-made-like expensive - will be better because it will remain accurate and will survive you if you take good care of it. Your ruler should be well printed and/or carved so it stays legible for a long time, even in low light. Your square should be the toughest you can get because if its shape changes only slightly, it's no more a square. Your tools define what you can do, the quality of your production, and the time you'll spend working.

xScope icon

This detour to a hardware workshop is the closest experience I would compare the use of xScope to. Building an interface is not unlike building with metal or wood or plastic, in that it requires you to measure, mark and check your work. xScope does that on the screen, providing you with lots of measurement options and saving you time. If you want to design webpages in the browser, it's a requisite.
Anybody doing interface design on a mac has to have it. I would recommend to anyone doing interface design on a PC or on Linux to get a mac just to have this tool at hand and eyes, as it seems no decent equivalent exist on those platforms.

Also, it is a great way to observe and learn from the graphic work of others, just as reading source can learn you lots about markup and css methods. If you like Dribbble, you'll love Dribbble + xScope.

This is not an advertisement, I'm not getting any money back if you go buy it from here. I just thought this little gem doesn't get as much praise as it should. Thank you Iconfactory & Artis Software, you make our days better.

Not really

The Microsoft campaign for their new phone OS is centered on the fact that our attention is sucked in by our phones, preventing us from a compeling and respectful social life. The Windows phone, because it offers you a quick glance at your digital life, will allow you to be more efficient with your digital life and get back to your "real" life much faster.

While this observation is very accurate and in the mood these days, I'm pretty sure the solution offered here is not going to be efficient at all. It will most certainly have the opposite effect.

As others have noticed, the problem with our behavior when we interact with phones doesn't come from the interaction models, but from the content itself. You read articles from the web, exchange text messages, check Twitter or Facebook. The time you spend accessing this content is a small percentage of the time you spend consuming it.

If I understood the product description well, the home screen of the Windows phone is going to be the dashboard of your digital life. Each part of it will reflect on the activity of your friends and other content your care most about. Wishfull thinking, but each part of it will be a reminder that you are missing something in your connected life. Each part of it will be an invitation to get sucked in. All the time.

It's a big push notifications agregrator right in your face as soon as you get your phone out of your pocket. Not really what's advertised.

Honey, I shrunk the pixels

This is a question that has probably been debated at length by the great people building web standards and browsers, and it's very possible the real scope of the problem lays beyond my understanding. But, as a person building websites and observing technology evolve, I really have some trouble with this: will it make any sense to use pixels as a unit in a not so distant future?
Here are some facts and thoughts around this question. Be advised this is pretty nerdy and it won't change anything in your daily proceeds as a web designer – if you happen to be one anyway.

Two problems

One: the physical dimensions of a pixel remained nearly the same for some years (early 2000s), mainly because screen technology didn't evolve that much in this period of time. But pixel density has risen up recently and unevenly: we now have a wide variety of pixel physical sizes. Declaring that a font has a size of 16 pixels is therefore like saying a wall is 16 bricks high: this wall will have as much different heights as there are different kind of bricks. It's kind of dumb.

Two: if technology continues to improve at the same rate, physical pixels are going to disappear from our visible world in about a decade or so. What sense does it make to use a unit you can't physically refer to anymore ? Add 10 to your current age and picture yourself at this lovely age, training a kid to CSS. How are you going to explain pixels to him – if he doesn't understand it – without going "well, back in the days…"?

It was meaningful and eye straining.

Using pixels as a unit for type makes a lot of sense when computer screens have a density of 72ppi. At this scale, 10 pixels have the exact same physical dimension as 10 points, a unit used in the print industry for a long time (there are 72 points in one inch). The printing industry was used to points and it made the transition to screen based work much easier. It seems this is part of the reason why Apple chose this resolution when they introduced the Macintosh: "wysiwyg". Also, you couldn't really produce CRT screens with a much better definition at the time, so it came handy.

There was one expense to this choice though: the glyphs were not as well drawn and as defined as a comfortable read would want them to be. Windows chose to set the software resolution of their screens at 96dpi in order to improve readability: letters were a bit better drawn, and the perceived size of text was closer to what you get from books.

Under these physical conditions, using pixels as a unit for the web when it came around made sense because it made things easier. You could use the same unit to size the layout, set the type, and size images. I guess that if IE6 had gotten a decent webpage zooming engine, we wouldn't have had to use ems at all in CSS and could have stuck with pixels to achieve decent results, but I might be wrong here.

Readability improvements

However, these conditions do not provide for a comfortable read, and R&D went on to mass produce screens with a higher density in order to address that. The side effect of this comfort increase is that it breaks the units correlation described above: a physical pixels no longer has the same dimensions as a point. Meanwhile, the mobile industry boost is introducing new device types along with many new screen sizes. Combine the two and you get lots of different screen dimensions to work with, when expressed in pixels.

Legibility on the other hand is very constant driven. And the main constant here is the size of your retina, or more precisely your fovea. The physiology of the human eye dictates the size of what's legible and what's not. Physiology – and our cultural habits – define legibility: we know that at arms length, labour text sized at 11 points (depending on the font) provides a optimized reading experience. Years of practice have lead to this result; not a point below, not a point above, it is this precise size that works. If we care about legibility and user comfort in our projects, we should be able to precisely and consistently size text in terms of physical rendering dimensions. But we are using a none constant unit to size elements requiring a constant behavior.

Pixel pot

side by side comparison of 4 different screens

I did some basic tests with some text set at Verdana 16px and 16pt on a 2px/2px checkerboard background. You can try them for yourself (view source to get the differences) if you want (if you can make screenshots on Android and send them to me, that would be greatly appreciated). To my surprise (or not), the point size doesn't quite match the pixel size. To your discontent, I did not inquire for the reasons behind this fact, sorry. But I will.

side by side comparison of 4 different screens

The screenshots of the MacBookPro, iPhone 3GS, the iPad and the iPod 4G reduced at 50% show a very consistent rendering of the font and background, in terms of pixel count. The background on the iPad and on the iPod 4G show some fuzzy aberrations, but very light. Given the pixel density difference between the MBP and the iPhone 3GS though, there is a very big difference of font size measured in a proper distance unit. The uppercase L is 12 pixels high or 2,3mm on the MBP, and 1,87mm on the 3GS. On a 24" iMac it would be 3.22mm. So if you want a 16px MBP verdana on a 3GS, set it at 18px. And for the iMac, set it at 14px (if you can). Glancing at this situation, one would be tempted to just go {font-size: whatever;} and don't look any further.

How about we leave the pixels where they belong?

If pixels are going to get smaller and smaller, and if the devices are recomputing text / layout sizes for an appropriate display anyway (through the viewport meta tag), couldn't we consider our screens as paper and use the point unit as in print work? We could set the font size at 10 points, the browser's rendering engine would grab the device's ppi and compute the necessary number of pixels needed to display the text at this physical size on the screen. Wether we have last year's Samsung, this year's iPhone or next year's LG, the text would have exactly the same size to the eyes of the reader and that's what counts most.

In the same vein, maybe we should detect screen sizes in inches or mm, rather than in pixels. The screen size of a device dictate how we interact with it. You hold a smartphone a little closer than arm's length, a tablet more like a book, a laptop 1/3 further and a 24 inches display a little further again. Grouping devices by families of physical screen sizes would allow us to create families of reading context (and distance) in a more effective way than having to take into consideration the screen resolution and density. And we wouldn't have to worry about LG's next popular screen settings and update our css for it. Each new device would fit into the palm, tablet, laptop or desktop family you would have cared about initially, which is already enough work in itself.

These are just suggestions from someone who's been tinkering with the idea for a few weeks, so as said above, I surely miss the whole picture and all the constraints involved in rendering a font at a specific size on all screens in ten years from now. Watch this entry for updates here if you feel concerned by this question. Any knowledgeable input is welcomed via @thibautsailly and will be transcribed here.


Update:
@dpkendal says : "CSS’s px doesn't mean exact ‘pixels’—the actual number of screen pixels shown is relative to resolution. http://cl.ly/2l4S." @AlanHogan pointed out the same fact.
From the working draft I should have read before posting the article: "However, if the pixel density of the output device is very different from that of a typical computer display, the user agent should rescale pixel values. It is recommended that the reference pixel be the visual angle of one pixel on a device with a pixel density of 96dpi and a distance from the reader of an arm's length." In these conditions, you would have to take in consideration every possible screen resolution and create a style sheet for each one, if you wanted your text to appear at a precise physical dimension. Also, the expression "typical computer display" is a problem in a field where everything moves so fast; what's typical today wasn't 5 years ago and won't be in another 5 years.

A birds packed tree

When I discovered it yesterday, the comments via twitter on a webpage experiment at Cognition seemed to make a lot of sense.

Coming back to it this morning, I had a bad feeling about it though. It's only 15 hours old, and the comment thread is looking more like a noisy crowd than like a round table discussion where people exchange point of views, debate and learn. The number of RTs showing up are possibly responsible of this overwhelming feeling, but it may also come from the Twitter format itself.

As it eases the input from readers willing to react, it's putting us in front of the old quantity vs. quality problem. My personal experience on blog comments is that the longer a comment thread is, the less likely I will take time to read each one of them. I'll admit right here I didn't all the tweet-comments. Have you?

The experiment should go on though to see if we can get accustomed to this new thing. I'll suggest two ideas : filtering out the RTs, and highlighting in some way the comments on blogs such as this one (it may already be in place but it seems nobody posted one...). People looking for more articulate reading material would be able to spot them while scrolling down.

Design wise, it was a big WHOAH yesterday, and it still solidly is. It successfully achieves to be contemporary where lots of its features would - easily - direct it towards Retro Americana land. Thanks again for the inspiration Happy Cog!