5 Steps for Creating Superhero Slides

5 Steps for Creating Superhero Slides

Two weeks ago, I had the amazing opportunity to speak at MozCon, where I presented about how to develop an ROI positive International SEO process.

A Q&A session followed my presentation, and to my surprise, the first question I was asked was something along the lines of, “This is not my ‘real’ question –I will ask it after this one– but many of us are wondering: where have you found the Lego images for your slides?”

When I finished my session, I noticed I also had some tweets during my session asking the same question (which also happened last year with my MozCon SEO Project Management presentation) and afterwards, people approached me during the breaks at MozCon and congratulated me on the presentation, telling me they loved the slides (for which I’m very thankful).

Additionally, I published the presentation slides on Slideshare, which also gained some unexpected visibility when it was first featured on the Slideshare homepage and then selected as the “Slideshare of the Day.” The response looked something like this:

Presentation Slideshare of the Day

After just a few short weeks, my MozCon presentation from this year has almost had twice the views than the one from 2012 received during an entire year:

MozCon Slides Statistics in SlideShare

(Side note: I was so happy with the results that after MozCon and I felt ready for new challenges, so I went to my home country, climbed a volcano, and slid down with a board. I’m not kidding!)

Because of this (and despite the fact that I am by no means an expert in this field; just someone with the chance of giving a few presentations in front of diverse audiences over the last few years), I thought it might be valuable for the Moz community — for those of you who do public and even internal presentations, or who are looking to give them in the future — to share not only where and how I find my images, but the process I’ve taken to develop the slides, with a special focus on my MozCon presentation.

Here we go!

Slides Presentation Superhero

This is not the first (and won’t be the last) resource about how to build effective presentation slides. Rand even did a Whiteboard Friday with “8 Rules for Exceptional Slide Presentations” here that I highly recommend you to watch.

Other highly recommended resources to develop good presentations that I’ve read include:

Nonetheless, I won’t be repetitive since my approach here will be a bit different. This post is about the steps you take along your presentation slides lifecycle, and how to make them effective so that you can achieve your presentation goals.

Your slides can serve as a support to visually communicate and share whatever you want with your audience in a way that is not only easy to understand and visually attractive, but that will connect with them and their emotions, so they don’t forget your talk.

Make your presentation a Story

First, define the outline of your presentation, preferably through writing (as you can see in the image below, this is how I outline). Although I tried to avoid this step as I believed it was kind of a waste of time, it has proven later to be super useful not only for presentations, but also for posts, to keep from the start the focus of what I want to share, avoid missing any important aspect, and to make sure that I follow a “logical order.”

Presentation Outline Notes

The outline shouldn’t be that complicated; think of it as the “skeleton” or the main “headlines” of the presentation. Your outline includes the most important ideas that you want to share with the audience.

Once you have developed your outline, think about how you can use a story to share these ideas. A story will facilitate a lot your work as a presenter as it:

  • Will give you a storyline that will serve as a natural connector between your ideas and a logical, natural order.
  • Makes your presentation easier to share with the audience since a story is easier to remember.
  • Will help you connect with the audience by providing examples of common situations and characters that people can relate to, which targets their emotions.

Choose a story showing how the issue or challenge of your presentation can be solved by characters that your audience can relate to.

Keep your story simple, so you can easily represent it in your slides, and share an idea or action at a time, with a “scene” of your story in each slide.

Start by sharing the challenge or issue and develop your story by describing how your character (the one the audience can relate to) has solved it, and the pieces to take into consideration to achieve the expected outcome successfully.

If possible, try to be funny or use any type of phrases, jokes, or insights relevant to your audience. Humor makes a connection so that they know the presentation has been made just for them.

You can see in these two following examples how, in a presentation I did in KahenaCon in Jerusalem a couple of months ago, I thanked the audience at the end (as I had done also saying hi at the beginning) in transliterated Hebrew –they even applauded when I did it! Several months ago in Zaragoza, I started the presentation by calling out how the best square in the world was located in that city (since it’s called in Spanish “The Female SEO Square”):

Connect with your Audience

In Spain, I like to give football (soccer in the US)-related examples, featuring the Spanish selection when I want to build general agreement over an idea or when I want attention and to create controversy, I feature my own team (I’m a Barça fan) as the “good guys” or “heroes” and the rivals (Real Madrid) as the ones with issues. The followers of both teams in Spain are similar in size, and they’re well-balanced in the Spanish geography, so I know that I will target the audience emotions through the story.

