When I launched Psd2Html in late 2010, I was unable to get on the front page of HackerNews, or any other website for that matter, I was down-voted to oblivion. I had insulting, slanderous comments posted on the Mac App Store which were untrue.
I was ridiculed by "hand coding only" services like www.psd2html.com, the employee lots of people and don't want to make people redundant, but the problem with this approach is that they will never move forward.
I was certain, and I'm still certain hand-coding will go the way of the Dodo.
So Markupwand, thanks for re-validating the idea, and I'm glad I'm not the only one who thought the idea was worthwhile.
I can see that I need to enhance my service/business model/add relative CSS positioning as an option.
I hope we'll be good competition for each other.
This tool is totally inadequate for webdesign, and therefore for code generation: it’s just a tool to manipulate pixels.
I don't think so. How are you going to handle responsive designs or hell even fluid designs? Or deciding which HTML tag to use? HTML tags are meant to be semantic.
More and more people are moving away from designing in photoshop to designing straight in the browser.
edit: I see the link in the OP uses bootstrap and is well put together, but it's still far from perfect.
I totally agree with this and gave my own detailed explanation of the difference between semantic and non-semantic HTML here --> http://news.ycombinator.com/item?id=4284054
Bootstrap not only makes it simple to visualize the construction of a page, but their documentation is really easy to understand (while HTML's documentation can be difficult to go through).
It's great how flexible HTML/CSS is -- it comes pre-built with an existing paradigm (semantic HTML), and tools to create your own (read: <div>s & classes/IDs). Personally, I prefer using the standards already set than creating something new and/or using something different.
They need to respond dynamically to window resizing, have rules about which directions text boxes expand in when they overflow with text, how the page operates when a whole section is missing, etc.
Any tool that appropriately allows for all this complexity to be specified, has already become as complex as CSS itself, thus defeating the purpose.
And in my personal front-end experience, 95% of my time is spent on these harder details. Throwing together the basic HTML/CSS skeleton of a page is trivial, and so fast I don't really need a tool to speed it up, especially when that tool is always bound to get something wrong.
> Any tool that appropriately allows for all this complexity to be specified, has already become as complex as CSS itself, thus defeating the purpose.
This was my immediate issue with CSS Hat. The designers are not trained to set up their photoshop files to be properly evaluated in CSS. They do not know CSS, or how it works. They get their pixels "perfect" (or way off most of the time when doing real math with css), but the fact is to use tools like this they have to get on board 100%. For some designers, this is easier than others.
Don't get me wrong, I'm still interested in trying out the tool. Maybe it is magic...
Edit: also, the unthemed "Error - Login - Paypal" link from your "Free 3-Day Trial" button probably doesn't convert very well...
Tools like this, which can create good mark up, have a lot of potential to speed up the coding process. If these tools can get the developer 80% there then its great.
I feel this is as far as these tools will take us.
P.S I have used (ie paid for) PSD2HMTL and the folks did a magic job. I recommend them to all.
"100% human-coded. 370+ professionals"
I'd love some insight into the technique.
I mean, I work with designers who often don't even know what their intention was in the first place, what should happen if a line of text turns into two...
Five tips given on the website to get good results (I have not tested myself) :
- Break your page into smaller pieces (header = 1 .psd, same for body, footer, sidebar, etc)
- Use one text layer for each logical piece of text
- Each icon or image should be a single layer or a smart object
- Want CSS buttons? Use shapes; not images.
 I know there's only four. Fifth being avoid any hacks, it's probably not understandable by someone not really very familiar with Photoshop. Or I just couldn't figure out what photoshop-design-hacks are used by actual webdesigners.
Some designers produce effects using indirect methods instead of using the photoshop effects. These should be avoided as much as possible, for the code to be clean.
The explaination and screenshots on your website made this fifth tip very clear to me !
For prototyping, its either gomockingbird, balsamiq or some quick HTML (plus the odd photoshoping) to simulate interaction.
In fact, I design entirely with HTML/CSS (using the Live CSS Editor feature of the Web Developer add-on for FireFox) and use Illustrator to mix and pick colors.
These days I tend to do more of a mix, I like the expressive freedom of photoshop and the rigid grid structures and typography of HTML.
But I almost always start in photoshop after mocking. Probably from habit.
With things like this and CSSHat, I fear that people will use these tools not to learn from, but to immediately sell themselves as devs and further worsen the state of an industry that's already lost its passion for the combination of art and experience by cutting all corners possible.
I actually started doing it this was because products like TypeKit don't supply the fonts to use in anything other than the the web browser.
I don't think it's the case any longer that to be a designer you have to be tied to a particular piece of software to produce your work.
Disclosure: I am not owner of moqups. Just an enthusiastic early adopter/evangelist ;)
Large web consulting forms expect the visual designer to work this way, to drop a PSD that they can then convert to a template for their CMS… But working in this way you’re relegated to a role of providing a visual look, not really designing the interaction of the site…
In both cases I find myself rarely using Photoshop, preferring an iterative process, with sketches on paper and in HTML.
I am all for getting more designers to output code (thus saving a lot of developer time), but these sorts of things not only reinforce non-semantic (& unmanageable) coding practices, but also handicaps those who use them by not teaching them how the web works.
Also, "class soup" is a proper CSS programming practice in many people's opinion -- many CSS style guides explicitly state that it's preferable to use descriptive class names in CSS rules, rathen than element names.
Mainly because, as a site evolves, changing a single element name might break your entire CSS rule structure, while basing your CSS on class names makes everything much more robust and maintainable.
Because most things on a page are not "just boxes". <header>, <article>, and <footer> are not "boxes" -- they have semantic meaning.
> Also, "class soup" is a proper CSS programming practice in many people's opinion -- many CSS style guides explicitly state that it's preferable to use descriptive class names in CSS rules, rathen than element names.
Everyone is welcome to their own opinion, but I'm of the persuasion that the fewer CSS rules the better. Not only does fewer CSS rules mean that there are fewer things to remember when styling a page, it also means a smaller file is requested.
It's better to use HTML like this...
<h4>Written by so-and-so in such-and-such categories.</h4>
<p>This is a paragraph.</p>
... than like this ...
<h1 class="page-title">Page title</h1>
<div class="meta-data">Written by so-and-so in such-and-such categories.</div>
<p>This is a paragraph.</p>
There is so much more semantic meaning in the former bit, than the latter.
Too, semantic HTML can help with SEO.
> Mainly because, as a site evolves, changing a single element name might break your entire CSS rule structure, while basing your CSS on class names makes everything much more robust and maintainable.
No need to argue with that. Building web apps is a whole other animal, and (having used Bootstrap) I can see why using lots of classes could be beneficial in certain situations.
However, I am still of the opinion that semantic HTML > "class soup".
Edit: I accidentally a word.
I know, that's the whole thing I'm talking about. A page is full of the div inside the header that centers the header. Then the header has three horizontal bars, two of which are split into right and left side, each of these are full of multiple kinds of items...
These are all <div>'s, and are supposed to be, and they usually make up the majority of elements on any reasonably complex page.
Semantic HTML makes the web a better, more consistently understandable, place.
As far as the classes goes though, I would recommend that you check out a style like OOCSS or SMACSS (which I prefer) and give it a shot on a project. I style almost everything with classes currently, and I've found it much easier to maintain and extend than the style that you're describing.
It's a personal choice obviously, but I think you should definitely give it a shot and see what you think.
I've been wanting to try out a number of pre-processors, but I haven't figured out a way to be able to edit it live (which REALLY speeds up development).
However, I'll definitely give SMACSS another (more thorough) look.
Back when I was learning how to code my own HTML/CSS, I really could've used something like this to help understand how HTML/CSS works together.
Being able to edit tags is a great feature :-)
This is very wrong, divs are as semantic as you want them to be. If you have an element that looks like this:
Then yeah sure it's not semantic because you have two unnecessary divs holding a paragraph, but if it was just the one div holding a paragraph tag it would be perfectly acceptable in HTML 4.x onwards. The only cases I can see a div being non semantic are the silly example I gave above, self closing divs in HTML (not extensible) and empty divs.
Then they are not semantic at all.
<div class="content">, <div class="post-title">, <div class="meta-data"> all have semantic CSS class names. But they are not semantic HTML names. Remove the CSS, and all you have is <div>, <div>, and <div>. This makes it difficult for screen readers (and web surfers who don't use CSS (are these people even real?)) to understand what the page is saying.
However <article>, <header>, and <aside> all have semantic meaning that can be discerned whether or not CSS is used.
Also: Whether or not something validates is not a good indicator of it being "semantic".
"Not every, but 95% do. For the rest, there are other pssibilities and tools to make sense of it (microdata, ARIA attributes, etc). Just ignoring semantics altogether won't do any better."
Now how about hire a little army to manually split my page to pieces, make it compatible to get markupwand to work, then give me back the whole page as if you did it all by magic. Imagine the premium I'd pay for that!
Splitting page into pieces is only a temporary fix. We are working on getting the entire page work (automatically), it will be out pretty soon :)
How does it know to put clever class names like ".social-actions"? Is it gleaned from layer metadata or something?
It has a editor which quickly allows you to name classes (Screenshot: http://cl.ly/image/0q2O0O0y2B1P)
Unlike Edit Room, using Photoshop + Markupwand generates all units in pixels - not too useful for real multi-device prototyping. Others have mentioned the tag soup. It's fine for those who can't move on from Photoshop, but more and more folks are interested in trying something new.
 http://www.edit-room.com/ (my project, friendly critiques welcome)
It's not pixel-perfect, but it is flexible and responsive, and should work decently well across different screens for 5 minutes of work.
(I don't support images yet, so you won't see icons or an avatar, but the type and grid and color and shape and all those important things about design are well-represented)
The signup form is unconventional. that in itself is ok. but the cleartext password text field is a really bad practice. Also the whole thing just looks very hand-stricken, you know what I mean? I'm not that much of a designer myself, maybe others have a different taste.
I really hope you succeed, overall I think it's a very good idea. I like the abundance of CSS options and the format pasting you show in the video very much. The video makes me want to use it right away.
I'm working on improving the design of the controls, etc, based on some other feedback. It's definitely hand-made, if that's what you're referring to.
Thanks for the good wishes! Glad the video was helpful.
edit: Since there are password fields, I guess the question should have been "How many accounts _would_ be compromised by shoulder surfing?" I bet it's a truly insignificant number.
2) I don't see the problem on mobiles. Not sure about Android or WP but at least on iOS I always see the last character that is entered. Still vulnerable to shoulder peeking but not as bad as cleartext.
I almost never define a fixed width for elements. Here every single element has a fixed width.
But a few photoshop files failed, since Markupwand isn't yet capable of handling full pages and a few complicated cases.
Design something > run it through some secret sauce > output HTML/CSS + provide explanations/advice/best-practices/etc.
Any thoughts on where tools like Adobe Muse (http://www.adobe.com/products/muse.html) fit into the picture?
Great start guys!
The tool, however, is very impressive. I'll try to respond with a list of bugs I notice once I figure out how to fix them through hand-coding. Good work!
About the quality of code that it generates :
I don't mind setting some on in my team to work on optimizing the generated code , but having some base html/css to work on is definitely a plus point.
Oh, BTW, You wont share my PSD with any one else right ?
have you thought about maybe options to split html into ejs/jade/other templates as well
you could in theory be able to do the reverse (html to image ) as well ?
Nor does the progress bar, or selecting multiple files.