Breezi Blog

We’re really pumped to be getting our awesome, brand spankin’ new Breezi stickers and t-shirts very soon! Check out the designs below – if you’d like a free t-shirt & stickers, here’s all you have to do:

1. Sign-up for a Breezi account (remember, all sites created and used through April 30th are FREE)
2. Complete the quick feedback survey you’ll receive via email after you’ve played in Breezi for a bit creating your site
3. Like us on Facebook and/or follow us on Twitter!

Dear Users,

We’ve had a lot of questions about how pricing works after our “Free Forever” beta promotion (previously Breezi was free until the end of June July August). We wanted to give you some more information on this.

Update: We’re officially no longer in beta, and we’ve launched our Premium Plans!

So a little expansion on this…

1) We now offer a free 14-day trial to start out, during which you can fully test out Breezi and upgrade to a Starter or Business Plan at any time. Learn all about our plans and pricing.

2) For anyone who signed up before we officially came out of beta, and actually used their sites within 30 days of signup, your account will remain free and you can use your own domain, sans Breezi badge, along with other premium features. How long will it free for? Free forever. How do we determine if you’ve “used” your site? We use a combination of a few metrics to determine that, but you can be assured that if you’ve even completed 20% of your site, it will not be removed. We’re just trying to get rid of completely unused sites, that’s all.

3) We’ve launched our referral program, so if you’d like to learn more and sign-up for free to earn 20% commissions on people you refer to Breezi, click here.

Stay tuned for some awesome new features coming soon!

Thanks,
Navid

This week we rolled out our new “starting points”. We use to have starting points before that resembled “themes” or “templates”. I’d like to go over the difference between themes, starting points, and template.

Starting points respect the design process. They are basically wireframes. It’s where most designers usually start their process. They usually have a good amount of prep work to do until they can start their wireframes but the wireframe is really the first concrete visual asset that we can start from in Breezi to help you get moving without pushing you to skip important parts of your process. When you first create a Breezi site, you choose your starting point, not a theme.

Themes should be content and layout agnostic. They are more like style sets. They should be applied to any site or page. We do believe that themes should be a part of the design process. They are important for you have handy to be able to iterate through your ideas for yourself and your client. Themes are the next big feature that we will be rolling out. With our new themes feature comes a bulk style editor where you can edit many styles that are related in one shot. It’ll speed up your process.

Templates are pre-packaged designs that are very close to what non-designers imagine & “want” from a website builder. So you change a few things to make yourself feel better and then publish it. To be completely honest, we are not fans of templates as they are defined within tools similar to ours. We believe in empowering the designer, not skipping them. Breezi is for DESIGNING. We currently do not have any plans are releasing templates.

Yes, we are aware that every single website maker is template based. We get that “people” are used to pick their template and then modify it. Its important to understand that Breezi is for designers. We want to bring out your original ideas. All of it. It means that you have to do more work. Maybe that makes us a not such a nice tool for people who just want to change three colors and be on their way but that’s ok.

Our goal is to bring the design process all within one tool and respecting your creation flow. We are definitely not fully there yet but we definitely make it a hell a lot simpler for you.

Lastly, I want to remind people that simpler in this case doesn’t equal better. Simpler = skipping in this particular discussion. Breezi is here to receive your ideas. If we give you more pre-packaged things, it doesn’t make things simpler. We want to fine tune our flow to be right within that area where we get rid of grunt work for you but don’t think for you.

I leave you with a beautiful wireframe.

Last night I stumbled upon Project Meteor. If you haven’t seen it, you should check it out. They are in the quest for the perfect web design app. One that includes and embraces all the things that a modern web designer has to consider when making a site. Things like fluid layouts, responsive design, hover states, etc. It’s very plausible. It’s awesome that they have started the conversation on this. It made me want to write this post.

Side note: I think their web page does them more harm than good with the broad stroking rules that they’ve stated there but I get what they are asking for. They are dedicating a single pager to massively complicated problem.

When I imagine the “perfect” web design app, I start sweating. Not because it’s impossible but because I know how much work went into making Breezi and how much perfectly coordinated work over such a long period of time is need to bring such a thing to life. I’d also fear that by the time it would be done, it wouldn’t be relavant anymore. I only say this because I haven’t yet seen a single tool that does even half of the web design process correctly for a segment of the market. Let alone contemplates ideas such as responsive design.

