Heya, and welcome to the final part in our series on creating websites for your web show or series.
This week, we’re going to be talking about running one final test - but it’s a test you really want to be sure your site can pass.
Hoping your series will go viral? Or pitching to sites like Digg or major press outlets? Then you need to make sure that if you get that sort of exposure your site doesn’t let you down.
Checking your site is Digg-proof
Load testing - testing how well your site will cope if a whole load of people suddenly want to read it - used to be a pain in the ass if you weren’t a techie. Does “ab [ -A auth-username:password ] [ -c concurrency ] [ -C cookie-name=value ] [ -d ] [ -e csv-file ] [ -g gnuplot-file ] [ -h ] [ -H custom-header ] “ sound like your idea of a fun afternoon?
That was a problem, because normally the first sign you’d have that your site might not be ready for a big traffic surge would be when a large site mentioned your series, and your mood went from “woohoo!” to “Oh, god” in seconds flat as your site became totally unresponsive. It happened to me in the summer of 2006 when my show BloodSpell was mentioned on the huge blog BoingBoing - five minutes later, all that could be seen of the BloodSpell website was an error message.
(There was a happy ending - we managed to dive into the website code and fix it before we lost too many visitors, and the site subsequently stood up under a whole load more press attention as BloodSpell became remarkably successful. But I digress.)
Why does a perfectly functional website suddenly go pear-shaped? Well, there are a number of reasons, and they all boil down to inefficiencies that you might not notice when the site’s not getting many visitors, but that become extremely obvious as soon as the traffic mounts up. Most notably, Wordpress websites do a LOT of database calls, and there’s only a fixed number of those that your server can handle a second. Much more traffic = many more calls = overloaded server = badness.
(That’s why we added a cache plugin in part 2, for those of you who have been following along.)
Fortunately, these days it’s easily possible to simulate a major traffic surge, thanks to the free service provided by a site called Load Impact. These guys started in the Hacker News community, and the service they provide is very cool. For free, they’ll simulate up to 50 simltaneous users hitting your site, and show you whether it holds up. (They also offer a paid service that will simulate a lot more, but unless you’ve got J J Abrams directing your series, you won’t need those sorts of numbers.)
Running a test with LoadImpact is simplicity itself - I recommend you start one now if you already have a website. Just open a new tab, load up the Load Impact website, type in your URL, and hit “start free test” on the next page. It may take a little while to get going, but it’ll get there.
What do the results of the test mean?
50 concurrent users might not sound like a lot, but it’s a lot. A few weeks ago Guerilla Showrunner was featured on the front page of Hacker News, one of the bigger traffic sources out there on the Internet right now. We had something like 10k visitors inside a day - a number that is pretty comparable in my experience to the numbers you’ll get from the front page of BoingBoing or Digg, or other major showcase sites. I’ve not been featured on Reddit, unlike the others, but I believe you’ll get about 7k from them. In short, you’re not going to get a lot more than 10k visitors from any single traffic source - unless your series becomes genuinely newsworthy for sites like the New York Times, a 10k bump in a day is about the most you’ll ever see.
That 10k bump works out at… wait for it… about 8 concurrent visitors at any one time if they’re spending about 3 minutes on your site. In order to get up to more than the 50 concurrent visitors you’re testing through LoadImpact, you’d have to either be looking at more like a 50k bump (and there are NOT a lot of places that can drive those numbers), or visitors staying for 15 minutes or more.
So, in other words, for most series, if your site performs fine at 50 concurrent visitors it’ll be fine for anything.
So, what’s a reasonable load time? According to Jakob Neilsen (who has some critics, but is as good an authority for this particular metric as anyone), less than one second is optimal, and less than 10 seconds is vital. From my personal experience, I’d say that a site should load in under 5 seconds to avoid losing impatient viewers. If your LoadImpact test is showing your site as well below that benchmark, you’re golden!
There are a hell of a lot of reasons why a site can run slow, but here are some of the most obvious fixes you could try:
Install a cache If your site has any dynamic content (content that’s being served up with code, rather than just a straight HTML site), you really need a cache - it’s a program that stores common user requests and runs them much faster than if the program was just running each of them one at a time. If you’re running Wordpress, this is pretty simple: download the plugin HyperCache and install it. If you’re running a custom site, talk to your developers - it’s very easy to add caching using both Ruby on Rails and PHP, two of the most popular coding languages for the Web.
Check your cache is running This one bit me when I was putting together the test site for this series of articles. If your site seems to be running slowly, check your cache is working. For Wordpress, go to the Admin panel, then Settings, then the Hypercache tab, and check there are no error messages there. Most likely you’ll have set your file permissions wrong - when I fixed this, it reduced my load times from upward of 10 seconds to 2 seconds.
Check all the external files you’re serving. Wordpress plugins are particularly good at slowing a site down if they have to load a Javascript or other file from an external site. Try disabling all your plugins except your cache, and rerunning the test - if it’s suddenly a lot faster, one of your plugins is causing the slowdown. Re-enable them one at a time. If you’re not using Wordpress, check any Javascript or image files you’re running from a site other than yours, and try temporarily removing them from your page. Suddenly speeds up? You’ve got your smoking gun.
Check you don’t have any HUUUUUUUGE files. Use the online tool at http://www.websiteoptimization.com/services/analyze/ to check the size of your front page as well as a bunch of other useful info. Frankly, page size doesn’t matter as much as it used to, but if you’re north of 200kb on your page, you might want to try slimming down some big images or big Javascript files. Over 2Mb is definitely alarm bells territory - something’s far larger than it should be.
Talk to your hosts. Most webhosts are more than happy to look into speed issues - frankly, if they ain’t interested when you say “erm, my site’s slower than a snail superglued to a tin of molasses”, you should look for another host. There are a lot of tweaks that they can probably implement to speed your site up - ask about your web server config in particular.
If all else fails, prepare a simple static HTML page containing your latest episodes, contact information, and a link to your RSS feed. If you do get a traffic surge, rename that to “Index.html”, rename whatever your current index file is, and stick your new “index.html” in the main folder of your website- it’ll act as a new, simple front page and handle the load better.
And that’s it! Now, you either know that you can handle a Happy Event, or at least you’re on the way to figuring out what’s slowing you up!
Any other tips for making sure your site’s ready for a serious Digging? How have your sites handled major traffic in the past?
Read more →
Other parts of this series : The Complete Guide to Setting Up Your Webseries Webpage
Hello and welcome to the third part in our series on creating your webseries’ webpage. (Yes, it’s a series on a webpage about making a webpage for a series. Meta, huh?)
This week, we’ll be looking at the final aspects of your website: setting up a design that will achieve the goals we set out in the first article, looking at customisations to Wordpress and Thesis that will let us do that, discussing whether to hire a designer (and how to get best value from them), and talking about how to tweak and develop your site so that it looks like it was professionally designed.
This article’s going to be going into a bit more depth than the other articles, and will be a bit more hands-on - however, it should still be skimmable.
How To Choose A Design
I’ve already written an article about this, which I’d heartily recommend reading if you get a chance. In summary, using lessons from the porn industry (which spends a lot of time and money figuring out the best way to design a site to attract visitors), I’d recommend a site with a trailer for either the entire show or the latest episode (depending on if your show is serialised) prominently visible when you arrive on the site, other episodes below that using pictures rather than text to “sell” them, a strong call to action next to the trailer at the top inviting your visitors to either subscribe or watch the full episode, a compelling description of the episode below that, and not much else on the front page.
Common tropes for a web series I wouldn’t recommend would include:
News page as the front page. New visitors can’t easily use your news, which is often full of production updates and similar things, to figure out what your show is about, and it means you’re not showcasing your best content up front.
Full episode on the front page Full episodes don’t contain the very best bits of your show, right up front. Sell your visitors on watching your show.
No textual information on the show. With no info on what they’re about to watch, many viewers won’t even click on your trailer, or won’t stay long. It’s all about persuasion.
No easy access to a subscription medium (email or RSS dedicated to the show). Twitter is great, but unless your twitter feed is very, very focussed, you’re risking losing readers who don’t like your other, non “new episode” twitters. Also, there’s a lot of noise on that channel. Go with a subscription medium, ideally push (email) and keep it clear of anything except episode updates.
For the rest of this article, I’m going to be working to produce something on the Divine Bitches mold (see the article above). So, we’ll be looking at a single column layout with a navigation menu below the logo, a teaser trailer below that, and then other episodes below that. If you don’t have a strong idea of what you want to do with your website design, I’d recommend that as a good basic approach.
Here’s the site that I set up as a test for this article: http://kamikazecookery.nfshost.com/ . It’s far from perfect yet, but it’s a good basic starting point, about where I’d expect to get to after the basic design setup I discuss below. I’ll discuss what you’d do to improve it in “So How Do I Make It Slicker?”, below.
Do You Need To Hire A Designer?
Do you need to hire a designer? Is that the only way to get a really great design?
Well, it depends on how great you want to go. A top designer will be able to produce something far nicer - and far more functional - than you’d be able to manage. People like the guys from Men With Pens (I’ve not worked with them, but I hear they have a fantastic rep) will create you an incredible design - but you’ll pay for it. Men With Pens’ design options start from $5k. Other equally good designers are a bit cheaper, but realistically you won’t come out with much change from $2k.
Now, don’t get me wrong - if you can possibly afford that, go for it. (I’m seriously considering hiring someone of that sort of status for Guerilla Showrunner right now - although it may come down to a choice between that and a new mocap suit for Strange Company). It’ll make you look a hell of a lot more credible, it will actually boost views, subscribers and business in general - Dave Navarro says his business nearly doubled after he forked out for a really slick design - and it’ll make your crew feel great into the bargain.
If you can’t - it’s worth checking out outsourcing sites, but you’ll have to put the time in to find a designer with a style that you really like. 99 Designs and Elance.com are both worth looking at. However, even here, you’ll pay more than you’d expect for a really awesome design, probably in the $1k range.
So surely it’s worth looking for some hungry student or dubious third-world outsourcer? No, not really. If you’re a reasonably visual person and you’re willing to put some time in, you’ll do a better job of coming up with a design that suits your website from the building blocks of Thesis and Wordpress than J. Random Designer will. I’ve tried hiring people on price for visual work a few times, and it’s rarely a good idea.
Sometimes, if you really search, and you know what you want, you can find a great designer who’s just starting out, and get a bargain. But it’s far from guaranteed. Overall, if you can’t pay at least reasonably well, well, and you have some or any skill, you’re better doing it yourself.
How To Customise Wordpress To Meet Your Needs
This is where Thesis, the custom theme I recommended in the last article, really starts to shine. You could use a free Wordpress theme if you like, but you’ll end up having to heavily customise it at the code level, and some features will be tricky to implement - I believe! I’ve never tried it, and I’d have to learn quite a bit about Wordpress theme design before I did.
In general, about 80% of the tweaks we need to make can be done within Thesis’ main interface. A few of the more cunning bits will need to use custom CSS and in one case custom code, through Thesis’ “custom” section.
However, don’t be too scared by this - in 90% of the cases below, I found out what I needed to do to tweak my design by Googling “Thesis” and whatever customisation I wanted, like “Nav menu below logo”, and then simply followed the instructions that Google threw at me!
Initial Thesis Tweaks
First up, don’t forget to set your site’s title under “Site Options -> Home Page SEO”. Make sure that any keywords that people might use to find your site (“Scientific Cookery”, “Geek cooking” and similar combinations in Kamikaze Cookery’s case) are in your header, but don’t make it sound unnatural. I went for “Kamikaze Cookery - Geeks cook. With Science.”. Fill out the Meta Description too - that’s what people will see in search results for your main site.
Now, under Design Options, there are a few tweaks we need to make. Set your Columns first. Single-column layouts seem to be becoming the standard for web series, and are what the Divine Bitches site uses - in general, I’d recommend them because they present the viewer with the least visual clutter and allow you to draw the eye as easily as possible.
Width should be around 900px these days, although you can change it if you have a specific reason to.
Under “Features and Teasers”, set the number of Features to either 1 or 2 - 1 if you’re running a show where people can jump in at any point, 2 if your show is arced or there might be other reasons you’d prefer a new viewer to start at a specific episode.
The “Features” are the episodes that we’ll have showcased at the top of the page, with a trailer and a description. If we’ve got two features, we’re going to showcase two episodes on the front page - the first or best entry episode, and also the latest one, thus ensuring that both returning and new visitors can easily find what they’re looking for.
Under “Posts”, set “Display Post Excerpts”. That allows us to show a teaser for a video on the front page and the actual video on a seperate page.
Set “Feature Box” to “Do Not Use Feature Box” - it’s not a feature we need.
That’s about all we need to do for now.
Populating your show
Now, we need some content before we can start customising. Use your show’s existing episodes if you already have them - otherwise, just grab some random YouTube videos in approximately the format you expect to show (Widescreen if you’re widescreen, roughly the same style or content, etc). Obviously, you’ll have to replace those with real content before you go live, but you can use random videos to make sure your design works.
You’ll also need some** thumbnail images** from the episodes - grab them from the videos using the image editor of your choice (Pause video, Print Screen, and crop out the image).
And you’ll need at least one** trailer** for the show - either use one you’ve got already or grab a random video, either one of yours or a completely random one. You should probably cut a trailer anyway if you haven’t got one!
Now, here’s where it gets a bit tricky. You’ll want the main body of your post to JUST contain the video you’re wanting to show - use the YouTube (or whatever site you’re hosting your vids on) embed code for now, with the width set to 40 px less than the width of your site, although later on you can substitute tracking code to let you get detailed stats from your videos at a later date (or now if you feel ambitious).
IN the “Excerpt” box further down the Wordpress page, add the following code:
<div>EMBED CODE<div style="float: right; padding-left: 10px; width: 380px"><h2><a href="LINK TO POST">View full episode</a></h2>
<b>EPISODE TITLE</b>
Length: EPISODE LENGTH
EPISODE DESCRIPTION</div></div>
Replace EPISODE TITLE, EPISODE LENGTH and EPISODE DESCRIPTION with the specific elements of your episode, of course. LINK TO POST should be replaced with the link to the current post - get it from the top of the Wordpress post page. EMBED CODE should be the embed code or tracking code for your trailer for the episode (or series), set to about 480 width if you’re using a 900 page width.
Finally, upload your thumbnail image using the upload tools at the top of the Wordpress Post page. Copy the address for the Medium size image (it’ll be obvious when you do it), and paste that into “Thumbnail Image”, about half-way down.
Repeat this process for every episode you have, or for 3 or 4 sample episodes if you’re just using test footage for now.
Once you’ve done that, take a look at your front page - it’ll look a bit of a mess, but the site will be starting to come together.
Tweaking The Design
This is where things start to get a bit personal. At this point, you’ll want to start playing around with and tweaking the various design options in Thesis and generally trying to make your site look as nice as possible.
Here are some suggestions for things I did to make my test site look nicer, and some tricks to make Thesis do things that aren’t initially obvious.
Fix Your Excerpts Initially, the most obvious thing about your page will be the ugly, ugly videos below the main one, cluttering up the page. Fortunately, this is easy to fix. Go to the Custom File Editor, and at the bottom of Custom.css, add
.custom .format_teaser .excerpt {display : none}
Now, go to Design Options -> Teaser Display Options, and uncheck everything except “Post Excerpt” and “Post Title”. You can drag-and-drop those two to change the order they’re in. Reload the page, and you’ll just have lovely, lovely thumbnails.
Add a logo. Pretty easy, this one - resize or otherwise edit your logo (you could add whitespace using Photoshop or another editing package to make it the same width as your page if you don’t want it centered) to the width of your site, then upload it through Thesis’ “Header Image” function. Now change Design Options -> Header to not show your site title or tagline as text.
Add a nice border This is a nifty effect - in Design Options -> Fonts, Colors and More -> Body (And Content Area), select “Add a cool shadow effect to your layout”. Does exactly what it says!
Put the navigation menu below the header image For a site design like this, you’ll almost always want the menu below the logo as a way to break the page up a bit (unless you’ve included a break in the logo image itself). There’s no menu option to do this in Thesis, but it’s simple to do with custom code.Go to “Custom File Editor”, and select “Custom_Functions.php”. You’ll be presented with a text document - where it says “add your code here”, or words to that effect, add
remove_action('thesis_hook_before_header', 'thesis_nav_menu');
add_action('thesis_hook_after_header', 'thesis_nav_menu');
That’s it - your menu will now be below your logo.
Hide unnecessary bits on featured posts You don’t need or want to show “Author”, number of comments (unless it’s huge), date, or various other things on your post. Go to Design Options -> Byline and uncheck all the options you don’t want - I’ve unchecked them all. Then go to Tagging, and deselect “Show Tags on Index and Archive Pages”.
Make your menu bar a solid colour I wanted a solid block of colour for my menu bar. Fortunately, this is really easy - in Custom.css in the Custom File Editor, simply add
.custom .menu {background-color: rgb(255, 102, 0)}
So, after all that, you should have something a bit like http://kamikazecookery.nfshost.com/ - not super-slick, but certainly usable.
So How Do I Make It Slicker?
After you’ve done all that and fiddled about for a while, you’ve probably got something that looks clean and acceptable, but certainly not as slick as the Divine Bitches site or anything like it.
Unless you have some serious hidden talent, you’re never going to get to the level of the slickest of the slick - after all, the top sites on the Internet are designed by people who spend their lives doing very little but obsessing on website design. I know a few of those guys, and they’re better than I’m ever going to be.
However, you don’t need to be in that top 0.1%, and as I discussed above, you probably can’t afford to be either. If you’re not in a situation where you can drop a couple of thousand bucks on your website, you can make a remarkably pretty and functional site up yourself just by taking the design you already have - which is already probably better than most non-professional efforts - and spending a day or so tweaking.
Here are a few tips for improving your design by yourself:
Get LOTS of feedback, and not just feedback from people you know. Certainly, ask for critiques and things you could do better from your friends, and from Facebook friends, and so on - but also put it out there in the harsh light of day. Ask for a crit on Web Series Network, or on IndieTalk, or on the forums for the tools you use. Find web design forums and - HUMBLY - ask for suggestions. Maybe even post somewhere like Hacker News or Reddit and ask for feedback there - it’ll be pretty harsh, but there are some very smart people out there, and often you only need one tip - “Reduce the font size”, “Put a gradient on the background” - to massively improve your site.
Play around Particularly if you’re new to webdesign, don’t be afraid to play. It’s reasonably hard to break your site permanently - try different colour schemes. Try changing border sizes. Mess around.
Read Books My number one tip for most things - read a book. Find a book on web design and read it. You’ll probably find half a dozen ideas - try them as you go. This is a great way to build up a skill too - although it ain’t fast. This is a good, free place to start.
Add some shots from the show One great way to spruce up a website is to use some graphics - and you’ve already got a great source of graphics in your show! Try using them as spacers - use a line of tiny thumbnails from the show - as background images - blurred a bit and spread out - or even use graphical elements from your titles for edges and corners. It’s amazing what you can do with a bit of time with Photoshop and some great images from the show.
Pay a great designer to do as much as you can afford You’re better off getting something from a great designer than everything from a below-average one. Find the designer you’d really like to have design your site - look at their portfolio and past work - and then ask them if they’d be willing to give you some suggestions for improving your site design, or a full critique, or even an image-based mockup you could work from. Negotiate! See what they can do for you.
I’ve never hired a designer for any of my series’ sites. At the end of the day, even if your site isn’t perfect or beautiful, if it lets people find your series and watch it, it’s doing the job you need it to do.
Next Week: Stress-Testing, Continuous Improvement, and More
Well, the good news is, if you’ve followed through that, you’re basically done! You’ve got a site, it’s perfectly capable of serving your series up to your audience, and it looks at least reasonably appealing and professional.
There are a few more things that you can and probably should do. Next week we’ll have the final, slightly shorter part of the series, where I discuss checking if your site can handle all the traffic it might suddenly get - including anything up to a mention on a site like Digg or Reddit - and how to improve things if it can’t. I’ll also discuss continuous improvement, testing, and how to keep making your site steadily better as your series grows.
But for now - you’ve got a site, or at least you know enough to make one. Woohoo!
What to do next:
_If you had any trouble with any parts of this article, or if you’ve got questions or suggestions on designing your series’ website, post them in the Comments below! _
_And if you felt you got some value out of this article, please hit the Retweet button below to share it with more people it could help! _
Read more →
Other parts of this series : The Complete Guide to Setting Up Your Webseries Webpage
Welcome back, one and all! In the last part of this monster guide to putting together a Web series Webpage, we ran through the building blocks of your site - what it needs to do, what you don’t need to do, and the basic engines and host for your site.
You could build a Web series site perfectly happily just using the resources from Part 1. But in Part 2, we’ll look at all the stuff you need to polish your site up and make it shine - make it pretty, make it usable, make it immune to traffic surges, and make it easily findable by people and search engines alike.
Wordpress Plugins - what you need and what you don’t
The beauty of Wordpress is its extensibility. You can find a plugin to do almost anything with the ‘press.
The disadvantage of that extensibility is that it’s very easy to try to do everything. And plugins aren’t free. Each one loads a bit of extra code into Wordpress, usually slowing it down at least a bit - sometimes a lot.
So if you’re not careful, loading a million plugins into the Press can leave you with a site that loads so slowly you can cook a meal before you view the front page.
Any time you add a new plugin, it’s worth reloading the page a bunch of times, or using some benchmarking software if you have it, to check that the site still runs fast enough for you. Some plugins are MUCH worse than others, and will slow your site to a crawl.
However, some plugins are just essential. In my opinion, you definitely need:
HyperCache. By default, Wordpress rebuilds each page as visitors view them and serves them up when it’s finished. That’s fine if you’ve only got a few people viewing the spike, but as soon as, say, your Web series hits the front page of Reddit, the strain of having to repeatedly rebuild the same pages will take your website down faster than being an non-Caucasian guy carrying electronics in the London Underground. A caching plugin means that Wordpress doesn’t have to do all that work - instead, the first time Wordpress builds a page, it saves that page and then serves it up to all subsequent visitors who load the same page. This test showed that HyperCache, the best of the bunch, speeded a Wordpress site up by more than 10 times.
Google Sitemap Generator. You want the Big G to be able to index all your pages as fast and efficiently as possible. A lot of that is taken care of with the Thesis theme, below, but one thing Thesis doesn’t do is generate a sitemap - a complete list of every page on your site, all nicely indexed for Google to pick up and run with. Hence, this plugin. It’s very simple, it’ll automatically let Google (and Bing, if you care) know about your series, and it improves your chance of random people finding your page.
Include HTML. You need this plugin for one very specific reason - if you don’t have it, it’s very hard to use the YouTube -> Google Analytics hack I talked about a couple of weeks ago. Since being able to get precise details on how far through your videos fans are watching is, quite frankly, the best thing since we stopped having to use Actual Film, you want this, you want it bad, and you want it now.
Tweetmeme button. There’s no shortage of argument as to what the best social media plugins to use with Wordpress are - some people will advocate great big things that allow you to share on any of 45 different social media sites, whilst others, like me, would prefer to suggest a simple one or two choices. I’m currently recommending Tweetmeme because it’s used by some very smart, plugged-in people, and because a good bit of research in everything from restaurant design to cognitive theory suggests that the more choices you give your viewer, the less likely they actually are to take an action. Hence, give them 40 social media sites, they’ll bookmark you on none of them. Give them one (or perhaps two if you can find a decent Facebook plugin - personally I haven’t yet) choice, and you’ll get more results.
That’s it!
A few plugins you DON’T need
SEO plugin All-In-One SEO is the big dog here. If you’re using the Thesis theme, which I recommend (below), all your Search Engine Optimisation is already done for you, and you don’t need this (frankly rather clunky) plugin. If you decide to roll your own theme or use a free one, you probably will need this plugin, though.
YouTube plugin There are a number of plugins out there perporting to make your YouTube embedding easier in Wordpress. I don’t recommend them because a) it’s not like it’s hard to begin with (Copy, Paste, Done), and b) if you use them you can’t use the YouTube->Analytics stuff.
And some that are up to you
Related Posts plugin or other blogging-specific plugins Top Tags, Related Posts, and similar things tend to get recommended in any article on Wordpress plugins. For a Web series, I’d skip them - Related Posts doesn’t make much sense for a drama series, and you’re likely not going to be tagging extensively. If you’re producing a non-drama info series, they might be of more use - however, be aware that Relateed Posts plugins in particular can be a bit heavy on the server (although they do give a nice SEO boost).
Most Popular Post plugin Again, depends on the series you’re making. If you’re doing something that can be watched non-sequentially, you might well get some utility out of a plugin that allows you to display your most popular episodes - research indicates it can boost the chances of a viewer staying around on your page. I’ve only just tested one of these myself, but currently it appears that Popularity Contest is pretty good.
Contact form. There are two reasons I don’t use a contact form on this or any site. One, I just like email - I prefer it as a user to those very anonymous contact forms that you always suspect just get routed straight to the circular filing cabinet (ie the bin). And two, believe it or not, there appear not to be any good contact form plugins for Wordpress that don’t cost the earth. I might want a contact form, but I’m not paying $39 for one.
What To Do With These Plugins
Installing plugins in Wordpress is pretty easy. Download the plugin (normally as a .zip file), unzip it, and then, when the time comes to upload onto your server, upload each plugin’s directory into /wp_content/plugins.
Then activate them through the Wordpress control panel.
Theme: Thesis
As you may have realised by now, I’m not a big fan of spending money where I don’t have to. However, I AM a big fan of spending money where I do have to.
You’ve set up the functionality of your site, or most of it, by now, but you’ll soon see that the default Wordpress design is kinda ugly and not well suited to a web series. Hence, you’ll need to customise the look of Wordpress - and the way to do that is through a “theme”.
Go have a Google on “Wordpress Theme”. There are a LOT of them. There are even thousands of free ones.
So why the hell am I advising you to buy not just a Wordpress theme, but one that’s decidedly not cheap ($87)?
Because it will save you a LOOOOOT of pain and hassle.
Thesis is, for starters, extremely customisable, and 95% of the customisation is through menus and drop-down lists. Most other Wordpress themes require you to edit CSS (Cascading Style Sheets), usually with no documentation, to achieve the look you want, and often aren’t very flexible or easy to use whilst you’re doing so. I’m very proficient with CSS and HTML - I’ve been designing websites since long before the former existed - and I still prefer using Thesis, because having the customisation options cuts hours at a time off my development.
There’s also a very active user community for the theme, meaning that answers to obscure questions are a quick Google away - again, as opposed to J Random Free Theme, where you might well be the only person using it seriously.
And it’s highly optimised for speed (notice this blog’s kinda fast?) and Search Engine Optimisation, meaning you don’t have to learn anything much about that particularly arcane playground.
So - you’ll need to buy Thesis. Once you’ve got it, you’ll need to unzip it and upload it to the wp_content/themes directory of your website. From there, you can select it from the Wordpress Themes panel - and when you do, you’ll find you have an absolute ton of options to choose from, a place to upload your logo, lots of ways to change how the site operates, and so on.
I’m going to recommend some design and operation settings in the third part of this series, but they’re just suggestions. You can design however you feel will best achieve your goals for the site.
Domain Name
You’re probably wondering why I haven’t talked about a domain name yet.
You can buy yourself a domain at pretty much any time during this process, via whichever host you’ve chosen. Once you’ve bought it, it will take a couple of days to become available for use, so earlier is better. Personally, because domains are so cheap (approx $10 for 2 years) I tend to purchase a domain as soon as I think of a project, well before I get to actually creating it - the Guerilla Showrunner domain, for example, was sitting around for 2 years before I started writing here.
I’d still recommend a .com domain if you possibly can. Other TLDs (Top Level Domains - .com, .net, .co.uk, etc) are available, but your audience will assume you’re a .com unless you make a really big point otherwise - and that’ll lose you viewers if you’ve actually chosen a .tv or similar.
Unless you’re doing something very complicated yourself, setting your domain up to point to your website will be very simple, and will be handled by your web host. It’s worth noting that both Dreamhost and NFS.net (see Part 1) will also provide you a temporary domain to work on the site even if you don’t have a domain name yet - so you can easily get your site set up and happy before buying a domain.
You’ll also want email for your domain name - [email protected], etc. Now, you can run an “email server” on the same machine as your website, but - and I speak from experience here, having done it for many years - that way lies a pain in the ass so royal I think it’s having a wedding in London this month.
If your website goes down and you’re hosting email on that machine, you can’t get your email. Yes, your WEBSITE crashing means your email stops working. This Is Not Good.
Worse, any email anyone sends you will bounce. You’ll be panicking and running around from the moment it drops - or worse, from when you realise it’s been down for six hours and you’ve lost the mail from your sponsors you had to reply to NOWNOWNOW.
Instead, I’d recommend setting up a free account on Google Apps and running your domain’s email through that. It’s very user-friendly, and it’s extremely reliable. Even better than that, its reliability is totally out of your hands, so you don’t have to worry about it at all. I’ve been running all my domains this way for years, and I’m very happy with the results.
Google Analytics
You need to know what’s happening with your website. It’s as simple as that. You need to know how many people are coming to see your show, from where, when, why, and how much of it they’re watching.
For that, you need to sign up to Google Analytics. There are other analytics programs out there, but Google’s one is free, very usable, and stable as hell.
Once you’ve signed up, it’ll give you simple instructions to add your first domain. Thesis already has a dedicated section in its setup for analytics, so simply take the code that Google provides and paste it in there. And you’re done.
I’d also recommend you set up YouTube analytics, as I discussed a while ago - but we’ll talk more about this in the next installment.
Putting it all together
So you’ve downloaded, bought, or otherwise aquired all that lot - how do you get it going?
Here’s a quick runthrough. I don’t have the space to go into massive detail, but hopefully this should get you started.
Sign up for webhosting. Get the domain name of your choice at the same time.
Create your first site on your webhost, using your host’s control panel (should be fairly self-explanatory)
If needed, request a MySQL (database) process to be started for your site (Sounds a bit yikes, but don’t worry - your host’s control panel will have options for this if needed)
Create a new database for your Wordpress install through your host’s control panel - call it whatever you like.
Create a user for that database. Write the database name, username and password down.
Download an SFTP program (WinSCP for Windows, Cyberduck for Mac.
Use the username, password and host provided by your webhosts to log into your site via SFTP, and upload everything in the Wordpress .zip file to the root directory.
Get a cup of tea.
Upload everything from the Thesis .zip into the wp_content/themes directory, and everything from all your plugin .zips to the wp_content/plugins directory.
Using a Web browser, go to the temporary web address for your site, or the permanent one if it’s available.
Follow the instructions onscreen! If it tells you to change permissions, you can do that by navigating to the file or folder in your SFTP program, right-clicking on the file or folder, and selecting “Permissions”
Log into your new Wordpress installation!
Go to the “Plugins” directory, activate all the plugins, and check their settings pages through the “settings” panel. Make sure they’re all listed as working - if there’s no big red box saying “It’s all gone wrong!” in their settings page, they’re working. Again, change permissions if you need to.
Go to “Appearance”, select “Themes”, and select the Thesis theme.
Sign up to Analytics, get the code, and install it in the “Stat and Tracking Scripts” box in the Thesis theme.
And you’re all set, and ready to start customising your new website! (You’ll add in the mailing list once you start doing this!)
In the third part of this series: Designing your site. Do you need to hire a designer? Logos, integrating your mailing list, achieving your goals, and custom code to make Thesis do what you need.
**What I’d like you to do now: if you found this article useful, please click the retweet button below to share it with others. And let me know if you have any additional Website tips or have had any problems in the comments below! **
Read more →
Other parts of this series : The Complete Guide to Setting Up Your Webseries Webpage
I’ve seen a fair number of people on Web Series Chat on Twitter and elsewhere asking about setting up a website for your web series - how to do it, what to use, what hosts are good, and so on.
I’ve been making websites - mostly for Web series - for 16 years now. There are a lot of choices and options out there, but if you choose the right ones, 2011 is about the best year yet to quickly set up something powerful, flexible and usable that major corporations would have killed for back in 2002.
So, here we go with a complete guide to setting up a site for a web series as quickly and painlessly as possible. I’ll go through the software and hardware you need to make it work, talk about a couple of common customisations, let you know what you need and don’t need, and discuss the goals of the entire thing in the first place!
Oh, one thing. I said that the site would be quick and painless - I didn’t mention cost. From my experience, you’re far better NOT trying to minimise your costs below a certain level. You can produce a surprisingly sophisticated website for a sum which a lot of people would consider ridiculously small, but there comes a point where trying to make your site for free will really hurt in the long term. I’ve tried both ways.
Goals for a site
So what does your site need to do?
One of the things that makes almost any website, and particularly a show site, tricky to design is that it’s actually for two audiences: returning viewers who want to find the new content quickly, and new visitors who want to find out what the show’s about.
I’ve written about taking cues for web design from other industries before, so I’m not going to go into the design of the thing here to any great degree. However, one of the most common mistakes that even experienced Web businesses make is to start designing before you’ve figured out what your design’s supposed to do.
So - what you need your design to do is two-fold. For new visitors, it needs to:
Tell them what the show is and why they might want to watch it - either with words or pictures. Importantly, you’re not aiming to sell the show to everyone here - instead, you want your target market to find out that this is the show for them as fast and convincingly as possible. If a visitor isn’t in the target market, you don’t really care about their reaction.
Direct them to watch the show in the order that will make the best sense, with as little effort and confusion on their part as possible. That might be most recent episode first, or it might be first episode first, or it might not matter.
If they enjoyed your show, persuade them to sign up to some form of subscription or other ongoing contact with your show as effectively as possible.
Meanwhile, for existing visitors, it needs to:
Your website PROBABLY (but not definitely) also needs to:
Help and encourage viewers to share your content and tell their friends, enemies, and Facebook readers about it.
Make it easy and fun for your viewers to interact with you and each other, comment on the show, and generally become more involved.
Make the site easily visible to search engines so that they can drive new traffic to your show.
(Probably? Yes. You can run a show that doesn’t do these things - but that’s a subject for another article.)
So, now we know what we need to do, we can design a site appropriately!
What you don’t need for your site
The Web development world has really matured over the last few years, and a lot of things that used to be the case if you wanted a sophisticated website no longer are.
In particular, blogging platforms and CMS (Content Management Systems) have advanced leaps and bounds. That means that there’s one huge thing that you absolutely don’t need any more to set a site up from scratch:
You don’t need a programmer
I coded the CMS for every series I’ve worked on, from Matrix 4x1 through BloodSpell through to Kamikaze Cookery. Nowadays, unless I was doing something very specific, I wouldn’t bother.
The Wordpress blogging engine has advanced until it dominates the Internet and provides a solid platform to build 90% of content-centered websites on. There are thousands of plugins to do almost anything you want (and remove some of its more well-known limitations) and highly customisable “themes” that means the amount of HTML and CSS you need to write is minimal.
You still need to be comfortable with computers - your aged relative who tries to use a mouse as a foot pedal still couldn’t do the site setup for you - but you no longer need to be a coder, really, to set up your Web presence.
(Death Knight Love Story’s website is hand-coded rather than using Wordpress. I’m doing something very specific with that site and whilst I theoretically could use a CMS like Wordpress, I have some rather specific and unusual requirements for the site.
If you have the skills to write code or design a website in a very non-standard way, it’s still useful. However, if you’re not setting up with the realistic expectation of tens of millions of visitors, you don’t need to do the kind of hard-coding I’m doing there.)
Other things you don’t need:
You don’t need a super-expensive hosting package. It won’t hurt, but the cheapest web hosting setup from a reputable host should be able to handle a pretty solid amount of traffic, enough to cope with a mention in a major news outlet or similar.
You don’t need “one-click” Wordpress installation. Various hosting providers offer it, and I initially assumed you’d need it when I researched this article, but in actual fact the Wordpress installation is simple enough that anyone can do it on virtually any platform.
You don’t need to install a lot of WordPress plugins. In fact, I’d heartily recommend you avoid doing so. Wordpress plugins can easily make a site much, much slower to load - I can’t count the number of times I’ve traced a speed problem on a WP site to a single rogue plugin calling something huge from an overstretched remote address. In particular, I’d suggest you avoid the Facebook Like plugin unless you really have to - it kinda sucks.
You don’t need to be able to use Linux. The Web hosts I recommend will all be running your webspace on Linux, rather than Windows or Mac OS X, and that might sound pretty scary. However, unless you want to get into the nitty-gritty of server administration, you can rely on your webhost for pretty much anything Linuxey - indeed, a lot of hosts would prefer you did. (Sometimes my long-suffering webhosts, the astonishingly cool Bytemark would probably prefer I did too, but hey, they foolishly sold me a dedicated server…)
What you need for your site
For the installation I’m going to suggest, you need a Web server, a mailing list server, an installation of Wordpress, a bunch of plugins to fix problems, and that’s about it.
Engine: Wordpress: The old-school approach to a website was to code everything up in raw HTML - the markup language of the Web. Sites designed like that were difficult to update, and didn’t offer any kind of interaction - even commenting. From our “goals” point of view, a raw HTML site requires a lot of work to fulfil any of them.
That’s why these days most sites are built on a coded Content Management System, or CMS. Using a CMS, you can add whatever you like - text blogs, videos, etc - and the server will convert that into HTML for other web users to view. If you change something, it’ll change it across all pages. And, of course, it means that other people can add content too - like comments!
There are a lot of CMSes out there, and they all have their rabid fans, but realistically for a non-technical setup, and one that isn’t going to take too much time, Wordpress is by far your best alternative. It’s sensationally easy to get going - they tout a “5-minute installation”, and in terms of hands-on time, it’s probably less - even for a non-technical user. You download the Wordpress program, use SFTP to send it to your host (sounds complicated, but it’s basically drag-and-drop like moving files in Explorer or Finder), use your web host’s interface to set up a database (again, sounds scary, but all you’ll have to do is choose a name, username and password for the database and it’ll be done automatically), fill in the fields you just chose on another web form, change a couple of “permissions” via SFTP (by clicking some clickyboxes) and bam - working Wordpress.
Wordpress is also very customisable, and even better, has an awful lot of people doing the customisation for you. It’s been developed for 5 or 6 years in a real-world, big-companies-and-sites-actually-using-it environment, so its design is very well-focussed on what you’ll actually want and need, and it’s very simple to use. It’s also free and Open-Source, which is a bloody good start.
Wordpress is intended as a blogging platform, but a blogging platform has most of the same features you’ll need for your web series. It’s focussed toward getting people to subscribe, having an easily navigable archive of content, and allowing people to interact with you after viewing your content - in other words, it meets most of our goals out of the box. You’ll be embedding video rather than writing text, but other than that, what you’re doing as a Web Series creator is almost exactly what it’s designed for.
Other CMSes like Drupal are harder to configure and have less available options. They’re powerful and they have their fans, but all else being equal, avoid.
Of course, as a final option, you could create the site from scratch using pure HTML (web markup) or write your own CMS. Even if you have the skills to do this, I wouldn’t advise it. I’ve done both and I’d advise you to avoid both unless you have a very specific reason you want to do that. Pure HTML sites are a pain to update and have limited interactivity, and it’ll take a LONG time to code something with the same level of functionality as Wordpress - I know, I’ve tried.
Subscription Engine: Mailchimp or Feedburner As per our goals, you’ll want something to alert your viewers when a new episode comes out, and you want as many as possible of them to subscribe to it. There are basically two options here: either RSS or an email list.
In “Get Crazed Stalkers”, I advise you to use an email list if at all possible. That’s because nearly a decade of research suggests that the response rate to email is far, far, far higher than it is to an RSS feed, Twitter, Facebook, or anything else. Email is a “push” medium - your reminder about the latest episode turns up in your viewers’ inbox without them having to take any action, as opposed to RSS, where they’ll have to remember to check their reader and actually click on your feed, or even worse Twitter, where you’re chancing they’ll see your message before it gets buried by some crap from Charlie Sheen or Stephen Fry’s latest news about his sandwich.
Don’t get me wrong - you should probably use Twitter too. But for notifying your loyal followers that Something Awesome This Way Comes (your new episode), you probably want to use an email list.
I’ve tried a few different email list providers, and the one I’m most impressed with is Mailchimp - it’s free for lists of under 2,000 people (which will include yours, in all probability), it’s very powerful, it tries very hard to be user-friendly (arguably a bit too hard - I get fed up with their design interface - but there’s loads of help available too) and it handles all the gubbins of getting double-opt-ins and so on without you having to faff around with it.
If you’re not comfortable with an email list or think that your audience would prefer RSS (or are just feeling a bit lazy), you’ll want to run your RSS feed through Feedburner. It’s a startup that was bought by Google, and aims to give you some kind of data and intelligence on how your feed’s doing. Most simply and notably, it’ll tell you roughly how many people are subscribed to your feed, and also it will tell Google Analytics how many of them clicked on your latest episode. Analytics and the ability to tell what’s actually happening are vital - grab it.
Hosting Provider - Dreamhost or NearlyFreeSpeech.net Oh, god, the eternal “where should we host this?” question. Sadly, it appears from some reading around that whilst I personally haven’t had any hosting problems in years (the years I’ve been with my current host - Not A Coincidence), the endless hassles of bad, absent, permanently down or clueless webhosting are still very much with us.
Fortunately, there are some superb hosts out there. The very best of the best aren’t really accessible to anyone without hardcore knowledge - much as I’d like to recommend Bytemark, Slicehost, or even Amazon EC2, they’re overkill for a web series and not usable if you’re not competent with Linux server administration. (If you ARE - Bytemark in the UK or Slicehost in the US, done, that’s it, move along.)
The collective brains of Reddit and Hacker News, two of the most knowledgable and largest communities on the ‘net, mention a lot of lower-end hosts, but two names keep cropping up: Dreamhost and NearlyFreeSpeech.net. I’ve also used both, and I can attest that they’re excellent.
NearlyFreeSpeech.net are, as the name suggests, also very very cheap. They charge $.03 per day for basic services like a database and Web availability, and beyond that only charge for bandwidth and disk space used. $1 gets you 100 Mb storage space a month, which is probably a lot more than you’ll need. Meanwhile, bandwidth costs a dollar per gigabyte used. To give you an idea of how far that goes - the BloodSpell site serves up about 100k of data for each page view. Assuming two page views per visitor and 5,000 visitors per month (approximately 1k per episode if you’re releasing weekly), that’d mean you would end up paying… $1 per month for bandwidth. Ten times as much and you’ll pay $10 per month.
Obviously, if you have a large traffic spike, you’ll pay a bit more - but there are very few sites on the internet, speaking from personal experience, that will drive more than 20k visitors to your site, meaning an additional $4 charge or so.
NearlyFreeSpeech have an excellent reputation in almost all other areas. They have been around for nearly a decade, and have a large and loyal following. They’re unusually stable for a shared hosting service - you’ll probably not see much downtime if any. And everything they offer is extremely technically solid.
Their only downside is that they’re not the friendliest of outfits. They pitch themselves at the slightly more expert user, and there are quite a few reports of unfriendly customer service, particularly to somewhat less technically-inclined customers. As one user online said, “if their support tells you what is wrong and you don’t understand what they are saying, it is up to you to go research what the terminology means and do your level best to figure it out”.
If you’re looking for great customer service or you’re worried that your bandwidth bills will mount up, you might want to consider Dreamhost instead.
Like NFS.net, Dreamhost have been around for forever and a week. I used them back in 2006 and they weren’t newbies then. Their selling feature has long been a promise of “unlimited” bandwidth - which, I’d have to say, was in my experience fairly accurate. I was using them to host video files, and probably transferred terabytes of data from them - without a peep of complaint. A lot of web hosts claim unlimited bandwidth but don’t deliver - Dreamhost will, in all likelihood, provide you with more bandwidth than you can use.
They also pride themselves on user-friendliness, and are very well-set-up to assist less technically able users. I’ve personally had excellent technical support interactions with them, including a billing dispute that they refunded without any problems. They also operate a number of “one-click install” systems - I’ve not tried them, and as mentioned above, you don’t need them, but the ease-of-use of installing Wordpress with a single click is a pretty cool feature.
Downsides? Well, they’re not super-cheap, at around $10 per month. And a lot of users complain about downtime or occasional slow service with their services - I’ve seen a few problems in that direction myself. You’re unlikely to see days of outage, but the occasional couple of hours is a possibility - they certainly have a worse reputation for stability than NearlyFreeSpeech.
It’s also worth noting that there are a lot of negative reviews of them on some websites. Reading between the lines, and looking at the fact that they’re mostly complaining about their sites being taken down, I strongly suspect that many of these disputes were due to the complainers using seriously dubious “black-hat” search engine optimisation techniques, spamming, or other stuff that any host is likely to clamp down on.
In summary - if you’re likely to start small and you’re willing to learn and research a bit, choose NearlyFreeSpeech.net. If you’re wanting to go a bit bigger or want a bit more hand-holding, choose DreamHost.
And if the downsides of both of those are too much, read this thread on Hacker News (although ignore the mentions of app hosts like Linode and Heroku) or this one on Reddit for other options.
_In Part 2, Next Week: Domain Names, Wordpress plugins and themes (and which ones you DON’T need, too), analytics, logos, designs and how to actually install all this stuff! _
**What I’d like you to do now: if you found this article useful, please click the retweet button below to share it with others. And let me know if you have any additional Website tips - or problems - in the comments below! **
Read more →