Page layouts: CSS vs PS Slicing

K2`

macrumors member
Original poster
Oct 6, 2004
48
0
hi there

i'm not sure whats the best way to build a website anymore.. using css seems to be more professional way of doing websites.... but u seem to always run into compatability issues across browsers. using photoshop to make a layout then slicing it up and using tables seems a lot easier. What do people normally use to make layouts these days?

TIA
K2
 

Mitthrawnuruodo

Moderator emeritus
Mar 10, 2004
13,807
179
Bergen, Norway
Used the table approach until recently (of course with CSS)...

...now I'm working on a new layout where I use div-tags and position those using CSS... If you read the CSS specification then you'll see this is the way they recommended you make layout...
 

MrSugar

macrumors 6502a
Jul 28, 2003
614
0
K2` said:
hi there

i'm not sure whats the best way to build a website anymore.. using css seems to be more professional way of doing websites.... but u seem to always run into compatability issues across browsers. using photoshop to make a layout then slicing it up and using tables seems a lot easier. What do people normally use to make layouts these days?

TIA
K2
Hey man,

I am a recent CSS switcher and now a HUGE advocate of designing in CSS. I too always thought tables and ps slicing had its place. The fact is now with the current generation of browsers we have, and the techniques that exist for CSS, you can do pretty much anything you used to be able to do in tables. Perhaps netscape 4 being the exception.

CSS has some huge benefits. I will attempt to cover a few of them here.

- Easier Cleaner code - Design in CSS is clean, by pulling elements from your style sheet across your entire site you reduce the amount of redundant code. It loads faster, looks nicer and is easier to update.

- Forward Compatability - When you make a website in CSS you may have to add a few "hacks" to make it work in some of the browsers out right now. But the fact is as browsers continue to progress your code will continue to work perfectly. This way you can focus on style and formatting, instead of having to re-design or recreate your sites.

- Beautiful Designs - CSS creates amazing designs. It is finally bringing back the simple elegant (apple) style of web layout. Too often with tables designs get heavy and complex. Now CSS allows for the perfect form and functionality. For instance, take a look at the Zen Garden or Stop Design to see what I mean. These sites look great, the content is easy to read, and they still have the "element of design".

- CSS works better with standards - CSS will validate better when created correctly. It makes websites work well in all browsers and platforms. No longer do we have to design specific to one browser or another. This will only get better the more browser updates that come out.

Those are a few of the benefits. I definitely suggest if you don't design in CSS yet to move in that direction. The control you have over your content amazing. And of course, you still mock up the design in photoshop, and you still slice your images accordingly. But now instead of sticking them into tables and bloated code. You code out a style sheet. It's a bit tricky at first, but well worth it.
 

whocares

macrumors 65816
Oct 9, 2002
1,496
0
:noitаɔo˩
MrSugar said:
- CSS works better with standards - CSS will validate better when created correctly. It makes websites work well in all browsers and platforms. No longer do we have to design specific to one browser or another. This will only get better the more browser updates that come out.
Well sorta... MS Internet Explorer doesn't respect W3C standards 100% IIRC, and *may* needsome browser specific coding.

And behaviour varies slightly from browser to browser...

But on the whole, CSS is great.
 

K2`

macrumors member
Original poster
Oct 6, 2004
48
0
are there any guides or tutorials for photoshop slicing and putting things together with css?
 

brap

macrumors 68000
May 10, 2004
1,701
0
Nottingham
K2` said:
are there any guides or tutorials for photoshop slicing and putting things together with css?
IIRC, ImageReady can output CSS-valid sliced images in HTML format. It's rudimentary (absolute position), but it gives you the dimensions, and is a starting point.
 

Brother Michael

macrumors 6502a
Apr 14, 2004
717
0
Is it still useful to learn how to PS (I however, like Illustrator and use that) Slice ?

I mean I just learned how to do that, and I am pretty impressed with what I can do in it now. However, I understand that CSS provides you with a faster load time.

Mike
 

aftk2

macrumors regular
Nov 10, 2003
132
19
Pacific NW
I'm curious

Heh...this comment was edited because I completely failed at reading and comprehending the original question. Must be a bit too close to lunch. :) However, I'll redeem myself. I second the opinion that CSS + semantic HTML (divs and strongs and paragraph tags - oh my!) are the way to go. Here are some good tutorials for getting started.

CSS Layout Techniques
http://glish.com/css/

A Web Designer's Journey
http://www.alistapart.com/articles/journey/

CSS School
http://www.w3schools.com/css/

And, when you start getting frustrated at browser inconsistencies, or you start really working with JavaScript - you'll need this site:
http://www.quirksmode.org/
 
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.