Design for life

Recently I was invited to give a short talk on basic CSS at work, as part of a session of four presentations on web development.

Despite my lack of experience with public talking I think it went pretty well and I got the message across. I was happy to find people were coming up to me at the end letting me know they had learned something new.

Although this is an English language blog and most my readers are from the US I haven’t had the time to translate my slides into English for publishing. So, I’ll leave you with the Portuguese presentation for now and later I’ll post the translated version.

Here are the slides:

Design is a multifaceted discipline with many specializations. It is, by definition, a core discipline to every human activity.

People have been designing since they could use utensils, maybe even before: problem solving is at the center of the Design thought process, at its genesis and at its end.

Over the decades, Design has become more defined and compartmentalized; it has gained specialization.

Design has become a profession and Designers have acquired a set of abilities and knowledge, developed methodologies and processes that allow them to pick up the pieces, work with all involved and, keeping a bird’s eye view, help solve the puzzle.

Despite its many specializations, Design is essential. Graphic Designers, Industrial Designers, Interaction, Web and Motion Designers should always be, first and foremost, Designers.

The same way GPs, OB-GYNs and Plastic Surgeons are all, in essence, doctors, specialized Designers should never forget what Design, as a whole, is about.

This seems obvious, I know, but I’ve heard people say “I’m not a Designer, I’m a Web Designer”, which makes absolutely no sense. Specialization should never annul base knowledge, method and philosophy.

Historically, Design is the solving of a problem by giving form to a functioning concept which can be repeatable. Although I like to think of Design as something inherently human, it started to be defined as a professional activity by the drivers of the Industrial Revolution and was heralded as a way to create cheap, repeatable products that were, above all, highly functional, while looking as good as possible (”looking good” being a highly debatable subject).

It’s ironic how, in recent years, the term “design”, then, has been used as a substitute for expensive and exclusive. Designer clothes, designer furniture or designer jewelery are all meant to be exclusive products for wealthy people, often times made to be “good looking” more than useful or even usable. The antithesis of Design, one might say.

The two main components of Design are form and function, with none taking precedence; both are equally important and should be a consideration from early on. However, the mass production-oriented world that begat Design as a professional activity also had a great influence on its philosophy, which lingers to this day. The outcome of a Design project should be repeatable; if it’s an object, it should be possible to mass produce it, if it’s a communication piece it should be printable in quantity or broadcast, if it’s a website, it should be easy to develop for and expand on. A set of rules and guidelines should always come out of a Design project, helping others to repeat it or improve on it.

If you’re creating an unrepeatable object, you’re probably making Art, not Design. If you’re being exclusive, you’re defeating the purpose and are more akin to a Craftsman (yes, or woman), than a Designer.

Nothing of what I just said means the Design methodology cannot be applied to other fields (I started out defending Design is in everything we do), it just means Design is more than a methodology: it’s a mean to connect people by making certain objects available in the right time and social context, with the right function and wrapped in just the right form.

Once in a while I go read up on CSS3, then I get frustrated that it’s not a standard yet because it’s so great.

Today I decided to run CSS3.info’s selectors compatibility test. Not that I needed confirmation but, obviously, the (still large), installed base of IE6 around the world is mucking things up for everybody else.

The test is here: http://www.css3.info/selectors-test/test.html

Safari (3.1.2), performed the best passing all the tests. Firefox (3.0), a bit to my surprise – it being so recent and all – only supported 36 of the 43 selectors tested but it was Internet Explorer 6, which I tested because it’s still the standard installed browser on workstations at where I work passed only 10 of the 43 selectors tested.

And, get this, it passed all the #id tests but it failed one of the .class tests! IE6 doesn’t even fully support .class which is the basic CSS selector.

I’d still like to test IE7 and Opera, but I don’t have them right now. I’ll check later and update.

In the meanwhile, we’d better sit down, if we’re waiting for CSS3 to “come out”.

I just came from a morning-long presentation on microformats, by André Luís and I must confess I was not very impressed at all. Not by André, who’s a great guy who obviously knows his stuff and managed to make a clear presentation and still fend off some hard questions.

I was less-than-impressed by the microformats idea itself.

For a while, I couldn’t quite put my finger on what was really wrong with microformats and then it hit me.

