Working on creating a re-usable slide deck for the Mozilla Evangelism Reps I played with HTML slides, this time using Shower as I like the list view of it. And once again as explained in the past I found myself in the pickle of adding presenter notes to the slides that presenters could look up when rehearsing the slides and whilst presenting. This is a use case that HTML is not quite meant to cover – especially multi-screen.
Paul Rouget and Anthony Ricaud’s DZSlides solve that problem by embedding the slide deck in a “presenter” page that sends post messages from one window to another. This is totally sexy from a JS geek point of view but I found it tough to set up.
Analysing what we use to present I realised that there is no need for any extras, really, as browsers these days come with an amazing thing called console.
You can use the console of browsers to have messages on a second screen not visible to the audience as debuggers can be in own windows. It is as simple as that :)
So I extended shower a bit. Every slide now gets a footer with notes:
<divid="morethanfirefox"class="slide"><div><section><header><h2>Ongoing work…</h2></header><imgsrc="pictures/mozillamore.png"class="middle"alt="Mozilla is more than Firefox"><footerclass="notes">
Mozilla is much more than Firefox though. We are a not-for-profit organisation to
promote the open web. This means we educate people on how to publish content and
we protect people's privacy and identity and choice on the web.
</footer></section></div></div>
<div id="morethanfirefox" class="slide"><div>
<section>
<header>
<h2>Ongoing work…</h2>
</header>
<img src="pictures/mozillamore.png" class="middle" alt="Mozilla is more than Firefox">
<footer class="notes">
Mozilla is much more than Firefox though. We are a not-for-profit organisation to
promote the open web. This means we educate people on how to publish content and
we protect people's privacy and identity and choice on the web.
</footer>
</section>
</div></div>
I hide the notes in full mode and for rehearsal in list mode I just added a hover state:
During viewing the script then reads the notes and adds them to the console as an info. As an extra I also read the next heading as a “coming up”:
function lognotes(slideNumber){if(window.console&& slideList[slideNumber]){var notes = document.querySelector('#'+
slideList[slideNumber].id+' .notes');if(notes){
console.info(notes.innerHTML.replace(/\n\s+/g,'\n'))}if(slideList[slideNumber+1]){var next = document.querySelector('#'+
slideList[slideNumber +1].id+' header');if(next){
next = next.innerHTML.replace(/^\s+|<[^>]+>/g,'');
console.info('NEXT: '+ next);}}}}
function lognotes(slideNumber) {
if (window.console && slideList[slideNumber]) {
var notes = document.querySelector('#'+
slideList[slideNumber].id +
' .notes');
if (notes) {
console.info(notes.innerHTML.replace(/\n\s+/g,'\n'))
}
if (slideList[slideNumber+1]) {
var next = document.querySelector('#'+
slideList[slideNumber + 1].id +
' header');
if (next) {
next = next.innerHTML.replace(/^\s+|<[^>]+>/g,'');
console.info('NEXT: ' + next);
}
}
}
}
During presenting you can now just open the console and move it to the other screen. As the main screen will be the one you show on the wall you also have no issue recording the session (something that keynote gets wrong).
This trick could be used for any of your scripts – just add the infos and have the debugger open on your laptop while your boss marvels at you presenting the product. You can read the hints you add on every click in the interface.
The revelation to me in this case was that the console and debugger are exactly the other screen we need for presenting and a very easy way to keep the interaction in the main window and get information in the other. You got to love browsers these days.
I am currently at MozCamp in Berlin and my job was to entice all the contributors to the Mozilla project to get out of their shell and start speaking at events about all the great stuff they do. It seems people liked what I had to say, so here are the slides and the audio recording. I will cover this topic more in the next few months, as I think the way we do information sharing in the web development world right now is not really scalable.
My life lately revolves mostly about going to conferences and presenting. This gives you an interesting insight into how they are run, how other people present and what impact it has on the audiences.
I’ve done this for a while and I think I am pretty good at it. I also see other people who are incredible at it, I see a lot of potential in others and I see a lot of failed presentations.
I also see problems with the way we distribute presentation content on the web afterwards and this is what I want to discuss today.
Powerpoint hell is just not us
Presentations on web technologies (and generally covering our market) are a very strange beast. We are in a “new media” environment where we despise all the things that IT and office life was before we started linking documents with each other over the world wide web or load cool apps onto our smart devices.
A sure-fire way to fail presenting at a web-related conference is to use old school power points with headings and bullets and reading them out to the audience. Therefore we go to other extremes: the “inspiring pictures with a single word”, the “typography heaven with awesome transitions” and the “I have no slides, let’s get to live coding on the CLI or in my editor” are the most common ones.
What we lose by doing so is the context. Our presentation materials become part of the talk and not an information resource. This is good – it means you as a speaker get the attention. But it can be a problem further down the line.
Our “new media presentation style” is very different to what we did before. I use a lot of humour and comparisons with the real world in my talks. Some of my slides seem totally disconnected until I explain their angle. Aral Balkan does similar things. A lot of times he explains the usability of interfaces by showing ticket vending machines at airports. This is great. Real life frustration makes it easy to remember not to do that online.
Slides are backdrops
The gist is: our slides are not the talks, our slides aid the talks we are giving. They are a visual catalyst for the things we talk about. When you see something and you hear about it at the same time it is more likely to stick. It is as simple as that.
The dangers of re-use and distribution without context
Once the talk is over you can bet your life that the first question (unless you covered that already) is “are the slides available for download?”. And this is where it gets interesting.
For the people at the conference it makes a lot of sense to get the slides and check them later on reminding themselves of your talk. Conferences are jam-packed with talks and it is good to have a reminder to re-focus after the party. This is also a very human trait – we are hoarders and want to get our hands on everything we get offered. Free stuff never stays behind – people take it. Wether they need it or not is not the question. Better to get it in case we need it later than not have it.
I’d love to think that people download my slides and read them and all that (which is why I share them) but I am quite sure that this is very rare occasion.
It really breaks when the slides are just that – slides. The aid to support the talk that without the talk lacks a lot of context. If I look at the PDF of a talk a few weeks later and only see pretty images without remembering what they meant at that time I get confused and frustrated.
Even worse, if you distribute slides of that ilk, people will find and watch them when they haven’t seen your talk at all. And this is where it gets dangerous as people can make their own assumptions as to what you tried to achieve.
Attention getting devices can backfire
In our quest to be different to the dreaded talks we had to endure in school and office life we tend to push the boundaries of presenting.
People in web tech swear on stage, make outrageous demands in a ironic manner, and show things that are very much the direct opposite of what you expect. These are attention getting devices that – paired with a good speaker – can be very effective and also very entertaining. They can also cause controversy and misunderstanding.
The other day I had quite a back and forth with a presenter on Twitter about a slide deck he published. I’ve seen the speaker talk and respect him for what he does. I am very much sure that in the context of his talk the slide deck brought the point home and made a lot of sense.
But, as it is right now on the web without notes or any other information, a NSFW picture of an almost naked tattooed lady with taped nipples and massive breasts as your first slide is likely to cause more trouble than it is worth.
He had his reasons for using it, no doubt about that, but with the distribution being disconnected from the rest of the talk, what are the effects of this?
Why shock when you can convince or show?
There is a lot of talk about gender diversity at conferences and in IT. I am not going to poke this hornet’s nest, but I am sure that a slide like this one is a great way to keep an endless discussion with continuously mounting emotions going for months instead of concentrating on solving the issue.
Shock slides and campaigns can work. They also have been done in the past and are to me a cheap way of getting attention. Web sites like rotten.com and ogrish were a very successful thing in the past and Benetton in the 80ies had massive success with their controversial campaigns in magazines. Heck, every boulevard paper has some nudity on their covers to sell issues. Page 3 girls appeal to the audience they try to reach.
So, in essence, this is an old hat. It only works when all you want is attention and your product doesn’t have much to do with the shock content. Benetton sells clothes, something very personal that people buy and own for themselves. They wanted to get their name talked about and expected people to find out about their products on their own. We can not assume people to do the same about our slides, design ideas or code tricks as they are not as excited about our them as we are.
The question we should ask ourselves is what we achieve with this. You get attention quick and you probably get talked about a lot. What people talk about though is that there was “some guy on some conference showing a naked lady (run over puppy, open wound, vomiting child, whatever…)” and not what you wanted to bring across in your presentation.
Using shock slides is the equivalent of kicking someone in the shins and then asking for the way to the station. Yes, you have their undivided attention, but you are not likely to get out of them what you wanted.
By all means, if you want to keep using them – do so. But be aware that when you fail to provide context you will not get your message across. If you use nudity or sexist material you will also contribute to an already existing problem.
If you publish things you are as responsible for their content than when you are on stage presenting them.
Saying that “nobody complained” is not an excuse for offensive material. Not all people who are offended say so and confront you. Actually most are intimidated and will not say anything but tell others how they felt and what your behaviour did to them instead. This is how discrimination and bullying works – you shock and intimidate by coming from a position of power. And you being on stage is a position of power that can be used to inspire others or for personal satisfaction.
So, to me at least, we should stop using any shocking materials in our slides as an attention getter. We are better than that. Our messages should be the “a-hah!” moment, not the packaging they come in.
The best of all worlds
As to the overall distribution of our talks, I think it is time to reconsider our ways.
If our slides are only a backdrop to our talk and we don’t even have notes or a transcript, let’s not give them out. Let’s wait for the video to come out and distribute them together with the video – even if it means that people have to wait. In essence this is a good test to see if people really care about them or if they just want them right on the spot for hoarding purposes.
If you want to release them immediately, try to give them more context. Have notes on your PDF or presentation document. I tend to record the audio of my talk while I give it and publish it along the slides. I always want to sync the slides with the audio but it is a lot of work so most of the time I forget about it so I am not sure just how effective this is. If you use keynote you could do that automatically as it records a movie of your slides if you ask it to. In any case, I can point out what was said and debunk accusations that way.
I also started to go the other way around. I wrote my Fronteers 2011 talk as an article, then split it up into paragraphs and created a slide for each. That way I could publish it as a blog post that makes sense and with accompanying slides.
The new HTML slide format I use based on DZSlides allows me to have the talk as a searchable, printable page with support for old browsers and as a slide format at the same time. I am cleaning this up and adding some new features to release soon.
Let’s be professionals
In essence, it boils down to one thing: if you want to be inspiring and an educator, don’t leave things online that lack context or cause controversy. It confuses people, causes misinterpretation and helps neither you nor the people you try to reach. This is about the people you talk to – not about you.
Disclaimer: Dearie me, some of this is very subjective and may completely disagree with what worked for you. This is great and please leave a comment about what worked and what tips you can give rather than shooting one of the points here down in flames. I simply listed what I was looking for and what worked well for me in the past.
We just came back from the University hack day in Sunderland, England where students pitched hacks they built in a few weeks to judges that were meant as mock clients. As students asked us for feedback on what went well in the presentations and what didn’t here are some tips and tricks.
Pitches are not sex – you don’t need foreplay
The first mistake almost every group made was to introduce who they are and what they used to make the hack. This was partly a requirement of the assessment but it is also a sure-fire way to bore judges or VCs. There are two ways you can go:
Show your hack and what it does and then go into the details or
Explain the one problem that your hack solves and show the hack immediately afterwards as the solution.
Either approach has to answer some questions right off the bat:
What does the hack do?
Why should I use it?
Who is it for?
What does it do better/different than other solutions?
On being a team
The hack teams were 6-7 people each. Introducing each and every one of them costs a lot of precious time that you cannot use to make the audience interested in your product. Introduce only the needed people – those who will give the pitch and tell after the presentation who else did what in case there are specialist questions that need answering.
Anybody who is not part of the immediate pitch should not be standing around – all they do is distract from the presentation. Absolute suicide is to have people standing on the side scratching various body parts or looking at the ceiling or out of the window. If you pitch as a team, everybody should be awake and damn excited about the product – else you’re doing a better job sitting on the bench.
Your main spokesperson should be the most excited about the product. There were a few presentation wheres the first pitcher was amazing and had us going and when handing over to the tech guy to explain the product snoozing kicked in. If you hand over from presenter to presenter keep the energy flowing, otherwise don’t hand over.
If you have different experts delivering different parts of the pitch have them introduce each other and have their expertise be a natural part of the flow of the presentation. Some teams did a great job at that, with simple sentences like “in the future this will be extended to become important for more audiences and my colleague XY will show you what we have planned on the business side of things.”
On running your presentation
You are the presenter which means that you define the pace of the presentation and which slides are shown. You cannot have somebody else as your slide-jockey – it is terribly unprofessional to have to tell somebody to change the slide or even worse go back some slides. Presenter remotes are not expensive and most places will have some for installed equipment so use these instead. Your focus as the presenter is on the audience or jury and eye-contact is terribly important.
This applies to longer presentations, too. You can find out a lot from the audience reactions. When I present to a big crowd, one trick is to pick out a new single person in the audience I talk directly to every few slides. This is especially good to do if you pick people that seem to drift away and ask yourself what is the “what is in it for me” for that person.
Slides are an aid – not your pitch
One of the rookie mistakes is to have slides that tell and spell out everything you want to say. Less is more – much more. One word could be enough if it is backed up by your presentation. You can and should have a handout that explains details but this should not be your slide deck. Screenshots are good in case the wireless forsakes you – which it always does. Random clipart is bad as the 80ies are definitely over. Humour works – I loved for example typical English self-deprecation when one of the presentations introduced students as a target audience with a student wearing a traffic-cone hat as the example photo.
See your slides as the table of contents of your presentation – not the transcript and definitely not a different story. When your talk deviates from what is written on the wall you’ve lost us.
Bullet points are effective but also have become almost a cliche for presentations. If you feel comfortable with them, by all means use them but never have more than 3-5 on a slide with one short sentence for each.
You learn presentation writing by looking at successful presentation decks. A great resource is SlideShare where people upload their decks and the comments and views show you which ones are successful. My own slides there are all licensed with Creative Commons, which means that I am happy for you to re-use them.
Basic, really very basic typography
This applies to both the slides and the product itself. Legibility and professional type layout is very important. This is not because we are anal about this (and believe me there are a lot of people on the web that are) but there is a subconscious unease when we read things as humans and get lost because there is something not right with it.
Comic Sans Serif was lately added to the Geneva convention as a forbidden weapon when dealing with audiences that are above 3 years of age or don’t suffer from learning disabilities (this is not an evil jib – Comic Sans really proved to be very effective for these groups). Other than that pick a friendly, easy to read font that shows you mean business.
Bullet points should never be center aligned on the screen, unless they are a centered block.
Use a large enough font size and good contrast of background and foreground to keep your slides and products readable even on a terrible projector. Don’t rely on colours to be shown the way you expect them to be.
On web applications, nothing spells “we are unprofessional” more than not defining a font for your text. Out of the box browsers render in Times New Roman, so you just look sloppy if you don’t change that.
If you have no clue about HTML and CSS and you don’t want to bother with it but show something that is readable and works across all browsers, use the YUI grids in your document:
HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”
“http://www.w3.org/TR/html4/strict.dtd”>
What you want to achieve with a pitch is to get us excited and interested about what you did. The only real way to do that is to tell us what your system does differently than others – “what is it that makes it unique?” is the question you need to answer.
Get the one thing that makes your product great and shine the world’s biggest light on it.
Do not tell us that you have a delete, update and edit button. Do under no circumstances show us what happens when you click the delete button and – oh wonder of wonders – it deletes something. Then please do not continue to tell and show us the other – as predictable – functionality. Do tell us when one of these functionalities deviate from the normal patterns and do a better job though.
Do not tell us what colours you used in the background, we can see that and the colour is a means to an end, not the main reason to build the hack. Time is precious, do not waste it on things that we can find out for ourselves.
Cover the big concerns
Two things drive people nuts on the web: lacking security and hard to use products. If you ask for data show that you protect that data (some teams did a great job doing that, thanks). If you claim your interface is easy to use, don’t get lost trying to show it and under no circumstance tell other people who show the product for you what to do. “No, click the other button, no the other above this one” does not spell “millions of users will have a great time using this”.
People get annoyed very quickly if things take too long on the web. We use computers and online systems to make our lives easier, not to wait for your system or go through a five step process that could be one. Some teams did a great job with this. Sentences like “you don’t need to sign up, only when you want extra functionality explained here” are a real winner!
Tell the human story
What you build is there for humans. It is great if it makes their lives easier, it is good when it allows them to learn something and it is even OK when it just amuses them for a short while. Don’t get stuck with the technology but find the human aspect of your product instead.
Tell the story of the mother who hasn’t got enough time to juggle the day to day caring for her kids and the hard to use school enrollment and booking system. Tell the story that you got lost and tried hard to find the nearest bus stop and would have loved to get your mobile out and find it. Tell the story that you were not able to enjoy a party as you had no clue when the last train ran so you couldn’t relax as you didn’t want to get marooned there.
Computers are bastards
Things will go wrong in your presentation and you should swiftly deal with that and move on. Most presenters did that. Immediately say what happens normally and move on to the next integral part that works. Even better is when your product shows a great, well worded and easy to understand error message. Failure is as normal as success in software – both cases need a good user interface and not leave the user puzzled what is going on.
Do not try to gloss over
If you get caught out not having thought of something – own up and thank people for the great suggestions. Do not try to skirt around the issue and say that this is in there but you can’t show it now or something like that. Do not make something look as if it is more than it is – with web products it is far too easy to catch you out. Explain why things got omitted and there is no problem with that.
Don’t pad, build one thing well and sell this one
One thing that goes down terribly bad is adding gadgets gizmos and features to make a product look cooler. If a map display does not really aid the main task you try to make people achieve – don’t add it. News show that the site is up to date but can also distract from the real reason the site is there. Photos are fun but are they really needed for a time table application? Don’t think about what can be added but what can be removed. If you can’t remove any more and still make it easy to do what people come for to do you have a winner.
In summary
These are the main problems we found. Overall we had a great time and we were very impressed with both the presentations and the products. I remembered my own school time and I know how scared the presenters must have been. In that regard I have to say great job, guys.
Right now I am a “international developer evangelist” which is a nice title but sadly enough does not come with Q gadgets like Bond or a private jet like Iron Man. What it means is that I spend most of my days looking at what my company is doing and how it would matter for the outside world and to see what the world is doing to feed back to the people too busy in the company to have a look around themselves. In between I am translating these from one language and interest to another by creating easy-to-grasp examples and show improvements that can be done. And of course go out there and give lots and lots of presentations (last week I had 3 days in 2 countries with 7 presentations and 2 media interviews).
It is a sweet gig, and I am happy that I arrived at it after being a developer for a long time battling both the technologies of the web (and their creative implementations in browsers) and the internal hierarchies and politics of the company that pays your wage.
This does not really stop when you go into a speaking role though, if anything, the politics become even more problematic:
Event organizers are less likely to pay you or your expenses when you work for a large company. Surely the company is happy to dedicate its time and money to support some random event someone else does make money with, right?
Your colleagues are likely to constantly nag you that you are not coding any more and are just a speaker or front man now. This is sad and can be terribly annoying and a lot of people should not be surprised that you drift apart over the month as the job of a public figure is tiring and means a lot of work. Hearing that you do nothing is not very encouraging and does make you feel like you’re wasting your time.
Marketing, PR and HR will be all over you to either march along with them for the good cause (which in a lot of times is directly in the opposite direction of yours) or keep a very close eye on you so that you don’t do anything silly in public that could harm the company.
Random people will come to you with a very specific agenda and try to convince you that this is what the world needs to hear about.
In general, I am trying my best to walk the very narrow path of being an “evangelist” and not losing touch with what is being done in the company and the market. My own mental checklist is:
It is not about you. You have a knack of speaking and explaining but if you really think you are a rockstar or people should read about you and your life, get one. This is a very small community with a very specific market that is not even defined properly yet.
Do not overpromise. If you don’t believe in something or you are not sure if it really works, try it first and make sure. Come from a base of confidence not “woohoo this is sooo coool”
Give people things to take away. This is my pet peeve about presentations. If there is nothing in there I can bring back and impress my boss with or make my life a lot easier, what was the point? Yes this is terribly pragmatic, but I am just not easy to get interested in theories or visionary speeches – I’ve seen too many be totally off the mark.
Speak the language of the audience. Is the level of complexity the right one for the audience? Are they native speakers? Will pop references and jokes work?
Find something new for yourself. Even if you’ve given dozens of talks about the topic, make sure to get a new, fresh angle that challenges you and the audience alike.
Do your research. There’s nothing better than referencing other good examples and articles for people to read on about the topic.
Have your handouts ready. Don’t just promise availability of your talk and examples, have them online and as a link to download before you even start.
Go into sponge mode. The people you are about to talk to are even more interesting than you are. Chat, listen, invite to communicate, ask for things to look at and you’ll get a lot of inspiration for the next gig.
This works quite well for me and if you are interested, I can go on about planning your trips and what to make sure before you go in another post. Should I?
