Media Blog

We’ve been big fans of OpenStreetMap, the wiki-style world map that anyone can edit, for some time — it’s open source, more accurate than Google Maps in some rural or remote areas and it can be customized to your heart’s content.

Now there’s Tile Drawer, a project designed to allow anyone to quickly and easily set up their own OpenStreetMap server in the cloud with one-step configuration and zero administration.

The setup uses a small Amazon EC2 instance (the Tile Drawer site says the smallest instance, 1 CPU, 512MB RAM is sufficient for rendering a small state, region, or major metropolitan area). Once you have your EC2 instance set up you simply select the region you’re going to map, choose a style for your map and then use a bit of JSON to get your maps into EC2.

Once the EC2 instance is up and running you’ll have your very own OpenStreetMap-based map server complete with static tiles and the more familiar interactive “slippery” map.

If you’ve been contemplating making the leap to DIY mapping that we’ve been advocating for some time, Tile Drawer looks like a simple, inexpensive way to get up and running. Check out the site for more details and instructions on setting up your map server.

And just in case you were wondering, OpenStreetMap’s tiles are gorgeous:

See Also:

• OpenStreetMaps Project Takes Maps in a Different Direction
• Multi-map with Mapstraction
• Historical Map Mashups Turn Cities Into Glass Onions of Time
• Where 2.0: Video Tracks a Year of Edits on OpenStreetMap

We’ve been big fans of OpenStreetMap, the wiki-style world map that anyone can edit, for some time — it’s open source, more accurate than Google Maps in some rural or remote areas and it can be customized to your heart’s content.

Now there’s Tile Drawer, a project designed to allow anyone to quickly and easily set up their own OpenStreetMap server in the cloud with one-step configuration and zero administration.

The setup uses a small Amazon EC2 instance (the Tile Drawer site says the smallest instance, 1 CPU, 512MB RAM is sufficient for rendering a small state, region, or major metropolitan area). Once you have your EC2 instance set up you simply select the region you’re going to map, choose a style for your map and then use a bit of JSON to get your maps into EC2.

Once the EC2 instance is up and running you’ll have your very own OpenStreetMap-based map server complete with static tiles and the more familiar interactive “slippery” map.

If you’ve been contemplating making the leap to DIY mapping that we’ve been advocating for some time, Tile Drawer looks like a simple, inexpensive way to get up and running. Check out the site for more details and instructions on setting up your map server.

And just in case you were wondering, OpenStreetMap’s tiles are gorgeous:

See Also:

• OpenStreetMaps Project Takes Maps in a Different Direction
• Multi-map with Mapstraction
• Historical Map Mashups Turn Cities Into Glass Onions of Time
• Where 2.0: Video Tracks a Year of Edits on OpenStreetMap

The design gurus over at Think Vitamin have a great list of the Top Ten of User Experience Myths. Two in particular leaped out at us: the myth that more user preferences is always a good thing, and the myth that design solutions have to be original.

When it comes to preferences, Think Vitamin’s Keith Lang nails it: “every preference which is not really needed is a design choice that I’m offloading to all the users of my product or service.”

If there was one thing we could eradicate from the software world it would be this myth that more preferences equals power user happiness. In fact it’s offering the right preferences that makes all your users happy, regardless their skill level.

The second myth we’d like to see more designers breaking is the myth that everything has to be original. Hopefully this one is a bit more obvious, but if you haven’t figured it out by now, there is a reason that power buttons have similar icons, CMD+C/Ctrl+C always copies text and download buttons usually have an arrow pointing down.

There’s no need to re-invent the wheel to solve every interface problem. Don’t be afraid to borrow or even outright steal ideas that are so common they’ve become part of the universal language of design.

Be sure to read Lang’s whole post as there are quite a few other myths worth remembering.

Photo: Fensterbme/Flickr

See Also:

• 10 Reasons to Politely Decline a Web Design Gig
• Use @font-face Today With Free, Legal Fonts
• New JavaScript Library Brings Vector Graphics to the Masses

