An Infinite Grid

Big news: we extended the Universe grid, so your canvas is now infinite. Your sites scroll.

The new grid is our biggest update (literally) to the Universe editor since launcing in March. It’s our next step forward in making Universe the simplest and most powerful way to make a website from your phone. The range of sites you can create now multiplies: photo galleries, interactive stories, business portfolios, etc.

We released the update quietly on Friday and, already, there’ve been some awesome sites created: a photographer’s portfolio, a league’s roster, a tee shirt brand, a kid’s new work, a poet’s bio, a tape and jointing business, a collection of memes.

Tapping and scrolling are the web’s two primary actions. We’re proud to now support them both as first class citizens. On that note, we thought it’d be interesting to expose our design process on this feature.

Design Process

While on the surface allowing more than 5 rows in a grid sounds simple, it was actually quite difficult to design and build.

In creating a block, you’re actually doing 3 things: you’re specifying the type of block, its size, and its location on the screen. We originally tackled this by allowing you to draw on the grid to specify where you want to add a block, then choose what type of block. This was not only an elegant solution, it was fun.

But if you want to allow sites to scroll, you’ll override the drawing mechanism. So… we needed an alternative that still feels fluid and inspires creativity.

We looked at other tools. On the desktop, there are two primary ways of adding elements to a canvas.

• Modes (i.e, Photoshop). Choose a tool, and your cursor transforms into the tool you’ve chosen. You then specify geography by clicking on the canvas and dragging to finalize the size.
• Drop (i.e, Keynote). You choose a tool, say Shape, and it then drops on to your canvas. You can then reposition and resize it.

Mobile requires us to rethink these interfaces, because among other things you don’t have a mouse. So things like cursor modes and hover states don’t translate.

Snapchat uses the “Drop” paradigm. Choose the emoji you want, it drops on the canvas, and then you resize it. This works for them, but with our grid-based interface, the idea of dropping a block into an arbitrary place and then requiring manipulation to resize was finicky and tedious.

Our first attempt at a solution was to add a toolbar on the bottom of the screen that showed the kinds of blocks you could add to your site. You’d choose a block type, like photo, and then you’d go into draw mode, which would allow you to choose where and how large a block should be.

We built it. It worked. But it didn’t feel right. Creating felt slow. And remembering to go into a mode added a tax on everything. Modes should generally be avoided when possible. They introduce a cognitive complexity that is often unnecessary (read: the opposite of flow).

While we were doing this, Ryan figured out how to allow blocks to be moved on the grid without interfering with the scroll gesture (by adding a slight delay to trigger the move, which also handily captures a user’s intent more accurately that an instantaneous tap).

We thought: what if we have our cake and eat it too. Scroll to add rows and tap or draw to add a block. No modes. Turns out, we could.

Here’s the result:

Scroll to add rows. Tap or draw to add a block. It just works.

It feels obvious in the best way.

I’m sharing this process partially because I want to internalize a lesson for our team. Sometimes you need to go out to get back to where you started. And that will require throwing out code. That’s perfectly okay. In fact, it’s the mark of adaptive, intelligent design team.

A Creation System

We’re building a creation system . The system is modular, based on a grid of squares with blocks of different forms and functions. We see this grid system working on every device and screen size. Think about it like Legos for screens.

In that spirit, Universe will feel perfectly natural on the new iPhone X’s taller screen. This update breaks us out of the fixed 16:9 ratio of previous iPhones to a world of all types of screens.

We can’t wait to see what you make with it. You can get it now on the App Store. Keep the feedback coming!