Whatever the story and characters you choose, it’s important to develop all the different phases of your story from beginning to end, including:

  • Introducing the characters and their challenge, so the audience can connect with them.
  • Showing how you can solve the character’s challenge with the information you’ll share through your presentation in a story-like format, keeping the character around looking for answers and providing them.
  • Summarizing what you have shared through the story, reinforcing the most important aspects, and showing how you have achieved your story goal at the end of the presentation; basically, solving your character’s problem.

With my MozCon slides from the last two years, I introduced the characters that had a challenge that the audience could relate to:

  • Last year, it was an SEO who had been fired since the SEO project was not successful because of project management issues, saying it had not been his fault.
  • This year, it was an SEO who had been so successful in his project he had been asked to expand internationally to achieve more, but he had no idea how to do it.

These characters and their stories gave me a way to create an ideal situation to discuss SEO project management tips and International SEO best practices, which were the topics of my presentations, by overcoming their challenges and providing them the desired answers to their issues, which were the ones that I wanted the audience to learn and remember.

Share your story visually

Once you have your outline and storyline, you must think about the characters that will represent the ideas. It’s time to “put flesh on the bones” by selecting how the story and characters will look. This can be a bit tricky since it will depend not only on your preferences, but also on your audience (and, of course, the availability and restrictions of those images, photos, or designs that you need).

The story — your presentation — should be visual and keep the text content at a minimum, including only the most important idea, message, or tip on each slide.

For MozCon I chose Lego Star Wars last year since the audience tends to be a bit geek-oriented, and Yoda was the perfect character to give “savvy” advice to become a better SEO project manager. This year, I chose Lego Indiana Jones, since it was perfect to represent the “International adventure” to “conquer” a high ROI by following a treasure map with steps.

Last year at BrightonSEO, I used Sherlock characters and images for my presentation story, which was more relevant to the audience in the UK. It served me well to show the “research” process to identify the relevant aspects to optimize a mobile site.

At SEOnthebeach, I used references to Game of Thrones (which is also quite popular in Spain, and I was sure the audience will understand them), explaining how “winter was coming” to those who hadn’t been optimizing their sites to give the best multi-device experience, showing how to “prepare for winter” with guidelines and tips, and how at the end they could “send winter to hell and convert it in summer” by following my recommendations.

Connect your audience with your story

As you can see, this process is not just about identifying a good storyline and selecting characters to fit with your story from beginning to end. It’s about making sure your choices are already known by your audience so that you can connect with them.

For example, if you work with a great designer, you can design your own characters. Nonetheless, I think that using characters that are already known and liked by the public can make it easier for the audience to connect with your message. What is also important at this point is making sure that whatever you choose to represent your story is feasible for you to find or create the required images, graphics, videos, etc.

When I have an idea for a story and I’m not sure if there are enough images to represent it, I start searching in Google Images to identify the volume, quality and type of existing images, in general. I also get ideas for the story situations and scenarios by initially searching through it.

Once I’m sure there are enough and I’ve taken notes of the different type of graphics and images I will need to represent each of the elements of the outline I created, it’s time to find the images to use!

For this, I mostly rely on the Flickr Creative Commons search functionality:

Flickr Creative Commons Search

I also rely on Photo Pin and Compfight, which allow users to search images under Creative Commons licenses:

Photopin image search

Although this exercise is worth it, it is still a time-consuming process that you will need to develop over many days. Make sure to save all of the images that you have found on a specific directory on your computer and give them relevant, descriptive names so it’s easy to find them later.

Additionally, I use Evernote (and Evernote Web Clipper) to save on a text file the URLs of the images that I’ve found — so I can save them wherever I am, not only with my laptop but also on my iPad or iPhone — which is pretty useful when preparing the slides, and also at the end of the presentation (when you need to refer to the source of the images).

Keep in mind that everything needs to fit into your story to enhance the experience, from the colors you choose to the type of fonts you use. It is not only about the images.

You can use Colllor and Adobe Kuler to choose a palette of color to fit with the look and feel that you want to keep with your story. Just remember to have a good contrast between them.

