Typing addresses into Google Maps on a U.S. English keyboard in Norway (maps.google.no)? No matter. Google has you covered. Click to embiggen.

Namespaces can be a great way to build up a pragmatic URL structure that’s easy to remember with continued usage. What do I mean by a namespace? I mean a portion of a URL that dictates unique content.

One of Kyle Neath’s tips from his post URL design.

This. URLs make your site more usable, navigable and extensible, particularly when your site is a RESTful application.

[Via Jeremy Keith]

But for the first 15 years or so, there was a definite ghetto perception in many design quarters; designers who could code, and who were willing to work in a medium limited to five or six system fonts, were perceived to be working outside of the real design field. (Design respect was reserved for people and agencies that did one-off Flash sites driven by a print or animation aesthetic, and with little to no concern for usability and accessibility.)

You can see this tension if you look at older lists from the Communication Arts Interactive Annual issue. They were usually aesthetically beautiful, but ugly as f*ck in terms of usability and utility. This, thankfully, is changing. And Zeldman is one of those folks leading the way.

Also see: Typography on the Web: Questions for Jeffrey Zeldman — Part 1

Cecily drives the point home with a Slideshare deck.

The experience begins on the home page with a series of graphics that show the circumstances of Boston’s homeless. It’s a broad demographic profile, which is far less effective, in my opinion, than homeless people in their own words. But I can understand the logistical and ethical concerns of featuring videos of homeless people.

In addition to data about Boston’s homeless, the site includes donation locations both in Boston and nationwide. To further spur you to donate, Land’s End (the company behind this coat drive) points out that coats go to local homeless people. If you donate a coat in Alabama, it goes to a person in Alabama.

But I think the best piece — the part that lets you really feel like you and your donation have made a difference is the “Find Your Coat” feature.

Yup! Donate a coat, get a number and find out where your coat has gone. I don’t have a code, so I can’t tell you what it looks like on the other side. But I am curious to find out. It’s this tangible tie-in — one that piques curiosity and interest if you haven’t donated, and rewards you with warm fuzzies if you have — that makes this campaign (potentially) very effective.

Site by: Firstborn.

1. Not all fonts are licensed for embedding and linking on the web.
2. Major browser developers have differing philosophies about where the responsibility for license compliance should fall.

Microsoft, for example, has not implemented @font-face, in part, because it believes in protecting type foundries from the potential intellectual property violations of embedded fonts.^* Opera, Safari / WebKit, and Mozilla leave compliance to the developer and support @font-face property.

In late May, a Typekit private beta launch brought the issue of embedded fonts and licensing back to the forefront. Typekit is a hosted font service that allows developers to select from a library of type chosen and hosted by Typekit and licensed for the web.

Ars Technica speculated about the future of web typography in its July article, The hazy future of Web typography.

Late last month (October, 2009), type foundry House Industries announced its support for WOFF, stating that the format satisfies the needs and concerns of browser makers, web designers, and type foundries, [and] offers compression to speed page load times, freedom from thorny legacy issues, and inclusiveness (font outlines can be Postscript or TrueType).

That same day, Mozilla announced that WOFF support would be available in Firefox 3.6.

Today (November 2, 2009) Ars Technica features an article with more background on last month’s announcements.

More about embedded web fonts

• Firefox 3.6 Beta 1 is now available for download
• House Party (Zeldman’s round up)
• after Firefox 3.6 – new font control features for designers
• Mozilla Supports Web Open Font Format
• Typographic diversity for the web
• Seven Web Fonts showcases
• CSS @ Ten: The Next Big Thing
• An introduction to W3C Web Fonts

* Chris Wilson and Jeremy Keith had a rather heated debate about this subject at 2009′s South by Southwest “Browser Wars” panel. Chris Wilson, who was a part of the Internet Explorer development team at the time, made essentially this argument. Microsoft does, however, have its own format for embedding fonts on the web

Vecteezy

Free vector images for download.

Brusheezy

From the folks behind Vecteezy, this site provides free brushes for Photoshop and Illustrator.

Bittbox

Groovy tutorials for Illustrator and Photoshop, plus downloadable brushes and vectors.

Urbanfonts

Some of the web’s best free fonts and collections of dingbats.

Related

• Free sh*t for the broke a** designer in you
• Open source favorites

And an updated post: New York City: Future of Web Design

I upgraded my own computer to Internet Explorer 7. And because I’m running Windows XP Home, I couldn’t use the Virtual PC disk image offered by Microsoft. But since I also need to test web sites in IE 7, downgrading wasn’t an option.

Then I found out about IEs 4 Linux. It’s a project that will install Internet Explorer versions 5, 5.5 and 6.0 on any *nix machine running Wine.

Now I don’t have a Linux machine. But I do have a Mac with a copy of Parallels installed. That means I could install Xubuntu, install Wine, and then install IEs 4 Linux.

And aww junk! It almost works like a charm. Just one hitch:* my web site looks all janky now because the fonts are different. Now ordinarily I wouldn’t care, as long as the functionality is preserved, but the whole point of this exercise is to see how most Windows users would see the site.

How to fix? Just install the msttcorefonts package on your Xubuntu install (Applications → System → Synaptic Package Manager). Restart your virtual machine, and your fonts should be loaded and good to go.

Cost of Parallels: $79.99. Cost of a full Windows XP Professional license: $279.99.

By the way, IEs 4 Linux recently released a beta version that loads the Internet Explorer 7 rendering engine on top of IE 6.

Hat tip: John Daigle who told me all about the Wine + IEs 4 Linux combo.

(*Okay, there is more than one hitch. IEs 4 Linux has trouble with some — possibly most — PNG files.)

Speakers include John Maeda of of the MIT Media Lab and Craig Swann of CRASH!MEDIA. Session topics will include ActionScript 3.0, Flex and Designing with Sound.

