Between technical brown bag sessions, project status meetings, and just plain putting together something to explain an approach or solution to a problem, I find myself in Powerpoint/Keynote more lately than in the past. I’ve been asked a variety of questions about those presentations where the answers are something I thought might be interesting to share.

Zeroth, I’m fully aware of the irony of an article like this not “practicing what it preaches”. Note that creating an engaging presentation full of lively slides is more work than quickly writing up a few points. This article is the latter because of the effort involved in the former when faced with my current work queue.

First, is that I do use both Powerpoint and Keynote and go back and forth, even on the same presentation. That’s due in large part to the fact that I don’t actually use either one when it comes time to fire up the projector. Rather, I use both (and quite a few other tools) as mechanisms for creating slides/graphs/infographics, etc.

The final result of the computer side of a presentation for me is actually a PDF. PDF turns out to be a great format for actually delivering the presentation. You can throw the PDF on a memory stick and it’s almost a universal certainty that you’ll be able to open it using whatever machine you’re expected to use.

Given the number of people I’ve seen show up with Keynote only to discover a PC, hard-wired to the projector, I think this is a sound strategy. Acrobat Reader handles full-screen just fine and also includes the only transition I ever use: fade. You don’t get the fancy “builds” where text comes flying in from the back of the room, does a little dance around your pie chart and then settles into your bullet point ranks. And, I’ll go on record that that’s a good thing.

So, basically, I use whatever makes sense to get a series of PNG slides that I turn into the final PDF presentation. However, before diving into how I build those slides…

Before Creating Slides

I think the most important presentation habit I picked up was to start working on the presentation somewhere other than *in* Powerpoint or Keynote. Both of those tools encourage a pattern that I think is the number one cause of the bullet-point onslaught.

What I see people do is File->New Presentation and they start by filling in the title and adding a new slide. That slide is always the Title/Bullet Points layout and they start filling in those boxes and just keep right on going.

If you start away from the presentation editor and organize your thoughts and ideas into the points you want to make, the things you want to convince your audience of, the things you want to be sure you communicate, etc.

This is where good old fashioned note-taking, outlining, and mind-mapping come in. Capture the ideas so you can cut out the crap that doesn’t belong. Even if you take a bunch of notes, throw them all away and go to Powerpoint “fresh”, your thinking will be clearer and the presentation better for it.

Slide Design

As I’ve been working on improving my own presentation techniques, reading books like Presentation Zen and slideology looking at the best of Slideshare, I’ve seen lots of “named” styles and varying sets of rules. Rather than getting hung up on the details of whether one of those sets of rules is “better” than another, I have boiled it down to my own guidelines/principles that are common to most such recommendations:

1. The fewer words on a slide the better.
2. The words on the slide shouldn’t be the same as the words you say.
   • While Larry Lessig seems to be able to pull off a really sophisticated style where he phases in and out of sync with the text on his slides, I am not Larry Lessig. I just find my presentations working better when I don’t say the words on the slide.
3. The slides are a side dish, not the entree.
   • The things I’ve actually got to say are what I’m there for, otherwise, why bother doing it in person?
4. Let the slides deliver the joke.
   • When you’re nervous, the timing of humor can be difficult. If, however, you insert little jokes into the slides, as though your “assistant” was messing with you, etc. you can still use humor, without the stress of having to hit the punchline.
5. A picture is worth a cup of coffee.
   • Whether it’s a graph or a photo of a screaming monkey, a picture will keep people awake and engaged more than text.

To those ends, I basically have a handful of slide layouts that I use, none of which are in the default layouts from EITHER Powerpoint or Keynote.

• Basic Text – this is the headline font, smack in the middle of the page. More than about 5-6 words and this layout stops working.
• Quote – this is the subheading font smack in the middle for quotes of 1-2 sentences. I avoid using this for anything but a quote.
• Fullscreen image – this is usually just the default “blank” with the image dropped in.
• Graph/Chart – again based on blank with just the graph itself and maybe a small caption. The graphs/diagrams need to be simple, but then they can be really useful.

That’s it. If I am concerned about people “catching up” later, I publish a different document or record the presentation. For URL’s and links to resources, etc. I’ve been leaning more and more on a handout that I give out at the end rather than trying to include that stuff directly in the slides and hoping people will note down the info.

Finding Images

So, where do I find images and how do I keep track of them? This tends to be one of the most common questions I get.

