Divshot

[CGamesPlay]

Why is there such a strong focus on "responsive" CSS? It has never made much sense to me, because my desktop will never turn into a tablet, and my tablet will never turn into a smartphone. It seems as though creating a better server-side abstraction that lets me produce different markup that shares much, but not all, of the CSS would be more effective from a development time perspective.

If you use responsive CSS, what am I missing?

[Lalabadie]

How do you make sure you support all the possible devices that will request a page from your server? If you divide between desktop and mobile, what do you serve a tablet? If you make a tablet layout, what do you do if it changes orientation? Once you added the tablet, what do you serve a web-enabled TV? A handheld console? A high-resolution display?

Responsive is about responding to container characteristics, instead of relying on the assumption that a certain known device has certain characteristics. Even with responsive, the rabbit hole goes waaay down, but at least you're avoiding the ghetto effect of "supporting" a set list of circumstances.

[tarr11]

Some examples:

* Resizing your browser window.

* Changing font-size for accessibility (Ctrl+, Ctrl-)

* Moving your browser between multiple screens

If responsive was server-side, each of these scenarios would cause a page reload in order to accomodate the adjusted layout.

Responsive design doesn't just mean CSS media queries. It more commonly means using floating div/ul instead of tables for layout.

[EwanToo]

One issue with server side solutions in general is caching becomes really hard or ineffective.

With the client side solutions, like responsive CSS, you're serving one cached, distributed, minified set of data to every client.

[mbleigh]

With a responsive design I don't have to write three separate apps for mobile, tablet, and desktop. Instead I adapt the CSS to fit each device. It reduces repetition and keeps everything clean.

[ChrisNorstrom]

Example: http://www.timeforzen.com

(Resize your window and you'll see how everything re-aligns for desktops, tablets, and smartphones)

I chose responsive css because I can code it once, and it'll work on all devices. No bloat, no separate versions to maintain. Why wouldn't you want that? Especially with more and more consumers buying mobile and tablet devices. You increase your potential audience with a few lines of css code. Why do it through server-side code and have seperate versions to maintain during each and every update? As long as you plan ahead, your design can be responsive with literally a few lines of css code.

[marknutter]

It's less about it being responsive in real-time and more about it being responsive across a wide array of devices with different size screens.

[jolan]

Rotating from portrait to landscape.

[dotborg]

layout should be responsive also to amount of content, especialy on websites focused on user generated content

[timdorr]

Interesting that the tagline is Interface Builder for web sites. One of the big powers of IB is that it ties back into your code so directly. This seems somewhat separated from whatever underlying code I'm creating.

I think the killer app is really an IB-for-the-web that plugs into Rails/Django/Symphony/etc so you can start building a web app visually, without sacrificing code quality.

[mbleigh]

The great thing about building web apps is that it's extremely easy to connect the front end to the back end. By focusing our efforts on making the experience building the HTML and CSS great, we don't have to force a choice on you like Rails vs. Django or Backbone vs. Spine.js.

[lallouz]

Who is the target market for what you are describing though (or for divshot for that matter)? Is it meant to be for slightly less technical people? Is it meant to take over all development/developers in the future?

Being a seasoned developer, front, middle and back end, I find this an interesting product, but something that I would likely never use more than "playing around". I'm not trying to troll here, I'm legitimately curious if anyone else feels this way.

Edit: I did sign up for an invite over a month ago, and I am legit excited to give it a go.

[cmelbye]

I agree. I find it tedious to take generated code and try to integrate it into my project (rip out filler text, replace it with database calls, etc.)

[thedudemabry]

I was lucky enough to use the Divshot beta several months ago during a hackathon, and my team's process was indeed to copy the generated HTML into Rails ERB files at the end of initial design. But what was really powerful was the ability to WYSIWYG our way through discussions about what our product would do, and then just publish easily consumed code when we were ready to hack. Our alternative would have been an analogous process in Photoshop (slower and doesn't produce the base code) or to iterate the HTML during the discussion (much slower and requires the designer/developer to switch mental contexts quickly). It worked very well for our purposes and I see it being invaluable during client discussions.

[yesimahuman]

Congrats on the upcoming launch. I've been wanting to check out Divshot for awhile but I haven't gotten an invite :)

