Posted by Matt on July 17th, 2011 under Updates
Hey everybody,
This blog is going on hiatus for a few months while I take care of some other commitments.
Lean Designs will remain running, but there will not be any major updates until the spring of 2012.
I’ll still be available by email if you need to reach me.
Best,
Matt / matt@leandesigns.com
Posted by Matt on July 6th, 2011 under Updates
Back in February I integrated Mixpanel into jMockups (now Lean Designs) to track how folks were using the website to mockup converter. I haven’t looked at it much since then because I stopped working on that feature, but had a look today to see what the numbers looked like anyway.
One graph in particular caught my eye:
The average number of times a unique user saves his or her design:
As you can see back in February the average user saved their design 5 times. Over the last five months that number has more than doubled indicating that more and more folks like what they’re creating and intend to come back (woohoo!).
Here’s to small wins.
Posted by Matt on July 5th, 2011 under Updates
Hey ya’ll,
Lots of updates with today’s release:
When I began working on Lean Designs last June, my goal was to build a high fidelity mockup tool to compete with Photoshop. As time went by this shifted a bit and the goal became to build a web design tool for developers.
About two weeks ago I was sitting in Barnes and Noble flipping through Web Designer magazine when I came across an article by Lee Grant titled Convert Photoshop themes into HTML pages. In it, he explains step by step how to convert a Photoshop mockup into HTML. The whole time I’m reading it I’m just in awe of how hard the process is. And the article doesn’t even cover how to design the site in the first place–just how to convert it to HTML.
You can create the same design with Lean Designs and automatically convert it to XHTML/CSS in a fraction of the time as you can design it in Photoshop and convert it to code by hand. So why aren’t people using it?
Lot’s of reasons. Ignorance. Shitty positioning. A dearth of examples and lack of tutorials. And more bugs than I care to remember. But you know what? These can be overcome with pressure and time.
So let’s do this.
For those of you following along, you’ll note that I spent a lot of time building a tool that lets you import existing webpages into Lean Designs. Sounds like a good idea and it’s garnered a bit of attention, but it’s been a bitch to build and maintain.
90% of the elements on 90% of the pages folks imported perfectly, but handling the plethora of edge cases was time consuming and frustrating and it distracted me from improving the core product. They say do one thing well. With the constant addition of features over the last few months, Lean Designs was in danger of doing a lot of things poorly.
While not a huge amount of code (1,634 lines), the code complicated the backend tremendously. I had stopped advertising to it some some time back so it wasn’t getting used heavily either. So I deleted it (and no one complained).
Before and after:
Posted by Matt on June 22nd, 2011 under Updates
Today’s release brings a few important changes to Lean Designs’s 960gs grid overlay.
The changes include:
1) The grid now has 16 columns vs 12 before
2) When the grid is on and you drag elements, they will snap to the columns. Also, when you adjust an element’s width it will snap to the right side of the columns.
3) The default element widths fit neatly on the 16 column 960gs grid
What this means it that you can now effortlessly design grid-based websites using Lean Designs.
Here’s what the editor looks like for a page with the grid turned on:
If you look closely you’ll notice a few key things:
To play around with it check out the new demo page and don’t forget to toggle the grid on.
Posted by Matt on June 21st, 2011 under Updates
Today’s release brings a major overhaul to the homepage as well as a few miscellaneous updates.
Before and after:
The changes, which are loosely based on Themify.me’s Bizco WordPress theme, include:
The canvas element has something called a same origin policy which means that if I load an image from an external source onto the canvas I lose the ability to manipulate it. This is critical to how Lean Designs works, so I had to figure out a way around it. My original solution was to have Lean Designs act as a proxy so that everytime a user loaded an image, Lean Designs would download it on its backend and then serve it to the user so it appeared to be coming from the same domain (and not violate the same origin policy).
The problem is that this ties up the server, a lot. When only a few folks are using the site that’s no big deal, but whenever there was a traffic spike the entire site would crash.
Max Novakovic came up with a nifty solution to this which involved setting up a image server and passing the data back your site via JSONP. I haven’t had time to figure exactly how it does what it does, but it works like a charm. You can read more about it on Max’s site here.
Last night, several days after I made the transition to Max’s solution, images weren’t loading correctly. I tracked it down to an issue with Max’s image server:
It seems that the server had exceeded Google App Engine’s quota. I doubt that Lean Designs was the primary cause of this, but I’m sure it contributed.
Fortunately, Max opened sourced the server and has PHP, Phython, and Node.js versions available for download on Github. I wound up setting up my own PHP sever using Max’s method and everything works fine now.
There was a small bug that apparently has existed for some time where when you tried to share your design with someone Lean Designs would give you the wrong URL the first time around. Oops.
If you regenerated the URL it would work, but I doubt most people got this far. This issue is fixed in today’s release.
I introduced a bug a few days ago that prevented the font color dialogue from appearing. This too is fixed in today’s release.
I’ve experimented with different price points — $24/month, $19/month, $9/month, and am giving another one a shot: $99/year.
Why offer a yearly plan? Well, monthly doesn’t mesh well with a lot of folks because they only need to design new sites every few weeks or months so having a monthly subscription seems like it’s a bad deal. Having a $99/year plan as the only option frees you from this month to month concern. Plus, it hopefully leads to a little bit more buy-in and who knows, even though it’s cheaper than the $9/month plan it might have a higher EV when you take into account churn. We’ll see what happens.
Posted by Matt on June 19th, 2011 under Updates
Today’s release introduces a new video element to Lean Designs that lets you embed YouTube videos in your websites.
You can see it in action on the revised demo page:
The primary motivation for this addition was that I wanted something other than the gray image placeholder to add to landing page designs (not to mention that embedded videos are common on many types of webpages).
Read more about it on the Working with the YouTube Video Element documentation page.
Posted by Matt on June 15th, 2011 under Updates
Let’s face it: Lorum Ipsum placeholder text is pretty boring:
You want some text there to act as a placeholder, but line after line of Lorum Ipsum Lorum Ipsum Lorum Ipsum text takes all the spice out of the design.
For this reason I’m happy to announce Lean Designs’s new Lorum Ipsum Latin Text Generator.
How does it work, you ask? Glad you asked.
When you select elements and click the Lorum Ipsum icon on the toolbar or press ⌘ + L, Lean Designs will automatically fill the selected elements with random sentences from Virgil’s Aeneid.
It’s smart too — it will fill the elements with as much text as possible based on the font, font size, style and element dimensions without overflowing.
Here’s what this same design looks like after generating some fancy new placeholder text:
You can read more about it on the How to Use the Lorum Ipsum Latin Text Generator support page or play around with it on the demo.
Enjoy –
Posted by Matt on June 14th, 2011 under Lessons Learned
Last Friday I sent out Lean Designs’s first email newsletter. It was quite exciting and overall it went pretty well, but there’s a lot I could have done better. Here’s what I learned:
I launched Lean Designs (formerly called jMockups) in October 2010. In an effort to get the site out there quickly, I made a huge mistake: not setting up a newsletter prior to launch. Why is that so important?
Between then and when I sent the newsletter, 2,064 people had signed up for an account and not one of them had opted into a newsletter. Why not? It didn’t exist.
And as you’ll see, sending a newsletter to a large group of people who have not opted into the newsletter is not ideal.
MailChimp, the service I chose to deliver the services, makes collecting emails really, really easy. If you haven’t launched, it’s as simple adding a form to your site.
Because Lean Designs had already been launched for some time and I wanted to integrate the newsletter into the signup process, I had to work with their API. Fortunately, there are a lot of wrappers that allow you to work with their API with minimal effort. I choose to use the Hominid Gem.
I added a checkbox to my signup form asking whether new users wanted to receive updates and after their account is created, assuming they want the newsletter, I call a add_to_newsletter method that I added to the User model:
And that’s it for integrating it into the existing signup process. With this in place, I ensure that every new person added to the mailing list actually wants to receive it.
With one quick Heroku console command you can export all of your user’s email address to a text file:
heroku console 'puts(User.all.collect(&:email).join("\n"))' > emails.txt
Which you can then import straight into MailChimp:
Easy — yes — but it doesn’t necessarily mean you should.
In eight months, around 2K people signed up for a Lean Designs account. I want to inform them with what’s new and imagine most wouldn’t mind an update, but getting that information to them is tricky.
The MailChimp Compliance Tips is pretty explicit about permission:
…if you’ve been collecting emails for a few years and are only just now getting around to emailing them, you need to re-invite them to your list.
Send a quick email from your own email client or server asking people if they still want to be on your list. Ask them to click a link, such as your MailChimp signup form link, to confirm. If they don’t respond, take them off the list. They obviously don’t want to hear from you.
Easier said than done though. Are you supposed to send everyone an email via GMail saying “Hey, remember us? You should sign up for our mailing list by clicking here“? In my mind, that’s spammier than sending everyone a beautifully designed, informative newsletter via MailChimp.
I understand MailChimp’s position though. As the service provider, they have to carefully watch for abuse. Consider this example from a 2006 blog post titled Sending Your First Email Campaign to An Old Email List?
Let’s say you visit a tiny little Yahoo store to buy some kind of obscure gift for your anniversary. It was a nice website, with cool little gifts. You buy a trinket for your wife and leave. 3 years later, that Yahoo store has grown into a huge e-commerce portal with millions of customers. They’ve installed an extremely powerful email marketing system, and they’re finally ready to send email offers and promotions to their customers. Hey, according to CAN-SPAM, they’ve got a “prior business relationship” with you, so they’re allowed to do it right? How would you feel if you suddenly started receiving weekly “e-blasts” and 5-page long newsletters from them?
Am I doing the same thing as the e-commerce site in the example above? I don’t think so, but where do you draw the line?
Remember Lean Designs? Actually, chances are you signed up when it was called jMockups so you’ve probably never heard of Lean Designs. I changed the name. And it’s no longer a mockup site. This is the first newsletter. No, you didn’t subscribe to it. Please check our site because it’s changed a lot.
Yuck. There’s a lot you need to convey in your first newsletter (especially when you’ve changed your name and no one has opted in to it) and the you’re not going to get a second chance at it, so it’s got to be good.
I wound up spending about four hours writing and re-writing the newsletter and I probably should have spent much longer, possibly even A/B testing copy with a few folks before sending it out to everyone.
Here’s how it turned out:
The overall design is based on Heroku’s monthly newsletters. It’s simple and elegant and I liked it better than the MailChimp’s offerings.
The first paragraph is loosely based on the example given in the Sending Your First Campaign to an Old Email List? post mentioned earlier. The key here is to quickly what this is and how to opt out if they want.
In the second paragraph I try to explain why the name changed and what the app’s new purpose is. And in the third paragraph I try to hit it home and invite them to check out the new site.
There’s probably an argument to be made for putting the unsubscribe section last, but remember: no one asked for this. Make it painless to go away.
#6. Luck Matters
The day before I planned on sending out the newsletter Sean Nelson wrote a blog post about Lean Designs. It had been a while since the site was covered and I was thrilled he chose to write about it.
But I quickly found out that the site had some nasty scaling problems because of how I implemented some things on the backend (for the technically inclined, Lean Designs was acting as a proxy for images that users included in their designs in order to circumvent the canvas’s same origin policy which caused the server to get tied up while serving the images). I quickly set up some caching and reworked how the images were fetched, drastically improving the site’s performance.
Had Sean not written that blog post I wouldn’t have discovered these issues until after the newsletter went out. Had that happened, the site more than likely would have been down for most of the people who tried visiting it that day. Smooth.
But it worked out because I lucked out. This time.
Ultimately, I chose to send the newsletter via MailChimp. It was a calculated risk: in my mind the benefit of having a professional newsletter that could be tracked via MailChimp’s platform outweighed the chances my account would get permanently suspended for non-compliance.
A few hours after the newsletter went out I received the following email:
And when I signed back in I was alerted that my account had been reviewed by their compliance team:
I agreed to address it and that was that, for now.
Things could have gone the other way though. They could have reviewed my account, determined that I violated their Terms of Service, and promptly suspended it without a second though. I’m glad they didn’t and honestly don’t think it deserves a suspension, but it’s not up to me. Again, I lucked out.
With your permission, MailChimp can track almost all aspects of your campaign including who read it, who clicked the links, etc.
Here’s a breakdown of the results from Lean Designs’s first newsletter campaign after four days.
30% (624 / 2,064) of the recipients opened the newsletter, which was much higher than than the Software and Web App category in general (probably because it was the first newsletter):
On the flip side of that coin, more than 2/3 of the recipients didn’t even open it:
4.2% of the total recipients and 14% (1 in 7) who opened it unsubscribed:
1 person reported it as spam:
And out of of the folks who opened it, about 33% clicked either the “Visit the New Lean Designs Website Builder” (205 clicks) or the “@leandesigns” Twitter link (5 clicks):
When people sign up for your service and provide their email address, they’re trusting you to do right by them. For all they know you could sell their email address and password (you do use different passwords for different services, right?), spam the hell out of them, misuse the content they provide, and much worse. Treat your users with the respect they deserve. Always remember that there are actual people behind those email addresses.
If you do that, they’ll be happy, you’ll be happy, and the 800 pound mail chimp should leave you alone.
If you read this far, you should follow me on Twitter here.
Posted by Matt on June 12th, 2011 under Updates
Hey guys –
Today’s release brings a new color picker.
Here’s the old color picker (yawn):
And here’s the new color picker (whoa):
Not bad, amirite?
Summary of the changes:
Not only is the new color much more useful when it comes to designing a site, but I think it adds a much-needed “wow” moment to a visitor’s initial experience with Lean Designs.
As always, let me know if you run into any snags –
Matt
Posted by Matt on June 6th, 2011 under Updates
Today’s release brings a small but important update to the way Lean Designs generates wrapper classes around elements that need to be centered on your exported HTML/CSS page.
In the past, every row of elements was placed in its own wrapper class:
This can be simplified by placing sequential wrapped rows inside of a single wrapper:
And as a bonus, if a page contains only one wrapper class instance, it is automatically converted to an id.
This update along with several others over the past few weeks reinforces that Lean Designs is now a better alternative to web design than PSD2HTML services.
