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

June 2011

Superfino

It's mid day on Ghuznee street in downtown Wellington. The no-ozone-for-you-folks sun is hitting hard on a mix of striped shirts business types and common people on their lunch break, and you have to stay in the shade to truly enjoy this cool breeze coming from the vast Pacific ocean. Cars and trucks make their way, regularly washing ears with their muffled clinky engine roars.

"It's a little cafe"

So said Mike Brown, co-organizer of the Webstock conference, who kindly accepted to meet a webby french tourist who solicited him for an interview via email a month before. It was only two weeks before the 2011 edition of this remarkable conference would start, but he and his partner in crime Natasha Lampard said "sure, let's meet", took time out of their busy schedule, and sat with me to answer a few questions I had for them.

How it started

First, I wanted to find out how they were able to attract and publicize Webstock among the great speakers available in the webdesign industry. Because here’s the thing: New Zealand is far far far away, and it’s tiny tiny tiny. Get a map of the world if you’re not familiar with its location, and ask yourself if you’d choose this country to host a webconference where you want the very best people to speak at. It would be as if the best car show you could get to was set in the middle of Newfoundland, or if the best cinema festival was in Ulan Bator, Mongolia.

Mike: originally it wasn’t Webstock, it started from a desire to share webstandards best practices with people. We started a series of meetings in Wellington, we emailed people and said "Are you interested in coming to an evening where we have some speakers about webstandards?". We ran probably five or six meetings through 2005, we’d have people talk about accessibility, content, design, all sort of topics related to the web. There seemed to be quite a following, we had 50 to a 100 people from Wellington at those meetings. That was trackting along and then Webstock itself was kind of a... we just sort of pulled up with the idea of a conference about the web just a couple of years after it started where people were going in Australia, in America and so forth...

Natasha: there was really nothing for people other than the little things we were running and a lot of mailing lists... there wasn’t really anything to bring people together, to share in the same space.

Mike: so we thought that would be cool to do that in NZ, and also we were big fans of lots of people in the web industry, people doing great stuff with html and css

Natasha: usability

Mike: so that would be fun to have them here and hang out with them for a while.

Natasha: Mike and I certainly couldn’t afford to go to these places to meet these people, so the only way to make it work was to bring them to us.

Mike: so Tash said we should have a web conference in NZ and we should invite Tim Berners Lee. So we dropped a list of all these people we’d love to come and we wrote to them and most of them said yes. So suddenly we’ve got to run a conference, all these people are coming and we have no experience and no money.

Natasha: it was quite funny our emails too, looking back on them : "Hi, we’ve never run a web conference before, you don’t know me..."

Mike: do you still got those ?

Natasha: I know that I’ve got some of them, it would be funny to step back in time. But you know, this kind of very cheeky emails, very much from a fan "I love you work, would you consider coming to NZ?". I think we were very fortunate because of the lure of NZ, it is quite strong for some people, so that certainly helped us. But also we were perhaps a little different from some other conference organizers. We were out for a good time, and we really just wanted to celebrate all this stuff. We must have been a little unusual.

Mike: thinking back it’s one of the reasons that we managed to succeed, we hadn’t really run conferences before, we weren’t in a mindset of "this is what you need to do and this is how it should be and this is how it should feel".

Natasha: but after saying that, we had been to other conferences and the memories of things we didn’t like was very strong. This is what we don’t want, and everything else should be open for debate, and let’s give it a whirl.

Mike: so we kinda did like we do websites I guess. We thought of who’s the customer, who’s the people paying money to come. How can we make their experience wonderful? So right from the emails, the website they go onto, the swag we give them, the bags and the t-shirts, the registration...

Natasha: some little things like you’re at a conference and you try to look at your program, you have to take it out of your little plastic thing, unwrap it and sometimes it can be quite huge, then you try to fold it back up... Little things like having it around your neck, but have it up the way you look at it so when you open your name badge. The program is presented to you the way you’re looking at it, rather than having you to swap it around. Trying to think about the experience we’d like people to have, and what’s the experience we ourselves would like, and then starting to design a conference that way.

Thibaut: and I guess these nice experiences made the Webstock reputation.

Mike: definitely, and we also wanted to treat people speaking here really well. They would come all the way to New Zealand to be at our conference, so we would cover all their expences, we would pay them, we would treat them really well here. And I think they responded to that. It’s also how you treat people in New Zealand already, really.

Natasha: if you treat them with respect, if you actually do respect these people, you want to give them the love that they deserve.

Mike: so they would go away having had a great time and they would tell others about it, write about it, or introduce us to other people. It kinda grew that way.

Natasha: we have never been the type of people to go from mainstream PR, or any of that advertising stuff we feel quite uncomfortable about. So it has been on the down low and all the reputation about Webstock being so great is not coming from us. We’re super excited about it, but it’s other people being our advertising medium. If they liked it, they’ll talk about it. It’s the word of mouth thing which is way stronger than any advertising you can take out, which is often overpriced. Our goal is to have people like it, love it.