Think about all the web design tools available. If you judge them by even the items they set out to do right, they would fail miserably. People just make do because almost all of them suck and there are no other choices available. Adobe Muse, Fireworks, Rapidweaver… you name it. They can’t even finish what they set out to do. Not because the people behind them aren’t competent. But because it’s a super hard problem. We should be applauding all of them and asking them to just focus on finishing the flow that they set out to do properly instead of getting into new demands.

Given where we are with the tools that we have available to us, I wouldn’t want one app to contemplate all that an ideal web designer should contemplate. Just take a second to detail out 20 different websites and what the ideal modern web designer has to consider in order to do them correctly. What tools does he have to use? Why does he use them? How much time has gone to develop these tools and are they useful? Why did it take the developers of that app that long to make a tool for just this one part of a designer’s flow?

I’d challenge someone to come up with a proposal of how an app that ambitious would work. Start to put together a technical spec of how to go about such a thing. It’s v1 would be a monster. That’s an under statement. It’s a pointless exercise. Do 20% of it right. That would be a massive undertaking by itself. Assuming it is done right. That’s the big question. The only people that have experience with these super difficult flows are the awesome people at Adobe and they are having a super hard time executing this. I’m not talking about some half-baked “lean” bs. I’m talking about a real product that contemplates the full flow and actually works.

What we have to consider is that

• Everyone goes about designing a website differently
• Web designers & developers can’t solve all the problems. Most of the time they pick a few to focus on for their clients.
• Standards move very quickly & not everyone agrees on them
• A good web design app without all the nice stuff hasn’t been done yet!
• The demands of the market are extremely fragmented

For Breezi, we grabbed a few defining principles and stayed true to them.

We tried to bring most of the ideation process in the actual app by making it relavant (actual css) and fast. We also assume dynamic content. That’s why we didn’t go free-form. We made it relatively fast and super responsive. We believe that using print metaphors on the web is going backwards. You shouldn’t be able to move around stuff like you’re in inDesign. That’s wrong. We also contemplated extendability with an “app” model and a full API that we’ll be exposing to allow people to write their own apps for the site. We’ll also be releasing a full layout builder within Breezi that will help designers create the perfect structure for their site. We haven’t made our way down to fluidity but we’ll get there as well. As for the code that Breezi produces, it’s not the prettiest thing in the world but we believe in solving one problem at a time. If you want a tool to solve all your problems, come talk to me in a decade. Maybe I’ll have an answer for you.

We didn’t nail all the ambitious ideas out yet but we got many of them done. We put the infrastructure in place. Now we’re moving. We’re developing the experience under what we believe are the right philosophies. We are also not pretending to give you the perfect web design app. We don’t think that will ever exist. But for a good number of designers designing simpler websites, we want to be a pretty good choice. Once we fulfill that, we’ll start thinking about helping others with other problems.

I’m a huge believer in usability testing. Even after all this time of day after day for years working on interfaces, I’m always stunned by how much I don’t understand. We get very very very little of what pisses users off. Sometimes it’s simple things. Sometimes it’s obvious, sometimes it’s not. You just don’t know. No matter how much experience you have, you always miss a lot of little things which together can aggregate into what turns into a “pissed off user”. But when you watch the faces of your users or hear their voices, you have a lot more information to make a real choice. It’s really important.

So for Breezi, we did usability across 50 users, remotely. There are a few services available for this. I’m not going to list them because my experience was quite horrible.

The huge benefit of remote user testing is that users are at the comfort of their own homes with their own computers. Those are two very important points.

Anyone that has done usability testing in person knows that users act a bit differently when they are at a “lab”. I would go as far as to say that they are definitely a bit more rude on average. They tend to give more “raw” opinions. Sometimes this is not very helpful but if you can catch pain points much more accurately. When they are in a lab, they can’t be rude, say what they really think or trash your product.

Also, the fact that the user is using her own computer means that you can test performance. That’s where everything failed for us.

It turns out the recording technology that they use has a massive impact on your computer. More specifically your ram and graphics card. I started getting suspicious when all the videos that were coming in were users saying “this is so slow…” So we went and got the worst computers we could find and started testing on them. The experience was fine… I couldn’t figure out for the life of me what the issue was. It really frustrated me because it seemed like we were acquiring users and sending them to a horrible experience.

So yesterday I finally got a chance to act as a user. I used MacBook Pro with 2.66 ghz core 2 duo / 8 gigs of ram with a 100 mbps connection. I figured I start with a “good” computer and work my way down.

