Redesigning, Part 3: Wrapping Up
The new unraveled design was built using 100% CSS for presentation. This means that every image used in the design, from the logo to the background image, was specified in the stylesheet - no exceptions. Images that are used as content - for example, images in weblog entries - are specified in the HTML. When people say that their site is all CSS, don’t believe them unless you view source and find out for yourself. I’m willing to bet there are many sites that say they’re “all CSS,” but continue to use images in their design.
The CSS specified in my global stylesheet doesn’t favor any one particular browser; it favors standards. Never the less, throughout the redesign I tested the design in as many browsers I could including IE 6/Win, Firebird .6/Win, Opera 7, Safari Beta 2, Camino .7, and IE 5.2/Mac. These browsers correctly interpreted 95% or more of the CSS. If a browser interpreted the CSS incorrectly, I made sure that it didn’t inhibit the usability or accessibility of the site.
Here are some of the CSS browser quirks that I learned about during the redesign:
Of the browsers that I tested, IE 6 is the only browser that correctly renders the bodyI stand corrected. IE 6 was incorrectly rendering the bodypadding-bottom.padding-bottom. Firebird correctly did not add space between the contentdivand the browser window. The content is floated left, which effectively removes it from the flow of the document. To get that space back in Firebird, and assumedly other standard compliant browsers, I added a margin-bottom to the contentdiv.- IE 6 and IE 5.2 don’t support
max-width. - IE 6 incorrectly adds an extra space before the first
h2elements within the left floateddivon the Archives and Elsewhere pages. - The right menu and search submit button are positioned and sized with ems, respectively. Safari incorrectly pads the menu too far from the content and doesn’t make the search submit button wide enough for the label.
- IE and Firebird are the only browsers that correctly position my comment form. The other browsers almost get it right, but not wrong enough to make the form unusable.
- Opera incorrectly adds an extra space between the entry metadata links (date, category, comments) which are contained within an unordered list.
Next, the about page has been updated to include accessibility information.
Finally, the last few design details were added today. Links to the mobile version, Movable Type and my Creative Commons License were added to the menu.
Thanks for reading along during the redesign.
Go back to the top of this entry ↑
Comments
Who says Opera is wrong? You can’t call default spacing between elements “wrong”, because the standards specifications themselves do not state exactly how many pixels must appear for every margin for every element, etc. There are general specifications, but nothing that specifically says that the distance between the baselines of 2 list items must be 2em or whatever your crazy notion of “correct” is.
Opera specifically designed the default appearance of lists that way for a reason. If you actually have a word-wrapped list, you would see that for yourself. It’s so that the word-wrapped list elements don’t all appear smooshed together, or the individual list elements don’t get confused when you take away the list decoration (dot, square, etc.).
chris on 21 May 03
Chris: Thanks for your comments. Before I respond, I want to say that I think Opera is a great browser. It has wonderful support for standards and excellent features on top of that. I like Opera and would wholeheartedly recommend it to anyone looking for a new browser.
You’re correct in saying that there is nothing that specifically says that the distance between the baselines of two list items must be the same as other browsers. However, for design’s sake I think it’s important that there is general consistency across browsers for rendering basic HTML elements like headings, paragraphs and lists.
I’ve never found word-wrapped list elements to appear smooshed together. If I did find them smooshed together, I would depend on using CSS to add extra spacing, not the browser. By adding that extra spacing, Opera may be creating a better user experience for select users, but it’s also taking control away from the designer. Furthermore, it implies that Opera knows what’s better for my users. Excuse me, but this is my website, not Opera’s. I think I can handle my users just fine.
“Incorrectly” may not have been the best word choice. Next time I’ll say Opera “does it’s own thing.” In the end, Opera has that right.
Joshua on 21 May 03
Well done
and it looks good in Mozilla too…
Donna M on 21 May 03
Martin: I mean that if a site is truly all CSS, all presentational/design elements should be specified in the CSS, not in the HTML. For example, this page contains four images, all of which are design elements - as opposed to content elements. All of them are specified in the global style sheet, not in the HTML.
Joshua on 23 May 03
What do you mean by ‘…sites that say they’re all css, but continue to use images in their design.’ ?
martin on 23 May 03