Thibaut: can you talk about the very good article by Bruce Sterling recently published on the Webstock blog?

Mike: he was a speaker in 2009, and when the whole Wikileaks thing blew up, I remembered some of the things that he said in his talk, that quite struck a nerve to me. He’s obviously a great writer who would have a really fascinating take on the Wikileaks thing. So we just emailed him and said "would you be interested in writing a blog post?".

Natasha: we’re so fascinated by the Wikileaks thing, about Julian Assange, he’s such an enigma. And to have someone like Bruce, who is also an amazing guy, write about it was just, even for personnal reasons, really exciting.

Mike: we didn’t know what to expect, and we received this huge amazingly written article, put it up and it just went wild.

Natasha: the site went down. At 11 o’clock at night Mike was up with the server guy working on it, and thought it was fine at 1 o’clock. I got up at 4 just to check on it, and it was down!

A lady, walking past us whispers: "Happy Webstock!"

Mike: who’s that ?

Natasha: it’s my friend :-)

Mike: oh...

There are no reasons not to.

Thibaut: the webpage for the 2011 Webstock edition featured arguments about its advantages, for people who participate, but also for these people bosses. What do you think about the state of self education in companies?

Natasha: before I got into the web, I used to work for a computer training company. And yet the crazy thing was I never got any training. I used to get very — there’s a webstock bag!

Mike: just there (pointing at a guy walking on the other side of the street).

Thibaut: it’s everywhere.

Natasha: if you’re in the medical profession, or you’re flying planes or something, no one is going to stop training you, because you need to know this stuff. So why is it that some employers will not invest in their people to get the best out of them. They want these amazing sites, they the best out of their people, yet some bosses are not prepared to pay. And I find that curious. But one of the cool thing is that people who do face that battle between Webstock and their bosses, a lot of them are actually paying for it themselves. There was one girl who couldn’t afford to come last year – she’s unemployed at the moment - and she’s saved up money over the last twelve months to be able to afford to come. By and large, bosses are really great, and Webstock is becoming more accepted by managers, saying "if you’re going to go to one event, then it’s going to be Webstock". But when people still face that battle, they’re actually investing in themselves for their personnal development.

Mike: to me there are three aspects of it. There is this thing you’re going to tell your boss "If I go to somewhere like Webstock, I will come back being able to do parts of my job better because I’ve learned new techniques, I’ve learned where things are going, what sort of things will work". And especially we run in depth workshops, full day or half day about HTML, CSS3, content strategy or web performance. So you do that and you will be better in an aspect of your job. It will be immediately efficient, when you’re back on monday. Then there’s the connection with people. You can’t qualify that in advance, because you don’t know who you’ll be meeting, or if you’ll meet anyone. But chances are you will, and you’ll have conversations when something might come up.

Natasha: and it could be that this conversation, in a way, could be more powerfull, or more thought provoking than some of the talks that you’ve heard.

Mike: you may meet someone your company can partner with on some project, and they know about them now. The third thing, and it’s more personnal, is that you’ll come back inspired. You’ll hear stuff you weren’t expecting to hear but that will trigger something and you’ll be reminescent of why you’re doing all this stuff.

Natasha: it’s very humbling when you receive emails from people saying "I went to Webstock ’08 where I met so and so and so, and we’re now in a startup". There are actually stories of people doing something cool out of the Webstock experience.

Mike: I went there, on the other side of the coin where we had to try and convince bosses of the need for training or time off or whatever. It just seems crazy that you wouldn’t do that because of the benefits you get out of that.

Learning at work.

Thibaut: managers tend to view design work as a linear process, just as an assembly line job, aren’t they? If you sit fourty hours at your desk and bring that much profit, you should bring at tenth of that amount in four hours of work. And if you don’t «work» for four hours, you’re causing a profit loss of this much.

Mike: oh, yes. The thing in the web, or design, is that with insights you have, you can save hours or days or weeks of work. Because it’s not a thing that takes that long to do, you get those insights outside of work, you get them when you’re talking to people, at a conference, or reading.

Thibaut: should there be a more structured way to get training, like once a week, or one hour a day? We have time for lunch, we could have time for training.

Natasha: a lot of the people I know of who are in-house designers, they do actually seize every moment it seems, any down time, to continue their training. It might just be reading A List Apart or following someone on Twitter. A lot of people do take time at night, it’s part of their relaxation time. They are hooked, this is not a job, it’s a way of life. Everything is about their online existence, and aiming to the Web which is so mighty and powerful.

Mike: yeah, it’s a good point. For a lot of the people who seem to be doing good stuff on the web, it’s not a job. Well it is a job, but it’s not a 9 to 5 job.