The design gurus over at Think Vitamin have a great list of the Top Ten of User Experience Myths. Two in particular leaped out at us: the myth that more user preferences is always a good thing, and the myth that design solutions have to be original.

When it comes to preferences, Think Vitamin’s Keith Lang nails it: “every preference which is not really needed is a design choice that I’m offloading to all the users of my product or service.”

If there was one thing we could eradicate from the software world it would be this myth that more preferences equals power user happiness. In fact it’s offering the right preferences that makes all your users happy, regardless their skill level.

The second myth we’d like to see more designers breaking is the myth that everything has to be original. Hopefully this one is a bit more obvious, but if you haven’t figured it out by now, there is a reason that power buttons have similar icons, CMD+C/Ctrl+C always copies text and download buttons usually have an arrow pointing down.

There’s no need to re-invent the wheel to solve every interface problem. Don’t be afraid to borrow or even outright steal ideas that are so common they’ve become part of the universal language of design.

Be sure to read Lang’s whole post as there are quite a few other myths worth remembering.

Photo: Fensterbme/Flickr

See Also:

• 10 Reasons to Politely Decline a Web Design Gig
• Use @font-face Today With Free, Legal Fonts
• New JavaScript Library Brings Vector Graphics to the Masses

Firefox enjoys one the of the fastest upgrade turnarounds in the software world. Typically, Mozilla can boast that about 90 percent of its users will upgrade within a year of major new release. But what about that 10 percent that holds on to its older, potentially insecure browsers?

The Mozilla Blog of Metrics exists largely to answer questions like that and, in the case of the migration from Firefox 2 to 3, it turns out that shame and embarrassment were at the top of the list of reasons for not upgrading.

Firefox 3 introduced the new smart address bar, aka the “Awesome bar”, which significantly changed to the way history and bookmark searches worked in the browser’s URL field. But it turns out that a number of you are heading to websites you don’t want showing up in later searches.

It can be awkward. Imagine you’re interning at Pitchfork and someone sits down at your workstation only to discover you’ve been visiting an ABBA cover band’s MySpace page. Or imagine if Wired.com’s tech team discovered that Webmonkey staffers had hacked all their admin sites to customize their default installations?

Then there’s the porn thing.

The initial version of the awesome bar lacked a good way to selectively control what shows up in your URL bar when you children sit down to do a bit of web browsing. And, clearly, a sizable slice of the Firefox user base was adversely affected by that oversight.

But what’s really interesting is that even though that issue has since been addressed — the URL bar in Firefox 3.5 allows you to choose between searching just history, just bookmarks, both or nothing at all — people still don’t want to upgrade.

Of course, concern about exposing your dirty web browsing secrets isn’t the only reason people won’t upgrade. Head over to the Mozilla Metrics Blog for some other reasons, ranging from the pretty good (web designers who need to test sites in older versions of Firefox) to the deeply confused (”If you say this is free… I have always heard there is really nothing free in this world”).

See Also:

• Mozilla Pushes the Web Forward With Firefox 3.5
• How Firefox Is Pushing Open Video Onto the Web
• Why You Should Download Firefox 3 Right Now

Firefox enjoys one the of the fastest upgrade turnarounds in the software world. Typically, Mozilla can boast that about 90 percent of its users will upgrade within a year of major new release. But what about that 10 percent that holds on to its older, potentially insecure browsers?

The Mozilla Blog of Metrics exists largely to answer questions like that and, in the case of the migration from Firefox 2 to 3, it turns out that shame and embarrassment were at the top of the list of reasons for not upgrading.

Firefox 3 introduced the new smart address bar, aka the “Awesome bar”, which significantly changed to the way history and bookmark searches worked in the browser’s URL field. But it turns out that a number of you are heading to websites you don’t want showing up in later searches.

It can be awkward. Imagine you’re interning at Pitchfork and someone sits down at your workstation only to discover you’ve been visiting an ABBA cover band’s MySpace page. Or imagine if Wired.com’s tech team discovered that Webmonkey staffers had hacked all their admin sites to customize their default installations?

Then there’s the porn thing.

