Floodlight.io Blog

Make a Media Kit in Minutes with Floodlight. Visit Floodlight.

[floodlightapp]

The most important part of your media kit - social proof.

It's 2014. Time to step your game up. Start working with some bigger sponsors and earning the big bucks. 2014 is the year that all that hard work pays off.

So what can you do to stand out? Rise above the crowd.......!

While most people focus solely on traffic and followers on social networks, there is one thing that can really move the needle that is perhaps not as commonly focussed on.

Social proof.

Social proof is a psychological phenomenon where people assume the actions of others in an attempt to reflect correct behavior for a given situation.

In plain English, when people don't know what to do in a given situation, they turn to the people they look up to for guidance.

So why does this matter? 

Simple. Sponsors look for guidance from other sponsors for where to spend their advertising dollars. 

What this means is that you need to be able to show off a little. Name drop!

When working with a sponsor make sure that you ask them for a testimonial for your media kit. That way, you can put their (hopefully recognizable) logo front and centre with a nice quote from their media buyer. 

Morgan was great to work with. Super responsive and we saw amazing click through rates on our ads with her.

Now when another potential sponsor sees that you've worked with great brand x - they'll be more willing to spend their money with you too.

Do you use social proof to entice potential sponsors on your media kit? Send it to me at paul [at] floodlight [dot] io and we will feature it on the blog.

[floodlightapp]

Get your media kit ready for some awesome sponsors in 2014. Forget photoshop and emailing PDF's - let us help! Build a media kit in minutes that auto updates all your traffic stats and social reach and looks great doing it.  www.floodlight.io

[floodlightapp]

Continuous Deployment with Jenkins, Hipchat and Hubot

Here at Floodlight we are always trying to improve our development process and make things easier on ourselves. Jumping to a fully-automated testing and deploy system saved us some manual steps, improved our testing consistency, and most importantly was a huge win for our day-to-day morale.

We use an approach very similar to the one used at Github, explained in detail in this really good post by Scott Chacon. The most important piece of the flow is that master is always considered deployable—if you merged it to master, consider it live.

We have been using Jenkins from day one for our CI server, and it’s saved our bacon a number of times as we move fast and break things. Here’s how we setup Jenkins to deploy when the tests pass.

The Basic Overview

A branch is merged to master.

Jenkins is listening for changes on master and runs the test suite.

If tests passes, Jenkins automatically deploys master to production.

We live in HipChat during the day, so we made a Hubot script to enable/disable Jenkins’ continuous deployment. Hubot updates the room’s topic with the current state of CD.

Some assumptions:

You already have Jenkins up and running for your project and listening to master.

You use HipChat.

You have Hubot running.

Prerequisites:

This solution uses some Jenkins plugins, you should install them before proceeding.

Run Condition Plugin

conditional-buildstep

Parameterized Trigger Plugin

Jenkins Post-Build Script Plug-in

EnvInject Plugin

Steps:

Disclaimer: This solution is a bit duct taped together. It’s not the most elegant, but it has been stable and working nice for us.

The first step is to create a job to build the continuous deployment. This job will handle deploying your app to production. It could be as simple as an "git push heroku master" or a call to capistrano. The following is basic example of this:

Now, in our original repo (the one that just does CI), we want to build this new job when the tests are green. We could have used the parametrized build from Jenkins, but we wanted to have a way to control if the continuous deploy is enabled or disabled. So we created a conditional step that works like this:

Where the continuous deployment status script is the following:

We have a Hubot installation running in our architecture, so we can turn on and off the status of the continuous deployment easily. The Hubot script looks like the following:

Your Jenkins Dashboard should look something like the following, with both jobs setup:

Now every time you merge a branch to master, if all tests pass, the changes will be deployed to production immediately.

Have questions? Tweet us at @floodlightapp.

[floodlightapp]

Announcing Floodlight

Floodlight makes your Media Kit work for you. No longer a necessary evil, it's now an invaluable tool in your kit. Attracting advertisers, pre-qualifying leads, disseminating information and even enabling an advertiser to impulsively make a purchase — your Media Kit can do this and much more.

Websites have an increasing variety of ways to monetize their sites, and each site needs to find the right mix of products for their unique audience.

