[css-d] Help my design team move away from nested tables
Greeting all. When engaging a client my design team will for provide still image created via Photoshop to the client. Once the client accepts the design the design person will use Adobe ImageReady to produce HTML cut-ups. As you can guess the content of the pages is all nested table. If we want to produce good clean markup using CSS we have the basically rewrite much of the output from the design team. This seems like double work, Considering this is more a tool issue than the fault of the designers. What alternatives are there for this? I'm a big champion of CSS especially for layout. But for the non-programmer type designers they really want/need a tool that will facilitate this. Is there such a tool? Paul Menard http://www.codehooligans.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Help my design team move away from nested tables
Paul Menard wrote: > Greeting all. > > When engaging a client my design team will for provide still image created > via Photoshop to the > client. Once the client accepts the design the design person will use Adobe > ImageReady to produce > HTML cut-ups. As you can guess the content of the pages is all nested table. > If we want to produce > good clean markup using CSS we have the basically rewrite much of the output > from the design team. > This seems like double work, Considering this is more a tool issue than the > fault of the > designers. What alternatives are there for this? first off, have them not do the cut up in Image Ready? saves them time and you frustrating rework. When I'm working for designers I ask them to supply a layered PSD and a jpg render of each page I then cut my own images from the PSD to suit background and inline images as dictated by a semantic layout. I can't think of a tool that could interpret a visual design in terms of layers and backgrounds in the way I find necessary for building with CSS. Be kind of nice if there was though... watching with interest. -- http://wiki.workalone.co.uk http://www.workalone.co.uk/ads.htm http://www.xebit.net __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Help my design team move away from nested tables
Paul wrote: > If we want to produce good clean markup using CSS we have the basically rewrite much of the output from the design team. This seems like double work, Considering this is more a tool issue than the fault of the designers. What alternatives are there for this? This tool doesn't exist, sorry Paul. It just sounds like you need a web designer. You're essentially using Adobe ImageReady to 'make' your web sites at the moment. Once they finally launch a 'CSS web designer tool' then a lot of us are out of work! *g I have 2 people here (and myself) hand coding up the Photoshop layouts from the designers - I couldn't imagine doing it any other way. There are tools which make working in CSS easier - TopStyle by Nick Bradbury is one that really helps me. You can also pick up layouts at glish.com and bluerobot.com which will save your team time. Best Regards, Nick e3internet http://www.e3internet.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Help my design team move away from nested tables
If a page is composed entirely of a 'cut up' Photoshop image, what value is CSS? If the page is created and managed as a photoshop document, is there any useful presentation feature offered by CSS? There is no font control (sizing, face, etc.) there is no color control, there is no (real) hope of liquid layout, there is no alternate stylesheet. If marketing decides to 'tweak' the page, you're going back to the original photoshop document. I don't see how a site made of pages like this is much different than an interconnected PDF that pops up in your browser. Our webmaster draws pictures in photoshop and gets approval for pages using those images, then he'll create a FrontPage mockup - which is essentially the photoshop document polluted with Frontpage markup. The multipage mess is then handed over to me to "make functional" by adding infrastructure that should have been built first. Am I wrong to believe this is not a 'best practice' way to go about web design? (sorry for the wandering rant) ...Anyone have a favorite URL for 'best practice' web design? On Tue, 29 Nov 2005 15:58:36 +0300 "Nick Wilsdon" <[EMAIL PROTECTED]> wrote: > Paul wrote: > >> If we want to produce good clean markup using CSS we have the basically > rewrite much of the output from the design team. This seems like double > work, Considering this is more a tool issue than the fault of the designers. > What alternatives are there for this? > > > This tool doesn't exist, sorry Paul. It just sounds like you need a web > designer. You're essentially using Adobe ImageReady to 'make' your web sites > at the moment. Once they finally launch a 'CSS web designer tool' then a lot > of us are out of work! *g > > I have 2 people here (and myself) hand coding up the Photoshop layouts from > the designers - I couldn't imagine doing it any other way. > > There are tools which make working in CSS easier - TopStyle by Nick Bradbury > is one that really helps me. You can also pick up layouts at glish.com and > bluerobot.com which will save your team time. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Help my design team move away from nested tables
Thanks for the reply Nick. Yeah. I agree it's sort of a strange situation. Our design team actually is allowed to do more CSS than the tech group I'm in. We just handle the PHP, ASP, CF and database integration parts. And of course given our client timelines there is never enough time to do it right. P- --- Nick Wilsdon <[EMAIL PROTECTED]> wrote: > Paul wrote: > > > If we want to produce good clean markup using CSS we have the basically > rewrite much of the output from the design team. This seems like double > work, Considering this is more a tool issue than the fault of the designers. > What alternatives are there for this? > > > This tool doesn't exist, sorry Paul. It just sounds like you need a web > designer. You're essentially using Adobe ImageReady to 'make' your web sites > at the moment. Once they finally launch a 'CSS web designer tool' then a lot > of us are out of work! *g > > I have 2 people here (and myself) hand coding up the Photoshop layouts from > the designers - I couldn't imagine doing it any other way. > > There are tools which make working in CSS easier - TopStyle by Nick Bradbury > is one that really helps me. You can also pick up layouts at glish.com and > bluerobot.com which will save your team time. > > > Best Regards, > > Nick > > e3internet > http://www.e3internet.com > > > > > __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Help my design team move away from nested tables
Well okay sorry. I didn't anticipate this would be taken as literal. The entire page is not cutup as a Photoshop image. Only items like the masthead/header, navigation, logo, etc are provided in cutup form. We do not cutup the actual body text. Take a look at this page. http://dev.equalityforallca.org/ See the left nav and the Donation boxes on the right? These were all cutups form an original Photoshop PSD presented to the client. Once cutup there are some background images which sure can be replace with CSS styling. Mostly I will take the parts (tables) or the content and move these to PHP includes to be used on other pages. It's things like the left nav which is currently nested tables (3 I think) that scream to me unordered lists. Sure I can convert this once delivered from the design team, I'm a developer. I agree with what someone else wrote about this topic which was for my team to take the original image and create the CSS from scratch instead of waiting a day for the design team to provide the cutup. Thanks to all. P- --- Mike Dougherty <[EMAIL PROTECTED]> wrote: > If a page is composed entirely of a 'cut up' Photoshop image, what value is > CSS? > > If the page is created and managed as a photoshop document, is there any > useful presentation > feature offered by CSS? There is no font control (sizing, face, etc.) there > is no color > control, > there is no (real) hope of liquid layout, there is no alternate stylesheet. > If marketing > decides > to 'tweak' the page, you're going back to the original photoshop document. I > don't see how a > site > made of pages like this is much different than an interconnected PDF that > pops up in your > browser. > > Our webmaster draws pictures in photoshop and gets approval for pages using > those images, then > he'll create a FrontPage mockup - which is essentially the photoshop document > polluted with > Frontpage markup. The multipage mess is then handed over to me to "make > functional" by adding > infrastructure that should have been built first. Am I wrong to believe this > is not a 'best > practice' way to go about web design? (sorry for the wandering rant) > > ...Anyone have a favorite URL for 'best practice' web design? > > On Tue, 29 Nov 2005 15:58:36 +0300 > "Nick Wilsdon" <[EMAIL PROTECTED]> wrote: > > Paul wrote: > > > >> If we want to produce good clean markup using CSS we have the basically > > rewrite much of the output from the design team. This seems like double > > work, Considering this is more a tool issue than the fault of the designers. > > What alternatives are there for this? > > > > > > This tool doesn't exist, sorry Paul. It just sounds like you need a web > > designer. You're essentially using Adobe ImageReady to 'make' your web sites > > at the moment. Once they finally launch a 'CSS web designer tool' then a lot > > of us are out of work! *g > > > > I have 2 people here (and myself) hand coding up the Photoshop layouts from > > the designers - I couldn't imagine doing it any other way. > > > > There are tools which make working in CSS easier - TopStyle by Nick Bradbury > > is one that really helps me. You can also pick up layouts at glish.com and > > bluerobot.com which will save your team time. > __ > css-discuss [EMAIL PROTECTED] > http://www.css-discuss.org/mailman/listinfo/css-d > List wiki/FAQ -- http://css-discuss.incutio.com/ > Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ > __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Help my design team move away from nested tables
Mike, I don't think the original post was describing a situation where edits to content required going back to the design team. Photoshop and ImageReady are fairly sophisticated with slice attributes. You are able to define regions of the PSD to contain no images, and an empty table cell is coded for you to drop your content into. Generally, people who use this method, generate a "draft" HTML template and then spend a few hours cleaning up the template before building pages from it. I think it's this "cleanup" stage that Paul is hoping to reduce. Once this cleanup and page-building is done, editing a non-image area of the site does not involve going back to the PSD. At least I hope that's what Paul is saying. Otherwise, it's madness! As far as a way to generate CSS instead of tables from ImageReady... ImageReady CS2 is a step toward it (not sure about previous versions). You would certainly still need to tweak and adjust the output, but when saving a file as HTML, you can now specify to generate CSS instead of tables. You can even tell it to render XHTML-compliant code. Don't get me wrong, there is still a LOT of work to be done on the file after it is saved. ImageReady just wraps everything (images and text areas alike) in s and positions them absolutely. No semantic meaning whatsoever. Either way, you will still have to re-write much of the code that comes from the design team. Caveat: I've never actually used this feature in ImageReady, I'm just aware that it exists. I'd never use ImageReady's CSS output in a production environment. Honestly, in order to create tableless layouts that are cross-browser and OS compatible, you have to dig in and learn CSS/XHTML. Fortunately, it's fun!! Tim __ [EMAIL PROTECTED] -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Mike Dougherty Sent: Tuesday, November 29, 2005 8:45 AM To: css-d@lists.css-discuss.org Subject: Re: [css-d] Help my design team move away from nested tables If a page is composed entirely of a 'cut up' Photoshop image, what value is CSS? If the page is created and managed as a photoshop document, is there any useful presentation feature offered by CSS? There is no font control (sizing, face, etc.) there is no color control, there is no (real) hope of liquid layout, there is no alternate stylesheet. If marketing decides to 'tweak' the page, you're going back to the original photoshop document. I don't see how a site made of pages like this is much different than an interconnected PDF that pops up in your browser. Our webmaster draws pictures in photoshop and gets approval for pages using those images, then he'll create a FrontPage mockup - which is essentially the photoshop document polluted with Frontpage markup. The multipage mess is then handed over to me to "make functional" by adding infrastructure that should have been built first. Am I wrong to believe this is not a 'best practice' way to go about web design? (sorry for the wandering rant) ...Anyone have a favorite URL for 'best practice' web design? On Tue, 29 Nov 2005 15:58:36 +0300 "Nick Wilsdon" <[EMAIL PROTECTED]> wrote: > Paul wrote: > >> If we want to produce good clean markup using CSS we have the >> basically > rewrite much of the output from the design team. This seems like > double work, Considering this is more a tool issue than the fault of the designers. > What alternatives are there for this? > > > This tool doesn't exist, sorry Paul. It just sounds like you need a > web designer. You're essentially using Adobe ImageReady to 'make' your > web sites at the moment. Once they finally launch a 'CSS web designer > tool' then a lot of us are out of work! *g > > I have 2 people here (and myself) hand coding up the Photoshop layouts > from the designers - I couldn't imagine doing it any other way. > > There are tools which make working in CSS easier - TopStyle by Nick > Bradbury is one that really helps me. You can also pick up layouts at > glish.com and bluerobot.com which will save your team time. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Help my design team move away from nested tables
On Nov 29, 2005, at 5:26 AM, [EMAIL PROTECTED] wrote: > When engaging a client my design team will for provide still image > created via Photoshop to the > client. Once the client accepts the design the design person will use > Adobe ImageReady to produce > HTML cut-ups. As you can guess the content of the pages is all nested > table. ... > I'm a big champion of CSS especially for layout. But for the > non-programmer type designers they > really want/need a tool that will facilitate this. Is there such a > tool? SiteGrinder (http://www.medialab.com/sitegrinder/) from Media Lab is a tool that does this. SiteGrinder takes layered Photoshop designs and outputs them as working CSS pages. However, as it uses absolute positioning for page elements, it may or may not be a perfect solution on its own. But as part of an overall workflow that starts in Photoshop, you might find it useful. A demo of this Photoshop plug-in is available. The company also produces a nifty Dreamweaver extension for quickly making rounded corner doodads of all types. Good luck. ...pt -- Business/Communications start at http://www.PhilipTobias.com. Grow your business using my technical and marketing communications - Effective writing, graphic design, multimedia, photos, and Web sites. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Help my design team move away from nested tables
> SiteGrinder (http://www.medialab.com/sitegrinder/) from Media Lab is a > tool that does this. SiteGrinder takes layered Photoshop designs and > outputs them as working CSS pages. However, as it uses absolute > positioning for page elements, it may or may not be a perfect solution > on its own. But as part of an overall workflow that starts in > Photoshop, you might find it useful. A demo of this Photoshop plug-in > is available. The company also produces a nifty Dreamweaver extension > for quickly making rounded corner doodads of all types. I am sorry, but it doesn't really matter if the generated code is nested tables or absolutely positioned DIVs. The point is that a web page is structured text with CSS as presentation and maybe some JS as behaviour. The demo page of sitegrinder for example is a bunch of DIVs with _empty_ links and images as backgrounds. Search engines, users without images and text browser users (or text to speech software) will get nothing whatsoever, you might as well take a screenshot and use it as a background. It might be a handy tool to deliver clickthrough wireframes, but this is not a web page generator. Even as a wireframing tool it is rather dangerous, as clients will be miffed when they see that the final product does look a lot different than the cool photoshop clickthrough. I think if we start thinking of web sites as entities of content delivered through a certain channel - HTML and CSS - instead of Photoshop layouts, then we have a chance to create successful, beautiful and accessible / globally available pages. I have not encountered any project in the last 4 years that did not mushroom from a "just five quick HTML pages" into a CMS driven site with > 40 pages. The more flexible we plan, the less time and money gets wasted ditching generated or shoddily copied and pasted code. Tools like this one stand in the way of us trying to get across that websites do need content that keeps getting maintained/translated/converted to really offer something for the visitor. Modern web design is flexible, and can cater for different media and needs. This is not much better than one of the older illustration tools, that had a "convert to HTML" that generated one massive GIF with an imagemap. There is no word macro to write a book for you and there is no Photoshop filter to generate a company CI, why should there be a tool that can do what we've been struggling with in the last 8-9 years? My guess is that a lot of our problems (budgets, funding, time-lines) is because of a lot of software is promising to deliver what we do as webdesigners with the click of a button. The other problem is that negative feedback never reaches the stakeholders - annoyed surfers simply go somewhere else. -- Chris Heilmann Blog: http://www.wait-till-i.com Writing: http://icant.co.uk/ Binaries: http://www.onlinetools.org/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Help my design team move away from nested tables
Christian Heilmann wrote: >I think if we start thinking of web sites as entities of content >delivered through a certain channel - HTML and CSS - instead of >Photoshop layouts, then we have a chance to create successful, >beautiful and accessible / globally available pages. > I think Christian has hit the nail on the head. Web sites are all about content, and there is no way that a computer design program will ever be able to read and understand our content, mark it up semantically, group it properly into divs with logical ids, and position it in a flexible way. That's our job. Paul, I would suggest you that you suggest a change in your organization's workflow, if you haven't already. If your team is the one with the CSS knowledge, you should be the ones structuring the pages, not just programming them. I had a similar situation where I work -- my programmer doesn't know about semantic markup and was handing these forms off for me to style with no labels or fieldsets, bold tags thrown around, etc. I just asked him if I could structure and style the pages first, then give them to him to "make work," and he had no problem with this -- which was not surprising since it meant less work for him. :-) You could also try to educate them, but that's probably a very long road. Good luck, Zoe -- Zoe M. Gillenwater Design Services Manager UNC Highway Safety Research Center http://www.hsrc.unc.edu __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Help my design team move away from nested tables
On Nov 29, 2005, at 5:26 PM, Christian Heilmann wrote: > It might be a handy tool to deliver clickthrough wireframes, but this > is not a web page generator. Even as a wireframing tool it is rather > dangerous, as clients will be miffed when they see that the final > product does look a lot different than the cool photoshop > clickthrough. Yes, SiteGrinder can be handy for prototyping - especially for the many folks who already start in Photoshop. It might also save some time outputting the various graphics, or other pieces, which you can reuse as you see fit. Although the publisher promotes SiteGrinder as a tool for generating complete Web sites, I have found other uses. The rapid prototyping you mention is one, generating graphics from Photoshop (which is where this discussion started...) is another. Specifically, I've used SiteGrinder graphics within page templates that I've built with more conventional CSS methods. As already stated in my prior message, for advanced users SiteGrinder is probably not a "solution on its own. But as part of an overall workflow that starts in Photoshop, you might find it useful." Cheers. ...pt -- Business/Communications start at http://www.PhilipTobias.com. Grow your business using my technical and marketing communications - Effective writing, graphic design, multimedia, photos, and Web sites. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