So I started the test, load their requirements… I loaded our site ( http://breezi.com ) and immediately noticed all the animations were loading really slow. It was like everything was in slow motion. I went on to create a site and actually login… now my fan started going nuts and everything was laggging. There was at least a 2 or 3 second delay on everything I was doing. The experience was horrible. Just absolutely, horrible. Just.. pure.. horribleness.

It’s amazing that the usability testing software can ruin the usability of your software. I didn’t write this post to bash them (although they should be bashed). I wrote it because I don’t want other people to go through the same pain. If you want to usability, I think that doing them in person is still the best.

Update: this is an awesome table by boltpeters comparing various remote ux testing tools

Here’s a short video showing some of Breezi’s key features in action. To get a feel for everything Breezi has to offer, though, click “Test Drive” or sign-up for an account today!

Here’s a quick walk-through tour of Breezi, so you can see the main features that set us apart from all of the other website editors out there. But you won’t really get a full feel for how everything works until you give it a try for yourself, so sign-up for a free account and let us know what you think!

Video Transcript:
We created Breezi for designers to let you really easily design, edit and launch a website. So when you log in a Breezi site you can pick from a number of different layout options to set the initial structure for your page.

Once you pick a layout you can then adjust the column widths if you’d like by mousing over a separator and clicking and dragging your mouse.

As you move your mouse around you’ll see dots that highlight different areas of page.

The dots are where we can start applying styles and designign the site and one of the first things you may want to do is add backgrounds so you can start to see the look and feel come to life.

You can pick from our library backgrounds or you can just upload your own.

Through the style dots you can modify the design of your pages down to a very granular level.

Uh we’ll come back to styling in a bit but let’s start adding some content so we can see what we’re working with first.

All the content is organized and managed through apps and each app allows for different types of content ranging from blocks of text, images, videos, social media feeds contact forms and several others and we’re always adding in new apps to give more and more options.

So you can go ahead and remove the apps you don’t want add whichever ones you like by dragging them in from the apps panel and move them around the page to get it just the way you like.

Once you’ve added some apps you can click/double click on anything to start changing the content.

For example you can double click and upload a logo or other images, you can change navigation links and text and edit whatever other content you’d like by double clicking on the various apps.

You’ll notice the WYSIWYG editor displays when you’re editing text, this of course let’s you change fonts, text sizes, colors, spacing, shadows alignment apply links and a lot of other formatting.

Whenever you’d like you can go back to styling your content in different areas of the page using the style dots.

You can focus in on any area of the page  to change the look and feel the design everything from spacing, (inaudible) to round  corners, drop shadows, gradients, background textures, rollover colors, and more can be done really easily and you can see all the changes as you go.

And this is what really sets Breezi apart we found the designers who just want to be able to create and design manage a site easily have been stuck between on one side having very template based web site builders that are too rigid and constraining and on the other side having options like wordpress that require a lot of time energy programming expertise umm and you really have to get in there to hack around with themes and plugins to get a really customized site.

So Breezi removes those layers of abstraction and just gives you a very simple editor so you can design and bring your site to life very easily.

So once you have your site created and designed you login anytime to make quick updates like changing styles adding pages changing layouts  checking your leads and so forth all through one clean simple interface that puts you in full control.

Here are a few other sites that we’re created on Breezi just to give you an idea.

Breezi is a fully hosted and supported platform you can use your own domain and we’ve got a lot of other additional updates coming soon to really make this the best tool possible for designers.

Thanks again for watching and if you haven’t already go to Breezi.com to learn more and get started today!

Tonight, we sent out the first 500 invites to Breezi. It’s been a long road to beta but I’m so excited to give you guys access to this amazing tool. I really hope you’ll do us the favor of sharing your feedback. We’ll do our part and listen.

If you don’t have access yet, signup on the beta list on the homepage and you’ll get access within a few days.

Let it begin

We made Flutter roughly 3 years ago now. It’s been downloaded over 150k times up to today. At the time Freshout was very young. It was 3 of us in an office on Girard Ave in Philadelphia. It was a beautiful office actually. We were working on a small site for a friend of mine. We needed to size images perfectly for the header, have a thumbnail show within the CMS panel and use WordPress. Pretty simple thing… so I asked one our developers to make a plugin to make something where we create a dropdown, date picker, multiple option, and other type of fields and then print them on the template.

At the time, there was really nothing like that out there so a lot of poeple found it useful. When you wrote a post on WordPress, you only had a post title and a post body so if you wanted to use WordPress to create a products page, you couldn’t really give any nice management tools to your clients.

As we started to grow, we kept developing it more and more. Our clients really loved it. We even developed a shopping cart plugin version + a WordPress MU version… Once we were done with the field types, we started looking into how to modulate groups of fields and how you could print entire blocks of your template.

We started thinking about an  on-your-site -as-you-see-it visual site editor that would look at your CSS files and parse rules based on a simple syntax. The idea was to add an identifier on the properties that you wanted to be editable (when you were running the editor) and also specify the values that it could be changed to (or the range).  We didn’t have the bandwidth at that point to do what we imagined so we just tabled the whole project.

Around the same time, I was searching for another project that was similar and found something that was remarkably more powerful (or at least attempting to be). It was really difficult to wrap your head around everything they wanted to do but it was literally an entire templating and CSS language built for building super dynamic themes on WordPress. I think one part was actually called Canvas. I’m not sure. It was broken into two parts. Part one was the templating and part two was the css editor. The codebase for this abandoned project pretty massive but there were a lot of very interesting ideas in there. They had built their own CSS editor, templating language, and lots more. We tried to revive that project but there was just too much to carry. And there was no support for the project. I had to look through the internet-archive to download the files. It was sad but we abandoned the abandoned project.

By this time, Freshout had grown to about 15 people and we had more room to play around so we decided to actually turn Flutter into a product of some kind. I think the reason was just pure frustration with client work at the time.

One of the first questions we had to face if we were going to continue building the plugin on top of WordPress or build our own CMS. I was really torn about the decision. On one hand WordPress was such an awesome platform to build on and a great community but I didn’t feel comfortable building something would required us open-source our work.

It’s not that we didn’t beleive in open-sourcing. It’s just that spending money on a new business that had those types of restrictions just didn’t seem like something that would be a good idea. I think most people don’t really understand what GPL really means and just interpret it they way that they’d like. This is the way I saw it: If you build anything that can’t live without our code, you should be open-sourcing yours or its ilegal. That didn’t work.

There are plenty of WordPress based platforms these days that dance around the GPL rules. I’d still feel uncomfortable with that today so I’m glad we decided to build our system from scratch. The other thing was that we only had two PHP developers on our team. The rest were all Rails. So at that point we completely disregarded everything with Flutter. We stopped working on it. People were pissed. I felt horrible but it just didn’t make sense for us + there were so many developers that were trying to compete with our project that I thought it was just dumb.

Now that we had decided to build something from the ground up, we didn’t really care what Flutter was. We didn’t have to work within WP’s constraints. The biggest one being that content editing was not on the same view as the actual content view. That was huge. It’s the one concept that is still at the core of Breezi. Remove abstraction. Focus on what the user is looking at. The rest is your (a product team’s) problem.

I started to put together some wireframes of the very early concepts and sent to a few people on our team. It was pretty horrible. It was a shelf at the bottom of the editor (just like we do now) but EVERYTHING happened from there. Once we had some basic specs, we put together a team of a few of our people to start working on this project. We called it Breezi.

We had no idea what the hell we were getting into. There were 3 or 4 really ambitious ideas that were totally disconnected as an experience. We had no core experience to pivot around and were coming up with the supplementing ones.

The most interesting idea was to push the platform towards something that would guide you as you were making decisions. You  would get a bunch of “good” derived choices as you were playing with your site. So if you changed your text color here, it would suggest you a few background color for the containing area. Another example… we had a feature that would match line-heights with your font sizes. There were similar ideas done around colors.Seems like a good idea but it was too ambitious too early on.

By this time, Freshout had just finished a few fairly large projects so the team that was working on the editor was about 6 or 7 people at this point. We were lucky enough to have some really incredible people join our team around this time. It’s really under their leadership that the product was coming together. I honestly had no idea what I was doing. The team really carried themselves. I was spending most of my time dealing with clients in San Francisco and the team was just on their own developing for a good few months. Everyone carried their own weight. It was a very technically challenging project and for many of the guys, it was probably one of the most challenging thing they had ever worked on.

We had the usual delays and set backs. A lot of things were cut out but the guys eventually had a prototype working. The product was pretty weird in terms of the user experience. A lot of good ideas but they just weren’t there yet.

This was our alpha alpha alpha. One template, one layout, basic content editing capabilities, the style settings were coming from the shelf below, it took over 35-50 seconds to fully load the page and you could do a bunch of things. It was good for what it was.

More to come in part 2.

Firebug is an awesome tool but since Breezi is a very front-end intensive app, Firebug tries to listen to everything that is happening and can really really slow you down to the point that it can cause your browser to crash. So please deactivate using the instruction below.