Microformats reminds me of the mid-90s when people started using tables to build layouts in HTML. We looked at boring block-based webpages and felt frustrated that we could not get the simplest two column layout out of HTML. And then, we noticed tables and how you could hide the borders and place stuff inside the cells thus creating all sorts of different page layouts.

That’s what we did for years on the web until, of course, CSS-based layouts became the norm. As it turned out, using tables to build layouts was just plain wrong, but it was the only way webdesigners and developers found, at the time, to do it.

It was a hack.

Years later, we’ll still fighting for people to leave that behind and build their content and presentation separately and to stop using tables for anything other than displaying tabular data.

Microformats seem to be doing exactly the same thing. Using pre-existing HTML elements and trying to give them some sort of other meaning in order to create semantic value for the content. It all seems very slapdash and confusing.

Now that everyone’s used to use classes to declare CSS properties, you can have certain kinds of special class names that mean something in a microformat context. But the values aren’t reserved, so you’re never quite sure.

You’re also never quite sure of what might happen later on, when someone decides to change property values or names around. I think that maybe, some time from now, people will be going around telling us not to use classes and links to try to define relationships and meaning in content.

On the other hand, I think there’s a huge barrier in what comes to user generated content. People just do not have the patience to tag their content silly with meaningful semantic markers. You have to build them specific, unobtrusive, backend tools to markup their content for them.

Like WYSIWYG editors write your HTML for you, you’d need something that would write microformats for the users, invisibly. But that’s almost impossible.

If you have the intelligence to ‘read’ what the user’s writing and automagically tag stuff, then you have that intelligente to build a crawler that can interpret human-written text and have no need for microformats in the first place.

While I can clearly see the need for something like microformats to exist to face that lack of intelligence, I don’t think the current implementation is simple or practical for anything other than coders playing code-masturbation.

Users, common, everyday users, don’t care. And in the end, that’s who we’re always working for.

FF3 is almost ready to come out with over 14 thousand improvements over FF2, already one of the best web browsers out there.

The community is aiming to attempt to beat a world record with this one: let’s make it the most downloaded software ever, in 24 hours. You can go to the Spread Firefox site right now and pledge your download; give them your e-mail address to receive a reminder when the download becomes available.

Chad Pugh created an illustration for Vimeo, called “Science machine”. It’s a highly graphical representation of all sorts of science related themes and items: factories, offices, oceans, planets, animals, microbes, cells, skin, etc.

It’s all beautifully linked together in a vector-based layout made with Adobe Illustrator. The work was done over a period of several months, and Pugh reckons the total physical time spent drawing in Illustrator was about 40 hours, plus another 40 for concept and some more for getting it ready for printing.

To make it even more interesting, the artist had an application take screenshots of his computer, every five seconds, which resulted in a nearly 19 minute video of the entire process in time-lapse. There’s also an accelerated version, which I’ll embed for your viewing pleasure; if you prefer to watch the full 19-minute montage, it’s available on Vimeo.

Chad also sells prints of his amazing work, and you can check that out on his portfolio website. And now, with no further ado, here’s the time-lapse creation of “Science machine”.

Science Machine from Chad Pugh on Vimeo.

Design for life is now running WordPress 2.5, which looks quite nice.

Ever stumbled upon a loose image with a numbered filename and wanted to find more? Ever spent hours manually editing URLs from image0023.jpg to image0024.jpg, image0022.jpg, and so on, to see all images in a batch until you got a ‘not found’ response? Here’s an example.

That can truly be a pain. But no more. All you need is Firefox and Show me more.

Show me more is a Firefox extension that gives you three very powerful buttons: you can see the previous image in a numbered image series, the next one or all of them, opened up in a popup window.

You can download the extension here.

It still doesn’t have an auto-update feature (to be done), so be sure to check back for updates.

I’ve been meaning to add a portfolio section to the site for quite sometime but I never had the patience to go look for a solution.

Now I finally did. I got the NextGEN Gallery WordPress plugin which was quite easy to install but also quite powerful. It’ll take me some time to feed all my work to the Gallery, but you can already take a peak at some stuff I’ve uploaded to test the plugin and get used to it.

Just click here or hit “portfolio” on the right navbar. You can also navigate directly to specific portfolio section such as ‘icons’ or ‘emoticons’, as you can see.