What hasn't changed with the introduction of all these new techniques? You still have to market your inventory to advertisers. Floodlight solves this problem in a stylish and easy-to-use way.

Making Skyscraper, we learned two important things.

First, both publishers and advertisers struggle to find each other. Many publishers are intimidated by the process of making sales, and advertisers find it difficult to commit the time and effort needed to continuously discover new publishers and audiences to engage with.

Second, while publishers crave tools that help them express their unique brand, advertisers prefer assistance handling the raw data and producing recommendations out of that abundance of information. It's simply how each side approaches the problem, and it works.

There's two ways to approach the discovery problem and help make a connection.

When a Publisher makes a sale to an Advertiser, they are pitching their influence, and as a default, pitching what makes them unique and able to return a positive ROI on the Advertiser's dollars. (There are only so many of those dollars to go around.) Branding, identity, communication and a sense of professional completeness help produce an attractive and well-received pitch. Advertisers understand this and appreciate the effort a Publisher makes to speak to their specific needs.

However (and it's a big however!), when Advertisers approach the problem of finding Publishers to work with, it's a two-step solution, and the first step has much less to do with the individual Publisher specifically. Audience is key — Advertisers want to filter, sort and whittle down the impossibly huge set of potentials using a multitude of data points about the websites where the inventory is displayed, but more importantly, about the audience the Publishers have the influence to reach. Once that population has been narrowed, only then does any particular Publisher's brand start to play a role.

Floodlight is the best of both worlds.

When a Publisher builds their Media Kit with Floodlight, they gain a powerful tool to make sales themselves, and without any additional effort also expose themselves to Advertisers that otherwise may have never found them. For the first time ever, Advertisers gain access to an powerful way to discover the "fat middle" of Publishers that previously was too inefficient to work with. Access to new audiences enables Advertisers to reach heavily engaged niches around the web, and Publishers are able to better extract the value out of their hard work, enabling them to grow their businesses on their own terms.

Want Early Access? Say Hi!

We haven't opened up the gates just yet, but if you'd like to be one of the first to use Floodlight, swing by Floodlight.io and sign up for early access.

[floodlightapp]

Introducing Imprenta - A Rails Static Pages Publisher

Last week, I posted about our solution to publish static pages within Rails. I decided to take it to the next level and create a gem out of it.

I took inspiration from Thoughtbot on how to create a clean configuration interface for Imprenta. They have a good blog post where they explain the logic behind it. Our approach ended up very similar to the one they use in Airbrake.

Next, I stripped out our initial native implementation and recreated it as a gem. This was simple until I got caught up on how to hook our controller methods dynamically into the application when Imprenta loads. The solution turned out to be quite straightforward.

Currently in Floodlight, I use the local file system to hold and serve the published pages, but we'll need to support a variety of storage mechanisms (e.g. S3/Cloudfront), both for our own future needs and to make Imprenta a more useful tool.

I thought this task would be trivial at first glance, but there was a catch. Imprenta's goal is to serve the static pages within the domain of the app that installed the gem. This means I need to proxy requests to S3 through our app, otherwise the user will end up on an S3 URL.

However, this approach will have a tremendous impact on performance. We couldn't allow this. We thought about different approaches. Skip supporting S3? Use memcached? Redis? They all had their benefits and their drawbacks. For instance, I could have used memcached, but this would have required me to implement a way to recover from the cache miss for published pages.

The tools that already exist in the community came to my help. When using S3 as the storage provider, if there is a reverse proxy running in front of the application, it will only hit S3 when the page is not cached in the proxy. If you already have a reverse proxy (Varnish, Squid) in your architecture, you don't need to do anything and Imprenta will work out of the box.

In case you don't have a reverse proxy, you can get the same results using something like rack-cache.

Given that Imprenta already provides an easy way to hook in different middlewares, it is straightforward to use rack-cache with Imprenta:

To wrap up, Imprenta is a gem that helps you publish and serve static pages within Rails. To publish a page inside a controller you can use the following:

Then in your routes:

For a more detailed explanation of how to use the gem, please visit Imprenta's Github page.

Like this post? Vote it up on Hacker News!

[floodlightapp]

Publishing Static Pages With Rails

Goal: Serve a Static Page for a Custom Subdomain

Website publishers can make a Media Kit in minutes with Floodlight. In a nutshell, they choose and customize a set of content widgets to craft the ideal message to promote their site. Once they’re ready to “go live”, they publish their Media Kit and it becomes accessible to the public via a custom subdomain on floodlight.io, or their own custom domain.

Speed is a key goal for our Media Kits, so we want to save the published Media Kit as a static page to serve as fast as possible from Apache, and eventually a CDN.

How we did it using inspiration from Rails

This problem has been solved in two different places in Rails. Serving cached pages and serving static files. When in doubt, go to the source. We took a look at how Rails serves static pages (when you open something from public/) and also how the actionpack-page_caching gem works.

When a user publishes a Media Kit we need to cache that content in the same way Rails does when it caches a page:

Since Rails 4 no longer includes cache_page in core, we decided to strip what we need from the gem instead of adding a dependency:

So, this is good. We have one part of the equation solved—Media Kits are page cached for speed. Now, how do we serve the Media Kit? Again we’re taking inspiration from what Rails does to serve static files. We need to have a Rack middleware that handles the requests and looks for the static file:

Nice! Now we have a way to publish and serve static pages within Rails. However, this code doesn’t feel right. How do we handle a 500? How do we send errors to our error tracker in production? It would be nice if we have a way to hook middlewares to our rack to enhance its behavior in any way we might need. Back to Rails we go:

Now, everything works as it should and we can extend functionality via middleware as we need it. This is how we are publishing our Media Kits at Floodlight. We shaved over half the time off serving a page — from 400ms to less than 200ms on average. This is good enough, for now. When we need to scale this solution, we’ll publish the pages to Cloudfront instead of our servers and change the rack to serve from the CDN. This change will require only a few lines of code and the performance will be even better!

[floodlightapp]

The smaller the community, the greater the influence.

[floodlightapp]

Brand New You

Editor's note: Our guest blog today is from Laura Helen Winn, interaction designer at Smart Design and creator of Form & Future.

When you hear the word ‘brand’, what comes to mind? Logos? Colors? Name brands like Coca-Cola or Amazon?

“A brand is a person's gut feeling about a product, service, or company. It’s not what you say it is. It’s what THEY say it is.” Marty Neumeier, The Brand Gap  

Everything I know about branding, I learned from Marty Neumeier. Marty’s ideas became popular because brands are the way people perceive you. Luckily, you can be proactive in defining your brand, and communicating your brand visually with your identity.

Defining Your Brand

Defining your brand will help you narrow your focus, and strengthen a connection with your readers. Writing this is similar to writing an elevator pitch. Ask yourself these questions: “Who am I, what do I do, and why does it matter?”

I asked myself the same questions when planning my blog, Form & Future, and came up with this answer:

Form & Future is a journal for new designers and events for new makers. We interview designers and artists about how they got started, what they love about their craft, and their advice for people finding their passions. Form & Future fosters a community of encouragement and knowledge-sharing that gives beginners an opportunity to ask questions, and makers a moment of reflection.

Designing Your Blog

Once you've defined your brand and how you'd like to be perceived, you need to design your blog. Keep in mind that you don't need to reinvent the wheel. You just need to learn enough about design to set your blog apart.

Do Your Homework

Look at all blogs that you read, and start to assess their visual components. What colors and fonts are being used? Does the blog use illustration or photography in a way that catches your eye? Do you read more blogs with a clean white background, or do you prefer a bit of texture? Once you look critically at your favorite websites, you'll be more comfortable designing your own. When you're starting out, it's totally okay to tweak an existing blog theme with your own flavor.

Get Some Help

Ask a designer friend for help with your identity, and keep it light. A simple logo, accent colors, and savvy font selection will go a long way in setting your blog apart from the rest.

If you want to invest a bit of money into your brand, you can seek out professionals and semi-professionals at 99 Designs, where designers submit their take on your creative brief.

Resources

Defining your brand and designing your identity will strengthen your blog and help you look professional. If you live in San Francisco, I highly recommend taking Nicole Delger's Brand Basics class at Makeshift Society. In this class, Nicole will take you through the basics of building a brand from the foundational (telling your story) to the exceptional (creating an amazing customer experience). Structured as a “Branding 101, 201, and 301” lesson, you’ll get a broad overview on how each area of your business development informs and guides your marketing message.

If you can't make the class, I highly recommend Marty Neumeier's Innovation Workshop Video. Marty gives you the low-down on brand insights. Throughout the video, you'll complete exercises to help you determine what you're offering the world, and why it matters.

No Pressure

Branding is not a decision you’ll make for the rest of your life. Your brand will evolve alongside your blog and business. Every now and then, take a step back and ask yourself the three magic questions, “Who am I, what do I do, and why does it matter?” Keep answering these questions, and you’ll stay true to your vision.

[floodlightapp]

Put Your Best Image Forward- Part 2

Editor’s note: Today we feature a guest post by our friend, Sarah Deragon, talented photographer with Portraits to the People. 

As you read earlier this week, in Part 1 of this post, a great photo makes a huge difference, so if you’re considering investing in one we have some advice for you: 

Hire a professional: Your best friend might take the most amazing photos of farmers’ market produce on her point and shoot camera, but a headshot photographer she is not. A professional headshot photographer knows what time of day the light is most flattering, they can advise you on what to wear, and they can guide you into poses that will make you feel natural vs. looking like a cheesy catalogue model.

Choose wisely: If you look at a photographer’s portfolio and aren’t wowed by their specific style, keep looking! You’ll have to live with these images every day on your website, as your social media avatar, and on other collateral. Your headshot should be as awesome as you are!

Prepare to invest: A good headshot should cost you between $300-500. Sure, you can probably find someone on Yelp offering headshots for less, but then you will probably end up paying for it down the line with either a lame photo or worse-case-scenario, be traumatized by working with someone less than professional.

Your photographer should get to know you: The best headshot photographers want to know who you are and where you will be using these photos.  At Portraits to the People, we have an extensive questionnaire that is a key part of our process. Through the intake form, we find out where you’ll be using these photos, if you need them in color and/or black and white and what kind of vibe you’re going for in the images. Therefore, it’s easier to recommend outfits, we can help you find the perfect graffiti wall as a background, and will make sure you have plenty of different options to choose from. 

Put your new headshot to work: We embed metadata in our clients’ images, so when they’re posted online, they’ll appear immediately in Google. If you post your photo on your site and use that link when you post online – to your blog or others’ – your new photos will rise to the top of those search results in no time. Cool, right?

A professional headshot demonstrates that you take yourself seriously and encourages others to take you seriously, too. Take a look at look at the Portraits to the People portfolio to get a feel for what’s possible!  

[floodlightapp]

Put Your Best Image Forward- Part 1

Editor's note: Today we feature a guest post by our friend, Sarah Deragon, talented photographer with Portraits to the People. 

A Google search is increasingly the first stop for people who want to know more about you, what you’re about and/or to learn about what you do. Love it or hate it, your own face is likely the literal face of your brand, especially if you have a blog, are a crafts person, small business owner or consultant.

You’ve got just a few seconds to make a first impression, so why not make it a good one with a high quality professional headshot? Neither a selfie in your bathroom mirror nor that Instagram taken at a party last year really convey the kind of authority or approachability you want to professionally project. Having a professional photo is a big step in the right direction when it comes to taking yourself seriously as a blogger, small business owner, or professional business person.

At Portraits to the People, we have a package specifically for folks who are the faces of their business (having an amazing LinkedIn photo never hurt anyone) called the “not-so-corporate headshot.”

Our clients are lawyers, opera singers, lifestyle bloggers, professors, startup founders, yoga teachers, therapists, life coaches, lawyers and consultants--and we provide them with an authentic and striking portrait of themselves to use on their various communications and social media networks.

Now that you know why it's important to have a great first impression, stay tuned in, we’ll share some of our key tips next week in Part 2 of this post.

[floodlightapp]

Give Your Readers a Voice with Seesaw

It can be a challenge to create interesting content that your readers want to comment on. But the good news is that there are other options to ensure you get engagement on your blog.

One of our favorite alternatives out there is Seesaw, which provides a great embeddable voting tool. Seesaw helps you gather “opinions from friends when you need them most.” But aside from your friends, it’s the perfect way to get quick and easy feedback from blog readers.

Seesaw lets you embed up to four options into a simple, visual polling tool. Sign-up isn’t required to vote, and the results are displayed instantaneously. Your readers are now just one quick click away from participating - no more daunting comments - and you can slowly build your relationship with more readers.

A great example of this is Melissa Esplin’s Draw It, Sew It series. She gets her readers to vote on what she creates next, bringing them back to see what she creates based on their input.

@melissapher: Dramatic (yes) or subtle (no)? #sewing #fashion #swimsuitcoverup #diy

You can show off product choices, project ideas or dinner decisions and give your readers an easy way to participate.

Let us know other apps you use to encourage reader feedback!

[unionmetrics]

When’s the best time to post to Tumblr? 

We’ve been consuming the Tumblr firehose for more than a year at Union Metrics. In that time, we’ve processed more than 40 billion Tumblr posts, reblogs and likes! That’s billion. With a B.

We’re often asked when the best time to post to Tumblr is. So to answer that question, we analyzed more than 6 billion Tumblr activites (posts and notes) from the past two months to figure out when Tumblr is most active, and what that activity looks like over time. 

We’ve found that weekends are the busiest days on Tumblr and Sunday is the most active day overall. Nights are the busiest times, no matter the day of the week. Post activity is at the highest at 4:00 pm EDT; notes peak at 10:00 pm EDT.

The heatmaps show Tumblr post and note activity; each square shows the intensity of activity during that day and hour. The darker the color, the busier that hour is. 

So, what can you do with this info? Well, Tumblr is more active at night, so you’re more likely to have a bigger, more engaged audience then. Particularly later at night, when the highest reblog and like activity happens. But if you want less competition, there’s not much going on in the mornings, so you could give that a shot. If you’re a brand or business, you should consider scheduling content outside standard US business hours, especially on the weekends when more people are spending more time on Tumblr. This is particularly important, because compared to other social networks like Twitter and Facebook, Tumblr is much more active on the weekends. 

Want to see what works for your blog? Sign up to get on the waitlist for our new Union Metrics for Tumblr account!

Full-sized version here. 

[floodlightapp]

Great insight into when to post on tumblr. 

[floodlightapp]

Advertisers, let us find great sites for you.

At Skyscraper, we've built some of the best tools for publishers to be able to create and sell ads on their sites. We're constantly working to exceed our publisher's expectations and we're continuously rolling out new features that make it easy for these publishers to make a living doing what they love. 

The next logical step for us was to start thinking about the how we can help advertisers. When we talk to advertisers, we hear the same thing over and over again.

Bloggers influence our customers everyday but we have no idea which sites to advertise on, or where to find them.

That's why we're really excited about a new feature we've just rolled out. 

Skyscraper Advertiser Matching.

We wanted to make sure that we were taking a really active roll in matching the perfect advertiser to the perfect publisher.

As an advertiser, you can now fill out a short questionnaire and tell us what you're looking for, and our little robots will go and find you the perfect sites to advertise on. All you have to do is sit back. In just a few minutes, you're inbox will be full of new advertising opportunities for your brand. 

In moments, we'll send you a curated email with links to the publisher's site, and their media kit, so you can buy ads in seconds. Stop spending hours scouring the web for great sites, and let us do the work for you.

What are you waiting for? Discover some of the world's best sites today.

[floodlightapp]

Summer is sexy.

Who doesn't love summer? It's full of fun, friends and plenty of inspiration! It's also that perfect time of year to start that blog or website you've always talked about and dreamed of.

Well now, the guys at (mt) Media Temple are making it a whole lot easier. They have just announced their Summer of Success program to help you grow your online business. 

Not only are they offering amazing hosting packages starting as low as $20/month but they have partnered with some of the our favorite companies to offer great discounts for (mt) Media Temple customers.

We're super excited to be a part of this awesome program to help you grow your blog/business with great companies like Creative Market, Optimizely, MarketGoo and Treehouse.

Click here to learn more, and hurry, this ends soon :)

