Dress Rush

In this tutorial you will learn how to create an online pitch deck. We won’t be going into any specific details about how to design the deck, or how to do the basic HTML and CSS required, but we will be showing you how to implement the simple jQuery plugin we built to run the pitch deck interaction. If you’d like to find out more about why we did it and what the results were, read our recap here. 

1. Design the Pitch Deck

Start out by creating the design for your pitch deck using your favorite graphics editor. We used Photoshop, but depending on how much you plan on working with vectors, you may want to use Illustrator or Fireworks. Make sure you know how users will navigate through your presentation. Our plugin is set up to work with table of content links that are directed to each slide individually, and next/previous buttons.

2. Develop the Pitch Deck with HTML+CSS

You can create code that is as fancy or as simple as you want. On our presentation, we exported entire slides as images, rather than breaking them down into text/images. The only thing you need to keep in mind while coding is that each slide needs to be in an element that can be identified by a single class. By default, the plugin uses .slide to identify a new slide, but that setting can be changed if desired.

3. Make it awesome with jQuery PitchDeck

Now you’re to the easy part. The simple plugin we created is used to add the same functionality shown on our pitch peck. This plugin will add the following functionality:

• Assign links to animate to specific slides
• Assign links to animate to the previous/next slides
• Automatically update the link corresponding to the slide you are currently on
• Add keyboard left and right controls of the slides.
• Adds a simple label on hover to each of the top navigational links

Including the Plugin

To include the plugin, you will have to first download jQuery, Ariel Flesler’s jQuery.ScrollTo, jQuery Waypoints, and of course our plugin, jQuery PitchDeck.

Make sure to include all the plugin files in the head of your HTML document. To call the pitch deck plugin, it simply takes:

$(document).pitchdeck();

You can optionally change the default settings of the plugin. The settings are as follows:

• link_labels (default: false) - specifies whether or not labels will be added for each top link
• top_links (default: ‘.toplink’) - selector for the elements that will have the optional label on hover
• nav (default: ‘.nav’) - selector for the elements that will navigate to the slides
• slides (default: ‘.slide’) - selector for the slide elements
• duration (default: ‘1000’) - duration of the page scroll animation, in milliseconds
• easing (default: ‘swing’) - specifies the easing equation used for the page scroll animation
• next_button (default: ‘.next’) - selector for the next slide links
• prev_button (default: ‘.prev’) - selector for the previous slide links
• keyboard (default: true) - specifies whether or not to enable the left, right, and space keys for slide navigation

In order for the navigation links to work correctly, you must link them to the id of the slide you want to navigate to. For example, for slide 1 you would give the .slide element an id of “slide1” and for the link you would set href=”#slide1”.

4. Connect it to AngelList

If the goal is to get investors to request an introduction, you can integrate some cool tools to do this using a little bit of code from another 500 Startups accelerator company, Spinnakr.  

• Sign-up for an account on Spinnakr.com
• Go through the “Getting Started” process (answering some questions about your business). We said we were interested in “Fundraising.”
• At the end of the process, you get snippet of code that you can drop in the footer of your website.
• Spinnakr will then pull your AngelList details from your profile automatically and set it to display to your investors. You can customize how it appears and what information it displays.

• If you sign in to your account, you can also set the AngelList messaging to appear to visitors from other sources as well. For example, we displayed it to visitors from TechCrunch, SiliconAngle, etc.

5. Enjoy your very own awesome online pitch deck!

That’s it! Feel free to post any comments/questions on this post.

6. Share the love

If you found this helpful, plan to use it as a guide to build your own online pitch deck, or write about it on your blog, all we ask is that you provide a link back to this article. If you end up creating your, share a link to it here as well!

And, if you know someone getting married, in a wedding, or attending a wedding, please point them to DressRush.com and we promise to take care of them!  

7. Contact us

If you’d like to contact someone from our team, you can find links to our emails, twitter, and LinkedIn on slide 3 of our online pitch deck. Oh, and a special thanks to our friends at AppSumo for being so supportive!

Thanks!

♥ The Dress Rush Team

(Aaron, Sara, Matt, and Mike)

Last Friday, we decided to employ a different tactic to get the attention of investors than the traditional route that most current startups are expected to follow.  Instead of sending our deck out via email in a powerpoint or pdf, we thought we’d create a web version and share it on Twitter with our fellow 500 Startups accelerator companies and ask for feedback. A few minutes after posting the deck,  one of our friends at Redeemr checked it out, liked what they saw, and decided to post it to Hacker News. The next thing we knew, our pitch deck was climbing the charts, on its way to #2 on Hacker News and simultaneously going viral on Twitter.  

We received tons of awesome feedback, including serious props from other founders (a big thanks to everyone for their support)! Much of the positive feedback we received also came with requests to help other entrepreneurs create an online version of their pitch deck. It was humbling and flattering, and with all of the support, we wanted to think of a way to say thanks. So, we thought it would be cool to share the results from the last few days and to make the plugin we created for our pitch deck public, so that other startups can use it.  

Results
 
We’ve been bombed with emails, tweets, and friend requests since the deck went viral (the deck itself was viewed over 15k times on Friday and hasn’t slowed down since).  It has put Dress Rush on the map with other entrepreneurs, advisors, mentors, and investors here in the valley, and, yes, even all over the world.  Our AngelList followers doubled (100+ new followers) and we’ve had over 40+ people inquire about investing. I say this not in any way to sound pretentious, but rather to illustrate that sometimes, taking a risk and doing something unexpected can create results you wouldn’t have even imagined.
 
The coolest thing that it has done is opened up a conversation with some people that I’ve admired for a long time.  Noah Kagan, the founder of AppSumo (who we referenced in the title of our deck, called “AppSumo for Weddings” because of similarities in our model - not our products) reached out with some kind words and offered us some invaluable advice we may have never received otherwise.  

If you do traditional things, you are going to get traditional results. Creating something unique like DressRush’s pitch deck is how you stand out. However, pitch decks are just the beginning, making a successful business is the hard part :)

- Noah Kagan (Chief Sumo @ AppSumo)

It taught us that while entrepreneurs are, of course, mainly focused on making our own companies go, that there is an overall shared love of tech, innovation, and the desire for constant change and disruption that connects us and makes us want to help each other succeed. It’s awesome. 

To view the tutorial on how to setup your own deck, check out the Dress Rush Online Pitch Deck Tutorial.
 
Thanks again for all the positive feedback from everyone who checked out our online pitch deck!!

♥ The Dress Rush Team