Against one of the walls here in the Squarespace office, there's a huge black shelving system brimming with books and magazines. Much like a good rug, it really ties the room together—however, it's also a functional library with an eclectic selection ranging from programming tomes to elaborate design anthologies. That’s a combination perfectly suited to describe the engineer/designer mix that makes up Squarespace.
Flipping through some of these publications, it’s easy to see how simple content like text and images can be presented in a myriad of different ways. The programming books are laid out in a linear stream, the layout of each page identical to the one that came before it. It's pragmatic and useful, which is also a great way to describe how content management systems have dealt with content in the past. Pick up one of the fashion magazines, art books, or typography manuals, and it's a completely different world: text and images are juxtaposed, split into columns and laid out in collages. It’s a very inviting presentation, both complementing and enhancing the content.
We looked at this and asked ourselves: "Why can't we do this with Squarespace? Why hasn't the web caught up?"
Well, it's complicated.
Printed content has a single reality; what you see on a page is the same to everyone. Content on the web—even ignoring underlying technological issues—is not. There's no telling which device or browser a page will be viewed with, at what resolution or with what user settings. The same page has to work on everything from a desktop computer to a phone, and preferably adapt to those conditions while maintaining the intended experience. The very flexibility which makes the web so wonderful also makes for a very complex design environment; the necessary skill to make even very simple layouts becomes a staggeringly tall order for the majority of users, even if they do figure out how to wrangle the underlying HTML and CSS.
We built LayoutEngine in an attempt to narrow this gap between print and web: to make building great layouts as easy as simply moving your content where you want it, while keeping the underlying structure and code equally elegant and simple.
It took many iterations and several breakthroughs, both in terms of figuring out how to build an interface for something like this—early versions were radically different—as well as how to deal with the underlying code, which was paramount for the resulting output to be flexible and compatible across the full web landscape of browsers and devices.
As we iterate further, LayoutEngine will become more and more sophisticated and powerful. But we'll talk more about that at a later date. This first version is a major step towards our goal; we're exceptionally proud of it and we can't wait to see what you make with it.