I finally converted our site from tables to CSS for layout and I'm quite pleased with the results and apparently so are my bosses because they've asked me to produce a document to help other teams convert from tables to CSS. A document in which i would describe the problems i had, how i solved them and general tips about how to work with CSS.
Now, I've already got the document well on its way but im getting short on tips to give and I thought I'd ask you guys, if you had to give one tip to a new guy, what would it be ? .... you can give several tips too.
I've already stressed a lot in the document about using proper doc declaration (strict!) and using W3C validator. but what im looking for are answers to problems they will most likely encounter as they will convert their site.
you know, things like "Q: why are my elements overlapping each other ? A: Are you using absolute or relative positioning ? If so , try to obtain the same results by adjusting the margins and padding of your boxes instead."
Any tips ?
Markup your content first,
Markup your content first, with HTML tags, and THEN style it with CSS.
Test in Firefox and Opera, and IE. Never rely on dreamweaver's preview mode.
Don't be afraid to ask for help.
Also, keep reading the sites of well-known CSS gurus for inspirations, and to keep abreast of the latest techniques/tricks. Sites I often visit are:
Sounds like they want some
Sounds like they want some magic document that converts a site in twenty easy steps!
Biggest tip that I can give is learn the language, it's not something throwaway that can be just picked up casually there is more to it than one imagines to begin with and a collection of tips is only ever going to be marginally useful.
- control your margins, dont let browsers control them
- ul,ol lists can use padding or margins as defaults to obtain indenting
- code for compliant browsers fix for non-compliant ones
- remember that padding and borders are described after width and add to it
well, I sort of understand why they want it even if i am myself convinced it will be of little use.
The goal with documents like these is to try to avoid having everyone fall in the same pitfalls. But in my experience, it seems every new website is always different from the other and what might work for one, doesn't always work for the other.
I think what they want to is to be able to give that document to any team wanting to convert and show them how its done. I am in a government area and lost of our websites look alike. So what im gonna write can help them get started.
But in the end, you are right, whoever gets to do this conversion is gonna have to go through everything i did, or everything anyone has to go through when converting the site. Problems after problems, you google around and ask the nice people on css forums
The biggest issue we have here is that most managed don't give a rat's ass about firefox, safari, opera ... anything not IE they don't care because IE is the norm here. So it doesn't matter that i tell them that my site works in every browser but has a glitch in IE6 because 99.5% of the people browsing our site are gov people with only IE6 installed.
And i can tell first hand that other people that will be converting their site will have the same discussions i did and will be told to just not support FF, opera and safari just because no one that browses our site us using it (or even allowed to use it)
Can you believe that our very own intranet is designed with some nice CSS ... that works in IE6 only ? hundreds of thousands of people go that site everyday and they didn't even bother to make it cross-browser. Its hard to convince them to do it just because its the right way to do it.
but hum... i digress.
All that to say that whatever help my document can bring I'll be happy that it did and for that purpose, I'll make it as complete as i can.
Well it sort of implies or
Well it sort of implies or at least is akin to the dreamweaver and the ilks methodology that coding can be automated and reduce to just shoving/dragging a few blocks around on a screen and lo and behold you have a coded website, we know it isn't that straightforward and that is why there is no such thing as a book written that can cover all eventualities or describe fully how to work with CSS, it's simply too flexible and unique to each situation, having said that pointers can and should be a help.
The browser issue is a difficult one as it's not about the browser but about coding correctly no matter what browser may be used to view the pages that is irrelevant the pity is that a certain browser is so absolutely flawed and hopeless but that is the case and it has to be understood that one 'fixes' up for that browser but never ever codes to it's quirks.
Being told not to support a device that does the job correctly just demonstrates absolute ignorance of the situation, it's quite hard to code against say FF while it's easier to code to it and then fix the few problems in IE but you'll never get that across :rolleyes:
Keyword to Text Ratio and the use of H1, H2 and H3's corresponding that with your title text will make one powerful SEO site mate.
I always scribble it out on a piece of paper with a pencil, labelling things such as containers and widths etc. I find this REALLY helpful as it's a quick reference I can constantly refer back to and alter instantly and it helps with my maths too (when it comes to things like preparing widths for 3 floated columns including margins, padding, borders etc...)
I know it's not very techy, but I think this technique is a life-saver. Plus, it's like the front cover picture on a Jigsaw puzzle box. Gives you something to aim for. Bonus. That's my tip for the day.