To find fonts that are attractive, easy to read and also fit with your design you can use Font Quirrel, Font Zone, and 1001 Free Fonts.

To prepare the slides, I use Keynote — I’m a Mac user — but I have also used PowerPoint in the past. Whichever of these two tools you use, you will be able to generate PDF versions of your presentation, which I always do — and suggest that you also do and share with the event organizers, as a back-up — and are the ones that I always upload to Slideshare, since the fonts are always correctly displayed with them.

If you’re too nervous to start with a story for your next presentation right away, an alternative might be to start using them for your blog posts in order to give more room to explain and specify, and then take the stories to your presentations.

Expand your presentation slides

Don’t wait until the day of your presentation to start creating visibility for it, or only start using your slides after you’ve already presented. You can (and should) expand your presentation reach in many ways.

From writing a blog post about your future participation in the conference, or doing a related post sharing a bit about the topic that you will speak on at the conference, sharing beforehand is key. I did this with The International SEO Checklist I wrote for the Moz blog a couple of weeks before MozCon.

You can also share a preview of the slides with photos across your social network contacts, as I usually do on Instagram, starts creating visibility and buzz around the presentation well before the day you speak.

MozCon Slides in Preview in Instagram

It will require a bit more time, but you can also schedule tweets with the most important phrases of your presentation to be published during your session. Of course, you can always publish your slides to Slideshare (if you have a Pro account you can do it beforehand and keep the slides private until you start your presentation) and share it during your session if possible; if not, you can share right after you finish (be sure to include the hashtag of the event).

To expand your presentation slides’ initial reach, try creating additional resources to share when you’re speaking.

For example, a compilation of tools or posts, your own tool to help solve the problem that you targeted on your presentation, or a summary of the presentation content in a separate, easy to digest format (such as an infographic in HTML5 as I did with the International SEO Map and ROI Calculator) are all fantastic presentation supplements. Make sure you have these ready to share during or immediately concluding your presentation.

Expand your presentation visibility with additional resources

You can also follow-up with your presentation writing a post summarizing the experience, sharing more insights, embedding the slides there, or also extending the idea of the presentation to other formats.

For example, this year I recorded a Whiteboard Friday following-up with my International SEO presentation at MozCon (stay tuned for when it gets published!). Last year after my SEO Project Management presentation, I created an SEO Project Management Jedi Challenge, a quiz to assess what people had really learned during the presentation, which was a fun, different way to follow up with it in another format that could also be additionally shared in other platforms:

Expand your presentation visibility with additional resources

Of course, it’s important that you promote and share through your network (Twitter, Facebook, Google+, LinkedIn, Pinterest (if there are images), etc.). You can build all of these actions and assets before, during, and after the presentation.

Optimize your presentation Web presence

To build your presentation visibility in social networks, it’s always recommended to use the event hashtag when sharing it in Twitter, Facebook, Google+, etc., as well as to optimize the file names, titles, descriptions, etc. with the relevant keywords you want to rank for, whether you publish on Slideshare, your blog, or any other social network. It’s also important to add your Twitter handle and event hashtag to your own slides, so it’s always easier to refer and mention you when sharing it.

Beyond these well-known optimization tips, I found myself smiling when Will Critchlow mentioned adding Twitter handles to Titles or Meta descriptions during his presentation at Mozcon; I’ve been doing it along with the event hashtag when I publish any type of content related to a presentation.

As you can see, from the slides in Slideshare to the site I built as additional resource, all of them show relevant, descriptive keywords, along with my twitter handle and the event hashtag in the title and meta description. This is far easier to build more visibility and mentions related to your presentation:

Add Twitter Handle & Even Hashtag to the titles and meta descriptions of all your presentation related content

Additionally, you can create an easy and relevant hashtag specifically for your presentation and include it along the event hashtag and your Twitter handle, too, as I did with the SEO Project Management presentation last year:

Create easy to share hashtag for presentation

With a specific hashtag, it will also be easier to track how your presentation is shared and the traction that it takes on social networks, which is the next topic: Tracking and following-up with the results.

Track Presentation results & Follow-up

Remember that you can’t improve what you don’t measure, so when sharing your presentation slides and all related content, make sure to tag them (by using bit.ly and Google Analytics URL Builder) in order to identify how it has been shared through social networks.

