Greg Higgins, an artist I met through Gigantic, wanted to commission me to build a site for him. Having made a few client sites while working for MasterPlans, I knew he’d want:

And if I was going to build this for him, I’d want the system to be eminently self-explanatory and insanely easy to use so that he would have no foreseeable reason to get frustrated and holler at me.

So I built Higgs. It’s a one-page web app for building a simple site.

Admin overview.

The primary goal was of course to make an awesome site-building tool for my client. And the secondary goal was to build a tool that I could easily replicate and repurpose for other people that might want similar.

Greg liked the look of the Serendipity Wine Rack site that I built for my friend Jon Rossitto. So the output of the admin system would be pages that looked similar: nav on top, a big header, big images, and text beneath that.

So the admin login is {domain}/admin.

Admin login.

The page scales down well.

Admin login on small screens.

The whole system does.

Admin page editing on larger screens. Admin page menu on small screens. Admin page editing on small screens.

Greg wanted the option to use images for the top nav links. Hence the “logo goes here” filler image—clicking that triggers the image upload form and the newly-uploaded logo replaces that. The image upload script makes copies of each image at multiple sizes and uses a baby bear size for the nav image, a mama bear size for the admin panel, and the papa bear size for the public page.

The page URLs are sanitized versions of the page titles. So the URL for “KissKill Bags” is {domain}/kisskill-bags.

Each page’s images are accessed by clicking the “images” header. A plus sign appears in-line, with thumbnails of each image beneath that.

Admin image uploads on larger screens.

Clicking the plus, as with the “logo goes here”, triggers the image upload form. Newly-uploaded images are added to the bank beneath the header.

Clicking the image’s thumbnail toggles its larger version and a text area for its caption.

Admin image caption editing on small screens.

The dropdown beneath each image (and beneath the page’s main textarea) allows you to mark that image (or that page) as hidden or public, or to delete it.

Similarly, when mousing over an image thumbnail, or a page title in the sidebar, a pound sign appears.

Admin page rearranging on larger screens.

You can click and drag the pound sign handles to reorder the images and the pages. The order shown is reflected on the public site.

The home page on top is different. It cannot be retitled, hidden, deleted, or reordered to a lower position. It has the same “logo goes here” and main text area as every other page, but its image list is built from the public images of the other pages.

Admin home page image editing on larger screens.

Selected images—those at full opacity and with a thick green border—appear on the home page.

Home page on larger screens.

The captions of images on the home page link to the pages they represent.

Example page on larger screens.

And of course the pages scale down well too.

Example page on smaller screens.

Greg is still working on the content for his site, so it’s not ready to show yet.

Meanwhile, my friend Jon Rossitto asked if I’d build a site for him, so I gave him a modified Higgs. He’s also working on his content, and it’s coming along nicely. Here’s a preview of the result. It’s loaded primarily with filler content but you can see the idea.