Easy.

Soon, I intend to add a sketch section as well.

OK, so the title is a bit too descriptive but I’m trying to make this post findable in case anyone out there needs to solve a similar problem. So this will be about… that’s right: creating a horizontal menu, using CSS and XHTML. Each menu item will have a small pointer underneath (an arrow if you will), and I want it all done using images, just to make it a little harder.

Here’s what I wanted the menu to look like:

As you can see, some menu items are longer, some shorter. The menu sits in a gray bar and is separated from the remainder of the page by a green “tube”. I want the selected item and the hover state to be represented by a dark box with a pointer that breaks through the green tube.

At first I made the item an li which had the dark box as a background image and was immediately followed by an empty em tag which then had the pointer as a background image and was offset using relative positioning at 50% left.

A menu item looked a bit like this:

<li><a href="whatever">Homepage</a><em></em></li>

The problem was the positioning of the whole thing as in some browsers, the pointer would become detached from the dark box, and I couldn’t fix that with negative top margins because then the pointer would be offset in yet another browser. A mess. Plus, with this method, I needed a minimum width for each item, so I could then calculate the mid point to place the pointer. No good.

But there is quite a practical solution that came to me while thinking about the sliding doors method of making tabbed navigation menus: marvel then, at the ability to stack background images.

I couldn’t have used a single background image, because then, all my items would have to be the same width, since stretching the background image would distort the triangular pointer, so enter the bkg stack!

I took the li elements of an ul and styled them so they had the correct height: dark box plus triangular pointer. Then, I added a span inside each li, so I could style two overlapping elements with two different images. Then, in the CSS, I applied a background image to the li and another (the pointer) to the span. Keeping the stretching and centering is dead easy like this: you make the dark box around the text repeat on the x-axis and you turn off stretching on the pointer. Plus, you can easily center the pointer by just using “center” on the background declaration.

Here’s the HTML:

<div id=”menuarea”>
<ul class=”menu”>
<li class=”current”><a href=”#”><span>Homepage</span></a></li>
<li><a href=”#”><span>Funcionalidades</span></a></li>
<li><a href=”#”><span>Contactos</span></a></li>
<li><a href=”#”><span>SMS</span></a></li>
<li><a href=”#”><span>Chamadas</span></a></li>
<li><a href=”#”><span>Webmessenger</span></a></li>
<li><a href=”#”><span>Comunidade</span></a></li>
<li><a href=”#”><span>Passatempos</span></a></li>
</ul>
</div>

And the CSS:

#menuarea {height:40px; background-color:#F0F0F0; background:url(’images/menuarea_background.gif’) repeat-x;}
.menu {width:73.84em; margin:0 auto; padding:6px 0 0 0; white-space:nowrap; list-style-type:none;}
.menu li {float:left; font-size:93%; text-align:center;}
.menu a {position:relative; display:block; text-decoration:none; float:left;}
.menu a span {display:block; color:#000; text-align:center; padding:9px 8px 8px 8px; cursor:pointer;}
* html .menu a span {cursor:hand; w\idth:66px;} /*IE Fix*/
.menu a em {display:none;}
.menu a:hover {color:#fff; background:url(’images/menuhover_background.gif’) repeat-x; height:34px;}
.menu a:hover span {background:url(’images/menu_pointer.gif’) top center no-repeat; height:17px;}
.menu a:hover {background-position:0 0;} /*IE fix*/
.menu .current a {color:#fff; background:url(’images/menuhover_background.gif’) repeat-x; height:34px;}
.menu .current span {background:url(’images/menu_pointer.gif’) top center no-repeat; height:17px;}

This is what the images look like:

The menu area background, which repeats along the x axis.

The “dark box” that envelops each “current” or “hover” menu item

And the pointer.

As you can see, the dark box is as tall as a menu item plus the pointer and the pointer is the same height. They’re both transparent where they overlap and the pointer includes a bit of the green tube.

Overlapping background is a really powerful method of styling elements to make them look more complex than they actually are. It’s not *very* easy and you’ll notice the need for some IE 6 fixes and some weird height definitions that seem to make no sense. I know, I still can’t really explain some of it. But the truth is that the menu looks perfect in IE6, IE7 and Firefox for Windows as well as in Safari and Firefox for the Mac.