Before MozCon, I registered as a PRO user of Slideshare, and I have been impressed with the additional features it has. If you’re going to produce a lot of presentations, I recommend you to give it a try, too. The benefits include the analytics functionality, giving information about each slide’s number of views, email shares, tweets, Facebook shares, favorites, Facebook comments and downloads, and information on the distribution of views per country and traffic source:

Slides Presentation Analytics

It’s also imperative that you measure not only the slides results, but also the impact that the presentation has made on the resources you’ve also built and, ultimately, to your site, from a conversion perspective.

You can use SocialCrawlytics to see which has been the most popular pieces of content from the web presence that you have built related to your presentation and where has been shared, as well as Google Analytics, to see the impact from a traffic and conversion perspective. This includes the additional volume of traffic and conversions generated by the presentation, which were the top referral sites, to which areas of your site the traffic went that day, what was the conversion rate, etc.

Traffic, conversions, shares from presentation resources and slides

You should also follow up with the feedback that you received from your contacts or anyone on the social networks or sites where your have shared the content related to your presentation. Ask the people you have more confidence in about what they liked or disliked about the presentation, what you could improve, what they would eliminate completely, and what has been their favorite aspect of it.

You will also know how well your presentation has performed not only from a social sharing, traffic, and conversion perspective, but also from a more “qualitative” perspective from which you can learn to become a better presenter and speaker and perform better next time.

Practice to become a presentation superhero

Finally, it’s important that you remember: don’t be too harsh with yourself at the beginning. Becoming a slides superhero takes time, experience, and hard work.

If you can do it, watch yourself speaking before your presentation (and if the presentation is recorded, watch it afterwards, too), so you can see what the audience saw and improve for next time.

This has proven to be difficult for me when I speak in English, since sometimes I still make some mistakes or don’t do it as naturally as in Spanish, and I’m very critical with myself. I know I need to practice more and remember to not focus so much on little trivial details that no audience member will notice or pay attention to, but to focus on the important aspects of how I share the story, move in the scenario, the speed of the presentation (I speak fast and when doing short presentations is actually something handy, but what I need to verify is that everything that I say is understandable despite the speed), that I coordinate well with the slides, and that I’m able to share the desired message with the audience.

I recommend that you start soon with smaller presentations, plan with time (this can be tricky depending with your agenda), and practice, practice, practice!

You’ll see how at the beginning that you’ll feel like a weird Spongebob Batman, but after a while, you’re going to build confidence when you create and share the story with amazing slides. With all that great feedback, you’ll soon become a real slides Dark Knight.

Now it is your turn. Which are your tips to become a slides superhero?


How Website Speed Actually Impacts Search Ranking

How Website Speed Actually Impacts Search Ranking

Google uses a multitude of factors to determine how to rank search engine results. Typically, these factors are either related to the content of a webpage itself (the text, its URL, the titles and headers, etc.) or were measurements of the authenticity of the website itself (age of the domain name, number and quality of inbound links, etc.). However, in 2010, Google did something very different. Google announced website speed would begin having an impact on search ranking. Now, the speed at which someone could view the content from a search result would be a factor.

Unfortunately, the exact definition of “site speed” remained open to speculation. The mystery widened further in June, when Google’s Matt Cutts announced that slow-performing mobile sites would soon be penalized in search rankings as well.

Clearly Google is increasingly acting upon what is intuitively obvious: A poor performing website results in a poor user experience, and sites with poor user experiences deserve less promotion in search results. But what is Google measuring? And how does that play into search engine rankings? Matt Peters, data scientist at Moz, asked Zoompf to help find the answers.


While Google has been intentionally unclear in which particular aspect of page speed impacts search ranking, they have been quite clear in stating that content relevancy remains king. So, in other words, while we can demonstrate a correlation (or lack thereof) between particular speed metrics and search ranking, we can never outright prove a causality relationship, since other unmeasurable factors are still at play. Still, in large enough scale, we make the assumption that any discovered correlations are a “probable influence” on search ranking and thus worthy of consideration.


To begin our research, we worked with Matt to create a list of of 2,000 random search queries from the 2013 Ranking Factors study. We selected a representative sample of queries, some with as few as one search term (“hdtv”), others as long as five (“oklahoma city outlet mall stores”) and everything in between. We then extracted the top 50 ranked search result URLs for each query, assembling a list of 100,000 total pages to evaluate.

