Moving to Static and Keeping Your Toys

Static web sites, and the tools to create them, are all the rage these days. And if there’s one thing that I’ve learned after a decade in the web business is that anything that is popular must be a good and practical thing that is worth your time. Ok, kidding aside, there are some pretty incredible benefits to working with a static web site. First, you’re hosting options become much more varied and, even better, simpler and cheaper. Secondly, moving to a static site can be done with powerful tools that still allow you to have the benefits of a traditional dynamic web site. On my blog, I described how I moved an older site that had minimal dynamic aspects to a static one hosted on Amazon S3 by making use of the Harp framework. For me, Harp was a win/win. Even though I was “losing” the power of an application server, I didn’t really lose anything of practical value. Harp let me create both a layout template and a set of pages. From these resources Harp was able to generate a static set of files. Did I accidentally include a typo in my layout? No problem. Update the layout, regenerate the files, and I am done.

In my case, I was a bit lucky. The site was only “dynamic” in terms of the layout. I did have a contact form as well but as the site was pretty old, I just removed it. I was fine making that sacrifice (no one had even used the form in 5 years) but what if I wasn’t? Does moving to a completely static site mean giving up all dynamic aspects? Not at all! In this article I’m going to review some of the options for static web sites that can bring back some, if not all, the features you may be using on a traditional server-side dynamic web application.

Any Comments?

One of the most powerful features of a web site is typically it’s commenting system. This is where your users can engage with you and each other. On the flip side, managing comments can be an incredible time sink. Depending on your site (and community), you may have to spend an inordinate amount of time dealing with spam or removing inappropriate content. This can such a hassle that even when people aren’t moving to a static system they will sometimes consider outsourcing their comment system anyway (I’ve done this myself on one of my own sites).

One of the most popular of these systems is Disqus. Disqus allows site owners to embed commenting on their web sites via a simple JavaScript include. Signup is relatively simple (and free – more on that in a moment), and configuration options are pretty deep. Moderation options allow you to pre-screen comments before they are seen and also allow you to upgrade trusted users to give them the power to help manage your comments. Spam checking is built in, but you also have other options (besides moderation) to help fight the never-ending battle. A basic dashboard exists, although the level of reporting isn’t necessarily deep.

Disqus does provide an API so, in theory, you could build something to generate your own reports, but it seems pretty silly that you can’t look at the entire history of your site’s comments or even compare this month’s values to the previous month’s.

Also note that Disqus supports both importing and exporting of comments. Being able to export is crucial to any third party service and I’ll be discussing it for every product I review this in this article. While I’ve yet to have any indication that I may need to stop using Disqus, knowing I can do so at will makes me much more inclined to trust them. Importing will be crucial if you intend to migrate existing comments, but for some folks this may not be a requirement, especially for a new site with limited readership.

Disqus has wide ranging usage so I assume most folks have seen it in action, but here is an example of it running on one of my sites, the JavaScript Cookbook:

What’s conspicuously missing from the Disqus is the topic of cost. You can sign up for free and create a new account for free, and that’s great, but I had a hard time finding documentation that Disqus was indeed free. This may be important if you need to provide proof to a client. Thankfully Twitter came to the rescue and provided this FAQ: Common Questions About Disqus. You can see one quick mention of it being free on the features page, but it didn’t seem very obvious to me. Then again – we’re talking free here – and an incredibly cool service.

Alternative: One of the more popular alternatives to Disqus is Livefyre.

Getting Feedback

For years now the humble feedback form has been the principal way sites collect feedback from their users. My career really took off when I began writing Perl scripts to process forms (seriously). Moving to a static site doesn’t necessarily cut you off from your users. While you can simply publish an email address, typically a form is more helpful. You can use dropdowns to help categorize and route the feedback as well a solicit some information about the users.

You could, however, make use of Wufoo. Wufoo allows for form creation, hosting, and processing, all via their service. I first used Wufoo nearly five years ago and I remember being impressed by their form designer. No big surprise but it is still incredibly easy to use. As a web developer I’ve got a natural distrust for anything drag and drop, but their builder is just absolutely beautiful.

You’ve got your basic options as well as fields specific to particular types of data (email, dates, etc). You can specify what is required and what is not as well as setting what happens when the form is completed. Responses can be sent both to your email address as well as to a mobile device. You can even set it up to integrate with other services or your own server.

Once you’ve designed your form you can take it for a spin. All the layout is handled for you (it is customizable of course) and you don’t have to worry about validation.

Here is an example of the form data as it showed up in my GMail:

On top of all this, you also get excellent analytics for your forms as well as the ability to build reports based on any number of forms.

Embed options include either an iframe, a JavaScript include, or raw files to integrate manually into your static HTML. As an example, here is the form I just built, included via an iframe.

[iajsfiddle user=”remotesynth” fiddle=”CpStv” height=”300px” width=”100%” show=”result,html” skin=”default”]

All in all, Wufoo is a very powerful solution. The pricing though is a bit on the high end (to be fair though I think we’ve gotten a bit spoiled lately in terms of what we expect for free). The free level account allows for 3 forms, 3 reports, and only 100 monthly entries. Their pricing page shows you what you have to pay for each level of support. As an example, the next level (Ad Hoc) gives you 10 forms, 20 reports, and 500 entries per month (plus additional features) for $15(Ok, technically, $14.95, but pricing like that bugs the heck out of me).