[floodlightapp]

Celebrate Independence Day with Skyscraper: Featuring Morgan of The 818

We hereby adopt Independence Day as our day of celebration -- because Skyscraper is all about freedom and independence.

One wonderful example comes from our friend Morgan at The 818, who has been using Skyscraper to manage her ads for the past month with amazing results. 

Although she enjoyed her time with ad networks, Morgan felt she had reached a point where she wanted to manage her own growth. In the short time that she’s been using Skyscraper, she’s seen her ad sales triple. 

We’re so happy to say that Skyscraper allows her to control not only the advertisers using her platform, but also her freedom to work directly with advertisers on content and programs. This ensures her blog content is tailored specifically for her readers.

Take a look at Morgan’s custom Media Kit, created through Skyscraper. Get yours now - and we’ll give you an Independence Day special*!

*Note regarding the Independence Day special: If you sign up for and get Skyscraper installed between now and July 4th, 2013 at midnight PT, we’ll drop our fee from 15% to 10% for the first three months. Just use this special link to sign up. 

[floodlightapp]

Skyscraper is hiring a UI/UX Engineer - is it you?

Who you are

Quick Learner: You can jump in the deep end. We’re running the race so to speak and we need you ASAP.

Communication: You can articulate your thoughts and you’re not afraid to ask questions. If you’re comfortable writing and teaching (blog posts, speaking), even better. Your code is clear and your comments make it even more so.

