My FT2010 slides and CSSS: My presentation framework

Screenshot of the first slideAbout a week ago, I was in Warsaw, Poland to give my first talk at a big conference, Front Trends 2010. As every first-time speaker, I was extremely nervous and worried that everything would go bad. That my talk would be boring or too basic or that I would just freeze at stage, unable to say a word. It was a 2-hour talk with a break in between, so I was also terrified that nobody would show up the second hour.

Contrary to my fears and insecurities, it went better than I could have ever hoped. The feedback on twitter and in general was enthusiastic! There wasn’t a single negative comment. Even people I look up to, like Tantek Çelik, PPK, Jake Archibald or Robert Nyman had something good to say! And instead of nobody showing up the second hour, the audience almost doubled!

At this point, I would like to thank Christian Heilmann for helping me become less nervous before my talk by going through all my slides with me and offering his invaluable advice for every part (I forgot to follow most of it, but it really helped in my attitude). I can’t thank you enough Christian!

Many attendees asked me for my slides and presentation framework. You can find my slides online here or download them. However, before you follow those links, read below:

  • I originally ran my presentation in Firefox 4 beta so I was testing mainly in that and Minefield (Firefox’s nightly releases). It supports other browsers too (Chrome 7, Opera 10.6+), but it still displays better in Firefox or Minefield and is (surprisingly) faster in them.
  • Opera has issues with a few unicode characters I used in some places and won’t display Helvetica Neue even if it’s installed (@font-face is not an option with that font, for legal reasons)
  • Any non-Gecko browser will not display CSS gradients, since Gecko is the only engine so far that supports the standard syntax. Therefore the gradient demos and the multiple backgrounds demo won’t work in non-Gecko browsers.
  • Some slides are a bit slow on Webkit. The first slide is extremely slow in it, you have been warned.
  • Opera and Webkit have (different) bugs with border-radius: 50%, so some things using it will look funny.
  • I have only tested in OSX browsers. I have no idea how it will perform on Windows or Linux distros yet.
  • It’s a 2-hour talk and the presentation was designed to run locally. It’s not small and it will take a while to load. That’s due to the images used, as you can easily see from the zip archive.
  • The editable examples many of you liked are based on this CSS mindfuck by Anne van Kesteren. It’s smart and convenient, but beware: It breaks really, really easily. It’s good for changing the code realtime, but it will most likely break if you try to add extra code.

In case you’re not feeling very adventurous today, or you’re just using a computer with only unsupported browsers, here’s the presentation as a series of images (not interactive, but still the same info):

CSSS logoBy popular demand, I’m also releasing my presentation framework, for which in the meantime I found a name (CSSS, inspired by S5), designed a logo and made a simpler, sample presentation with a different, simpler theme. I released it in a public repo on Github (finally got around to learning the basics of Github and loved it!). Please note that this is a very first version and I haven’t been able to test it much, especially on Windows, since my Mac is quite new and I keep postponing to install some virtualization software. A friend reported that Firefox 3.6 on Windows has serious issues with it, although it runs fine on my FF3.6 copy for Mac. It doesn’t work at all in IE, even IE9, as I don’t yet have IE to test it out. Please report any issues on Github’s bug tracker and eventually I –or someone else, you’re all welcome :p– will fix them (don’t forget to mention exact browser version and OS). If you’re using Safari, press Ctrl+H for something cool ;) (it works on the others too, but it’s slower and not smooth)

Some may ask: “If CSS3 degrades so gracefully and we can use it today as you told us in your talk, then why all these issues with different browsers in CSSS or your FT presentation?”. First of all, these are not everyday use cases. Projects like CSSS or my FT presentation are quite experimental, use a lot of CSS3, including many edge cases and I could have devoted more time to make them degrade more gracefully, but given the target audience, I don’t think it’s worth it much. It’s expected that  there might be rendering problems in some browsers or that they might be slow, browsers need edge cases to highlight problems in their implementations of the new stuff before it’s finalized. Every time I experiment with CSS3, I find at least one browser bug, which I generally try to report (don’t let that scare you though, as I said, I have a penchant for edge cases).

