CSS is not hard to learn – if you recognise it for what it is
On almost any mailing list or forum you still encounter developers venting their frustration as to how buggy CSS is and how hard it is to switch from table layouts to CSS layouts. A lot of this frustration is not based on bad browsers or missing elements and concepts in CSS, it is based on an old school view of web design. Web design was never easy, but it can be if we start embracing the complexity of our development environment and be flexible enough to develop for it.
Tables were not easier
I doubt that anybody making the claim that table layouts are a lot easier was around when the browser wars were in full swing and the visitors largely used Internet Explorer 3, Netscape Navigator or Netscape Communicator. It was not easy at all to make a table layout that didn�t break apart when the content changed. It was also not easy to change the look and feel when a redesign was due, unless you planned your tables properly and used the server to your advantage via includes and variables. I remember writing a toolbar for Homesite 3 in 1998/1999 that allowed us developers to generate �bullet proof� tables instead of having to remember all the tricks that had to be done to make tables behave. Those who had to suffer the same horrible technology may remember the stunts:
- Table width attribute set to 1
- Row of transparent GIFs to define the whole width of the table with repeated width definitions in both the image and the TH/TD elements
- Tables cut up into several tables to allow rendering of one table after the other rather than having to wait till Netscape rendered the whole table.
- Font settings in each TD, as the rudimentary CSS support meant losing the font definition of the parent element in table cells.
It took us about 4 years to get out of this mess, and now we repeat the same mistakes we did back then. We don�t seem to have realised how lucky we are: Browsers are not all bad; some of them are pretty amazing in what they do. I wouldn�t want to write a browser engine catering for all the options HTML and CSS gives us while trying to please the marketing department and ensure security.
Be flexible
Instead of embracing the diversity of the web and its hundreds of possible user agents and user agent settings, we try to enforce a rigid structure.
How often have you heard:
We need to use a table here, as all the columns need to be the same height and we don�t know their content.
An equivalent of that would be:
We need ducks in this pond, as otherwise it will overflow with bread thrown in by old ladies.
The content makes the design, not the other way around. A design that constrains the content or � even worse � expects different content to take up the same dimensions – is bound to fail, regardless of technology.
Browser vendors realised that not the developers, but the users are the important group to cater for: Nowadays users have a lot more options to override what we think is best for them and make the web site display in a way they want or need. The inbuilt RSS viewers of Safari and Opera are pretty nifty, and browser add-ons like Mozilla�s DOM inspector, Aardvark or Adblock allow us to get rid of unwanted elements of a page to make it more usable for us. Opera has a very extensive user view option that even allows serialization of tables and removal of colours or fixed dimensions.
We use these things as developers for testing, and yet we delude ourselves into thinking that we know what is best for our visitors. These gadgets were implemented for the users, not for us.
I am going to make a bold statement now, but almost 8 years experience of web development taught me this:
A web page that looks and works exactly the same across different browsers is most likely neither accessible nor easy to maintain. A web page that is well structured, allows for flexibility and improves visually with the sophistication of the user agent is both.
The media attribute or selector of the style directives in HTML and CSS define screen, and print (amongst others), but not �Internet Explorer 6.0 on Windows XP2 with a screen size of 1024×768 and full window with the font setting to medium�. A CSS style sheet defines how a user agent should render the page, it is not a native program to the browser�s rendering engine triggering a set-in-stone outcome. Much like an XSLT style sheet converts hundreds of XML documents to another XML format; CSS does this for user agents and their modes (print, screen). You wouldn�t try to use the same XSLT for a PDF generation and XHTML conversion, and still one CSS is supposed to cater for all and deliver perfect results.
CSS is dead easy once you learnt to let go of the fixation to try to constrain everything. A good web page design should allow for:
- changes in the amount of content
- changes in the size of the font
- various viewport sizes without forcing the visitor to scroll too much
I will not get into the �fixed vs. liquid vs. flexible� layout discussion � personally I have no problem with flexible width; if a text is too wide to be readable I resize my browser window. On the other hand, if you fixed the width and I have to scroll on a 1024 resolution I simply leave your site.
So how can we make �easy CSS layouts�?
There are some tricks to avoid frustration when developing web sites with CSS:
- Cross-Browser means �functioning in different browsers� not �looking the same�. Don�t go back and forth between browsers and compare � no user would do that. Surf the whole site in one browser, then in the other and see if there is a consistent experience throughout the whole site with the same browser. If there are terrible bugs preventing the visitor from using the navigation or being unable to read the site content because of overlapping sections then you need to fix them. If there is a 2 pixel shift when the font size is nudged up two measures and that infuriates you then you really need some real problems in your life.
- Don�t limit the height of an element that contains text. You cannot have multiple columns with the same height and different content (you can simulate it with background images and colour but there still might be instances where it simply will not work). Furthermore you cannot have a text that is as high as an image next to it.
- Allow things to grow: You can use a background image that reveals less or more according to the content of the element it is applied to, or you can make the image fade onto a background colour and fill the rest of the element with that one. This will allow for text resizing without awkward gaps.
- Don�t use any padding and margin on main layout elements – you are simply asking for cross browser problems (yes, MSIE). If you fix the layout width, then fix it for all the elements and use margin and padding on the elements added to the layout DIVs. Try to avoid percentages as there are some nasty rounding bugs. Especially gutters defined as percentages are tricky: A 5% gutter of 1024 pixels may look enough, but the same will fail on 600-700 pixels.
- Don�t expect the content to follow any amount rules. �This design can have 6 horizontal links in the menu� might work for English on medium font setting but will break into several lines in Finnish, German or when the text is resized. A good navigation can break into several lines, but tabs do look confusing if they do.
- Use background images for borders, instead of borders. It saves you the trouble of having to calculate the extra widths into the overall layout equation.
- Use larger background images than needed and position them to allow for elements to expand and contract.
- Use background images on the parent element for bullet points. This allows links and other list elements to wrap onto another line without bad wrapping:
- Assume growth, no matter what the client tells you. There is no such thing as a �5 page web site�. Any web site does involve the same planning and structural thinking, no matter if it has 10 or 10000 pages in the end.
- Develop with content in place. Preferably real content that will be on the site later. A lot of CSS grievances happen because of empty elements. Content will make them snap into place and behave in most of the cases. On the other hand, content also shows you where you need to cater for more space.
The main trick is to know what will be put out on the web. If there is no Information Architecture, sample content or even an idea how many people will use / edit / publish on the site it is almost impossible to develop a good web site and it is tempting to restrain your designs to what is most convenient. A web site is not a brochure, its success is very much dependent on it changing over time and solving even more problems or needs our visitors have.
Update Can you create flexible and clean CSS? Prove it by participating in the CSS Toolshed
November 13th, 2005 at 12:57 am
October 24th, 2007 at 5:50 am
October 3rd, 2007 at 6:22 am
October 2nd, 2007 at 2:35 am
October 4th, 2007 at 11:20 am
October 4th, 2005 at 1:32 pm
I was reviewing my web site and my own habits as I read this article. Made me think of several things I could do better and how I could avoid some layout problems. Great post. Thanks!
October 5th, 2005 at 1:03 am
Interesting article. I forget that so many people need help with CSS and table-less design.
October 5th, 2005 at 9:28 am
“If there is a 2 pixel shift when the font size is nudged up two measures and that infuriates you then you really need some real problems in your life.”
I find this patronizing :p
Never the less, a very nice article.
We all tend to forget, that it took us around a year to learn to walk, three years to learn how to speak, and at least another 20 to effectively communicate, until people can count to more than a 1000 usually takes at least 6 years (I knew people that couldn’t do this, while they were 10!).
Never the less, people expect to learn CSS in a split second, why? Because we have all forgotten how long it took us to reach the skill level we have, and we forget, that learning a new technology, is actually the same as learning a new skill set, requiering at least an equal amount of time and effort to gain competency.
Further computers have fostered the notion of “instant magic” done by computers, which now everyone seems to come to expect. The less someone understands of the underlying technologies, the likelier they will fall for the notion.
Just my 5c’s….
October 5th, 2005 at 10:33 am
Interesting tips and tricks! However, I don’t get this one, could you clarify it?
October 5th, 2005 at 11:10 am
Tom,
it is easy, say I have an 200 pixel wide news item for example:
<h3>News</h3>
<ul>
<li>News</li>
<li>News</li>
<li>News</li>
<li>News</li>
</ul>
If I wanted to use a 2 pixel border on the UL, and make the H3 as wide, I need to substract the border:
h3{width:200px}
ul{
border:2px solid #000;
width:196px; /* 200-2*2 */
}
If I add a margin, this gets even more:
h3{width:200px}
ul{
margin:0 5px;
border:2px solid #000;
width:186px; /* 200-2*2-2*5 */
}
With a background image, I don’t need to calculate the borders in.
October 5th, 2005 at 11:44 am
To me subtracting the border and the margin from the width seems easier than adding borders via background images. If your box needs to be scaled, you need at least two images smoothly adjusting next to each other. That’s a whole technique!
October 5th, 2005 at 11:57 am
YMMV I suppose. What I realised with percentage layouts is that borders can really bite you in the bum on MSIE.
October 5th, 2005 at 12:37 pm
Great article and summarises web development issues well.
Getting web content before design is essential, but it’s so rarely done. It’s too easy to end up in an iterative “design -> code -> write content -> fix design” loop.
It’s also a problem that clients equate web design with print design. Try explaining that you don’t know the paper dimensions, where the design will be seen, or what fonts, colours, and sizes will be used!
I’m not sure I agree with the border/background idea. Fixed-width sites may be feasible, but flexible would be tough!
November 13th, 2005 at 6:58 am
Great article!
That is an axiom.
I’m tired of trying to convert to code a graphic design in PSD (that, usually , isnt mine), and filling all the text with “Lorem Impsum”.
Real content makes easier the whole process.
You need at least a minimun content.
How can one adapt something to a CMS (ContentMS) if the client has no content?.
My ex-boss ask me to build some sites for his clients, but the clients dont even know what they want to communicate, how they want to do it, they dont have content, etc… and sometimes, the “we-have-no-content-but-make-me-a-site” seems to finish in an obsolete site… if not in a “make-me-a-site-with-things-that-move-in-screen” (aka “a Flash site”) and with a “super-cool-splash-screen-with-a-trance-loop”.
Of course, I wont do that. But also, I found myself doing some poor sites (“we-will-add-content-in-the-future”) that never get filled with real content…
Thanks for this article and excuse my english.
November 13th, 2005 at 2:34 pm
Although I agree with you in spirit, having something look the same is generally considered to be equally as important. A pure designer, without HTML engineering skills, would crap their pants if they saw subtle differences in their design on different browsers. That makes me think that your statement is more of a personal ideal, than something to achieve when other factors are at play.
November 13th, 2005 at 3:00 pm
Great article, but why do say that “On the other hand, if you fixed the width and I have to scroll on a 1024 resolution I simply leave your site.” when it’s exactly the case here ?
Thanks,
Gaston
November 13th, 2005 at 8:29 pm
yeah maniqui. lack of content before beginning site development is a big problem for me (coupled with unwillingness of my bosses to be strict about clients delivering it on time). So far, sites that ive had to start building without full content available beforehand are never ones i was proud of afterwards; because of all the compromises and corners that have to be cut later to adapt to the unexpected demands of the late content, and still to keep to the deadline. It’s demoralising.
sorry for OT post. Good article!
November 14th, 2005 at 8:17 am
Jon: Who brings the money in, the designer or the web site visitors? If the designer does not recognise that flexibility is a bonus in web sites then he needs to wake up and smell the opportunities.
Gaston: What browser / OS / resolution are you on? This layout here works without horizontal scrolling even below 800×600. Trying to fix a vertical height is an exercise in futility, as font resizing will make it higher anyways.
November 15th, 2005 at 4:41 am
Wow, very powerful thoughts, indeed. Thank you Steve for validating some ideas that I have been playing with. Also, I totally appreciate what people said in response. It seems there is a general experience we all have when it comes to using CSS. It’s actually quite reassuring. And boy did I need to hear about people’s experience with clients and the complete disregard of delivering content when needed. It is very tricky with CSS to design beforehand, almost impossible.
That aside, there is nothing more satisfying, or as visually stimulating as a page you’ve completely designed with CSS lays out exactly as you envisioned without a single td or hack in sight. Until that rare occasion happens, I spend a lot of time cursing MSIE, with visions of hard drives melting and out-of-date coding being tossed into huge bonfires while the people of the CSS Clan dance joyfully around the fire freed from the bondage of the oppressor, MSIE.
Thank you for engaging us in a thoughtful conversation about CSS.
November 15th, 2005 at 7:48 am
Chris,
Sorry, I thought you were talking about vertical scrolling…
My bad ;)
Gaston
November 15th, 2005 at 8:10 am
Gaston, as mentioned in the post:
There is no such thing as “height” when it comes to the viewport. Text needs to be resizable on the web, and if you constrain the width, it has to go somewhere.
November 18th, 2005 at 1:28 am
If by this you mean that a page’s content should determine general design futures, and as the opposite; design futures should not restrict good presentation of that content, then I agree. Although the rest of the paragarph makes your point a bit clearer, the statement seems shaky.
For example;
If the ‘not other way around’ being ‘design making content’, then that doesn’t make sense, as not many heard of design making (determining) the matter of content.. and the content does ‘not’ make the design, as it is a seperate tier then presentation. In other words, one should ideally be free enough to present the same content in any fashion they wish.
:just my interpretation:
November 18th, 2005 at 8:10 am
Sarven:
What I meant is notes on designs like: “This link can be 16 characters long” or “This field can be three lines”.
It is just not wise to constrain content in your design as there will be situations where this will not be enough and your design will be shot.
December 19th, 2005 at 4:17 pm
If table-less design is so neat, how come your own homepage looks like this?
http://www.freeimagehosting.net/674a8c057c.jpg
http://www.freeimagehosting.net/2f091fdc02.jpg
Does CSS mean I have to choose between overlapping the content with the sidebar, and clear’ing until the content is spaced out in orbit?
Edit: It is a conscious decision I made to use JavaScript overlays instead of listing all these links. I also rushed the design of this site and did it 90% in the web developer toolbar CSS editor. I could as well have floated them all to the right and shown them there. Wait-till-I.com is not there to win design prices – I am a bad designer. I might change the non-JavaScript styles of these overlays but frankly you are the first to complain.
January 21st, 2006 at 6:28 pm
when i put a url in a comment box which is a table,width of comment box increases.i have specified width of table.but it exceeds that.how to make a fixed size table width wise.i tried this
<table width="100">
<tr>
<td>
xczxczxa href="http://techno-flaws.net" target="new"><img src="http://i32.photobucket.com
/albums/d50/flawlezzd0llzooo/
Animation1er.gif"
</table>
</td></tr></table>
its not working.size of table increases with content width wise,even though i have fixed width
Edit: CSS has not the capability of shortening texts or add breakpoints when there aren’t any defined. You can use the overflow property to either display a scrollbar or cut off the text. Another option would be to use a server side or client side script to shorten links. I have written a script to automatically shorten URLS to simulate a backend script.
February 15th, 2006 at 3:08 pm
Nice art, good job!
November 1st, 2009 at 10:57 pm
Wait till I come! » Blog Archive » CSS is not hard to learn â if… [link to post]
– Posted using Chat Catcher