Hacker Newsnew | comments | ask | jobs | submitlogin
Divshot (divshot.com)
199 points by lukethomas 583 days ago | comments


CGamesPlay 583 days ago | link

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?

-----

tarr11 583 days ago | link

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.

-----

TazeTSchnitzel 582 days ago | link

>Resizing your browser window.

I love responsive design for exactly this. I often have small or large browser windows, and being able to choose instead of being constrained by fixed-width sites is great.

-----

JulianWasTaken 582 days ago | link

Perhaps it would appear then that I am the only one that never ever ever resizes my browser. OP's question has always puzzled me too.

-----

EwanToo 583 days ago | link

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.

-----

TheHegemon 582 days ago | link

What? Really? Having several version of the CSS would not be hard to do in most frameworks.

Also only sending the needed CSS for mobile browsers makes it that much faster.

-----

Lalabadie 583 days ago | link

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.

-----

mbleigh 583 days ago | link

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.

-----

marknutter 582 days ago | link

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 583 days ago | link

Rotating from portrait to landscape.

-----

ChrisNorstrom 583 days ago | link

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.

-----

dotborg 583 days ago | link

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

-----

timdorr 583 days ago | link

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 583 days ago | link

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.

-----

timdorr 583 days ago | link

That's great for the initial build-out, but what happens when I want to change something? I can't use your tool anymore, because for me to move an element on the page means I have to take that generated HTML/CSS and start over again converting it to a view template.

This is a far-off idea, but it would be cool if you had support for various frameworks and could plug into a git repo to map the view data into the templates you're outputting. That way I could continue to use your product for the full lifecycle of development.

Right now I write everything in HTML/CSS by hand and poke around with Firebug to do anything visual with it. I'd love a live-edited version of my view templates with a visual editor like this that generates high-quality code. I would pay a sizable amount of money for such a service.

-----

Breefield 583 days ago | link

<bluesky> Perhaps Divshot could have some plugins that allow you to take the generated markup and specify, for example, which elements should repeat from an array passed through from Rails, or Django, etc. Then export that kind of code. Export to HAML would also be nice. </bluesky>

-----

mbleigh 583 days ago | link

Our bluesky visions aren't so different, but no promises that outrageous just yet :)

-----

cmelbye 583 days ago | link

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.)

-----

lallouz 582 days ago | link

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.

-----

mbleigh 582 days ago | link

