Evangelism Reps Training Program/GreatTalks/Pablo-Defendini

From MozillaWiki
Jump to: navigation, search

Great talks: Pablo Defendini - Books in Browsers - Adaptive Web Design

See this talk on YouTube: http://www.youtube.com/watch?v=f3WXEgPU1zc

I really enjoyed this presentation. Not because of its slickness or perfect structure but actually because it is the absolute opposite. A lot of things go wrong here, I am sure that Defendini used all the tricks I mentioned unknowingly and it is simply a great example of a passionate talk.

Defendini didn't set out to change the world of design with this talk, he was just proud of something he'd done and wanted to show it to an audience and get some feedback on how people like it.

It is a charming example of how being passionate about a topic makes you an engaging presenter, even if a lot goes wrong and you are not the known expert. Defendini is just himself and doesn't aspire to be more on stage. You can be that, too.

Furthermore I really like that this talks shows Mediaqueries and responsive design in a way that is not web related but shows how HTML can be used for all kind of designs and publications these days.


00:00 - 00:21 Who am I?

Defendini introduces himself and the topic. He also starts with the main message: that he has a passion for the topic he is about to talk about since the very beginning.

Tricks used:

  • Self deprecation: You would expect a artist to talk about comic books and adaptive web design, but he admits to have failed at drawing comics, and went to the school of art and it didn't work out.

00:20 - 00:40 Introducing the challenge

Defendini starts talking about how comic artists use the page as a canvas: the layout of the page is known and can be used as a device in story telling.

Tricks used:

  • Building confidence: Defendini shows he knows what makes comics great and mentions the masters of the craft - possibly to look up.

00:50 - 01:02 Disaster recovery

Defendini's iPad goes to sleep during the presentation. Rather than being stuck he just complains at it, excuses himself to the audience and fixes the issue.

This is important: if things go wrong - and they will - deal with them swiftly, tell the audience what happened and fix them. If they can't be fixed, drop them and move on to the next working bit or just ad-lib the rest of the talk. Things break, they should not end your talk. In essence: don't rely on anything but your own skills as a presenter.

01:03 - 03:40 Explaining the problems to solve

Defendini shows that the layout of a comic page is part of the art, that designers use cliff hangers and splash pages. He then shows that just transferring those to tablets doesn't work as the text becomes unreadable. He shows the ways we right now try to work around that and how they look swell but fail to deliver the initial intent of the artist. He then shows made-for-digital comics that are a bit better but still pose readability problems.

Tricks used:

  • Showing real life examples: people can try out for themselves what Defendini shows and see that what gets them excited (zooming into panels) actually hurts the art form of comics.

03:50 - 04:20 Explaining the approach

Defendini shows that web development, other than print design is fluid and that different screen sizes are catered for using mediaqueries. He then goes on to pose the question if using that technique that solves a problem in web design could be applied to comics.

04:20 - 05:00 Preparing the demo

Defendini explains that he will now go into a live demo on his site and that people can go along with him on their devices. He also explains that he is not a coder but a designer and that there might be problems with the quality of the code of the site and that it can look "funky" on Android.

Tricks used:

  • Explaining caveats - instead of just showing something that looks amazing on his device Defendini is totally honest about what he is going to show and how it might break. Also, that what is coming is live. This is very important as a demo that inspires and then frustrates when people try it out themselves is not helping but hurting.
  • Inviting audience participation - instead of just showing the demo Defendini invites the audience to take part and be a part of the discoveries to come.

05:00 - 07:20 Live demo

Defendini shows his online comic how it works on the tablet and shows the benefits of using HTML and live text to allow for positioning of images and dialog. He also shows the mobile phone version by using the camera of his tablet to record the phone.

Tricks used:

  • Using real environments: Defendini shows how it looks on his tablet, and not in a pre-recorded video. This is live, raw and might break (which it does and he quickly fixes the issue by reloading the comic). Instead of just talking about the benefits of his development approach, he simply shows the final effect.
  • Breaking the audience barrier: instead of showing a sleek demo and "here is something I prepared earlier" Defendini hacks his own presentation by filming his phone live with his tablet. This makes him not a sleek, unreachable presenter, but a guy who knows how to make things work. Breaking down the invisible barrier between you and the audience is very important you are not better than them, you just have something you want them to hear about. Especially a tech crowd has been suffering from "perfect presenters" who didn't say much for a long time. Embrace not being the suit in front of the bullet points.

07:20 - 08:40 More technical issues

Defendini then wants to proceed to showing what happened under the hood and gets surprised by his own slides that he created as a fallback should the live demo not work. Great thinking, but less so when you forget about it. It reminds him though that he also created an ePub book which he forgot to mention when he showed the live demo.

Tricks used:

  • Having a fallback - when things go wrong, it is good to have an offline, static version of what you want to show.
  • Referencing other talks - Defendini quotes another speaker from a talk earlier with "a website by another name". In the video this doesn't make much sense but during the conference this is very powerful as it reminds people of something they enjoyed earlier and it once again shows that Defendini is not the unreachable presenter but one of the crowd at the conference who has something to show.

08:40 - 09:10 Under the hood

Defendini shows the HTML code and explains the benefits of that format, in this case that he could do translations of the comic very quickly.

Tricks used:

  • Explaining non-obvious benefits - Defendini showed that HTML and CSS is great for responsive layout but most likely the audience has not thought about ever localising comics in the same file.

09:20 - 10:10 Outro / Homework

Defendini explains the future applications of this technology and shows by his example that it is simple to be creative with these new technologies if people aren't scared of them but just give them a go.

10:10 - 13:00 Q and A

Defendini answers a few detailed questions from the audience.

Tricks used:

  • Repeat the question - this is extremely important as it shows that you understood the question, it means that everybody in the room can hear the question, it records the question on the video and it gives you a bit of time to think about your answer instead of blurting out the first thing that comes to your mind.