I’ve struggled with my slides for years. At first, like a lot of people, I made them showy and crammed with content. Then I had a serendipitous meeting with Laura Legendary and talked to her about the accessibility of slides. Which was, in short, mine sucked. Yours probably do to.
Over the next 18 months, I’ve transitioned from amusing images and gobs of data to a header with images, to a header and subheader, and maybe a bullet list when needed. The amount of text on the slides are minimal. They’re not there to teach you code, because that’s a futile attempt in the first place. Learning to code from slides was a bad idea in college, and in a 30 minute session with 15 for questions, it’s worse.
Remember college? Class was where you talked about the theory and the principle and the ideas. You got the history and the concepts and (in math class) the formulas. Sometimes you were told to look in your book because the formula was huge. Then you went to the labs and you talked about it again and did ‘experiments’ to turn the theory into reality.
Perhaps instead of contributor day we should have lab day. Day one is sitting in presentations. Day two is learning how to apply what we learned, with the presenters as the instructors. Learned about CSS and flex box? Okay, let’s all build a flex box together!
But we don’t. We try to cram everything into a session, to teach people the theory and the reasons why you’d use responsive CSS. And we try to give people examples and code and links. And we hope we inspire them enough to learn more and try it on their own.
A year ago, I stopped putting practical code examples in my slides. I still do code, now and then, but I limit it as much as I can. It’ll always be hard for someone to read, it’ll always be hard for someone to understand. And I’m a very haptic learner, I learn by doing and not by reading, so I need that Hello World example to read through and try myself.
Once I decided to do that, I slowly started stepping back my images in slides. If I need one for explanatory purposes, I’ll use it, but otherwise I keep it to plain text. And in keeping to plain text, it allowed me to reconsider my slide options.
I still use Reveal.js and I love it. Reveal.js is clean and direct to use but sometimes it’s a little plain. It’s a little weird to add a header and a footer, and they can get cluttered and annoying and I sat down to decide what I wanted to see in my slides.
1) The emphasis is on the content
2) The ‘credit’ to my company isn’t distracting
3) A handy way for people to see the link to the slides
The third one makes more sense when you remember that I use this to display my slides live. If I tell people to go to helf.us/wcsea2016 and I want them to remember this halfway through the talk, I need a link. I also want the slides to be there for the blind to follow along. They can plug in their screen reader and hear the slides as I go through. In addition, I have the speaker notes already in my slides. Just for added fun.
If you look at my current slides, you’ll see I have a ribbon that looks like the GitHub fork ribbon on the upper right, and a button link to my company, DreamHost, on the lower left. This is done with CSS and an image. The image is the DH logo, but the rest… Well it gets done by this:
<body> <div class="reveal"> <a class="github-fork-ribbon" href="http://helf.us/wcXX2016" title="http://helf.us/wcXX2016">http://helf.us/wcXX2016</a> <div class="powered-by"><a href="https://dreamhost.com/"><img src="../assets/images/dreamhost.svg"></a></div> <!-- Any section element inside of this container is displayed as a slide --> <div class="slides">
The ribbon is via Fork me on GitHub CSS ribbon by Simon Whitaker, and it’s a quick line of code. The powered by stuff is my own CSS:
/* DreamHost Powered By */
.powered-by img,
.powered-by .backlink {
height: 20px;
background: #2F323B;
padding: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.powered-by a:hover img {
background: #2F323B;
border-color: #268bd2;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.55);
}
.powered-by {
display: block;
position: absolute;
bottom: 16px;
left: 16px;
z-index: 20;
font-size: 45%!important;
text-align: center;
}
I don’t always use it. I have a file called /assets/css/dreamhost-powered.css that I call for this. If I don’t want to use that and instead want to brand differently, I can use any other CSS file because it’s all just HTML.