Next, we launched 30 Amazon “small” EC2 instances running in the Northern Virginia cloud, each loaded with an identical private instance of the open source tool WebPageTest. This tool uses the same web browser versions used by consumers at large to collect over 40 different performance measurements about how a webpage loads. We selected Chrome for our test, and ran each tested page with an empty cache to guarantee consistent results.

While we’ll summarize the results below, if you want to check out the data for yourself you can download the entire result set here.


While we captured over 40 different page metrics for each URL examined, most did not show any significant influence on search ranking. This was largely expected, as (for example) the number of connections a web browser uses to load a page should likely not impact search ranking position. For the purposes of brevity, in this section we will just highlight the particularly noteworthy results. Again, please consult the raw performance data if you wish to examine it for additional factors.

Page load time

When people say”page load time” for a website, they usually mean one of two measurements: “document complete” time or “fully rendered” time. Think of document complete time as the time it takes a page to load before you can start clicking or entering data. All the content might not be there yet, but you can interact with the page. Think of fully rendered time as the time it takes to download and display all images, advertisements, and analytic trackers. This is all the “background stuff” you see fill in as you’re scrolling through a page.

Since Google was not clear on what page load time means, we examined both the effects of both document complete and fully rendered on search rankings. However our biggest surprise came from the lack of correlation of two key metrics! We expected, if anything, these 2 metrics would clearly have an impact on search ranking. However, our data shows no clear correlation between document complete or fully rendered times with search engine rank, as you can see in the graph below:

The horizontal axis measures the position of a page in the search results, while the vertical axis is the median time captured across all 2,000 different search terms used in the study. So in other words, if you plugged all 2,000 search terms into Google one by one and then clicked the first result for each, we’d measure the page load time of each of those pages, then calculate the median and plot at position 1. Then repeat for the second result, and third, and on and on until you hit 50.

We would expect this graph to have a clear “up and to the right” trend, as highly ranked pages should have a lower document complete or fully rendered time. Indeed, page rendering has a proven link to user satisfaction and sales conversions (we’ll get into that later), but surprisingly we could not find a clear correlation to ranking in this case.

Time to first byte

With no correlation between search ranking and what is traditionally thought of a “page load time” we expanded our search to the Time to First Byte (TTFB). This metric captures how long it takes your browser to receive the first byte of a response from a web server when you request a particular URL. In other words, this metric encompasses the network latency of sending your request to the web server, the amount of time the web server spent processing and generating a response, and amount of time it took to send the first byte of that response back from the server to your browser. The graph of median TTFB for each search rank position is shown below:

The TTFB result was surprising in a clear correlation was identified between decreasing search rank and increasing time to first byte. Sites that have a lower TTFB respond faster and have higher search result rankings than slower sites with a higher TTFB. Of all the data we captured, the TTFB metric had the strongest correlation effect, implying a high likelihood of some level of influence on search ranking.

Page size

The surprising result here was with the the median size of each web page, in bytes, relative to the search ranking position. By “page size,” we mean all of the bytes that were downloaded to fully render the page, including all the images, ads, third party widgets, and fonts. When we graphed the median page size for each search rank position, we found a counterintuitive correlation of decreasing page size to decreasing page rank, with an anomalous dip in the top 3 ranks.

This result confounded us at first, as we didn’t anticipate any real relationship here. Upon further speculation, though, we had a theory: lower ranking sites often belong to smaller companies with fewer resources, and consequently may have less content and complexity in their sites. As rankings increase, so does the complexity, with the exception of the “big boys” at the top who have extra budget to highly optimize their offerings. Think Amazon.com vs. an SMB electronics retailer vs. a mom-and-pop shop. We really have no proof of this theory, but it fits both the data and our own intuition.

Total image content

Since our analysis of the total page size surprised us, we decided to examine the median size, in bytes, of all images loaded for each page, relative to the search rank position. Other then a sharp spike in the first two rankings, the results are flat and uninteresting across all remaining rankings.

While we didn’t expect a strong level of correlation here we did expected some level of correlation, as sites with more images do load more slowly. Since this metric is tied closely to the fully rendered time mentioned above, the fact that this is equally flat supports the findings that page load time is likely not currently impacting search ranking.

