Ask a Question ?
Design & Publish Websites Faster
For starting a real site! If you want to just try it out!
Get Updates

Tips, Guides & Upcoming Features

Breezi Layout Builder is Here

bz-layout-01-larger-row

Notice the blue controls on the right which are for blocks and the silver ones which are for columns and sections

I’m really happy to announce that the Breezi layout builder is available to all our users!

As a part of this announcement, I’m going to dive into the reasoning behind how we did it and where we’re going next. If you’re not interested in all of that and just want to try it out, click Test Drive at the upper right!

Box Model vs Free-form Model

In order to understand why the layout builder even matters, you have to understand the difference between the “box” model and the “free-form” model. From the very beginning, Breezi was based on what we call the box model. This is different from most website builders because almost all of them are based on a free-form model.

In the free-form model, you allow users to put objects in any place. It’s a lot more like print design than web. Platforms like Adobe Muse, for example, use this approach. The box model respects the structure of modern websites, which are not made of one giant box with objects pinned in random coordinates. A simplified way of thinking about the box model is to think about many boxes (divs) with hierarchies. So a box can be inside another box and so on.

The free form model is more free during design, but creates a lot of debt after you’re done putting things in random places. The nice part about it is that it’s really familiar to print designers and it “feels” really flexible. You can place things in exactly the place that you’d like. Doing whatever you feel… free… form.

The most practical example to think about when understanding the reason for the box model would be to think of a situation where you have a widget that has content inside of it that can grow. An example would be your three most recent posts. The exact height of this widget grows. If you write a longer post, it could go to the 2nd line and push everything down. The container/block than contains it grows. The widget that you might have underneath this block might grow as well. So might the above it. Because of these interdependencies on width and height, you need objects that are truly static all the time to be able to actually use the free-form model, which is not very conducive to how most people want to create and manage a website.

Before layout builder, it was really hard to express why the box model made so much sense to someone who didn’t understand html markup. But now that you can create your own dynamic layout, you will understand why you need this type of structural organization for your site. Just spend 10 minutes playing with Breezi and you’ll get a better sense for this.

Outside of building layouts, we’re relying on the layout builder as the foundation for organizing the variables in our design. In about a week we’ll be releasing the bulk style editor, which will really give you understanding for why the box model makes sense. So stay tuned for that!

Side note: I urge any web designer to stop using a tool that is free-form. It’s bad for us as an industry to keep pretending like we’re print designers.

Talking a bit about the actual difficulties we had while building layout builder…. 

If you’ve ever looked for a layout builder before, you’ve probably stumbled upon the YUI layout builder or the YAML layout builder. There are a few others. Building the layout builder itself wasn’t really the hardest part. Our team has built stand alone layout builders a long time ago.

The hard part was putting that in the mix with the rest of the website building experience.

When you open the editor, the first thing you’ll notice is that your layout controls are very accessible. You don’t have to go turn on another mode to get the controls. That’s because we see layout as a design task. You shouldn’t need to go into another “mode” just because you want to add another column or resize something.

The other item is the subtlety of the controls. They are small but very powerful. The controls were made to be very compact so they don’t collide with any of the other controls and can be ignored if they aren’t being used. The compacted controls even work for very tiny areas.

You’ll also notice the difference between “sections” and “containers”. You can think of a as the holder and the sections as the blocks inside of it. The controls all the way to the right are for adding containers while the controls within the inner part of the site are for adding sections.

The final result of this UI was from over six months of prototyping and iterating through static mocks. We had two working prototypes and went through six different versions of the layout builder during this time.

The funny thing about it is that, in terms of real estate it feels so small, like it shouldn’t have taken this long. For the technical people reading this, I’m sure you can appreciate the irony. Little things that do a lot.

So what can you do with it?

  • Add new containers, remove them, reorder them
  • Add sections, remove them, reorder them
  • Add columns, merge them, resize them

What we’re working on next?

  • Speed improvements
  • Changing the entire width of your site
  • Saving your layout
  • Applying your layout to other pages

Wrapping up…

The ideas for the layout builder have been in the works for almost a year now.

The technical specs, the numerous mocks, the prototypes… it’s been a long road to this. I’m really happy with what we ended up with. The Breezi team really worked tremendously hard to make this happen. It takes a lot of patience to develop something like this. It’s not a MVP (minimal viable product) mindset. For things this ambitious, you have to really stay true to the problem and work at it until it’s really resolved. Our team really did that and that’s apparent when you use it. It’s all thanks to the amazing team that we have.

It’s a huge step for Breezi.

I leave you with an old mockup of what the layout builder was proposed to look like early on and a quick video on how it looks right now, enjoy.

mockup-layout-builder

V2 of Layout Builder (was never built)