You may have also noticed I redesigned my blog. As you may have noticed, I have fallen in love with that Rainbow Wood wallpaper by Luke Roberts and I just had to put it in my blog too :P The new design has a few issues with Opera at the moment, but I hope to fix them soon. It will also look better to those that have Helvetica Neue installed.

  • http://twitter.com/ludwiczakpawel Paweł Ludwiczak

    You had great presentation and you did really awesome work releasing your slideshow framework. It seems to work very smooth, I’ll take it for a longer ride and come back with more valuble feedback.

  • http://kamilklosowski.pl Kamil Kłosowski

    You give the most beautiful presentation on FT2010 – and even if i knew CSS3 before i catch up some things that i didn’t know. Thanks for that – and for that slides/CSSS.

  • http://www.yemkay.com Karthik Murugan

    Great work!! Thank you for the wonderful slides. Never before have I read 100 slides at once, but I couldn’t resist in this case :)

  • http://blog.shpyo.net shpyo

    Thanks for slides and this framework for presentation looks nice :). BTW. you look more different than on photos.

  • http://andrzejmazur.end3r.com/ Andrzej Mazur

    Your presentation was the best one on the conference! Keep up the good work, I really enjoyed those 2 hours of your CSS3 stuff. And of course thanks for the framework, it’s great!

  • http://leaverou.me Lea Verou

    Thank you all so much!!

  • http://pepelsbey.net Vadim Makeev

    Just in case you’re interested in other presentation templates (frameworks?) — here’s my own “Shower” template: http://pepelsbey.net/pres/web-in-curves/ — it works fine only in Opera (because of @media projection switching in fullscreen).

    I’m looking forward to make it more browser compatible ;)

    • http://leaverou.me Lea Verou

      Wow, that’s a great presentation!! Minimally beautiful and to the point. I love those! I wish it was in English though, so I could understand it better.

      Why “shower”? Where does the name come from? :)

      • http://pepelsbey.net Vadim Makeev

        Show + er = “Shower” — waterfall of beautiful slides and demos ;)

        • http://leaverou.me Lea Verou

          What a cool name!! Much better than CSSS ;)

      • http://pepelsbey.net Vadim Makeev

        I must thank you for inspiration ;) My template is on GitHub now, with Opera, Chrome and Firefox support — http://github.com/pepelsbey/shower

  • Isiliel

    My dear friend, your next presentation should be in TED! Well done!

    • http://leaverou.me Lea Verou

      Haha, one step at a time my dear Dimitra ;)

  • http://jlix.net/ Sander Aarts

    Hi Lea,

    I already told you I liked your presentation (too bad I only saw a small part of it), but not what I particularly liked about it. Which is that it had much more a developer point of view than that of a designer. The latter seems more common for CSS presentations, see Fronteers 2010.

    For the same reason I’m looking forward to your presentation about selectors, new units and other non-hyped stuff (http://bit.ly/aDrw10) ;)

    Many people seem to have noticed your conference debut and I only heard/read positive remarks about it. So I hope you like to travel, cause I’m sure there will be many more invitations.

    cheers!

    BTW: nice redesign

    • http://leaverou.me Lea Verou

      CSS from a developer perspective is something I also crave and have trouble finding. Maybe that’s why I loved Håkon’s talk so much at Fronteers.
      It surprised me a lot though that other people were interested in such a thing. I thought that only designers are interested in CSS (I’m not a designer, but I’m weird :p), so they prefer a designer viewpoint.

      I hope you’re right, because I love travelling! (and I love conferences even more) :)

      • http://jlix.net/ Sander Aarts

        You’re right about Håkon’s talk. It was great, although I experienced it more as an inspirational talk than as a CSS talk.
        I was refering to the talks by Jina Bolton and Meagan Fisher, that really had a designers approach. Nothing wrong with that, it’s just that I can not relate to that as I can to a talk like yours.

        • http://leaverou.me Lea Verou

          Yeah, I know exactly what you mean. Couldn’t relate to those much either, although I loved their slides. :)

  • Pingback: Tsevdos.com > CSS3 και CSSS

  • http://twitter.com/gauravmishr Gaurav Mishra

    Very well executed presentation!!!

    I would like to share you a similar presentation on css3
    ‘Harnessing CSS 3 for a Beautiful Web’ the one i gave in OSI Days, Chennai, India in September.
    Here is the link
    http://sandbox.osscube.com/slides/2010-osidays-css3/index.html

    • http://leaverou.me Lea Verou

      Thank you!

      • http://twitter.com/gauravmishr Gaurav Mishra

        Welcome and My pleasure : )

  • http://hallakol.com Hallakol

    I love your presentation and great inspiration. Thank you.

  • http://www.piscolabis.es David Matas

    The best ever presentation!

    Congratulations!

  • Pingback: Front-Trends 2010 – szafranek.net

  • Andy Fuchs

    Did you notice, that on the last screen Safari becomes close to unusable, if you click or click/drag with your mouse?

    http://leaverou.me/ft2010/#slide103

    The CPU-load on my QuadCore MacPro jumps up to 100% +. I haven’t had time to investigate what causes this, but my guess is, that’s something in the CSS.

    Otherwise – very cool presentation and framework!

    • http://leaverou.me Lea Verou

      For some reason, Webkit (Chrome and Safari, among others) seems to be extremely slow in all 3 slides that have a rainbow wood background (first, last and 22) . Not sure why.

  • Edward B

    Awesome work! this is an excellent presentation!

  • http://www.chriscupas.com/ chris

    For some reasons the slides turns out to be really slow but Yes The presentation was insanely great. btw, cool stuff!

  • http://twitter.com/prisca_eyedea Prisca Schmarsow

    Stunning slides, packed with info – wonderful :)
    Wish I’d seen your talk – thanks for sharing these :)

    • http://leaverou.me Lea Verou

      You can see one of my future talks ;)

  • http://www.facebook.com/lauge.brixvold Lauge Brixvold

    Really really nice slides, and your CSSS seems wonderful, except your CSSS example doesn’t work in FF 3.6 Linux (Ubuntu 10.10.)

    • http://leaverou.me Lea Verou

      It doesn’t work on FF3.6 on Windows either. I guess when I get around to solving that issue, the Linux one will be solved as well (if not, you’re out of luck: I don’t have a Linux partition and I don’t plan to do so). As stated in the post, I had no other operating systems to test at the time, just OSX. I do have a Windows partition now, thanks to Bootcamp. :)

  • Pingback: design for the web » Blog Archive » beautiful CSS3

  • Pingback: Incrementable length values in text fields | Lea Verou

  • Pingback: SWL-Projekt » Incrementable length values in text fields

  • dd127

    Great work ! The “show-thumbnails” functionnality is impressive !
    But it’s difficult to change the transition between slides.
    How to have a left transition (like the html5rocks presentation) ?

    • http://leaverou.me Lea Verou

      I guess you would make all slides have a left offset of -100% and on :target make it 0.

  • http://www.facebook.com/people/Renia-Kwasy/100003314040867 Renia Kwasy

    Thank you, Great work

    greetings from:
    http://www.waszmarket.pl/index.php
    http://waszmarket.pl Gilzy papierosowe, nabijarki do tytoniu, tabaka

  • Pingback: 10 jQuery/HTML/CSS Presentation Slides Plugins | jQuery4u

  • http://www.procurandomilionarios.com/ Namoro online

     Nice work and thanks for sharing this with us..

  • Pingback: 3 Really Cool Browser-Based CSS3 Slideshow Tools - Design Bombs

  • Pingback: 3 Really Cool Browser-Based CSS3 Slideshow Tools | DezineCSS

  • Pingback: Images & Colour - eyelearn

  • DanOwen

    I just gout your CSSS on github and it looks great. It looks like you are continuing to develop it. Is it still your presentation tool of choice? Thanks for making it available.

  • DanOwen

    How do you embed your CSSS slideshows in your LinkedIn profile? I’d like to be able to do that. Thanks.

  • DanOwen

    CSSS is great, but doesn’t seem to support swiping. Am I doing something wrong or do you intend to support swiping at some point?

    Thanks.

  • DanOwen

    Lea,

    I’m using your CSSS for a slideshow to upload to SlideShare and have a question. You use an SVG on the title page. I can see my own in Firefox ( Mac), but only a messed up version of the SVG in Chrome ( Mac). Any thoughts?

    Should I be looking for another system for slideshows to place on SlideShare, or should I just give up the SVGs?

    Thanks,

    Dan

    • http://lea.verou.me/ Lea Verou

      Hi Dan,

      It sounds like an SVG bug rather than a CSSS bug. This is not uncommon, there are plenty of bugs even in modern SVG implementations.
      Regarding slideshare, I don’t think it supports HTML presentations at all. What I usually do is take screenshots of every slide and make them into a pdf afterwards…

      • DanOwen

        Got it. Sorry about my confusion. I saw one of your presentations on LinkedIn, tracked it back to SlideShare and then assumed incorrectly that it was ‘live’. I should have noticed that your cool fade in / fade back transitions weren’t present.

        So I’ll develop for the path of least resistance – in this case Firefox and do the screenshot PDF for SlideShare as you suggested.

        Love the CSSS and thank you!

  • DanOwen

    Lea, do you have a recommended platform and browser for CSSS? What do you use?

  • Pingback: Images & Colour - eyelearn

  • Pingback: 10 jQuery/HTML/CSS Presentation Slides Plugins | jQuery4U | No.1 Resource for jQuery Developers

  • Pingback: eyelearn » images & colour with CSS

  • Pingback: CSSS: платформа для разработки презентаций Лии Вероу | Блог Дмитрия Шарабина