First is that I always save a copy of the page where I find an image online as a way of taking a snapshot of the permissions it was marked with when I downloaded it. To that end, I use the MHT format to save the entire page, including the photo itself, into one file, which I name according to a description of the photo.

All MHT is as a format is MIME-encoded HTML. That’s what is used for email attachments. So, don’t let anyone tell you that it’s a “Microsoft proprietary” format. It’s not. Internet Explorer, does, however, support it out of the box, while Firefox requires the UnMHT extension to be able to save or open the format.

Then, where to get the images. I get 90%+ of them from Flickr’s Creative Commons section. My site used to have an app that helped search through those, but it’s been down for a while and I’m not sure when/if I’ll put it back up. In the mean time, I actually use a simple bookmarklet that prompts for a term and then searches for photos based on that.

Flickr Search Bookmarklet

Put the following into a new bookmark as the URL, putting it all on one line.

javascript:Qr=prompt('Tag...','');if(Qr)location.href='http://www.flickr.com/search/?q='+escape(Qr)+'&l=commderiv&ss=0&ct=0&s=int&m=tags'

Thesaurus Search Bookmarklet

And, since it can be a trick to figure out which term to actually search for in order to get something you want on a slide, I’ve got a similar bookmarklet for a Thesaurus search.

javascript:Qr=document.getSelection();if(!Qr){void(Qr=prompt('Enter%20word%20to%20find%20in%20Merriam-Webster%20Thesaurus:',''))}if(Qr)location.href='http://www.merriam-webster.com/thesaurus/'+escape(Qr)+'%20'

I tend to cycle through those, fairly quickly coming up with stuff I can use. It generally works well to search for abstract terms like “fast”, “angry”, “calm”, etc. to get good slide material and tends to cut down on the tendency to have slides made up of images of the exact words you’re using, which feels weird to the audience.

Overall, this set of tools lets me work on multiple presentations at once, throw one together fairly quickly and has generally gotten me quite a few compliments when given in places where the bullet-point brigade is the norm. Hopefully, they can help you too.

photo credit: j wynia

I carry a variety of notetaking devices. They all have their benefits and I tend to oscillate between pen/paper and electronic devices. However, the notebook nearly always tends to hang out around me and I dump ideas onto the pages as the day goes on.

Those notebooks have been filling up with ideas for projects. Combine that with some client projects and my shift in schedule (which hasn't freed up as much time as I'd hoped), and I find myself at the beginning of several projects at once.

This raises a few needs that have been hanging out there. Designing and starting a web application project involves a few things for which I've never been happy using the existing tools.

First, there's actual layout design. While Photoshop works fine for doing the "sketches", the people who are in a role to review those design ideas tend to get overly focused on things like font choice when you're trying to figure out whether you should use one screen or a wizard for registration only to suddenly notice that the wizard was chosen just as the app goes to production.

That's why my interest was piqued when Balsamiq came out a while back. It provided a way to do mockups of screens and keep people focused on the functional design instead of colors and fonts, just like I want. However, there are quite a few apps that I'd use more that also are in the $100 range (Balsamiq is $79) and I haven't bought those yet, so it's unlikely that I'll be buying it any time soon. Plus, I'm not exactly a fan of the Comic Sans font.

However, the other night, I was relaxing in front of the TV before bed and I figured I'd doodle a few sketches like the widgets in Balsamiq. As I was drawing, I also was thinking about Antonio Lupetti's technique for sketching on screenshots, which I've been wanting to use more in articles and presentations/screencasts, so I included some of those elements as well.

It didn't take long and I had 4 sheets of paper pretty well covered. Because I started by just sort of doodling, the elements didn't end up to scale, but I like the way some of the icons, etc. turned out. I'm thinking of fixing the tablet PC (battery won't hold even a slight charge and the stylus disappeared) and re-do them on a grid that will make them the right comparative size.

However, I did scan the pages to PNG's for sharing.

