|
Sep 11
2008
|
Effective Web Design - Clean Code - CSS explainedPosted by Ross in usability, simple, effective web design, dynamic content, design, css layout, Content, accessabilty |
|
Having seen thousands of websites, I always pondered why new companies are still designing in tables. On their website they state that they know the latest technologies, are efficient with code and compliant...etc. Yet, when you view there site it looks fine, but they give 100+ errors. For some reason, errors seem to show up more in tabled layouts. You will see a site design in all tables if you view their source and there is nothing but <td><tr> on the page. It is okay to use tables for some specific modules or only partially when needed, but to make an entire layout on tables in not intelligent design at all.
Enter CSS
There are many ways to design a website effectively. With CSS, the tableless layout can be very flexible. One line of code can change the page layout completely. And this is a good thing, because once tables are placed, you have to go back into the html just to change it. Having designed all my layouts using external style sheets I can say that it does take more time and you will get a bunch of headaches. Usually the headaches will be from how much we all hate IE and why does everything look different in certain browsers. But the more time spent on a tableless layout, there is less time for modification in the long term.
Still don't get it?
Someone asked me when I was talking about css. They were like "what's that?" There are probably many analogies. At the time, I gave an example of a solar power plant. Think about the new age solar plants and the old school plants. At ASU you will see rows of solar panels that probably are stagnant and don't move with the sun(though I am not sure). Now look at the newer power plants that have rows of mirrors that reflect all there light on a single tower that contain the solar panel(s). My point is irrelevant to which produces more power, but more relevant towards time. Imagine 10 years down the line when nano solar panels come out and produce 1000 times more power than today's. Well, if you have a grid of solar panels (old school method), you have to switch every single row out and replace it. With the other method, it would be way easier to change the single or group of panels that are centrally located in the tower.
The same reason why backend programmers use php or asp.net to parse html code for websites is very similar to the same reasons front end developers uses external css for web pages. Simply by organizing the webpage in separate parts makes it more efficient. By changing one css can change the layout on all your pages. With tables you are stuck changing all the tables on each and every page. Though, there are many reasons why css is better, such as expanding browser window, printing, speed or nesting. Flexibility and accessibility are the most important.
My .02
Though I do hate it when I forget to define a margin or clarify a z-index in Internet Explorer. Firefox has some quirks where you have to define certain things, but it is what makes us front end guys better. Using tables is a quick and easy way out, and it seems very lazy and people who still use them show that they don't have a front end guy or the designer is making the site. Or quite possibly that's all the backend guy knows too. Simply put, CSS is very important to know and it is pivotal for any web design company and put a little bit of pride in being compliant to w3C standards.

Ron
said:
|
... CSS makes me go crazy when I design for all browsers, but it is well worth it in the end. |

