Fireworks feedback: HTML and CSS export

Thank you for the feedback on feature requirements for Fireworks CS next version. There have been many big feature requests, enhancements and workflow improvements.

We understand it as a positive feedback as the Fireworks community believes in the team to make it an even better application with every new release. One feature which stood out from all the feedback was improvements in HTML and CSS export. Currently Fireworks is equipped to export code in a table format and Fireworks CS3 release introduced the export of CSS along with HTML.

  1. What are the specific areas you would like to see worked upon?
  2. Would you like Fireworks generating code which can be used for direct deployment to web hosts?
  3. What are your thoughts on the whole buzz of HTML5 and CSS3 code generation?
  4. Would you like to create a widget, skin it and get the CSS1/2/3 code available for use in some app like Dreamweaver

We are looking for very specific workflow and feature feedback for deeper analysis and investigations by the team.Share on Facebook

29 Responses to Fireworks feedback: HTML and CSS export

  1. My website is actually a perfect example of what I’d like to change about Fireworks. I created a gorgeous website in Fireworks CS4, exported the HTML and CSS and finished the rest in Dreamweaver. However, my site is complicated and the way Firework chose to code the navigation area, it would take me hours to figure out how to add a new button, so I have just let the site sit there, because I can’t add my web design to the portfolio.

    As for HTML 5 and CSS3, I think you had better work on perfecting the export process before you focus on trying to update it. There is limited compatibility for these right now, so it would be wise to wait.

  2. Jim Babbage says:

    1. What are the specific areas you would like to see worked upon?

    Make the whole process more intuitive (and accurate). The novice users may see this feature as a quick way to bring their designs to the web, but what they soon find out is that you must follow a very specific workflow and also avoid certain situations (overlapping elements for example) that can indeed be reproduced in CSS, but not via Fireworks. Less “cryptic” CSS class/id name generation would also be helpful. Less repetition of the same declarations for different classes would also be a good step.

    The export of multiple CSS files (one for every page) is not ideal either. This is not a workflow that would be used in production.

    Support for CSS rollover effects would be very helpful, I guess. Native CSS sprite support would be good too.

    2. Would you like Fireworks generating code which can be used for direct deployment to web hosts?

    At the cost of NOT improving creative tools? Definitely NO. The last thing I’d want is for the team to spent the entire R&D budget on CSS export alone. We need improvements to basic tools such as the Magic Wand, Replace color (which seems broken in CS5), masking enhancements, better PSD support, better color management options, etc . . Fixes are also needed for the export workflows that append “_s1” etc to file names. There needs to be a cleaner way to resolve this problem. And from reading the user forums, it is indeed a problem.

    3. What are your thoughts on the whole buzz of HTML5 and CSS3 code generation?

    It’s not a standard yet. Please don’t go there until it is, unless you have the budget for *timely* interim patches and fixes after release.

    Keep up the excellent work, team. CS5 is a major improvement over CS4. Let’s make that a habit. 😉

  3. Jesse Breuer says:

    1. What are the specific areas you would like to see worked upon?
    Navigation which uses css and unordered lists like superfish. The spry menubar in dreamweaver is a good example of how it should be done in fireworks, if you insist on using spry rather than jquery.

    2. Would you like Fireworks generating code which can be used for direct deployment to web hosts? Yes!

    3. What are your thoughts on the whole buzz of HTML5 and CSS3 code generation?
    This should be implemented with cross-browser output. see the site css3please for examples

    4. Would you like to create a widget, skin it and get the CSS1/2/3 code available for use in some app like Dreamweaver Yes. There should be a bridge between fireworks and dreamweaver that supports css.

  4. Pingback: Fireworks feedback: HTML and CSS export « Sarthak » Web Coding Unravelled

  5. Pingback: HTML all you need to know» Blog Archive » Fireworks feedback: HTML and CSS export « Sarthak

  6. Linus Lim says:

    1. What are the specific areas you would like to see worked upon?
    I like to see more improved support for css export and fix the bugs so that it can be carry on to code further in Dreamweaver. The error reporting for CSS layout in relations to objects on canvas have to be more intuitive. for example I wish it can tell me which object is overlap that cause CSS export issues.

    Some automations for CSS will be good. Like using states for CSS Sprites or use it to for 2nd level css menus..etc

    Good to introduce a DIV tool with its Property Inspector. Current CSS development is still very developer centric, i hope to see Fireworks changed this perspective by making things easier but not to replace dreamweaver. A style option for CSS will be great for text styles.

    2. Would you like Fireworks generating code which can be used for direct deployment to web hosts?
    Yes definitely! Perhaps Fireworks HTML can do roundtrip css editing for the design in Fireworks.

    3. What are your thoughts on the whole buzz of HTML5 and CSS3 code generation?
    It is still too early to say now.

    4. Would you like to create a widget, skin it and get the CSS1/2/3 code available for use in some app like Dreamweaver
    Not really. I rather see more effort put to improve the existing tools and workflow.

  7. Aaron Beall says:

    Hi Sarthak,

    I know HTML/CSS export is important to the Fireworks team and I think you know I’ve never had strong confidence in the concept of such a feature myself, but I agree that people seem to want it and think it would work, so here are my thoughts, hopefully still helpful:

    1. What are the specific areas you would like to see worked upon?

    As Jim pointed out, the whole process is a bit cryptic with using “magic” names and the frequent hard to isolate “overlapping elements” error. I think a more dedicated UI is necessary for it to be easy to use, so as far as the current feature goes that’s what I’d want to see worked on.

    2. Would you like Fireworks generating code which can be used for direct deployment to web hosts?

    Would I like if Fireworks could do that? Yes. Do I think I would ever like it if Fireworks tried to do it? No. 🙂 Maybe the Fireworks team can prove me wrong, it wouldn’t be the first time – given enough time I’m sure you guys could – but I fear that a full production quality auto-generated code will never quite work good enough, and I fear even more, as Jim said, that the tremendous effort it would require would detract from effort that could have been spent towards things that would make very happy more easily. Creative features, stability and performance, suite compatibility, etc.

    3. What are your thoughts on the whole buzz of HTML5 and CSS3 code generation?

    My thought is that CSS3 looks *far* more interesting than HTML5, especially in how it would relate to Fireworks. Many of the new CSS3 capabilities finally provide a level of creative layout flexibility that has long been hacked around in CSS — 9-slice scaling, gradients, effects, rounded corners, etc.

    I think it could pay off for Fireworks to integrate well with CSS3. It would actually make the output code a lot cleaner, I would think. HTML5 doesn’t really grab me any significant way.

    4. Would you like to create a widget, skin it and get the CSS1/2/3 code available for use in some app like Dreamweaver

    Maybe not so much a “widget” as much as just translating Fireworks objects to CSS1/2/3 quickly and easily. I seem I do so much copy pasting of colors, font-styles, and slicing up little images to make a layout element work in DW, I would love if Fireworks could automate this. In other words, not try to implement an entire layout of my Fireworks document, but just select a single element, say a box/container element that requires image based 3-slice scaling and contains font styling, and be able to export or copy to clipboard as an HTML/CSS fragment to add into an existing HTML document. If that’s what is meant by “widget” then yes, it would be great.

    Generally the idea of integrating/export small bits of a design to CSS is far more attractive than trying to export a full layout. Even just being able to, say, select a text block, copy as CSS, and paste in dreamweaver as CSS declarations would be the sort of integration I want more than a full “export as HTML/CSS” type feature.

    Not sure if that’s at all helpful but it looks like I’ve way overrun this comment box window, so I’ll stop now. Looking forward to more great work on Fireworks!
    🙂

    – Aaron

  8. Pingback: Fireworks feedback: HTML and CSS export « Sarthak - html

  9. Pingback: HTML Scripts Tips and Secrets » Blog Archive » Fireworks feedback: HTML and CSS export « Sarthak

  10. Pingback: Fireworks feedback: HTML and CSS export « Sarthak : : css

  11. Pingback: city portal HTML Template | Script ebooks

  12. Pingback: Fireworks feedback: HTML and CSS export « Sarthak « Web Script Genie

  13. Jim Babbage says:

    I really like where Aaron is going with his thoughts. CSS “fragments” or “components” could be a cool idea.

  14. Pingback: Tribeca eCommerce HTML Template – Rip – ThemeForest | Script ebooks

  15. Pingback: Fireworks feedback: HTML and CSS export « Sarthak | My Blog

  16. Pingback: Corporate HTML Template | Script ebooks

  17. Pingback: dESiGNERz-CREW.iNFO – [HTML/CSS] RockeTix Bar | Script ebooks

  18. Pingback: Fadelicious – HTML Blog – ThemeForest | Script ebooks

  19. John Dunning says:

    Let me add my voice to those pleading that lots of time NOT be spent on exporting CSS/HTML code. Except for a single use of a sliced table way back in 1999, I’ve never exported HTML from Fireworks. Never. What would be the point? That’s not what FW is good at. It’s like using twiki markup to create a complex HTML table. Can you do it? Yes. Is it fast or efficient or the right tool for the job? No.

    What FW *is* good at is quickly creating and efficiently modifying screen designs and mockups. As Jim points out, there’s lots of room for improvement just in the basic tools. Like, why are there two or three different ways of creating a rounded rectangle? I understand the historical reasons, but new users are just confused.

    I’d rather you spend more time letting users use CSS techniques to create graphics *in* FW, rather than trying to export FW graphics *to* CSS, which will always be an error prone and finicky process. For instance, why can’t you specify a different border width and color on each side of rectangle, as you can in CSS? (Well, you can hack it, using inner shadows, but it’s tricky and unintuitive.) Or why can’t you specify padding and margins on any text element? Or create a bullet list? Or markup text with or , and then use those selectors to specify different styles? Or import an existing CSS file and use it to style text and graphics in FW?

    I’d love to see FW bring the power of markup and flow-based layout to the process of creating screen designs. If you want to insert a new button in the middle of a toolbar, why should you have to select the existing buttons and move them around to make space? Why can’t you just insert the button and let FW re-layout the toolbar, using spacing rules you’ve defined? Or if you add some characters to a text block, why can’t that automatically push other elements down, just like it would on a webpage? (I’ve automated some of this with scripts, but having to run a script every time I make a change isn’t very intuitive or efficient.)

    The bottom line is that I want to see the graphic and layout tools within FW be made more efficient and powerful, rather than trying to force designs across the lossy phase change from vectors/bitmaps to styles/markup.

  20. John Dunning says:

    Grrr. The markup in my comment got interpreted by the blog software. The bold italic sentence above was supposed to be:

    Or markup text with em or strong, and then use those selectors to specify different styles? Or import an existing CSS file and use it to style text and graphics in FW?

  21. Pingback: INADMIN CSS / HTML jQuery Admin Panel | Script ebooks

  22. Ale Muñoz says:

    Just two words: “Webkit Layer”

    I wholeheartly agree that spending time with CSS/HTML export is not a wise move. I mean, it’s nice it is there (specially if you allow us extension developers to access the feature) but I don’t think anybody is going to stop coding HTML5 by hand to use something out of FW.

    There’s this crazy idea I have in my mind, where Fireworks becomes just a shell for different rendering engines (Gecko, Webkit, AGM…) and a runtime for scripts / extensions. Think “TextMate for web graphics”, with a community of developers that take care of the “extra” features, like CSS3 export…

    Just my 0.02

  23. John Dunning says:

    Ale, I’ve also dreamed of having a browser-based rendering engine to render elements that are meant to represent web content. If you’re trying to mock up a table in FW, why mess around with lots of text elements or try to cobble together some sort of auto shape? Why not just insert a Webkit element and mark up the table in real HTML (possibly with a more helpful UI built on top)? You’d still be able to group that element with regular FW graphics, apply live effects, etc. Match the renderer to what you’re trying to render.

  24. is there away to export to divs and not tables??
    Thanks

  25. Mikko Vartio says:

    Thank you Sarthak for hearing us out. We really appreciate this dialogue – Being Fw-evangelist is not just following blindly the product , it is about being there and showing our contribution for our product.

    – What are the specific areas you would like to see worked upon?

    I would like to keep Fw at its main function as visual tool, but adding developer friendly options and functions are very welcome. The main core is the keep in mind the values – Adobe Fireworks is a perfect tool to make web design easy and beautiful. Adding more some Freehand-goodness (such as nudging the shape without any specific tool but select tool) and more power with simple image manipulation (such as posterize) would do miracles among users. The Web-tools are slightly outdated while the main functions are there. We got webpage-templates, but we don’t have advanced options for CSS? FW is very friendly adapting web-ideology, I dont see why such things as margins and paddings could not be adapted with the workflow of FW-objects.

    – Would you like Fireworks generating code which can be used for direct deployment to web hosts?

    For non-tech oriented this would be dream come true. For developers, this will always be a some kind of quality confirmation issue since these people sincerely want to make sure that everything designed works with every different platform. This can not be done with computer-generated sourcecode and must be manually adjusted to follow small nuances of every browser. Developers appreciate the little things that will make their life easier. I personally hope that in someday we have good standards and computer generated code is very much valid for computers. But while waiting for this day, I hope Fw will help developers to get much help from the computer generated code much as possible.

    -What are your thoughts on the whole buzz of HTML5 and CSS3 code generation?

    HTML5 is just small step for browsers, but CSS3 is the major leap for developers. If Fw CSS3 export could take notice on RGBA’s or Gradient-backgrounds, the developers would be jumping joy. While thinking of this situation, there are many other small things such as rounded corners, dropshadows etc which all have equivalents in CSS3/Fireworks. If Fireworks if the best tool for web design, why it should ignore these daily things? I love Fireworks, because it will have these features in the future 😀

    – Would you like to create a widget, skin it and get the CSS1/2/3 code available for use in some app like Dreamweaver?

    Definitely. Exporting vector graphics in document format will make widget-developing extremely top-notch feature. Vectors are basically just location/parameter data, I dont see why this information should be hidden anywhere. Light, easy and open fast data versus bitmaps always wins.

  26. Pingback: MyHosting.Ge Full Rip [html] | Script ebooks

  27. Pingback: CSS / HTML Admin Template: Internet Dreams | Script ebooks

  28. What are the specific areas you would like to see worked upon?
    I’d like to see the styles that I create and add to elements exported into CSS. When I first started using Fireworks, I assumed that’s what the feature was there for – but apparently it isn’t. Or maybe I never figured it out – which should highlight an obvious usability issue.

    it would be great if Fireworks added an “”element” option; either as a folder that could go in the website layer, or another pane (like states). If it were another pane, then it seems that I would then be able to use that element across states. If I could then have the option to call it a container, or a single element.

    Would you like Fireworks generating code which can be used for direct deployment to web hosts?
    Only in a select few cases. I generally never trust any application that generates code – because I want it clean, light-weight, and above all, semantic. However, given that CSS3 allows the flexibility for me to style elements much in the same way that image-editing allows, I could easily be sold on an “export to CSS3 option”. I wouldn’t use FW to go straight to a web host, but I would use it to generate my CSS3. Right now, I’m better off just coding in the browser than using Fireworks. I spend the same amount of time creating a gradient button with a drop-shadow in FW as I do just writing the code. So it’s obvious which one I’ll do. If you guys would even match some of the same language as CSS3 in your filters, that’d be a win because I least I can translate it. but a 123degree drop shadow doesn’t carry over.

    Similarly, HTML5 is all about being semantic; no more DIVs. Now I can create a header, article, footer, section, and aside. If Fireworks could let me tag certain pieces according to their HTML5 semantic counterpart, I’ll buy you a beer.

    What are your thoughts on the whole buzz of HTML5 and CSS3 code generation?
    Well, gee, I’ve already shared most of them. I love HTML5 for a totally different reason than I love CSS3.

    HTML5 makes markup semantic. I write header instead of div class=header. I write nav instead of ul id=nav. Code Generation for HTML5 makes sense, and it should be easy to work out.

    Would you like to create a widget, skin it and get the CSS1/2/3 code available for use in some app like Dreamweaver?
    Only for CSS3