I am the founder of Jetstrap (http://jetstrap.com/) and we've built an interface builder for Bootstrap as well, so we are definitely in the same space.

[eranation]

I'm waiting for a beta invite for more than a month, I hope this hints of a upcoming release? The competition (http://jetstrap.com/) is not waiting...

[jakejohnson]

We rolled out our beta yesterday, sending out invites in short waves. You should get one very soon. Thanks for being patient!

[splatcollision]

Got any sample output? I'd love to compare notes on the HTML your tool creates.

I'm interested in this type of app, as I've built a design prototyping tool called Edit Room, that also creates production-ready HTML and CSS from visual design tools. http://www.edit-room.com/

Good luck!

[mbleigh]

Here's some 100% unmodified output from a page I threw together in about a minute just to post here:

https://gist.github.com/3743829

[fuzzygroove]

I've been dreaming of something like this for a while. There's an OS project called "Stylo" (https://github.com/maccman/stylo) that has the basic framework for an interface builder, but it's not as far along as what I can gather from the Divshot demo. I'd be much happier building web apps in my free time, instead of an app to build web apps. Looking forward to checking it out.

[jakejohnson]

We're huge fans of Alex MacCaw's open source projects. Divshot is written completely in CoffeeScript and Spine. There are features in Stylo that we'd like to add to Divshot such as color pickers and more design options for the inspector (gradients, border radius, etc).

[showerst]

Great looking product, can't wait for the invite.

I see you guys are associated with Intridea; any chance we can claim this as another DC startup? DC needs all the buzz we can get =)

[mbleigh]

Actually we got started at Startup Weekend Kansas City and now we're out in LA, though Intridea's been awesome with their support :)

[SchizoDuckie]

Looks very nice, but i will never use something like this as SAS.

This needs to be downloadable and embeddable in a private product (like a CKeditor), otherwise i'd never use it.

[mbleigh]

Could you explain a little more why you feel that way?

[jakejohnson]

The editor itself is completely static HTML and written in CoffeeScript/Spine which gives us a lot of flexibility. We're exploring different opportunities for integration and possibly a downloadable version.

[ryanfitz]

This would be great if it could also generate javascript code to run the app (backbone.js, angular...) then you could plug that into calling your backend.

[mbleigh]

We're not focusing on connector code at the moment because, as a tool for developers, we want to give everyone the ability to use their own frameworks of choice (Backbone or Angular, Knockout or Spine). Everyone uses HTML and CSS (or at least HAML and SASS), so we can use it as a common starting ground and help speed up the initial phases of development.

[SoftwareMaven]

I'm right at the beginning of designing my templates for a Bootstrap/Django project, so this is a really great time to see this. I'd really like the ability to tweak the designs without needing to edit a text file and reload the browser.

Question: do you guys support custom Bootstrap themes?

(Oh, and I wouldn't turn down an invite. The email I signed up with is in my profile.)

[jakejohnson]

You're in. Can't wait to hear your feedback and ideas! A: We plan to support custom Bootstrap themes in the near future. Stay tuned!

[Roelven]

Oh I like this. It's great to see so many things taking off thanks to Bootstrap. Yay for a less ugly web!

[ddewit]

For teams where you have non-coding interaction designers and backend designers AND separate marketing teams this could be an awesome accelerator simply because everyone uses the same tool (Bootstrap) but interacts with it in different ways. That's awesome.

[dmauro]

This looks really exciting. This seems more like what I wanted easel.io to be. I had actually started working on a simple html/css in-browser editor to use for mocks that could be taken into production, but looks like this might be what I was looking for.

[tomaskafka]

Nice - I made a prototype of something similar half a year ago - drag&drop designing of bootstrap-based sites :) http://www.screenr.com/vjo8

[yehanyin]

Thanks for the invitation. I'm glad to have the chance to try it today. It works great and definitely will be my first choice for mockup when starting a new web app. Thanks again!

[tharris0101]

I'm not sure I'd use something like this for production, but anything to let me do mock ups quicker is nice in my book. Can't wait for the invite.

[mbleigh]

We think you might be convinced to use it for production once you see the output HTML. Stay tuned!

[atto]

Looks awesome, great work guys. The resulting code looks very clean and maintainable too. I'd love to check it out when you have more room.

[nanexcool]

Hoping to try it out, I'm mocking up a website with Bootstrap and changing themes a bit and doing it visually sounds interesting.

[jtansley]

This looks incredible. Eagerly awaiting a beta invite. I can't wait to try this out. Great job Divshot team!

[CWIZO]

Does it support SASS or is the only output CSS at the moment? I'd love to try it out ASAP btw :)

[mbleigh]

We're still pretty early, but we know how much people love their CSS preprocessors. Check out http://divshot.com/alloy as a preview and promise that we won't leave SASS users out in the cold :)