We're building Divshot to be a tool that professional developers and designers use every day. I totally understand the "I would never use it for more than playing around" approach, but that's how it starts (see e.g. http://cdixon.org/2010/01/03/the-next-big-thing-will-start-o...). All I can say is give it a chance, watch how it grows, and I think you'll change your mind.

-----

lallouz 582 days ago | link

Right, but which part of the dev/design process is it taking over? Do you guys see divshot taking over production ready front end development the way Balsamiq (and the likes, arguably) took over pen & paper?

Given the predecessors to divshot in the WYSIWYG world, expect many developers and designers to be extremely open minded, yet very skeptical.

-----

mbleigh 582 days ago | link

We definitely expect some skepticism given past WYSIWYG entries into the space, but we consider our prime directive to be "No matter what, the output is clean."

We hope to be a tool that developers will use to rapidly prototype an interface at the beginning stages of an application and then continue to use it to experiment or quickly build new functionality throughout the app lifecycle. Hope that answers your question.

-----

lallouz 582 days ago | link

It does, and I appreciate it. Thanks.

-----

thedudemabry 582 days ago | link

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.

-----

tianshuo 582 days ago | link

+1 for integration with a template system or CMS, Definitely a killer app.

-----

yesimahuman 583 days ago | link

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 583 days ago | link

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 583 days ago | link

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

-----

superasn 582 days ago | link

Yeah I wanted to try it out too but never got an invite. I'll probably just forget about this site in a few hours.

You should let more people try it even if it means stumbling upon a few bugs than to turn away people who are genuinely interested in trying.

-----

jakejohnson 582 days ago | link

I'm still reviewing comments and sending out invites to new followers, sorry you haven't received one yet! We opted for a private beta in short waves so we can learn more about our users and address their early feedback. I wasn't able to find your email so give us a shout if you're still interested. Click the "Contact" link in the footer. Thanks!

-----

splatcollision 583 days ago | link

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 583 days ago | link

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

-----

juriga 583 days ago | link

Here's the same output in CSSDeck for a more convenient preview:

http://cssdeck.com/labs/vsjc8abl/0

Aside from some empty class attributes and extra div wrappers, the markup is really close to what I'd write by hand. Great work with the export!

EDIT: Oh, sorry - this isn't the same output as mbleigh posted. Mine is the tutorial page from Divshot when you first log in.

-----

mbleigh 583 days ago | link

Those empty classes are a known bug, they'll disappear soon enough!

-----

driverdan 582 days ago | link

That's some serious divitus going on with the nav. 5 nested divs for top navigation? No HTML5 elements?

-----

mbleigh 582 days ago | link

We're following the exact docs for Twitter Bootstrap with regards to HTML output, and yeah it can sometimes get a little div-heavy. We will be supporting other UI frameworks as well as emphasizing semantic HTML as much as possible as we grow beyond Bootstrap.

-----

markdotto 582 days ago | link

Bootstrap creator here.

* .navbar is for positioning/sizing.

* .navbar-inner is required for the gradient because `overflow: visible;` is not respected by IE when `filter` is present.

* .container is for centering the content within the navbar

No idea what .navbar-content is—that's not part of the Bootstrap navbar component. We also use a `ul.nav`, not `div.nav`.

So, close to the core, but not 100%.

-----

mbleigh 582 days ago | link

Hey Mark, you're right on every count. The div.nav is a mistake that I thought I had fixed already, as for the rest let's just say it'll be fixed post-haste.

Obviously we're HUGE fans of Bootstrap over at Divshot :)

-----

markdotto 582 days ago | link

No worries, and we appreciate you being fans :). Just wanted to let you know, and I figured you're attention would be here anyway.

-----

msurguy 581 days ago | link

A bit unrelated, but I wanted to thank Mark and @fat, I think the president of the United States and the governor of the Universe should personally award them for creating so many jobs throughout the world. Bootstrap created lots of opportunities for people, startups, established companies and everyone in between. I really appreciate the work of @markdotto and @fat making Bootstrap. You guys rock!

-----

driverdan 581 days ago | link

This is why HN is great. Someone (me) posts some constructive criticism, albeit snarky, and within a short time the project founder is getting feedback from Mark Dotto.

I should have also said I think Divshot is pretty cool, even if I didn't like how many nested divs I saw.

-----

dorkrawk 583 days ago | link

Wow that's some of the nicest generated code I've seen. This could be a very useful tool.

-----

mikezupan 583 days ago | link

This is great cause it doesn't seem like it covers everything in div tags. Looks very clean and readable if you need to edit it by hand.

-----

bduerst 583 days ago | link

Looks clean. Nice.

-----

SoftwareMaven 583 days ago | link

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 583 days ago | link

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!

-----

superchink 582 days ago | link

I'm in a similar boat; never received an invite, but looking forward to trying it out… any chance at getting into the beta? You have my word this will be the last such request.

-----

showerst 583 days ago | link

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 583 days ago | link

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

-----

ryanfitz 583 days ago | link

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 583 days ago | link

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.

-----

fuzzygroove 582 days ago | link

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 582 days ago | link

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).

-----

tharris0101 583 days ago | link

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 583 days ago | link

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

-----

tharris0101 582 days ago | link

I hope you're right! I got the invite so I'll try it tonight

-----

nanexcool 583 days ago | link

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

-----

dmauro 582 days ago | link

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.

-----

SchizoDuckie 582 days ago | link

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 582 days ago | link

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

-----

SchizoDuckie 582 days ago | link

First and foremost, dependencies.

My apps cannot have third party services that it relies on. that would give too much problems with our own SLA's. If the SAS goes down, you are responsible.

Second: my stuff needs to be able work offline (at least o some degree) :)

-----

mbleigh 582 days ago | link

Lucky for you one of our key goals is that we will always export to clean, unencumbered HTML and CSS. Once you export from Divshot you can use the output in whatever tools you want without worrying about compatibility.

