There’s a new “Links” sub-section at the bottom of the Subtraction.com home page, which is more or less what you would expect: literally, a list of sites that I think are interesting. I haven’t had it before, in part because I think such lists are a little show-offy for my taste, and also because I always feared I’d snub someone by inadvertently leaving out a link to them. But, as time has gone by, I’ve come to feel that such lists are de rigeur for weblogs, and it’s a little impolite not to have one on mine. So here you go; I’m sure I’ve accidentally missed someone, but I’ll be trying to update this regularly — or soon, anyway.
The presentation style of these links is the manifestation of an idea that I had for showing lots of blog links by making use of the favicon, a concept that I had wanted to use for a project at work. As it turned out, we opted not to use it, so I thought I’d put into service for the links section. I’m fond of it because it’s a nice use of some very standardista-friendly elements — a simple, unordered list and favicons — expressed in a manner reminiscent of typographical tricks more commonly associated with print design (the drawback, of course, is that I can only list sites and feeds that feature unique favicons; not for technical reasons, but for editorial ones).
Below: Linky link. Favicons as visual punctuation.
Three’s Company
It even works in Internet Explorer, though I had to replace all the regular spaces with non-breaking space entities in order to avoid some truly weird wrapping. Debugging that got me thinking about how poor is our control over line breaks and text wrapping in CSS 2: if you look down the left edge of the links display, you’ll see a vertical stack of favicons, a visual confluence that I really don’t much care for. That never would have happened in print; I would have used manually line-breaks, tracking and kerning to create a more varied distribution of the icons.
Luckily, the next major revision of the Cascading Style Sheets standard, CSS 3, will generally improve control over text wrapping. The ‘text-wrap’ property will allow CSS authors to determine whether a line of text can or will break. And the ‘hyphenate’ and ‘word-wrap’ properties will control how words themselves break, which, hopefully, will allow designers to finally start designing the rag of flushed left or right text. Finally!
For all its benefits, the typesetting limitations in CSS 2 have become so well ingrained that I think a lot of people have forgotten that we’re still in a primitive state of typesetting — if our tools don’t allow us to control line and word breaks or the rag of a block of text, then we’re still working beneath our capabilities as visual communicators. If you can’t tell, I’m kind of champing at the bit to get these new properties. Why a browser like Safari doesn’t yet support them while supporting far more superfluous text effects like CSS-generated text shadows seems to me like a case of confused priorities.
+
It looks great, and I’m honored to be included! 🙂
Me too.
Having links like that is definitely tricky. One some level, there are those of us that yearn to make the blogroll of some A-list celebrity, hoping to get noticed but once again being snubbed or forgotten. Oh don’t worry, I’m not talking about me. 🙂
There’s no question that some of the browser maker’s priorities are out of whack when it comes to this stuff.
That having been said, I think that the Webkit team’s thinking with text-shadow is that it is something that can easily be used for progressive enhancement. I can add a shadow to my text for Safari users and users of other browsers lose virtually nothing. Therefore, it doesn’t really matter that other browsers don’t support it — it’s still at least a tad bit useful. text-wrap, word-wrap, and hyphenate all lend themselves to much more obvious differences between the browsers that support them and those that don’t. They’ll actually adjust the layout and text flow of your page (whereas text-shadow won’t). In other words — Webkit adding support for them doesn’t help us much, because they’re not going to be practical until all browsers support them.
Either that, or I’m just an unabashed Apple fanboy sticking up for my favorite browser. 🙂
Thanks for the link to 9rules. Nice write up too.
Because Mac OS X’s underlying graphics engine happened to already have drop-shadow support, it was a no-brainer.
“Let’s see, I can hook up CSS 3 shadows for no effort, or write a hypenation engine which is practically a rule-based AI. Which should I do first?”
Nicely done, Khoi. If anything, it’s a nice smattering of color at the bottom of your page…kind of like taking a chocolate cupcake with sprinkles and turning it upside down.
While I don’t think electronic media is moving (or can move) away from text, I do think there’s a general cultural shift away from reading and towards scanning. No revelation here, of course, but much text on the web is only peripherally content itself (at least how it’s received, which is often digested by the masses in the most cursory fashion). As a result, I think the aspects of typography which have historically contributed to readability have largely been neglected on the web.
I really like the idea with the favicons and it definately fits your page!
So you would have differed the margin between the list entries so they always match with your border at the right of your 620px column? Why don’t you use different padding-left: / padding-right: entries? I think that should work since you’re on a pixel-layout…
I tried the idea and it looked fairly good to me – and with a bit fine-tuning it would suit your site even better! Or am I getting something wrong? I’m not an expert in typesetting, so sorry about that if what I was saying seems too gross..
Looks nice! Out of interest… How are you getting the favicons? A script to grab them or are you doing it manually?
Jonathan: Ack, sorry to have forgotten a link to your site — it’s certainly among the ones I would have added if my brain weren’t full of holes. See this is what I mean. I just thought of a few others that I should have added to this list too. I’ll try and find some time later in the week to fix that. Thanks for understanding!
I thought it was a bit cluttered looking until I hovered over a few of the links. There’s something very satisfying about the block of colour highlighting each link in this context.
Rad! Now cut-and-paste this code into the footer of the NYT.
I think favicons are underused. Take a look also at one.point.zero where he uses favicons when you rollover the external links in the right column.
One simple way to get rid of the left align problem with our current tools: set align: center instead!
If you set your footer to the same width as the links header, it might not even look silly.
Douglas
Even if you set center-aligned these things, you’d still have all icons on the left. If I understand Khoi correctly, he was saying he’d like to have ben able to put in linebreaks, say in between “Jason” and “Santa,” thus resulting in the second line starting with “Santa Maria,” rather than an icon. So, it might go like:
(icon) Airbag Industries (icon) Alert But Not
Alarmed (icon) Jeff Croft (icon) Jason
Santa Maric (icon) Daring Fireball
(icon) Archival Project
Etcetra. So that not every line starts with an icon.
I could be wrong, but this is the way I understood Khoi’s vision. It could be done, probably, with some tweaking, but it would get ugly — lots of
‘s and such.
For the record, I’m in the process of redesigning my person site, and I’ve used favicons for my blogroll. The new design was already heavily influenced by Subtraction, and this doesn’t help one bit. 🙂
Haha, thanks Jeff. And yes, that’s precisely what I meant: I wanted to create some more ‘natural’ looking line breaks through, er, artificially controlling the logic for breaking. Design is sometimes a conundrum.
The Links makes a great addition to your site! Thanks for including me! I feel extremely honored to be listed among the ranks of so many talented professionals and bloggers.
Regarding CSS and Internet Explorer — I have all but given up on massaging my CSS in order for my site to look just as good in IE as it does in Firefox and Safari. It’s just too much of a headache.
Let’s not talk of IE, that absurd browser.
I dig the links Khoi — a nice splattering of colour and a real treat.
Looks good – but it’s just appearing as a single vertical list in Camino…
Is there any particular reason why the image src doesn’t point directly to the favicon on the page you are referring to?
For example, instead of using “favicons/favicon_airbagindustries.png”, use “http://www.airbagindustries.com/favicon.ico”
Seems like it would be less work for you if someone rebrands their site…
-ch
Craig: for some reason, many favicon.ico files don’t render properly in the page when you call to them from within Internet Explorer (surprise!). So I figured it was best to grab them, and convert them to PNG files and store them locally. That way, I get the added benefit of avoiding missing images should the site ever go down, or change the path to its favicon for some reason.
Khoi…
In my afore-mentioned redesign with favicons, I also decided to do the download-and-convert thing, not only for the reasons you specifiy, but also just to alleivate the bandwidth and stats-skewing that pulling them directly from the other site would entail.
Khoi – really diggin’ the concept.
I didn’t see anyone ask this yet, so I figured I would: How come you didn’t run a desaturate over all the icons, in keeping with the rest of the site?
Yeah, I thought about it, and I may yet, still. I’d want to add a little JavaScript and/or PHP magic, though, to show the true color of the favicons on roll-over. Not being particular great at that, I figured it was best to get it up as is. If anyone has some code handy that will help me add those roll-over effects in an automated fashion, please let me know!
I’ve used standards-compliant javascript rollovers. You just add a class (e.g., “rollover”) to your images. There’s also Sliding Doors of CSS (and Part II).
There’s a JavaScript that desaturates images, but it only works on Internet Explorer. (I haven’t used it.)
This has probably been considered, but if the links are wrapped like in Jeff’s comment, you’d have disconnected orange boxes when you hover over a link. It probably could be done with display: inline, no floating, and some tweaking, but it’d be hard to achieve as nice a hover effect as there is now. Inspiring stuff, nice work.
would this work?
white-space: nowrap;
sometimes IE6 has some bugs with white-space, and i’m not sure if it works in IE5.x
<nobr> works — but it’s not valid in XHTML.
Too bad the solution to the line-breaking problem has been (more or less) around for a long time, in the form of the ­ and the elements, except neither is supported by all browsers—most embarassingly the soft hyphen is supported by everything except standards–lauding Gecko/Mozilla.
Hmm, a second remark. It appears your preview function processes HTML entities and inserts the character equivalents back into my post, so when I wrote <wbr> and then previewed the entry, in my text it got turned into <wbr>, which I didn’t notice and posted and thus the wbr tag wasn’t visible in my post.
Khoi, your web site is so beautiful (and I don’t think I’ve ever used that word to describe a site before) it makes me ashamed. It makes me want to shut down my site and sign up for a three-year stint as you unpaid-yet-paying-you-for-the-privilege Guy Friday just so I could learn from you.
Seriously, this is a wonderful site to navigate. This new feature is another fine addition to subtraction.
Okay, enough arse-kissing. I’m starting to feel like a Khoi fanboy.
Didn’t Warpspire.com do something like this already?