Jetstrap for Bootstrap
jetstrap.com
jetstrap.com
You should implement something like this:
- User signs up - gets 5 - 10 FREE Screens.
- Once they've used up their FREE screens take them to a page to purchase more screens.
- When they have 1-2 FREE Screens remaining you should have a popup which says they've nearly used their free screens up and to buy more (with one option offering to go to payment page & the other leting the user continue what they were doing).
- On the page where the users can purchase more screens, I wouldn't bother with a monthly subscription plan because that's not what your target audience is interested in.
I'd offer the following options:
100 Screens - $39 ($0.39/Screen)
250 Screens - $95 ($0.38/Screen)
500 Screens - $180 ($0.36/Screen)
http://blog.keen.io/post/32269955563/pricing-is-hard-we-need...
Personally I like the "Utility Pricing" (per article) for something like Jetstrap but maybe on a per project basis instead of per screen?
GoMockingbird (http://gomockingbird.com) is an example of an application I probably have 4 accounts for-- not on purpose, I just couldn't figure out which email, twitter, facebook I used to sign up for it. I didn't realize that only the first project was free until later, because I generally stop using it after one project.
I could totally foresee a user signing up for 5-10 free screens then forgetting about the tool for later. When they come back, those original 5-10 screens may or may not be related to what they're working on now, and I can guarantee most people won't shell out the $39 when they realize they could just create a new account.
The proper way to monetize this (IMO) is through a freemium model. Don't limit them with what you have now. Figure out something that's truly a solid bell or whistle and sell them that. Give users the ability to create HTML/CSS for free, but maybe scroll-fixed javascript headers cost $10 for 10 pages (scroll here: https://www.kiteedu.com).
Make it $100, it's the BLINK tag of 2012.
1. Keyboard shortcuts! I really wanted to deselect items by hitting escape but it didn't work. I kept trying anyway because I'm so used to Balsamiq :) I'd also love to be able to hit / to quick-search the list of elements I can add, then return to add the selected item. Again, Balsamiq really nails this.
2. I wanted to add a div with Bootstrap's pull-right class, but couldn't figure out how. Some means to add custom elements with custom css classes, even in a limited way, would really help me.
3. I typed some text (directly into a grid .row) but it didn't show up in the CSS+HTML tab. Not sure if this was a bug or not.
I really want this to work and it would save our team loads of time (meaning, we would pay for it :). Looking forward to what you do next.
Thanks for the feedback, all great ideas!
What might you use to implement functionality and data then? I'm asking because I'm coming from database development in FileMaker with limited traditional coding knowledge. While it's very easy and fast to build solutions in FileMaker I've been looking for a web-based alternative for ages. Of course I tried frameworks like Rails and Django, worked tutorials, understand the concepts, can follow along but it's a steep learning curve and I'm nowhere near the results I'm able to achieve in FileMaker.
I guess there's just no shortcut or easy way.
That said, it was really low pain to get started just now. It makes me so happy to not have to go click a link in my email!
You can add Email & Password style accounts super easily using https://www.dailycred.com (this is my startup). You can use it just like your other OAuth providers, so it would really only take a few minutes to set up.
I realize that this tool is probably meant to be used from a computer with a large screen and with a mouse, but consider the following scenario: Somebody, who is using their smart phone, is landing on your page from a search for "bootstrap responsive interface-building tool". If that was me, I'd probably leave the site pretty fast.
[1]: http://i.imgur.com/UsYhZ.png?1
[2]: http://i.imgur.com/UzaB8.png?1
[3]: http://i.imgur.com/JEPSj.png?1
(Using Dolphin Browser on Samsung Galaxy S2, Android 2.3.5)
I plan on using this on my next site. One question, though: is there a way to know which version of bootstrap and such the editor is using?
Just these, otherwise excellent. Keep it up guys!
I wanted to recommend red too initially, but I think for his use case blue or green would go well because of the background image (and also for the reasons above).
Orange.
If it's good enough for carrots and William the Silent, it's good enough for me!
One note though. Your target audience is going to include non-programmers and those people might not even know the proper names for some of these bootstrap elements. So I suggest some kind of toggle between the boostrap name buttons & maybe some sort of GUI. like Actually dragging a menu into the workspace, or dragging a twitter bootstrap button into the workspace, etc.
Other than that.. I like where this is going.
Object orientation is your friend with these kinds of tools. We based a bit of the internal component model off of Java's AWT and Swing, making sure that each component we built was reusable in any situation, making it extremely easy to add new components.
Just like in the DOM, you are performing operations on a tree structure, so recursion and iterative optimization is important (especially in Javascript where function calls are expensive).
Other than that, it's just a lot of event handling and DOM manipulation.
So maybe each screen cost X credits - but you sell the credits in packages. $10 for 10, $20 for 40, $50 for 150, etc. The idea being that you get more credits, the more you pay.
The beauty about it is that you front-load a lot of your revenue, which allows you to plan easier. It also is easier from the user's perspective, because I know I can always come back and use those credits.
You can even set some reasonable expiration time period - say 24 months - on the credits.
Anyway, that's just my $0.02.
Awesome product, by the way!
Edit 1: Another interesting side effect of implementing a credit system, is that you are setting the ground work for a marketplace. People can auction/sell some of their designs, and people can use their excess credits to buy those.
One suggestion: a "quick search" bar that would let you add elements by starting to type the names of things, similar to Balsamiq Mockups. It's a bit of a pain to navigate through the menus to find the right element.
I've seen bugs ranging from not being able to drag anything at all to elements not landing in a proper container, to just being overall confusing (dragging a table row results in dragging a table cell as a ghost. Where is my row?).
My trial was about trying to drag&drop a super-simple layout, with a table, with some form elements.
Unfortunately that's not properly possible right now, i'll wait up another bit for fixes. PLEASE keep up this work, we need more tooling like this!
Uncaught TypeError: Object #<Object> has no method 'apply' jquery.js:3332 jQuery.event.dispatch jquery.js:3332 jQuery.event.add.elemData.handle.eventHandle
When dragging a select input, this did, work, when then dragging another element, more errors:
frame:55 Uncaught TypeError: Cannot call method 'value' of undefined builder.js:142 Uncaught TypeError: Object #<Object> has no method 'apply'
I hope you have automated javascript error logging and are fixing every bug in this 'cause i really would like this to work!
Hope that helps
Failed to load resource: the server responded with a status of 404 (NOT FOUND) http://jetstrap.com/api/v1/project/last
After choosing the 'fluid' layout and hitting 'Create'.What I'd like to see added would be an easy way to change the colour/font etc of elements to make them less bootstrappy.
.btn {color: red;}
I asked for this via Twitter and when I got that email today it was like Christmas. But then I read the email and went to the site, and was so sad they didn't do anything like this :(
Is this in the pipeline?
i.e. the layout part is relatively simple, but change the colours, fonts etc, I find a lot harder.
Don't get me wrong, though, it's an awesome tool. If you get the colour/theming stuff added it'll almost be as simple as building a form/window in VB.
With all the horrible bootstrap default production sites i've seen lately, I've developed a pretty signficant hatred for the framework. But sometimes after seeing tools like this, I remember that it can be a very effective prototyping tool (as long as it's used only for prototypes, and you hire a real designer and/or front end guy to put together your production design and code).
That being said, awesome job with this site and this tool. Then only suggestion I could possibly make would be to change the header text from "build amazing websites" to "build amazing prototypes" - this at least helps to spread the concept that boostrap does not replace good, unique design and code.
I do disagree that bootstrap doesn't replace unique design and code. Lots of great websites have a standard set of interface elements, and bootstrap makes this extremely easy. Just add your custom styles and you have a unique site built on a solid CSS framework.
The problem is so many people don't do that. They just leave the stock bootstrap there. If you can't even be bothered to change the colors from the templates, how am I supposed to take your company seriously?
Re: pricing. It depends how awesome you plan to make this. As it stands I'd probably pay $10 a month, maybe a bit more. If you fully pimped it out like Balsamiq has done for mockups - the sky is the limit. And if you had no competition for a bunch of your features - I'd actually prefer you charged more and had fewer customers, so everybody doesn't roll their eyes when they see something I built with Jetstrap, like they are doing now with Bootstrap (that assumes you get around to LESS integration...hint hint!).
I am super particular and nitpicky about design and front end things and have an abnormally high level of attention to detail so for me any company that uses default bootstrap in production is automatically not legit (this may not be the case for others). A legit company has the time and resources to create a custom unique design and interaction style that is suited to their brand. A BS company does not, so they use bootstrap.
Other times, I'd take a look at the code and there were quite a few irrelevant divs.
Is there a way to make the html code editable to fine tweak the pages while still editing the page via drag and drop to get the big picture mockup?
Btw great work so far. I'm really loving it and planning on using it for several new projects.
Quick bug report:
MacOS/Chrome (latest) - create navbar - click or double click on the bar, and you get errors.
Uncaught TypeError: Object #<Object> has no method 'apply' jquery.js:3332 jQuery.event.dispatch jquery.js:3332 jQuery.event.add.elemData.handle.eventHandle
One way to use Jetstrap is to just generate snippets of Bootstrap if you already have a large code base and just want to copy and paste complicated components.
It would be great if you could not only let me select the starting template but if you could let me choose from a dozen skins - say from Bootswatch, or similar features like lavishbootstrap.com, and the 'dice' feature at boottheme.com).
Subscriptions work, everyone understands them, there is infrastructure to support them. Just sell them. Do not get cute with your pricing model without a very good reason, backed by data.
An instructive question which was asked to me recently: "Who would be excluded from using this project if it cost [I'll fill in price points: $39 / $99 / $199 etc], is it in their best interests to use this, and do you seek their business?"
If you could come up with some scheme that was usage-based rather than time-based, you might make more money in the long run. $5/screen? $50/project? I dunno.
Maybe $100/year, upfront, non-recurring. That wouldn't be terrible. It wouldn't feel like time-based usage because the timeframe is so long.
You might be able to learn something from the pricing experiences of the mockup tools like Balsamiq and Mockingbird.
"Failed to load resource: the server responded with a status of 404 (NOT FOUND) http://jetstrap.com/api/v1/project/last
"not dropping, no container or component found. builder.js:127"
Loving it.
Looking forwards to when these are fixed though, I'd like to use it myself, and would be happy to contribute.
== Update ==
The problem I was having seemed to be I hadn't named my screen, I was then shown a blank white screen which looked like I could drag the elements onto, but this didn't work.
So, how can I pay you for it?