41–50 of 129 posts
This is really impressive, but I'm very hesitant. Obviously this html output won't be useful until you can modify tags, and as far as the CSS goes, this is not really ok: margin-top: 14px; padding-top: 15px; margin-left: 44px; padding-left: 11px; padding-bottom: 11px; padding-right: 348px;
Earlier quoted context omitted.
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.
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.
Any thoughts on where tools like Adobe Muse (http://www.adobe.com/products/muse.html) fit into the picture?
Earlier quoted context omitted.
> 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 stat…
You're right that a bunch of divs like this is non-semantic. Anyone who thinks otherwise is crazy. 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 obvio…
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.
Earlier quoted context omitted.
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.
I can see this as a great product for designers who would like to code, but don't have the time to learn. Now they can take this instant output and simply tweak it, which is a lot simpler than to learn from scratch. Great job guys!
Design something > run it through some secret sauce > output HTML/CSS + provide explanations/advice/best-practices/etc.
This is a really great idea! I can imagine people in the future designing/coding/deploying simple webapps from a single photoshop-like interface. How does it know to put clever class names like ".social-actions"? Is it gleaned from layer metadata or something?
It doesn't get class names from layers, yet. Because, most often people don't rename their layers (they are usually "Layer 1" and "Shape 1"). It has a editor which quickly allows you to name classes (Screenshot: http://cl.ly/image/0q2O0O0y2B1P )
Earlier quoted context omitted.
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.