Alternative: If you don’t need the power of Wufoo and are already a Google user, you can simply use a Google Doc form. Google Docs supports Forms as a document type. It has a basic set of themes and supports some of the same features as Wufoo. You can also tie Google Forms to a spreadsheet to help collect responses as they are sent in. Here’s the lovely form I built using their Christmas theme:

The analytics is also a bit spartan compared to Wufoo but serviceable.

Oddly, Google Docs does not provide a simple way to email you when the form is filled out. It can be done via a script, but you’re going to have to set it up yourself. It seems like an obvious thing to include out of the box so perhaps Google will add it in the future. Like Wufoo, Google supports a script embed or iframe. Here is the form included via iframe.

[iajsfiddle user=”remotesynth” fiddle=”A2K39″ height=”300px” width=”100%” show=”result,html” skin=”default”]

Search

For sites with a large amount of content, a search engine could be crucial for getting your users to the content they need. This isn’t always something you need to handle yourself, of course. It may be that your users come directly to your site via a search engine. Barring that, it makes sense to provide some form of search capacity for your site. The king of search, for most people, is Google, and it is their tool we’ll discuss.

The “Custom Search Engine” by Google is a way to provide a “sandbox” search engine for your web site. You can create a CSE (custom search engine) for a site, a portion of a site, or even one page (which would be a bit weird, but ok). You can also combine multiple sites together into one search engine.

Once you’ve created the CSE you have multiple options you can configure. You can also upgrade to a paid edition to remove the Google ads. There are layout and theming options and fine grained color control for exact matching. Even cooler, as you play with these options you get a live update of the CSE.

Once done, you get a block of code you can embed into your site. I’ve done this myself over on my blog. I didn’t spend a lot of time (ok, any time) making it match my site’s color scheme, but you can see how it works inside a real existing web site. Test it out here.

The code you embed links directly back to Google for configuration settings. That means if the client comes back to you and wants to tweak how the CSE works, looks, etc, you (or they) can do it from Google’s console and the public site will be updated immediately.

Finally, Google provides basic stats for your search engine and can connect with their Google Analytics tool as well.

Alternative: Honestly, I had difficulty even finding one! Bing apparently had a similar service in the past but shut it down. To be clear, they have an API (a good one!) but that would require programming on your own server. I’d love to hear what people would recommend in this area.

Calendars

Most organizations need a way to share event information. Typically this is done with a calendar, although that isn’t necessarily required. While I’m as much of a fan of complexity as any coder, if your site has two or three events per month there’s nothing wrong with a simple unordered bullet list that you edit once a month. Having a “static” site doesn’t mean you never touch it again and minor edits are to be expected anyway (and as consultants, don’t we love easy gigs like that?).

But most likely the customer will want a real calendar and will need to edit it quite often. Once again, Google comes to the rescue. It’s Google Calendar service has been around for some time. While most folks probably use it for personal event tracking, don’t forget you can create multiple calendars for an account. This means your client could create a calendar for their organization separate from any personal data they may already have at Google Calendar.

Once you have a calendar prepared, you need to set it’s privacy setting to public. This is done in the calendar settings panel under “Share this Calendar”. If you then return to the main calendar details tab you will see an “Embed this Calendar” option:

As with the custom search engine tool, you can also customize basic UI features and get a live preview as you do so:

You don’t really have a lot of options on the color side of things, but you do get to tweak some of the basic functionality and widgets around the calendar itself. Once your happy, you can simply take the iframe code and drop it in, as we’ve done below  (note: at the time this article was written I created a few events in December 2013. So if you want to see an example month with data in it, switch to that one).

[iajsfiddle user=”remotesynth” fiddle=”uSA8P” height=”300px” width=”100%” show=”result,html” skin=”default”]

For more control, consider FullCalendar. This is a jQuery-based calendar system that can integrate with Google Calendar (or plain JSON files you could edit by hand). It looks bit nicer in my opinion but obviously requires a bit of JavaScript knowledge to use.

Alternative: As an alternative, you may want to look at Eventbrite. Eventbrite is an event management site that handles ticketing as well. They support both paid and free events and also allow you to send email to people attending your events. All in all it is a darn nice system for handling events. They support multiple different embedding options as well as a basic calendar:

The Thermonuclear Option

And let me leave you with what I’m quaintly referring to as the “thermonuclear option.” You can – if you so choose – consider using a service like Parse. Parse (and competitors like FatFractal, Stackmob, etc) act as a completely dynamic back end service for data. And by “data” they mean…anything. These services provide end points to allow you to remotely add, edit, and delete anything you want! While they require quite a bit more programming, they can still be used with full static sites. You could use these services to create a blog, a guest book, or anything at all and leave the actual storage to the service provider. This is typically more appropriate for web apps, not web sites, but it is an option.

Static Ain’t What It Used to Be….

A long, long, time ago, I remember when I built my first CGI script. As soon as I discovered dynamic web sites, I found my calling. The idea of a static, simple site was distasteful. Now after nearly 20 years in the field, simple is becoming appealing to me again, and we now have a rich ecosystem of service providers that enable us to add layers of complexity to our “simple” static sites.

Header image courtesy of https://commons.wikimedia.org/wiki/File:Ha_Ha_Toy_%E2%80%93_Tin_Wind_Up_%E2%80%93_Planet_Robot_%E2%80%93_More_and_More!.jpg