Archive for October, 2005

In Search of the One True Layout

Sunday, October 30th, 2005

As I am too lazy to come up with my own introduction right now, I’m just going to quote the source. I hope you don’t mind.

Pure CSS-based layouts have come a long way but they still have shortcomings that fail to address certain design goals without compromising the true separation of content and presentation.

In short, the problematic design goals are these:

Total Layout Flexibility
That is, the ability to order columns logically in the source while displaying them in any order desired. For any number of columns.

Equal Height Columns
Or more accurately, equal height columns without having to rely on faux columns.

Vertical placement of elements across grids/columns
Designers face the choice of relying on elements being a particular height, resorting to tables or simply not bothering.

Towards a solution
This article shows how to achieve each of these goals, and then how to combine them, creating what could be called the One True Layout™.

Read all about it at position is everything.

CSS Hacks and IE7

Sunday, October 30th, 2005

You may have already heard that a few of the most important CSS hacks are going to break in IE7. This is, in fact, a Good Thing™. What it basically means is that the IE team is getting its act together and trying to add as much standards compliance to IE7 as they can. All those child selector hacks we used to provide styles for non-IE browsers? Busted, since IE7 understands the child selector. On the good side, the browser finally does what it’s supposed to. And that’s what we wanted, right?

What it doesn’t mean, however, is that IE renders everything the way it should. We don’t know what will happen with those hacks. Will IE read them like Firefox, and then render them the same way? Doubtfully. If it did, the IE blog wouldn’t be sending out that call to action. In other words, we need to come up with alternatives to the current hacks. This could also mean going back to all those CSS websites we’ve done a while ago and replacing the hacks to ensure those sites work in IE7. Luckily, we’re all in the same boat, and to give us all a hand, position is everything has compiled a guide on how to work around those problems. Read it, you’re going to need it. With a browser of such major market share, there’s no way around it.

Doctype Overview

Thursday, October 27th, 2005

Just a really quick and dirty post: For those of you who can’t remember the Doctype declaration code (DTD), there’s a practical Doctype overview over at the W3C. There’s also a nice little template to give you a jump start.


Wednesday, October 26th, 2005

AmbigramsJust stumbled upon ambigrams today. Yes, ambigrams. Nice word. What’s that you say? Never heard of them? No worries, neither have I. What’s an ambigram, you ask? Well, according to the Wikipedia entry:

An ambigram, also known as an inversion, is a graphical figure that spells out a word not only in its form as presented, but also in another direction or orientation.

In other words, rotate the image above by 180° and see what happens. There’s plenty more, and they’re quite fascinating.

Thanks go to Frederik Samuel, where I orginally found this. While you’re there, check out the rest of his blog. Lots of valuable (frequently updated!) content, and one of my favorite RSS feeds!

CSS Shorthand Guide

Sunday, October 23rd, 2005

Using CSS shorthands instead of the regular rules will help reduce the weight of your CSS files dramatically. Instead of writing bloated rules such as:

element {
  background-color: red;
  background-repeat: no-repeat;
  background-image: url(image.png);

we could use the following, which does exactly the same thing:

element {
  background: red url(image.png) no-repeat;

To make our life easier, Dustin Diaz has compiled a comprehensive CSS shorthand guide, explaining all the possibilities and highlighting some of the quirks and things you need to keep in mind.

Zoom Layouts

Sunday, October 23rd, 2005

Building an accessible website means finding a way to provide the content for all possible groups of visitors. There’s more to it than just using web standards like XHTML and CSS, though that is a good step in the direction.

High-contrast zoom layouts, such as this one (compare: regular layout), offer a good solution in providing information to visually impaired users. Accessibility expert and author Joe Clark has a useful collection of resources.

Vector Safari for Mock Screen Captures

Sunday, October 23rd, 2005

Safari Vector Mock-UpFor those of you who need high-res versions of Safari, Dave Simon from Oddlaa is offering a completely vector-based mock-up. According to Dave, a Firefox version will be following within the next weeks.


Sunday, October 23rd, 2005

TypophileTypophile, in its own words a “typographic collaboration”, offers a comprehensive community platform for anything typography. Discuss typography and ask for advice in the community forums. Check out the user-edited typoWiki, which will provide you with loads of info about typography in general, foundries, history, print, retailers, software, styles, terminology, and much more. It’s being updated frequently, so if you’re missing something, it’ll be there at some point. Or, in the open collaboration spirit, you could just add it yourself. :)

Flock: A New Firefox-based Browser

Sunday, October 23rd, 2005

Check out Flock, a new browser based on Firefox. This one should be especially interesting for bloggers.

Here are some of its new features (taken from Bart Decrem‘s Slashdot post):

  1. replaces old-school bookmarks with one-click social bookmarking to
  2. tagging is there if you want to do two-click bookmarking and tag
  3. a new bookmarks manager with an integrated rss reader
  4. built in search engine that indexes every page you visit and has a Spotlight-style as-you-type UI
  5. keeps a list of the sites you visit most frequently
  6. multiple bookmarks toolbar (one for work, one for play etc.)
  7. finds feeds, lets you view them
  8. caches the feeds so you can read them on the train
  9. aggregated RSS view for all of your bookmarks folders
  10. integrated blog editor (support wordpress, movable type, blogger)
  11. one click ‘blog this’ feature (it does the blockquotes, citations and all that stuff for you)
  12. Flickr integration (drag and drop pix into blogs)
  13. shelf: a web scrapbook that helps you organize stuff you want to blog

Sounds good, and it looks sexy!

Sin City: From the Comics to the Screen

Tuesday, October 18th, 2005

Sin CityAdapting movies from other media is often a much harder task than writing a script intended to be a movie from the start. Especially movies based on games and comic books are risky to do and quite often turn out far below the standard. The hardest part is probably pleasing the fans, who have strong bonds with the originals. Considering this, it’s very refreshing to come along a movie such as Frank Miller’s Sin City. The visuals are beautiful and tightly knit to the original comics, the attention to detail is amazing. I’d go so far as to say the film, in my humble opinion, is truly a piece of art, and absolutely does the original comic justice.

They’re so tightly knit, in fact, that has composed a collection of scans from the original comic in direct comparison to screenshots from the movie. In a comprehensive side-by-side lineup, you can see how much care Robert Rodriguez, Frank Miller, and the rest of the crew put into making it a perfect adaption, right down to the last detail.

For a full experience, you must agree to the use of cookies. For more information, see our Privacy Policy

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.