Neverside

Photoshop and Web Standards

I wanted if photoshop and image ready would ever produce webstandard code instead of their table coding. I haven't used image ready to save for web in about two or 3 years how much has it changed is photoshop 6? I don't intend on check lol so has anyone used it recently?

-Khalil

PS what other features you might like to see in the up coming releases of photoshop

___________________

I use photoshop 7 and when saving slices the code is still in tables, hard to understand, and depreciated (caps for tags etc.). I still save slices, but write my own code.

Yeah well i use the sliceds just to keep where I cropped, yes people I crop and no just export the slices all at once. I find it to be more controling that way instead of having everything just done and now I'm like what now. Cropping enables me to crop and code it one time, so it';s all peiece by piece and I don't get flustered that way.

___________________

Hmm, do you people not know how to use the save for web feature in photoshop to save slices only?

Its quite handy, you can go throught all your slices, name them how you want, save selected slices only. And bam you have all the slices you need.

With cropping, if you are using blending options, your croped images will differ to those if they were sliced normally.

As for the code photoshop produces been in caps, You can actually change the settings to use lowercase, and Photoshop CS2 is already defaulted to lowercase.

As said by Intersect, Save For Web is very useful. I use it constantly, it's great for slicing, optimizing and saves time not having to set file names.

But please code your own code...
Oh, and PS couldn't really program your site for you unless your site is completly fixed width/height.

___________________

"Sam says : Die!"

Photoshop can output that "DIV's and CSS!!!" type of markup if that is what you're asking about. It's not clean nor good though.
The reason Photoshop and other tools can't make "web standards" acceptable code is because that includes knowing what element describes each part of the content the best. Web standards compliant markup means so much more then "valid markup", using semantic markup is also a big part of it.

Since you only have a bunch of design images when you slice layouts, there is no content to describe. Even if you had 'content' and Photoshop could tell that it is content, how would it know what part is a block quote, paragraph, link, cite, list, code block etc. That kind of brain is still missing in Photoshop and other applications I'm afraid.

Personally I always crop images "manually". Besides for main containers and things, I don't DIV's like Photoshop outputs, I usually put the backgrounds in the semantic selected elements any time I can. So if the approach is a web standards compliant and semantic markup then using the slice tool in Photoshop for other things than images is more then likely going to slow things down rather then speed it up.

If your only goal is to get validating code then I see no reason why Photoshop/Image Ready shouldn't be able to do that. Use the correct doctype and head contents and use lowercase markup for XHTML doctypes. Validating code only means that you don't have any raw errors in your code, it can't tell anything about the quality or idea behind the markup. (hence why we discourage people to use the validator in "Site Reviews")

I'm moving this to the Adobe Photoshop forum.

___________________

Neversidian, your staff is broken.

Last edited by Simon, June 4th, 2005 04:03 PM (Edited 4 times)

CS can output CSS and DIV's, but it isn't very semantic. Also, it uses the position: property, which wouldn't be recommended.

___________________

Originally posted by blackmesa:

Okay! thats the last time i search up goatse on google

Last edited by chatmasta, June 4th, 2005 08:27 PM (Edited 1 times)

There is nothing wrong with the position property so I don't know what you talk about. I assume you talk about position: absolute; and I see nothing wrong with it when it is used in the proper places.

This thread's question wasn't about which type of positioning technique is better or worse so let's stay on topic.

___________________

Neversidian, your staff is broken.

Last edited by Simon, June 4th, 2005 09:09 PM (Edited 1 times)

The fact is that while tables deal directly with positioning the images, CSS and Divs do not. CSS/divs have to be approached from a different way, and usually you really have to code them yourself if you want exactly the end effect you want.

I think the main point to remember is that if you're doing a heavily graphic design, with many slices, putting it in CSS/divs is going to require a ton of customization and tweaking anyway, so you might as well do it all manually.

If you want the lazy way out, then export your slices to the generated table. However, most well-designed sites today are not heavily graphical, and if they are they do not rely on sliced up layouts.

Last edited by nano, June 5th, 2005 02:11 PM (Edited 1 times)

CSS is great, don't get me wrong, but it has also resulted in a proliferation of very blocky sites that aren't particularly interesting from a design point of view. Developers are just now starting to learn how to make standards compliant sites without them appearing to be a bunch of boxy chunks glued together. The use of sandbag divs is one way of doing that.

Even though Image Ready's table creation results in a code-heavy mishmash of javascript and table tags, it's still the easiest way to create visually appealing sites. I use it less and less, though, because of the standards issue, but I have to say I miss it. A lot.