Forum Moderators: not2easy
Well, now I'm trying to get my head around CSS design ... and my head hurts. But I've seen some really, really nice CSS sites and I want to create sites like those.
I've been picking my way through various tutorial sites and attempting to analyze the .css files that run CSS-centric sites. I even poked around in the W3C CSS2 specs before running and hiding as all the script definitions and permutations threatened to bury me alive.
What's a "visual" guy to do? I need to learn this stuff but it's scary.
I can't even visualize the process. I mean, right now, I build a comp of a site in Fireworks (or Photoshop), export the individual graphic elements, and use Dreamweaver to build the site using tables and Dreamweaver's "layers" (the latter of which I've only recently learned I should be using only sparingly instead of freely as I have). I might create a css file for type styling.
What's the process with CSS?
When I, for example, look at a css file that Eric Meyer has created for his website and I wonder, do I have to define all of that? And why use multiple .css files? And what about Javascript (which I know even less of than CSS)?
Am I right in thinking that CSS requires me to develop a completely new way of approaching web design? I mean, once I've created my comp in Fireworks, do I need to then build .css files to reflect my design? Am I coding this by hand or will Dreamweaver help?
A lot of questions and a lot of frustration. Thanks for any help you can offer with any of it. I can't wait to build my first 100%-CSS site. :)
He takes 10 or so pre-CSS websites and, in steady stages, CSSifies them.
All useful object lessons for a phased approach.
Next I prototype some of the more complicated sections. If I've got a particular order form or a common header with multiple items I'll try just making these in a page and getting them to work cross-browser on their own.
Then it's time to write up the general page structure. This usually doesn't look anything like what it will do finally, and I'm not using tables or anything. I'm just putting in the page the elements I noted down on paper earlier. I'll try and put some fake content in as well (well, the realer the better) to flesh out the page.
I make a stylesheet and start using floats and positioning to lay out the content now. This bit takes a bit of practise but it tends to come more easily the more you do it. Using borders or background colours can help you visualise better where your sections are. Finally I add colours and fonts, and add back in the previously prototype sections. At this point I also pull the little decoration images out of Fireworks (bullets, list markers, etc) and add them into the page. Then tidy up and it's on to browser checking.
I have to say that I don't use a visual editor. In the past I've found that they remove a layer of understanding from the code you're going to have to debug sooner or later. I'd recommend using a standard text editor (or sticking in code view) and using real browsers to check your progress. I'd also recommend building your site first in a standards compliant browser like Firefox, Opera or Safari, then checking in IE later. It'll save you time in the long run. Validation is another key point which can help you discover bugs that might be being ignored in the browser you're currently testing in.
To answer your specific questions:
1) There are several uses for multiple CSS files. The one I most use them for is to serve specific CSS to IE5 (which generally gives me the most debugging issues). As well as that I'll generally make a print stylesheet designed to remove the menus from a printout. On bigger sites you could also have a general CSS file for the whole site and a series of small ones for each differently styled section.
2) Javascript you can ignore for the time being. I try and look at it like this: html for the content, CSS for the presentation, javascript for the behaviour. You get cross over between all three but it's best to keep them as seperate as possible.
Hope this helps.
Just one thing to say for Pad1953: START FROM SCRATCH.
Don't try to work on your current website. You will loose time and learn a little.
Start from scratch, try different layout (mostly 2 or 3 columns - there are plenty available on the web and some good one in this forum) and once you are satisfied with the layout (and it validates in CSS and HTML), then you can start to modify your current work.
Trimming HTML is really enjoyable!
1) Get a mock-up done in Fireworks that shows a generic page, complete with dummy text, dummy links, etc.
2) From that mock-up, I jot down the major portions of the page, generating a list of content holding elements, such as ... header, navbar, search box, content, sidebar, inset, footer. I then reshuffle those elements in the list until I have them in the desired source order.
3) Using that list, I shut down the mock-up, open my favorite text editor and handcode the basic HTML document for the page, using the source order determined above. This is a critical step, I think. The HTML document should be written independently of the visual design. If necessary, you can go back later and make changes to the structure to fit the needs of the CSS design, but always START with an HTML document.
4) Then, with the mock-up open again, I start looking at ways to position things how I want. This, of course, is the meat of css-p design and is probably the part that is scaring you the most. Having the visual to look at helps. Something else that helps is going into the layers panel and hiding all the background graphics, borders, boxes, colors, etc, so that the mock-up shows only the dummy text in the approximate locations you want it on screen. This way you can concentrate on the content, and not the frills. Background images are highly maleable, and you can always tweak this or that property to get things lined up right. The most important thing is getting the page structure right and the major layout components solidly in place.
My two top peices of for this stage are to...
(a) permanently open a browser window with this forum in it and post questions here about anything you don't understand. The CSS forum on WebmasterWorld is the best on the net, with the most knowledgeable, friendly and helpful members you'll ever find . USE US.
Did I mention we're also humble? ;)
(b) permanently open a copy of the W3 CSS Specs Index [w3.org] in a browser window and get into the habit of reading about properties and/or values that you're unsure of or planning to use. This is the "horse's mouth" of CSS syntax and vocabulary. It can be cryptic at times, outright unintelligible at others, but somewhere or another it contains all the answers.
5) Once the layout boxes are in place, I unhide all the frilly stuff and start slicing off peices of the mock-up for backgrounds.
6) Tweak, browser test, retweak, browser test, scream a little, tweak again, etc.
cEM
-Try a practice page, coding some css and seeing what happens. You'll be a lot better at providing good mockups for client once you understand how you will break that structure up. (Learn from my mistakes!). Do a basic header, main, footer, then start adding in other features -- like a container div to set width/center, multiple columns, etc.
- draw a structured grid over your mockup to see how the divisions will work, then note all your dimensions and colors. Its easy to refer to the marked up printout
- I work in Dreamweaver with code and design view -- but don't use the design view unless I've lost my place and need to select text to jump there in the code. It also feels comfortable, even though I know it doesn't look right. Plus, I can spot-check colors quickly.
- when you're building a test page to set up a new template, email a link to everyone. I often have pages looking great on all browsers on the mac, only to fall apart on a pc.
Have fun! css is so freeing, you'll love it in a little while
