Forum Moderators: not2easy
I build my designs in Illustrator CS2. I have recently learned how
to use slices and "save for web" which lets illustrator do the hard
work of organizing the table and all of your art work.
My question is what would be good practice. I am new to CSS but
understand it.
So if I don't use Illustrator's save for web function which converts to tables
I have to slice everything or save separate
images and then use divs for positioning and laying out all the content?
That sounds like a lot of extra work for the same results.
What is the right way to do all of this?
thanks,
Bradster
And idk what ur talkin about with Illustrator slicing and making tables...all slicing does (in both Illustrator and Photoshop) is blocks out 5 sections of your drawing and then saves each section as a seperate image. so if you wanted to use customized fonts in dreamweaver you make the slice over the text with the font and save it as an image for the web and place that section within a layer in dreamweaver and place it wherever it belongs. if you know something then thats different but as far as i know all slicing does is break apart an image. Tables are done within dreamweaver.
[edited by: PerlJamZ10 at 5:44 am (utc) on Dec. 20, 2006]
... I have recently learned how to use slices and "save for web" which lets illustrator do the hard work of organizing the table ... So if I don't use Illustrator's save for web function which converts to tables I have to slice everything or save separate images and then use divs for positioning and laying out all the content?
I'm gathering you are aware that tables are deprecated for use as layout elements. It is exactly as you say, begin trying to think in "chunks" that can be managed in blocks as "whole pieces" instead of slices that need to align precisely. This is a topic of very heated discussion - many will agree that tables are still the best choice for some layouts, especially if you have to slice images to get them to line up. And many more will disagree. :-) There are hundreds of arguments on both sides, but the right way is a table-less layout that is semantically correct.
Secondly, when you allow **any** program to auto-slice or export for web for you, it is going to make a "best guess" at image optimization and may not always be correct. For example, a "filler" area that consists of 5 colors is going to make a small file if exported as a 5 color .gif. But right next to it you have a logo that will look better and compress better as say, a level 6 .jpg. An export program will export all your images the same - same optimization, same level, making the file size of some images too large and the quality of others too low. So you should always address each image individually.
That sounds like a lot of extra work for the same results.
If you look at your final product in terms of presentation, you are correct - the two versions may be visually identical. But remember that presentation is actually a small part of creating a page - optimization of the images as mentioned, document semantics, and SEO considerations are all important in your final product. A good HTML document exposes the content as cleanly as possible, whether read by a person or a search engine. So try to step outside of your graphic presentation and examine what's happening in the document itself, this is every bit as important.
What is the right way to do all of this?
Very difficult question, but IMO:
- Use a valid document type to avoid Quirks mode.
- Create documents with as little markup as possible, using DIVS for layouts and not tables (if possible)
- External style sheet that controls presentation, and external Javascript if required
- Optimize images manually to get the best balance between quality and file size
- Validate your documents using the W3C or other validator
- An often overlooked important part - make sure the document title tag and meta-description tag actually describe the page and are UNIQUE to that page. Meta - keyword tags are largely ignored - but description tags are often what is used in search engine snippets. Don't make them all the same.
My rule is that anything you do on a page - graphically or in the code - is just like good writing. Create it, then take out everything you possibly can and still have it do or say the same thing.
My rule is that anything you do on a page - graphically or in the code - is just like good writing. Create it, then take out everything you possibly can and still have it do or say the same thing.
My sincere compliments rocknbil ..you do write superb explanations that are clear and informative and blend beautifully the tech and the common sense ..and with humour ..
meaning to say that for some time now ..
Love reading your stuff ..make a point of it ..
Recommend heartily the same to others.. even if one knows something of the subject rocknbil is writing on on and so doesnt read to learn the specific point dealt with .. your style is still a pleasure to read ..kudos :)
</back OT>
[edited by: Leosghost at 11:18 am (utc) on Dec. 20, 2006]
I saw the question earlier and didn't know how to answer, so I will go from the heart seeing as how rokknbil has covered it so eloquently. Folks (rightly) say that CSS Design is a change of mindset, and some now feel that they no longer see the difference, e.g. I just have the one mindset - so I just don't understand why others can't 'see' the design from the code ;)
That may sound a little patronizing but it's not meant to be honest, it's just where I am as a geek :) - but anyway the middle ground for me was realising that images no longer need to be sliced and spliced, and if they do (for optimisation) then it's likely not in a pixel perfect grid(table) manner You can overlap them or hide bits of them in CSS.
Take a rounded cornered box for example you don't need to have a 3x3 grid (9 images) to make that you can now make it out of 2 graphics, and take rollover menus they do not need to be sliced into individual menu items and each of their individual states they can be made from just one graphic
I spend a lot of time putting sliced images back together when designing from a mockup so for me the question is why slice, but I know that the answer is that that's the way it was always done and some programmes try to make it easier, however no programme (so far) can optimise the CSS let alone the images for it. As you learn you will be able to do what rocknbil says
Create it, then take out everything you possibly can and still have it do or say the same thing.
as time goes on you will be able to take out more and more, as you take out more divs you will be able to put back together more images.
Suzy
[edited by: SuzyUK at 11:43 pm (utc) on Dec. 20, 2006]
