The Swing of Thing

Designing, developing, testing and launching an app called Thing.

Frictionless ‘try before you cry’ trials

A lot of apps allow you to ‘try before you buy’ - the idea being that you create an account and you get to try everything for a certain time period before you commit to paying for it.

Sign up

We took this approach too but after a while we noticed certain users signing up and playing around but wanting to close their account - and other users signing up and not doing anything, no matter our conversion tactic.

This left us with accounts who want to be closed (support burden) and accounts which will never be used (cost burden) - we want neither, and vice versa.

From now on you don’t have to sign up in order to try out Thing - you can play around with any page you know the URL of. This enables you to experience with the app - and any page built on the app - without the whole signup rigmarole. Like what it does? Sign up afterward. Don’t like what it does? Cry us a river.

Technically it gets interesting as you can do everything an user with an account can do; even upload images - Thing loads in images without uploading them to a server and changes you make are stored in the browser as drafts. If you like what you designed and built simply hit ‘save’ and sign up then: the page you were working on will be there waiting for you in your new account. This is made possible by auto-saving images with your drafts and reading in images using the FileReader API.

From a marketing point of view it gets interesting as every page designed and built on Thing is a potential entry point into the app, which makes our marketing a little bit easier (more entry points) but also a little bit harder (more upfront explanations).

One of the nice things this lets us do is ‘bring more stuff to the front’, more pages, more showcases, more how-tos. More about all of that a little later.

But the most important thing to us is the experience: we think these changes make Thing quicker to experience, easier to understand, safer to test and free-er to try out.

Better-looking, more meaningful placeholders

If you’ve been paying attention - or using Thing to design and build pages - you would have noticed the ‘dotted line’ placeholder; a little something that indicates where to start adding content.

We’ve dropped the dotted outline approach and replaced it with dynamic, SVG-based background images and icons that adapt to the palette you use and to the type of media you add - a better-looking and more meaningful placeholder for your ‘coming soon’ content:

paragraph_placeholders.gif

The ‘empty states’ - for the types of media we support - adapt to the palette you use for your text:

embed_placeholders.gif

Placeholders double up as a quick way to scamp up a page, and an easy way to add things to a page. You can kick things off with an empty #image - then upload something to it , or you can start with an empty #map - and then paste the relevant embed code. Same goes for #video, #audio, #code, #form and #tweet.

Placeholders now save through to the eventual, rendered pages. This means that unless you specifically hide an placeholder you’ll see your thoughts and ideas in the page’s view mode, or on a site if the page is live.

If you want to hide a placeholder and you use rows hide the ‘parent’ cell which then hides anything inside it:

hide_cell.gif

We didn’t stop there: you can change the aspect ratio of the #image, #video, #map and other placeholders. Aspect ratios marked with asterisks can be toggled between landscape and portrait orientation by clicking them twice.

aspect_ratios.gif

(Please note the only real content that currently supports aspect ratios are maps; so give ratios a whirl if you are struggling to make a Google map play nicely with the rest of your page.)

The main reason we’re adding these features is to help you to build a better wireframe of how you see your page play out, and to make it easier to start adding design and content to it when you are ready - we want you to design and build a better page, quicker and easier.

We hope you enjoy this new take on Thing.

You can now export pages

The link to export your pages is in the footer.

export link

Click the little download button next to a page.

export animation

Wait for it to export and then once it is done, your browser should download the zip file automatically.

export download

Exporting only exports the HTML and CSS. We attach a README file which includes a summary of all the Google Fonts, images and embeds you use so that you can go download them if you want.

export contents

By the way, please don’t hotlink your images to us if you’re not going to host your site on Thing.

You can now set a highlight color on inline tags like links, bold or italic. The user interface for inline tags has been updated too.

You can now set a highlight color on inline tags like links, bold or italic. The user interface for inline tags has been updated too.

We finally got around to documenting keyboard shortcuts and other common actions.

The first time you edit a page you will now see this dialog and also every time you click the new help button underneath text nodes.

We’ve also been building out our own site (using Thing) to document all the features with videos and everything! Go check out the new #how section on our home page.

We finally got around to documenting keyboard shortcuts and other common actions.

The first time you edit a page you will now see this dialog and also every time you click the new help button underneath text nodes.

We’ve also been building out our own site (using Thing) to document all the features with videos and everything! Go check out the new #how section on our home page.

Embeddable button actions

You can now embed a video, map or playlist “inside” a button as the action instead of just a boring old link. The video (or map, etc.) will play fullscreen when the button is clicked.

See it in action on our new homepage.

(Note: The button is still a normal link that can be opened in a new tab. Such progressive enhancement!)

version.thing

Once you’ve enabled version.thing you can roll back a page to any time you saved it. Maybe that previous version really was better?

privacy.thing

We just rolled out privacy.thing which allows you to hide your pages so that they don’t get listed on your profile and also to disallow people from cloning them.

This is great for when you’re working on something top secret or for doing client work where you might not have the rights to allow just anyone to clone it.

Lots of interface tweaks in the editor

See if you can spot the differences.

The responsive design overhaul also made it through. We’re not 100% done with it yet, but at least you can now define your own breakpoints and if you resize your browser window the relevant breakpoints get taken into account like they should.

It is now possible to undelete more things like cover or tile images, section namespaces (now called “styles”) and even breakpoints.

Oh and bugfixes. Always bugfixes.