Live data from Hacker News

Show HN: Markupwand, magically convert your photoshop files to HTML & CSS

markupwand.com

21–30 of 129 posts

Re: Show HN: Markupwand, magically convert your photoshop files to HTML & CSS

#21
As a visual designer who has learned to code, I feel that this is not a good idea for the simple fact that it outputs non-semantic HTML (divs are not semantic HTML) and CSS "class soup".

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.

Re: Show HN: Markupwand, magically convert your photoshop files to HTML & CSS

#22
post #18

I don't have much experience with prototyping-with-PSD...how standardized is that process among designers? This is a neat tool but it seems like it might be very dependent on good practices by designers, and seeing how adherence to best practices -- in naming conventions, file types, layer arrangement, etc -- can be highly variable among coders, I can only imagine what it's like among pure visual designers.

Almost every designer I know implements in photoshop.

For prototyping, its either gomockingbird, balsamiq or some quick HTML (plus the odd photoshoping) to simulate interaction.

Re: Show HN: Markupwand, magically convert your photoshop files to HTML & CSS

#23

As a visual designer who has learned to code, I feel that this is not a good idea for the simple fact that it outputs non-semantic HTML (divs are not semantic HTML) and CSS "class soup". 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 teach…

How on earth are div's non-semantic? Most things on a page are just "boxes" -- not lists or links or images or paragraphs, just boxes. And div's are the correct thing to use in this case.

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.

Re: Show HN: Markupwand, magically convert your photoshop files to HTML & CSS

#24
post #18

I don't have much experience with prototyping-with-PSD...how standardized is that process among designers? This is a neat tool but it seems like it might be very dependent on good practices by designers, and seeing how adherence to best practices -- in naming conventions, file types, layer arrangement, etc -- can be highly variable among coders, I can only imagine what it's like among pure visual designers.

You are right. Lot of designs we have seen doesn't have good naming conventions. We are trying hard not to enforce it as it requires to change their work-flow. While generating pages, we do not consider layer set organization/naming.

Re: Show HN: Markupwand, magically convert your photoshop files to HTML & CSS

#25
How on earth does this not use absolute positioning, but actually figuring out the full width of text boxes, whether they are expandable vertically or not, etc.?

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

Re: Show HN: Markupwand, magically convert your photoshop files to HTML & CSS

#26

As a visual designer who has learned to code, I feel that this is not a good idea for the simple fact that it outputs non-semantic HTML (divs are not semantic HTML) and CSS "class soup". 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 teach…

We do worry about semantic HTML. We are working on a editor which would allow users to modify tags as well.

Re: Show HN: Markupwand, magically convert your photoshop files to HTML & CSS

#27
post #26

As a visual designer who has learned to code, I feel that this is not a good idea for the simple fact that it outputs non-semantic HTML (divs are not semantic HTML) and CSS "class soup". 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 teach…

We do worry about semantic HTML. We are working on a editor which would allow users to modify tags as well.

This makes me happy!

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

Re: Show HN: Markupwand, magically convert your photoshop files to HTML & CSS

#28

As a visual designer who has learned to code, I feel that this is not a good idea for the simple fact that it outputs non-semantic HTML (divs are not semantic HTML) and CSS "class soup". 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 teach…

How on earth are div's non-semantic? Most things on a page are just "boxes" -- not lists or links or images or paragraphs, just boxes. And div's are the correct thing to use in this case. 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,…

> How on earth are div's non-semantic? Most things on a page are just "boxes" -- not lists or links or images or paragraphs, just boxes. And div's are the correct thing to use in this case.

Because most things on a page are not "just boxes". , , and 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...

Page title Written by so-and-so in such-and-such categories.

This is a paragraph.

... than like this ...

Page title Written by so-and-so in such-and-such categories.

This is a paragraph.

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.

Re: Show HN: Markupwand, magically convert your photoshop files to HTML & CSS

#29

As a visual designer who has learned to code, I feel that this is not a good idea for the simple fact that it outputs non-semantic HTML (divs are not semantic HTML) and CSS "class soup". 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 teach…

>divs are not semantic HTML

This is very wrong, divs are as semantic as you want them to be. If you have an element that looks like this:

Hello World

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.

Re: Show HN: Markupwand, magically convert your photoshop files to HTML & CSS

#30
post #22
post #18

I don't have much experience with prototyping-with-PSD...how standardized is that process among designers? This is a neat tool but it seems like it might be very dependent on good practices by designers, and seeing how adherence to best practices -- in naming conventions, file types, layer arrangement, etc -- can be highly variable among coders, I can only imagine what it's like among pure visual designers.

Almost every designer I know implements in photoshop. For prototyping, its either gomockingbird, balsamiq or some quick HTML (plus the odd photoshoping) to simulate interaction.

As a designer, I've never "implemented" in Photoshop. Ever. Illustrator, yes (a long time ago), but there's nothin' like coding your own design.

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.

Post reply on HN