Pragmatic: You have excellent intuition for when a bit of duct tape gets it done for now and when it makes strategic sense to do more architecting.

Architecture/Organization: You’ve worked on large projects and have well-formed opinions on how to organize code in a large application and when implementing a services-oriented architecture. Ideally you have experience as a full-stack generalist but your passion is all things front-end.

You care equally about icon web fonts, Sass optimization, and the pros and cons of <canvas>, as you do third-party javascript, websockets and promises.

You will play a major, decision-making role at Skyscraper. We highly value communication skills—you can articulate your hypothesis quickly, defend it as necessary, and execute on it. Together we’ll own the results and will iteratively improve them.

You’re fast without sacrificing quality, except when it makes pragmatic sense and everybody understands the technical debt.

You’re tolerant. You’ve been on this rollercoaster before and understand the compromises made in a never-fast-enough startup environment.

You’re curious—learning fuels you, but you’ve got the focus to not chase after every shiny new framework.

You want to give back to open source. We wouldn’t be here without standing on the shoulders of giants.

Must have

HTML5 / CSS3 plus Sass

D3.js or similar charting library

Real-time partial HTML updating (websockets/node/pusher/faye)

Javascript testing [mocha, jasmine]

Nice to have

Ruby on Rails, .erb

Front-end javascript framework [backbone, angular]