Secondly, we definitely want to support offline capabilities (as a web app still, but it's very possible) and the ability to safely store all of your work :)

-----

jakejohnson 582 days ago | link

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.

-----

SchizoDuckie 582 days ago | link

Sounds great! Cannot wait to see some source.

-----

atto 583 days ago | link

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.

-----

Roelven 583 days ago | link

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

-----

shrikant 583 days ago | link

This looks really nice - great work, signed up!

-----

CWIZO 583 days ago | link

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

-----

mbleigh 583 days ago | link

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 :)

-----

ddewit 582 days ago | link

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.

-----

tomaskafka 582 days ago | link

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

-----

mikeevans 583 days ago | link

Looks great. Hopefully invites will be rolling out soon.

-----

se85 582 days ago | link

How are you getting such clean html from the WYSIWYG, pre or post html processing?

-----

yehanyin 583 days ago | link

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!

-----

tzaman 583 days ago | link

So this is an interactive bootstrap builder?

-----

mbleigh 583 days ago | link

We're starting with Bootstrap, but it's a general tool for rapid prototyping and front-end construction for web apps. Bootstrap's the most popular UI kit out there right now, so we're starting there :)

-----

lucisferre 583 days ago | link

Really cool stuff guys. Love the idea.

-----

cadab 583 days ago | link

Any chance for some invites? I'd love to try.

-----

jakejohnson 583 days ago | link

We'll be reviewing comments here throughout the day and if we can easily find your email you might receive an early invite!

-----

ckrailo 582 days ago | link

If I'm going to use this soon, now's the time since I'm prototyping out a web app. I'd love an early invite while the timing's good. (The email I signed up with is my username here at gmail.)

Edit: Either you saw me or I just got lucky. Thanks a bunch! I'll be sure to share feedback (even if it's just saying good job). :)

-----

bduerst 583 days ago | link

I would also like to give it a shot. I teach HTML/CSS to newbies at a graduate school, and am always looking for tools to recommend. Email is in my user details.

-----

cocoflunchy 582 days ago | link

I'd like an invite too if possible! Email cocoflunchy {at} yahoo.fr

Thanks!

-----

eric_bullington 583 days ago | link

Would love an invite, too: "eric." + "s." + "bullington" + "@" + "gmail." + "com"

-----

Travis 582 days ago | link

A little late to the party, I'd love one too though. Signed up for the beta invite on the site with leleu ~atsign~ industrialinterface ~dot~ com

Thanks!

-----

user24 583 days ago | link

Would love an invite too. howard.yeend@gg.com

-----

sschueller 583 days ago | link

I'd love to get an invite as well. Thanks

-----

jatinder 582 days ago | link

Oh, I can't wait to try it. any chance I could get an invite? email: "jatinder" + ".saundh" AT gmail dot com

-----

twog 583 days ago | link

I would love to get access to this!

-----

jmeekr 582 days ago | link

Would love to get an invite! I signed up for the beta with jmeeker516 at gmail dot com

-----

shaloo 582 days ago | link

This is awesome! I'd love to get access. singh.shaloo <at> gmail <dot> com

-----

gadders 583 days ago | link

Me too please. Thanks!

-----

cadab 583 days ago | link

Already received one :)

-----

cyscott 582 days ago | link

This looks perfect! Can I get an invite? cscott@gmail.com

-----

2color 583 days ago | link

That would be nice. daniel [at] 2 color [dot] me

-----

crempa 580 days ago | link

Hi I'd like an invite too please, thanks! crempa[at]gmail.com

-----

init0 582 days ago | link

hemanth [dot] hm [at] gmail.com

Thanks!

-----

lenindesign 582 days ago | link

This looks great, can I have an invite?

-----

henchanjunk 582 days ago | link

me too please. henchan.junk

-----

jawr 582 days ago | link

"watch video", but it's already playing!

-----

jtansley 582 days ago | link

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

-----

francov88 583 days ago | link

Great app! Congrats to Michael and the team!

-----

More



Lists | RSS | Bookmarklet | Guidelines | FAQ | DMCA | News News | Feature Requests | Bugs | Y Combinator | Apply | Library

Search: