CSS best practice (new to it)

[ChilliLime]

Hi,

I've always built sites by designing in photoshop, slicing them up and then building using tables. I dont use the ready made tables that imageready outputs though I like to build it from scratch.

I've recently had a site rejected by a customer because I used tables instead of pure CSS. I've promised myself it will never happen again.

So here I am, ready to learn. The first question i'm faced with is - is designing sites based on image slices suitable for building with CSS?

Any tips appreciated, i've read plenty of stuff over the weekend but not asked any questions. Want to make the transition as smooth as possible.

Cheers

[vincevincevince]

The way I go about it is as follows:

1) Design created using photoshop, illustrator, etc.

2) Overall structure created using floated DIVs (i.e. one for the top block, one for the left menu, one for the main content, one for the footer)

3) Each part of the design inspected and reproduced in CSS code if possible.

4) Repeated background images and horizontal or vertical graphical motifs created at minimum dimension (i.e. 1 pixel wide or high) and applied as background images with repeat.

5) Small graphic elements prepared (rounded corners, shadows for buttons, etc. - always kept to minimum possible size, to the pixel

6) Elements which sit on top of a textured or repeated background prepared as transparent graphics - either PNG or GIF. This avoids problems with misalignment of image background to surrounding background, and makes a future background change easy.

7) All text replaced with common fonts and styled using CSS. Effects such as shadows can be reproduced using stacked DIVs with a small offset and appropriate colour selection.

In short, the actual graphics originating in a graphics file should be reduced to the minimum possible filesize which doesn't adversely affect the design. This makes for a rapid page load time, good degradation, and easy future maintenance.

I advise doing all the above by hand using a good text editor. Take care with your graphics and make sure that you pick the file format and compression most suitable for each element - don't just stick to one throughout. For example, .gif is fine for images with few colours with sharp edges to transparency, however .png should be used for those which have more colours or variable transparency. In the same way, a photograph or similar image will do better with a jpeg format (ensure you increase compression until image starts to visually degrade). Be aware that neither compressed jpg nor gif guarantee a match for the original colour - with a gif this is a real danger when there are many different colours or gradients in the image.

[Setek]

I think the very first thing you should do shouldn't be a fully-fledged design, rather, you should start with the basics.

Skip the Photoshop part, I'm sure you're good at that already. Head straight towards coding things :)

Find a good editor - not WYSIWYG, or at least WYSIWYG that you can disable - that has nice code-colouring for those late nights where reading by colour-association is just plain easier.

Take a look at the past websites you've done. Do you:

• Design two-column grids?
  
• Design three-column grids?
  
• Fixed-width layout?
  
• Liquid layout?
  
• Expanding layouts (when text size goes up, entire site gets bigger)?
  
• Use images for menu "buttons"?

Make a brand new test page, and start by using logical (X)HTML markup to separate your content into two sections, divisions, for your two-column grid. Now, somehow, get them to sit side-by-side.

1. Add real-style content (content that would actually go in there were it a real site, not ajkshdfajhsdfjhasdf)
   
2. Set Text Size larger and smaller.
   
3. Generally try to break it.

Once you think you've accomplished that, move on to a three-column grid. Four, if necessary. Experiment with each of these layouts - find more than one method of doing each - and then find out which method works best for you.

Keep making new test pages, each one for each particular bit. If you have a particular problem, post the question with the code you've used in this forum.

And as my old boss used to say: "Practice might not make perfect, but it usually makes 'pretty damned good'."

[SuzyUK]

is designing sites based on image slices suitable for building with CSS?

I'd say not, you're possibly going to start CSS by trying to create table copies (a common first step) but this is soul destroying and defeats the purpose of CSS by marking up to a predefined ideal/goal.

The advice you've already received is good - Markup the document first, then set your divisions to fit 2, 3 or more areas - worry about fitting in your photoshop design later - so often I come across this scenario where I actually have to put image slices back together ;)

There are many techniques, a rollover menu is a good example where it's simply not necessary to slice the image in order to attach one bit to one link and another to the next indeed trying to fit a pixel perfect image into a CSS design can be very frustrating at times, there is usually a much smoother way to attach a background image to an element which sits behind many other elements too without attaching it in bits.

For an idea of using unsliced images, take a look for an article on CSS sprites, and also the Browse the CSSzengarden - if you've got FF look at the pages in the zengarden with Tools->page info->media tab and scroll down through the images used to create the designs in a lot of them the images are still in their entirety!

Suzy

[simonuk]

If you like reading there are three books that are very good for people starting off...

Professional CSS Cascading Style Sheets for Web Design by Christopher Schmitt (probably the best one for you to start off on!).

Web standards solutions by Dan Cederholm.

60 hot to touch accessible web design tips by Jim Byrne.

Simon.

[vincevincevince]

I think you should start by trying to make your whole design without any image files. Just try it. You can get a surprisingly long way. Then start adding the image files, keeping them to an absolute minimum and at minimum size.