Natasha: it’s incidental, their work would get to the web anyway because they love it, they love the possibilities of it, that we’re only just so young and we’ve got so far to go. When you think of people like Matthew Buchanan, they want to soak it up. So, structured training would almost be not appropriate for them, because they are at a level that maybe someone would find it hard to come up to where they are.

Thibaut: but how can a manager can take this into account when he’s trying to organize his team’s efforts?

Mike: this is probably why we don’t manage people, but if we were managing people, it would be more like...

Natasha: a trust thing.

Mike: ...we actually don’t care when you work and what you do. We care about getting something finished.

Natasha: like output oriented rather than clock watching.

Mike: there’s a whole movement, ROWE - results only work environments. The idea is that the employer just cares about the results, and the employee, if he wants to take a day off because his kid is sick, or he needs to chill out, he does that, as long as he’s committed to getting work done. It’s that, rather than you have to sit at your desk for eight hours because you charge on billable time.

Natasha: the requirement of that is a level of passion or interest in what you’re doing. If it’s oh-um, then you’re probably happy to just do the eight hours and then «see you later, it’s my time now». But the people we have the privilege of hanging out with in the web community are people who don’t stop.

Code like it’s 1999.

Thibaut: how can you make sure you’re up to date with the constantly evolving knowledge in this field?

Natasha: it’s hard. For usability, which was my line of work for many years, it’s quite dificult, because there’s not one standard, you’re dealing with human beings. The only thing that you can do is have relationships with other people who are in the same industry, and who are as interested, excited and passionate about it as you are. Swapping notes and sharing information with them, you have this feedback loop.

Thibaut: until the end of WWII, NZ was a very isolated country, forcing people to deal with all sorts of constraints while building. Is this Kiwi inginuity still around today and does it have an impact on the creation of kiwi digital products ?

Natasha: I think it does exist and there are groups of people who love that and really promote this reputation, and then there is another school of thought where people ask why should we have these constraints. It’s great that we have this ingenuity, but we don’t necesseraly need to be facing this battle, we can have more investment to allow people to work. There are lots of talented people, there is money... We could have more creativity if we had better broadband for example, it would allow people to do more, to connect more freely with other people.

A line is drawn.

Between an amateur and a pro: my sound recorder battery died at this point, my sincere apologies to you for this lack of preparation.
An extra fifteen minutes of conversation are consequently lost, where we talked about the good quality of kiwi web design and graphic design, and about how we (try to) cope with the amount of information we are fed with nowadays. I see this as a sign that I need to fly back to New Zealand, sit at Superfino and chat a little more with them with a recharged battery.
In the meantime, you really should have a look at the Onyas site and the featured sites to get an idea of what good kiwi web design is today. Also, don’t forget to set some time to watch the 2011 or past conferences that are available online for free. You’d be missing out a lot.

My sincere thanks to Mike and Natasha for their time and their contagious passion for the web.

Debugging media queries

When developing CSS style sheets called with media queries, you will be more comfortable if you can identify two things at a glance: what's the queried context you're in, and how a given element is behaving with the properties you've been editing.

Let's say you have 4 contexts to work with: S, M, L and XL for example. While you choose the break points trigering calls to these contexts's style sheets, it's handy to vizualize in the browser when the switch is happening. Johann Brook's method is very clever as it uses the :before selector to generate a block above your page; targeted widths are displayed in plain text when you access the different contexts. While clever, displaying a large block above the layout can prevent you from fine tuning another element just below it. Also, do you really need to be reminded of the display sizes when you are the one editing them in the markup? Adding a background color to the body or any other relevant element proved to be as useful and less obstructive.

Adding a background-color to any element I wished to style has worked very well for some years now, and a little variation makes it useful to both track one element and display the queried context: pick one colour for each context and use shades of it for the different elements you need to visualize. 0to255.com by @jamesmadson makes it really easy.

Here is a fictionnal webpage presented in the stages you could go through using both of these methods.

Johann's idea is very helpful when you need to collaborate and display the break points you choose. I'd reduce the footprint of the generated content though: less text along with an opacity brought to 0.5. Also, having the position set to fixed allows you to keep the context displayed if you have to scroll down.

body:before{
	content: "M";
	padding: 0.5em;
	display: block;
	text-align: center;
	background: yellow;
	opacity: 0.5;
	position: fixed;
	top: 5em;
	left: 5em;
	z-index: 99;
}

While we're at it, if you're using CSS Edit (and you should anyway), don't forget that you can merge your media queries style sheets as tabs in one window, and have your common styles opened in another window beside it. I'm only suggesting it because while I was working on Bureau's CSS, I played a lot with Exposé instead and felt stupid when I realized last week I could have used tabs.

If you'd like to comment or share some tricks you use when building media queried pages, link them to me via @thibautsailly and I'll add them here.

Desktop image by Hector Simpson.