Flashforward is produced by Lynda.com events.

The S. F. conference will include presentations by Tantek Çelik, Dan Cederholm, Jesse James Garrett, Molly Holzschlag, and Cameron Moll (check out the full speaker list). Sessions will cover Ajax, usability, accessibility and other web development goodness.

I think my method is different enough to warrant a post. And if it isn’t, I’m sure someone will tell us .

As with Kalsey’s method, this will add rounded corners to the div of your choice. What’s more, the corners won’t be thrown off by text scaling.

Step one: the corners

Nothing complicated here. We’ll use one rounded-corner image: . Our CSS will crop and place the background image as we want, so there is no need to use more than one.

Another thing: keep track of your color. We’ll use it as the background color of our containing element.

Step two: The JavaScript function

Next, we’ll create our JavaScript function. It will do three things:

1. Find the specified element id.
2. Create new child elements for that element.
3. Assign class names to those child elements.

function corners(elementID){
     if(!document.getElementById){return;}

     var elID = document.getElementById(elementID);
     if(!elID){return;}

     var cornerClasses = ['topLeft','topRight','bottomLeft','bottomRight'];
     var containers = new Array();

     for(var k = 0; k < cornerClasses.length; k++){
         containers[k] = document.createElement('k');
         containers[k].className = cornerClasses[k];
         elID.appendChild(containers[k]);
     }
}

Line by line, here’s what we’re doing:

1. Creating the function with one argument, the element id.
2. Tells the script to die if document.getElementById isn’t supported.
3. Sets the value of elID to document.getElementById(elementID).
4. Tells the script to die if elID doesn’t exist.
5. Creates an array literal containing the class names that we’ll assign in our for loop.
6. Creates an empty array that we’ll use to store the child elements we create.
7. Loops through the cornerClasses array to:
   • Create a new i element (which is valid HTML and XHTML).
   • Assign it a class name from the array.
   • Append it to the document tree as a child element of elID.

We could have used span, em, strong, div or b. I used i for three reasons:

1. It’s shorter than span.
2. It carries no semantic meaning.
3. I’m personally less likely to use it than b.

Step three: The HTML

The image and the JavaScript function don’t mean all that much without an HTML document. So create one, and add a div with an id of blah. We’ll also use dummy text in this example.

<div id="blah">
     <p>Fee fi fo fum. Fee fi fo fum. Fee fi fo fum.</p>
</div>

Placing the script

I recommend keeping your scripts in an external JavaScript file. Your HTML code will be far cleaner.

We also want to ensure that any elements we’ll affect exist before the script executes. Put the call to this script at the bottom of your HTML file, just before your closing body tag. In most browsers, the script won’t work if you put it in the document head.

Step four: The CSS

Ah, here’s where the other part of the magic comes in. We’ve used JavaScript to manipulate the document object model, adding elements and class names. Now we’ll assign colors and positioning using style sheets. First up, set up a style for the blah div.

#blah{
   background:#06c;
   min-width:30px;
   min-height:40px;
   position: relative;
}

That last line, position:relative is most important. The short explanation: absolutely-positioned elements contained within a relatively-positioned element are positioned relative to their container rather than to the document window. That should make sense in a bit.

Now set the styles for all i that are children of blah.

#blah i{
     position:absolute;
     width:10px;
     height:10px;
     display:block;
     background-image: url(http://tiffanybbrown.com/images/uploads/2006/11/corners.gif);
}

#blah i.topRight{
     top:0;
     right:0;
     background-position: top right;
}
#blah i.topLeft{
     top:0;
     left:0;
     background-position: top left;
}
#blah i.bottomRight{
     bottom:0;
     right:0;
     background-position: bottom right;
}
#blah i.bottomLeft{
     bottom:0;
     left:0;
     background-position: bottom left;
}
#blah p{margin:15px;}

Because we’re using an inline element, we need to make it behave like a block-level element (using display: block;). Otherwise the height and width properties won’t be applied (erm, except by some versions of Internet Explorer, if I’m not mistaken, including version 6).

We also need to make it an absolutely positioned element. Otherwise, top, left, right and bottom properties will be meaningless.

I’ve also set a margin of 15 pixels around the paragraph contained by blah to avoid any overlapping of text and i elements.

Step five: Making it run

So we’ve got an image, CSS, and a JavaScript function. But a JavaScript function won’t work unless it’s invoked. There are two ways you can invoke corners(). You can use the onload attribute. Or — and this is my preferred method — use an onLoader() function.

Using the onload attribute

To use the onload attribute, just add onload to your body tag.

<body onload="corners('blah');">

The downside to this method is that you’re commingling content and behavior. It’s minimal in this case. But if you have multiple functions to invoke, using onload can easily become cumbersome.

Using an onLoader function

I prefer using an onLoader function to group things together in the JavaScript file. Then once the document loads, the onLoader function is launched. You could name the function runEm(), or goDoIt(), or what-have-you. I just use onLoader because it’s descriptive.

function onLoader(){
    corners('blah');
}
window.onload = onLoader();

The advantage to this second method is two-fold:

1. You don’t wind up with 15 functions in your body tag.
2. You’re completely separating content and behavior.

Conclusion

All of the above should work just fine in Firefox, Safari, Opera 9 and Internet Explorer 7. It should mostly work in older versions of Internet Explorer. For IE6 or lower, use conditional comments to serve browser-specific styles. Hint: you should need to adjust the value of bottom for i.bottomLeft and i.bottomRight.

Of course, none of this works if JavaScript is disabled. Users will still see a functional design, but minus the rounded corners.

View a finished example. Warning: I didn’t bother separating the CSS, JavaScript and HTML, so the source is fugly.