One of the other difficulties is that I've seen too many projects, particularly inside the firewall, receive horribly ugly and unusable web templates. At the same time, for my own projects, I'm not ready to pay a designer yet to do the final design (though I may be soon if you're a designer and interested), and need to get on with building things in the mean time.

So, I've been wanting a decent "generic" web application template that lets me focus on building functionality and, once that's nailed down, do the final design as more of a "redesign" from the generic template.

The thing is that, while there are thousands of web "site" templates and blog templates, there are very few that are oriented to web applications. There are so few, that something like 2/3 of the Google links for my searches led back to this 1 template. That theme is nice, but not the look I'm aiming at for my temporary template.

Among other requirements, like the sketchy mockups, I want the the ability to actually have a completely grayscale look to the initial prototypes to hammer home the temporary nature of the design. So, last night, after I tossed Revolver into the DVD player to finally watch it (incidentally, not the kind of movie to be working during as I'm going to have to re-watch it to entirely "get" it), I decided to take a shot at building such a template myself.

I grabbed a copy of the 960 CSS Framework (something else I've been wanting to mess with) and whipped up a batch of pages that covered the basic HTML elements, a bunch of form elements and a start on stuff for data display, like tables. I threw in a bit of jQuery for things like drop shadows and by the end of the movie, had some decent results. There are still plenty of little bugs (like the jQuery tabs didn't cooperate, so I threw some other ones in instead until I can figure that out), but I'm pretty happy with it so far.

It's grayscale by default, but all of the color definitions are in a single CSS file, so changing the colors is easy. All in all, it's pretty modular and I think it will turn into an ASP.NET master page quite easily as well as allow a complete swap-out for a different design later as nearly everything is pretty vanilla HTML tags.

I zipped up both the sketchy PNGs and the web application template together so you can download them if you'd like to take a look.

Download the Prototype/Design Toolset Package

photo credit: threedots

A couple of weeks ago, Antonio Lupetti shared a list of 10 "handwritten" fonts that he uses in his design projects. He also does a brilliant job of integrating that stuff into the diagrams in his posts, which is why I paid attention when he put out a list (just take a look at his archives and you'll see what I mean).

As I was looking at those fonts and downloading them, I was thinking about sIFR, which I've mentioned before. It's a way to replace text in web pages with Flash on the fly, using fonts that aren't on a user's computer. I've wanted to include that on this site and on several others for quite a while.
Read the rest of this entry »

You may have already seen this video (it's from mid-August) on resizing images in a more content-aware way: called "seam carving". If not, take a look.

I've shown that video to a few people over the last couple of weeks and nearly every one of them asked where they could get software to do that. The package that everyone points to is the GIMP plugin "liquid resize".

The only problem with pointing people over to that plugin is that it's not exactly obvious that it shows up under the "Layer" menu in GIMP. Similarly non-obvious is exactly how to use it to get the best results.

If you just fire away, you don't get the benefits of preserving people's faces, for example. Instead, you get a distorted image that's little better than if you had just resized it and ignored the proportions.

Fortunately, a tutorial for using the liquid resize plugin landed in my RSS reader this morning and I thought I'd share.

Oh, and, for the record, while GIMP is typically run on Linux, you CAN run it on Windows as well. Just make sure you run the GTK installer before the GIMP installer (both on the site).

If you don't like the results that the GIMP plugin gives you, take a look at this other implementation of the idea or wait for Photoshop to integrate it (they hired the guy from the video).

Now that I've gotten this Wordpress installation straightened out and errors removed, I'm looking at doing a new theme/redesign (yes, starting again). I didn't really like my last attempt and would really like something I can stare at for a while before needing it re-done.

I also would like to finally make my theme standards-compliant. At various times, I've looked at many of the starting points that are out there for CSS-based layouts. Unfortunately, they all pretty much consist of variations on 1, 2 and 3 column layouts.

That causes a problem because what I'm looking to do is much more of a magazine-style grid, especially for a new front page. I want areas for featured posts, recent posts, subscription information, etc. And, when I just shove them into left or right columns like I'm doing now, I'm not really happy with the result. The kinds of grids that the linked article uses are way more complicated than the samples to do with CSS.

While I'm perfectly capable of getting it to work eventually, I'm not interested in spending 5 times as long to build the thing with pure CSS as it would take to hack it together the impure way.

I was lamenting this overall situation to someone a few days ago and they suggested I take a look at the YUI grid CSS setup. I messed with their grid builder a bit and read through the documentation and I definitely think that YUI grids are a really slick way to build those more complicated layouts using CSS. The elements are nestable (one of my biggest pet peeves with most CSS layouts), stackable and otherwise provide most of the necessary controls to build the more complicated grids.

I'm thinking if I can get a grid working that I like, then apply color and design to that grid, I can make future changes to just that color and design bit, to freshen things up instead of starting from scratch the next time. Having it all laied on out on a bare grid would probably work better for working with a designer as well. Lots of the problems the last time I did that came from layouts that just wouldn't work with all of the elements on this site.

It'll still have to wait until next week or later due to how much crap is going on this week, but for the first time in a long time, I'm confident that what I want to see done with this site can be done *easily* with CSS.