What does this mean?

Our data shows there is no correlation between “page load time” (either document complete or fully rendered) and ranking on Google’s search results page. This is true not only for generic searches (one or two keywords) but also for “long tail” searches (4 or 5 keywords) as well. We did not see websites with faster page load times ranking higher than websites with slower page load times in any consistent fashion. If Page Load Time is a factor in search engine rankings, it is being lost in the noise of other factors. We had hoped to see some correlation especially for generic one- or two-word queries. Our belief was that the high competition for generic searches would make smaller factors like page speed stand out more. This was not the case.

However, our data shows there is a correlation between lower time-to-first-byte (TTFB) metrics and higher search engine rankings. Websites with servers and back-end infrastructure that could quickly deliver web content had a higher search ranking than those that were slower. This means that, despite conventional wisdom, it is back-end website performance and not front-end website performance that directly impacts a website’s search engine ranking. The question is, why?

TTFB is likely the quickest and easiest metric for Google to capture. Google’s various crawlers will all be able to take this measurement. Collecting document complete or fully rendered times requires a full browser. Additionally, document complete and fully rendered times depend almost as much on the capabilities of the browser loading the page as they do on the design, structure, and content of the website. Using TTFB to determine the “performance” or “speed” could perhaps be explainable by the increased time and effort required to capture such data from the Google crawler. We suspect over time, though, that page rendering time will also factor into rankings due to the high indication of the importance of user experience.

Not only is TTFB easy to calculate, but it is also a reasonable metric to gauge the performance of an entire site. TTFB is affected by 3 factors:

  1. The network latency between a visitor and the server.
  2. How heavily loaded the web server is.
  3. How quickly the website’s back end can generate the content.

Websites can lower network latency by utilizing Content Distribution Networks (CDNs). CDNs can quickly deliver content to all visitors, often regardless of geographic location, in a greatly accelerated manner. Of course, the very reason these websites are ranked so highly could be the reason they need to have high capacity servers, or utilize CDNs, or optimize their application or database layers.

Tail wagging the dog?

Do these websites rank highly because they have better back-end infrastructure than other sites? Or do they need better back-end infrastructure to handle the load of ALREADY being ranked higher? While both are possible, our conclusion is that sites with faster back ends receive a higher rank, and not the other way around.

We based this conclusion on the fact that highly specific queries with four or five search terms are not returning results for highly trafficked websites. This long tail of searches is typically smaller sites run by much smaller companies about very specific topics that don’t receive the large volumes of traffic that necessitate complex environments of dozens of servers. However, even for these smaller sites, fast websites with lower TTFB are consistently ranked higher than slower websites with higher TTFB.


The back-end performance of a website directly impacts search engine ranking. The back end includes the web servers, their network connections, the use of CDNs, and the back-end application and database servers. Website owners should explore ways to improve their TTFB. This includes using CDNs, optimizing your application code, optimizing database queries, and ensuring you have fast and responsive web servers. Start by measuring your TTFB with a tool like WebPageTest, as well as the TTFB of your competitors, to see how you need to improve.

While we have found that front-end web performance factors (“document complete” and “fully rendered” times) do not directly factor into search engine rankings, it would be a mistake to assume they are not important or that they don’t effect search engine rankings in another way. At its core, front-end performance is focused on creating a fast, responsive, enjoyable user experience. There is literally a decade of research from usability experts and analysts on how web performance affects user experience. Fast websites have more visitors, who visit more pages, for longer period of times, who come back more often, and are more likely to purchase products or click ads. In short, faster websites make users happy, and happy users promote your website through linking and sharing. All of these things contribute to improving search engine rankings. If you’d like to see what specific front-end web performance problems you have, Zoompf’s free web performance report is a great place to start.

As we have seen, back-end performance and TTFB directly correlate to search engine ranking. Front-end performance and metrics like “document loaded” and “fully rendered” show no correlation with search engine rank. It is possible that the effects are too small to detect relative to all the other ranking factors. However, as we have explained, front-end performance directly impacts the user experience, and a good user experience facilitates the type of linking and sharing behavior which does improve search engine rankings. If you care about your search engine rankings, and the experience of your users, you should be improving both the front-end and back-end performance of your website. In our next blog post, we will discuss simple ways to optimize the performance of both the front and back ends of a website.