BEM-style OOCSS

Responsive web design

About Skyscraper

Skyscraper is where advertisers and publishers meet to do business. We offer publishers tools to manage their revenue streams and create new ones. We enable Advertisers to discover new sites and targeted audiences to promote their businesses to.

We're funded, growing fast and need amazing people to help us deliver our vision.

Team

Currently we're 3 people.

Paul is CEO. As he puts it, he "makes sure there is air in the tires". Responsible for making sure everybody is on track, on the same page, and able to execute at their highest level.

Jacob is CPO. Responsible for product vision/management and front-end design/development.

Rafael is Lead Dev, back-end. Responsible for the applications' behind-the-scenes machinations and lead firefighter when something starts to smoke.

How we work

We're distributed with a nucleus in San Francisco and another in Vancouver.

HipChat is our command center, Sprint.ly organizes tasks and Github is for code management.

We're receptive to ideas—anything that makes us more efficient, we're likely onboard with.

[floodlightapp]

Wordpress and Skyscraper sitting in a tree........

Are you on Wordpress? If you said yes, we have a surprise for you. Today we are super excited to announce our Wordpress plugin. It is designed to make installing Skyscraper and making an advertise page even easier.

Here's how it works.

It's super simple.

All you need to do is create a Skyscraper account here and then head to the install page.

Click the "Download Wordpress Plugin" button. You'll be sent over to Wordpress to download it.

Once you've downloaded the plugin, head to the settings menu in the left sidebar of the Wordpress admin panel. You'll see Skyscraper at the very bottom, click that.

On the Skyscraper install page, grab your site ID at the top of the page. Insert that ID into the Site ID field in the Wordpress admin panel.

Make sure you check the box to activate the Advertise Here page and save the changes. 

That's it - you're done! Skyscraper will automatically add an advertise page to your blog so advertisers can buy ads directly on your site.

Note: you'll still need to create your ad spaces and plug them into your site. You can do that here: https://www.skyscraper.io/ad-spaces

If you have any questions, please don't hesitate to give us a shout :)