Raible Designs

Flexible CSS Layouts

I feel like I quote Zeldman a lot, but he always has such good things to share that I can't help it! This time it's Issue 155 of A List Apart, for people who make websites: “Flexible Layouts with CSS Positioning.” He also suggests that we read “Accountability of Accessibility and Usability” by Anitra Pavka. The title’s a mouthful but the content is easy to digest. Pavka examines web accessibility in the light of recent legal challenges and invites our industry to create guidelines instead of waiting for Big Brother to tell us what to do.

BTW, anyone know why he uses target="eljefe" in his <a href>'s? I always end up removing them in my source. I say let the user do what they want - if they want to open the link in a new window, right click -> open in new tab. Notice I said tab, not window - who uses IE anymore when Phoenix has it all and more!

SVG 1.1 and Mobile SVG

Erik gave me the link to this slashdot article, which references the W3C's website:

15 November 2002: W3C is pleased to announce the advancement of Scalable Vector Graphics (SVG) 1.1 and Mobile SVG to Proposed Recommendations. Comments are welcome through 20 December. SVG delivers vector graphics, text, and images to the Web in XML. SVG 1.1 separates the SVG language into reusable building blocks. Mobile SVG re-combines them into two profiles optimized for cellphones and pocket computers. (News archive)

You would think that this CNET article would have said something about Mobile SVG, but no dice. I think Mobile SVG will make huge inroads considering that the alternative and how lightweight it is.

RSS Relative Links

Yeah, what he said!

I've invalidated my RSS feed by including relative URL references inside some of the IMG tags. Question: if I am required to include a LINK element in my RSS feed, is there a reason RSS aggregators can't use it to resolve relative links? The $REMOTE_HOST or equivalent? Given that people have been using relative URLs in pages for years, I'd expect RSS tools to be a bit more flexible in this regard. I mean, browsers can handle relative URIs, right?

Scott holds a lot more clout than I do in the web world - I'll be surprised if his post doesn't cause waves. He'll also show you how to parse your site's XML feed with CSS and the DOM.

W3C Supports SVG

I found this while using the latest (1.0.2) version of NetNewsWire to surf my RSS subscriptions.

In a development that could help Adobe erode some of Macromedia's vector graphics lead, the Web's most influential standards group issued a draft designed to make its vector graphics standard work more easily on cell phones.

Facing an end-of-year publishing deadline, the World Wide Web Consortium (W3C) this week also released a flurry of proposals covering linking and querying Web pages and XML documents.

But the consortium reserved most of its enthusiasm for the vector graphics changes, which it hopes will help nudge the industry away from the accepted--and proprietary--standard, Macromedia's Flash technology.

"What we're seeing are some exciting developments on the SVG front," said W3C representative Janet Daly.

SVG, or (Scalable Vector Graphics), is the W3C's method for creating vector graphics, which are more flexible than the common bitmaps that form most of the graphics on the Web. In contrast to bitmaps, which are shipped fully rendered and defined pixel by pixel, vector graphics are composed of mathematical descriptions of curves and forms. This composition results in a more compact file, the ability to render the image to fit television or monitor screens with varying resolutions, and greater ease in animating the image. [W3C sees graphics on cell phones]

SVG is cool - it allows you to draw graphics using XML. It'll certainly make for lighter web pages and flash-type presentations using simply text. Watch this one, it'll be hot!

Later: I found this simple SVG Example and a whole slew of W3C Presentations.

Quotes in HTML

Did you know that just like " = &quot; and ' = &apos; in HTML, there are equivalents for the left and right quotes as well:

• &rsquo; = ’ (right single quote)
• &lsquo; = ‘ (left single quote)
• &rdquo; = ” (right double quote)
• &ldquo; = “ (left double quote)

Your browser should be able to render these properly, if not, please comment so we can figure out why. For a complete listing, check out this HTML Symbol Reference. My reason for posting this is I've been wondering how to do the left and right quote thing, and now I know!

Apache Flaws

Erik tells us that Apache Flaws are being exploited.

Opera 7 Beta Available

Finally, it's here, revamped from the rendering engine and up. Opera 7 Beta is smaller and faster than before, offering you a whole range of new features to make you more productive on the Web. [ Read More | Screenshot ]

Installing now...

What's your site's content size?

This site is 29.18% text context. Apparently, the rest is markup. Found via web-graphics.com.

The tool (wittingly called getContentSize) apparently does not include images or attached CSS, or javascript in it's analysis. I believe that considering it measures my total page size as 51131 bytes, where Phoenix tells me it's 55270 bytes. What it doesn't tell you is that I have around 250 (yes 250!) links on this site, and since it doesn't count those as text (<a href> is markup), I think I've done pretty well. Here are some interesting statistics for other sites (and lots of markup with little text):

Acrobat Reader 5.1

Download Acrobat Reader 5.1. New version includes support for Palm OS and Pocket PC, digital signatures, file attachments, e-mail options, and more.

And then he added search highlighting

I've added a pretty cool javascript library called searchhi to this site.

The searchhi JavaScript library is a way of automatically highlighting words on a page when that page was reached by a search engine. In essence, if you search, for example, Google for some words, and then follow a link from the search results to a searchhi enabled page, the words you searched for will be highlighted on that page. Pretty neat, huh?

To add it to your site, simply copy the searchhi library to somewhere on your web server, and then include it in every page you want this to work on by adding the following line somewhere in the header: <script src="searchhi.js" type="text/javascript"><script> Then add, somewhere in your stylesheet, something like span.searchword {background-color: yellow; color: inherit}. I chose color: black since some colors in my menu are white, and white on yellow doesn't look so good.