The initial version of the awesome bar lacked a good way to selectively control what shows up in your URL bar when you children sit down to do a bit of web browsing. And, clearly, a sizable slice of the Firefox user base was adversely affected by that oversight.

But what’s really interesting is that even though that issue has since been addressed — the URL bar in Firefox 3.5 allows you to choose between searching just history, just bookmarks, both or nothing at all — people still don’t want to upgrade.

Of course, concern about exposing your dirty web browsing secrets isn’t the only reason people won’t upgrade. Head over to the Mozilla Metrics Blog for some other reasons, ranging from the pretty good (web designers who need to test sites in older versions of Firefox) to the deeply confused (”If you say this is free… I have always heard there is really nothing free in this world”).

See Also:

• Mozilla Pushes the Web Forward With Firefox 3.5
• How Firefox Is Pushing Open Video Onto the Web
• Why You Should Download Firefox 3 Right Now

The use of Scalable Vector Graphics, better known as SVG, has long been a great way to create dynamic graphics on the web — just feed your ever-changing values into an SVG XML file and you’ve got an always up-to-date image. It’s a great tool for displaying dynamic charts, graphics and other data visualizations on the web.

But of course, there are some issue with SVG, namely (what else?) inconsistent support across browsers. Eventually, SVG will likely enjoy native support in all the major browsers. In the mean time, there’s a possible solution on the horizon — the SVG Web JavaScript Library.

SVG Web is a JavaScript library which provides SVG support for most browsers, including Internet Explorer, Firefox, and Safari. Combining the library with the native SVG support in many browsers brings you to a solution that reaches about 95 percent of the web.

That’s pretty good by nearly anyone’s standards, and the demos on the project’s website show off some impressive tools — drag and drop photo editing, a Tetris knock off and more.

The only catch is that the SVG Web project is still in the early alpha stage and has quite a few bugs (several of the examples don’t work with Firefox’s native SVG support, though everything we tried did work with the Flash fallback option).

Still, despite the early alpha status, quite a few big names, including Wikipedia, are either currently using or working on projects that plan to use the SVG Web library. If you’ve been itching to get your SVG graphics on the web, but you’ve been hesitant due to browser compatibility issues, give SVG Web a try. And remember, if you find any bugs, be sure to add them to tracker.

To see what all SVG Web has to offer, check out the short demo video below.

[Hat tip to Simon Willison]

See Also:

• Rafael Library Paints a Pretty UI Future
• JavaScript Offers Type Designers Better Choices Than Flash
• Web Typography Tutorial - SVG

The use of Scalable Vector Graphics, better known as SVG, has long been a great way to create dynamic graphics on the web — just feed your ever-changing values into an SVG XML file and you’ve got an always up-to-date image. It’s a great tool for displaying dynamic charts, graphics and other data visualizations on the web.

But of course, there are some issue with SVG, namely (what else?) inconsistent support across browsers. Eventually, SVG will likely enjoy native support in all the major browsers. In the mean time, there’s a possible solution on the horizon — the SVG Web JavaScript Library.

SVG Web is a JavaScript library which provides SVG support for most browsers, including Internet Explorer, Firefox, and Safari. Combining the library with the native SVG support in many browsers brings you to a solution that reaches about 95 percent of the web.

That’s pretty good by nearly anyone’s standards, and the demos on the project’s website show off some impressive tools — drag and drop photo editing, a Tetris knock off and more.

The only catch is that the SVG Web project is still in the early alpha stage and has quite a few bugs (several of the examples don’t work with Firefox’s native SVG support, though everything we tried did work with the Flash fallback option).

Still, despite the early alpha status, quite a few big names, including Wikipedia, are either currently using or working on projects that plan to use the SVG Web library. If you’ve been itching to get your SVG graphics on the web, but you’ve been hesitant due to browser compatibility issues, give SVG Web a try. And remember, if you find any bugs, be sure to add them to tracker.

To see what all SVG Web has to offer, check out the short demo video below.

[Hat tip to Simon Willison]

See Also:

