Lessons learned: CSS redesign
Over the last couple of days, I converted my father-in-law's Paradise Lost website from its original table-based layout to a CSS-based layout. I'm reasonably happy with the results, and what I ended up with is not that different-looking from where it began, which of course was the whole goal of the project. Well, that and reducing the complexity of the layout, which was really frightening. I ripped out a LOT of code and replaced it with very little.
I feel pretty good about it, even though all I really did was bring it into compliance with a standard that was out six years ago. It's even valid XHTML 1.0, although I decline the opportunity to put the little "validated!" graphics on the pages. Plus, I ran it through browsercam and everything checked out just fine. Which isn't surprising, considering that I'm not really doing anything stressful with CSS.
(One thing I'm not satisfied with is that somehow the ALT-text has disappeared on all of the images, even though it's there in the HTML. And the index navigation page, since it no longer uses imagemaps, no longer has ALT-text for the links. The second one I can fix.)
It even looks good without the stylesheet turned on. Well, not good. But useable.
Anyway, the Weird Experience was this:
In my Web development IDE (Aptana, thank you very much), I was going back and forth between the CSS file and the built-in Internet Explorer preview, making things look right by tweaking here and tweaking there--standard procedure. I didn't even give Firefox a thought. After all, Firefox is more standards-compliant than Internet Explorer, and I'm not doing anything tricky like drawing curves or making fancy menus or anything like that.
When I was done with the redesign, I uploaded everything to my test server and ran Firefox over it.
It. Looked. HORRIBLE.
The positioning was off. The non-fancy list-based menu buttons had shrunk. Nothing looked the way it should. Even the image positioning (absolute!) was wrong.
I used Firebug to figure out thatI had done the cascades incorrectly, and slowly but surely was able to tweak everything in Firefox to get it to look correct, without affecting Internet Explorer's render too much. (The only standing issue: the images are in a different spot in IE than they are in Firefox, and I have no idea why. They're not really where I want in either case, but the current positions are a good middle ground.)
The lesson learned is something that I ignored when I was doing research on how to convert the tables to CSS. Don't make the same mistake I did: design for Firefox first. I read that advice in several different places. Take it! I estimate that I spent as much time re-tweaking as I did tweaking in the first place, and if I had done it all with Firefox first, it would have turned out okay in the end.
Among the resources I used...
All in all, a pleasant way to spend a few hours. Even if it was a busman's holiday.
I feel pretty good about it, even though all I really did was bring it into compliance with a standard that was out six years ago. It's even valid XHTML 1.0, although I decline the opportunity to put the little "validated!" graphics on the pages. Plus, I ran it through browsercam and everything checked out just fine. Which isn't surprising, considering that I'm not really doing anything stressful with CSS.
(One thing I'm not satisfied with is that somehow the ALT-text has disappeared on all of the images, even though it's there in the HTML. And the index navigation page, since it no longer uses imagemaps, no longer has ALT-text for the links. The second one I can fix.)
It even looks good without the stylesheet turned on. Well, not good. But useable.
Anyway, the Weird Experience was this:
In my Web development IDE (Aptana, thank you very much), I was going back and forth between the CSS file and the built-in Internet Explorer preview, making things look right by tweaking here and tweaking there--standard procedure. I didn't even give Firefox a thought. After all, Firefox is more standards-compliant than Internet Explorer, and I'm not doing anything tricky like drawing curves or making fancy menus or anything like that.
When I was done with the redesign, I uploaded everything to my test server and ran Firefox over it.
It. Looked. HORRIBLE.
The positioning was off. The non-fancy list-based menu buttons had shrunk. Nothing looked the way it should. Even the image positioning (absolute!) was wrong.
I used Firebug to figure out thatI had done the cascades incorrectly, and slowly but surely was able to tweak everything in Firefox to get it to look correct, without affecting Internet Explorer's render too much. (The only standing issue: the images are in a different spot in IE than they are in Firefox, and I have no idea why. They're not really where I want in either case, but the current positions are a good middle ground.)
The lesson learned is something that I ignored when I was doing research on how to convert the tables to CSS. Don't make the same mistake I did: design for Firefox first. I read that advice in several different places. Take it! I estimate that I spent as much time re-tweaking as I did tweaking in the first place, and if I had done it all with Firefox first, it would have turned out okay in the end.
Among the resources I used...
- Listamatic
- The W3C Validator
- Night Of The Imagemap
- I read some stuff in a book by Eric Meyer about the conversion process, and I remembered the general gist of how to do it.
All in all, a pleasant way to spend a few hours. Even if it was a busman's holiday.
posted by Robert at
8:51 PM
0 Comments:
Post a Comment
<< Home