• Rafael Library Paints a Pretty UI Future
• JavaScript Offers Type Designers Better Choices Than Flash
• Web Typography Tutorial - SVG

With the latest versions of Safari, Firefox, Opera and Google Chrome all supporting CSS’s new @font-face rule, you might think web designers everywhere would be rushing to add fancy fonts to their websites. But of course, most aren’t. So why, if designers have been bemoaning the state of typography in the browser since the dawn of the web, hasn’t the recent growth of @font-face support turned things around?

There’s actually another, much more complicated problem with @font-face that stops it from being the panacea for your font woes: licensing.

Unfortunately, the font foundries which create, sell and license fonts have thus far been reluctant to embrace licensing terms that would allow designers to serve fonts via @font-face legally. The foundries fear pirates would be able to steal fonts much more easily if the files were published in the wild on the web.

There are some possible solutions to this, such as third-party middlemen like Typekit. However, involving yet another layer of complexity (and potential failure) to your web stack isn’t anyone’s idea of fun. So what’s a designer to do?

It turns out there are actually some fonts that you use with @font-face today. Font Squirrel, one of our favorite places to find free fonts has an entire section devoted to @font-face compatible fonts.

Two things to keep in mind with Font Squirrel’s list: First, as the site says, “Font Squirrel makes no guarantee that our interpretation of each license is correct,” which means make sure you read it yourself and possibly contact the creator to clarify. And second, some of these fonts are downright ugly.

But not all of them. Designer Francesco Mugnai recently posted a nice roundup of some of the best @font-face candidates from the Font Squirrel collection, including two of our favorites, Museo Sans and Anivers.

Of course, even with legal fonts and decent browser support, @font-face isn’t for every project. However, if you’re sick of Flash solutions like sIFR tired of being limited to only the six fonts found on nearly every PC, Font Squirrel’s list of @font-face compatible free fonts could be the solution you’ve been searching for.

Photo: healthserviceglasses/Flickr

See Also:

• Typekit Hopes to Become the YouTube of Fonts
• The Future of Web Fonts Looking Brighter
• JavaScript Library Fontifies Your Headlines

With the latest versions of Safari, Firefox, Opera and Google Chrome all supporting CSS’s new @font-face rule, you might think web designers everywhere would be rushing to add fancy fonts to their websites. But of course, most aren’t. So why, if designers have been bemoaning the state of typography in the browser since the dawn of the web, hasn’t the recent growth of @font-face support turned things around?

There’s actually another, much more complicated problem with @font-face that stops it from being the panacea for your font woes: licensing.

Unfortunately, the font foundries which create, sell and license fonts have thus far been reluctant to embrace licensing terms that would allow designers to serve fonts via @font-face legally. The foundries fear pirates would be able to steal fonts much more easily if the files were published in the wild on the web.

There are some possible solutions to this, such as third-party middlemen like Typekit. However, involving yet another layer of complexity (and potential failure) to your web stack isn’t anyone’s idea of fun. So what’s a designer to do?

It turns out there are actually some fonts that you use with @font-face today. Font Squirrel, one of our favorite places to find free fonts has an entire section devoted to @font-face compatible fonts.

Two things to keep in mind with Font Squirrel’s list: First, as the site says, “Font Squirrel makes no guarantee that our interpretation of each license is correct,” which means make sure you read it yourself and possibly contact the creator to clarify. And second, some of these fonts are downright ugly.

But not all of them. Designer Francesco Mugnai recently posted a nice roundup of some of the best @font-face candidates from the Font Squirrel collection, including two of our favorites, Museo Sans and Anivers.

Of course, even with legal fonts and decent browser support, @font-face isn’t for every project. However, if you’re sick of Flash solutions like sIFR tired of being limited to only the six fonts found on nearly every PC, Font Squirrel’s list of @font-face compatible free fonts could be the solution you’ve been searching for.

Photo: healthserviceglasses/Flickr

See Also:

• Typekit Hopes to Become the YouTube of Fonts
• The Future of Web Fonts Looking Brighter
• JavaScript Library Fontifies Your Headlines