To see what that means, let’s have a look at three online categories that utilize hyperlocal information:

Hyperlocal news

One of the first hyperlocal applications were local news websites, which filled in the gap the dying print industry left behind. Often these news site/ blog crossovers are specific to a certain neighborhood. There are quite a few of these blogs around in New York, such as the Gothamist which is now also available in many other cities, or the Brownstoner, which focuses on real estate specific news.  But lately there are more and more start-ups that offer a platform for hyperlocal information, mash-ups that gather data from different sources about a neighborhood or town. For example, Everyblock lets users create a newsfeed for a specific address or ZIP code and collects information such as news, photos, reviews and governmental information (e.g. crime rate). Outside.in and Placeblogger offer similar services while Patch puts together sites for you and adds more categories plus an editorial process to the collection.

Hyperlocal social networks

Although it seems counterintuitive to build ones social network on virtual encounters, the most successful sites in this arena, Facebook and MySpace prove the contrary. However, with the ubiquitous availability of local-based services and devices (from Google Maps mash-ups to GPS enabled phones), hyperlocal social networks are beginning to grow and become more important.

The ultimate goal for any hyperlocal network should be to get people together who share a physical location, temporarily or permanently. There are few purely web-based applications such as STACKD (a SUPERMETRIC project), which aims to connect people within and around office buildings. Most players in this game offer location-based services through mobile phone applications. The top four are FourSquare, Gowalla, BrightKite and Loopt. They all work somewhat the same: you check in at a location (e.g. a café, bar, store) and share the info with your friends (via the app, Facebook or Twitter). You can see who else is around and might get in touch. Most apps will reward check-ins with virtual gifts/ prizes which will make you climb up the ladder within your community. Some applications feel more like a game (Gowalla) where others focus on the social component (FourSquare).

Hyperlocal advertising

Online advertising has revolutionized the market and Google is the incarnation of this phenomenon. The method and reason for success lies in content sensitive information or ads in this case. Google found the matching algorithms to display the ads that are most relevant for a website or search engine visitor.

In many cases local information makes an ad even more relevant. If you think about products you use and buy on a daily basis or multiple times per week or products you consume right away (food and drinks), local-based advertising adds a lot of value. In an article for FastCompany, Michael Gluckstadt evaluates the hyperlocal advertising market at $100 Billion. There seems to be evidence that he might be right: DataSphere just raised $10.8 Million in series B funding to expand their software offerings in this area. Where (a uLocate service) just launched a new  hypelocal ad network to connect local merchants with customers (e.g. via coupons on augmented reality apps). There seems to be a lot going on right now but the market is still young and it’s not clear what will work yet. Ultimately, services must focus on the value for users. As long as ads are fun, relevant and somewhat unobtrusive there is a true potential to become the next generation AdWords.

The iPad is coming and whether you like it or not, whether you are under- or overwhelmed and whether you will get it or not: the iPad will be here soon! At $499 and the alleged savior of the print industry, it will most likely make as much of an impact as the iPhone did.

To help us to get ready for some iPad GUI design, we found this handy PSD template (via teehan+lax). It’s quite a collection (24mb) and it even has the blue cube icon that indicates a missing Flash plugin.

Using a custom font as opposed to a system font has been a huge issue for web designers for a long time. Luckily there is sIFR and cufon, 2 methods we use to realize dynamic rendering of fonts on web sites. The latest browser generation (at least Firefox 3.5 and Safari 4) support the @font-face CSS rule which forces the font to download to the clients computer. The result is quite amazing but the results vary widely between browsers.

-

Speaking of sIFR and cufon, there appears to be more fish in that pond: FontJazz and facelift both offer custom font rendering but in very different ways. While FontJazz appears to be a cufon clone (which appears to work on many, even old browsers), facelift renders images in real time. Not sure if I am tempted to try these approaches as cufon works pretty well for us.

-

csstypeset is a nice tool that allows you to format small snippets of text using system fonts. On the left you have a WYSIWYG editing area and to the right your CSS code is generated. Bookmark!

-

Today everything is about em in CSS, no px anymore. Yeah, I know, how nerdy can it get. But seriously, this online tool helps you convert to em easily and thus enables you to create better stylesheets.

Our latest development KimWendellDesign.com just went live this week. We created this slick portfolio website with blog navigation in mind. Content is clustered into three different categories which can be switched on and off in real-time without re-loading. Content boxes can be re-ordered and – on click of a button – reveal detail overlays featuring a multi-media viewer (image slide shows or video clips). The team at Kim.Wendell Design, a rendering and animation firm, uses a custom CMS tool to manage content. Enjoy and let us know what you think.

Almost 3 years ago we started a project with the Asian American Art Centre (AAAC) in Chinatown to develop a digital archive. Impacted by 9/11, the AAAC received funding from the LMDC to help preserve and document the history of Asian American art in the US over the past 60 years. More than 1,500 files from over 170 artists form the basis of the digital archive. Together with AAAC’s team and professional archivists, we developed and implemented the archiving and cataloging software. Once the back-end was in place, archivists added content such as photos, scanned images, letters, and press articles. Finally SUPERMETRIC designed and implemented the front end of artasiamerica.org to make the largest digital archive of Asian American art accessible for everyone to learn and enjoy.

Using sIFR on foamex.com (rendering VAG rounded)

A while ago we came across sIFR, a method to render any font on a website using Javascript and Flash. sIFR works pretty much this way: you download the package, copy the Javascript into to the appropriate folders within your web project, use the included .fla file to create the master font for the web (obviously you need to have the font installed on your computer) and copy the exported .swf file into your web folder. sIFR takes text from your standard HTML markup (e.g. inside a <h1> tag) and substitutes each character with a Flash character. This is done after the page is loaded (the JS is placed before </body>). If Flash is not available on the target device sIFR nicely degrades to HTML. It’s a solid method but somewhat tricky to install and has a couple of other disadvantages. We always found that the rendering was not as good as using images but we never upgraded to sIFR 3 which seems to be better in this regard. In terms of cross-browser compatibility sIFR did a good job but character spacing is a little bit off between IE and FF/ Safari which makes it difficult if you want to control line breaks.

Using cufon on a transparent div

Recently I stumbled upon a new method called cufón and I decided to use it for a new project. The installation of the demo was really easy and results looked totally the same on all browsers. The method sounds more complex in terms of what technically happens but neither the developer nor the end user notices any of this. Cufón consists of two modules: a font creator converts a font into VML paths (I am using this awesome site) which are then put into the web directory of your choice together with one more JS file. Just like sIFR you are using regular HTML markup and apply a special CSS class to the parts you want to be picked up by cufón for font substitution. Just like sIFR, cufón will also degrade to HTML if scripts are disabled on the target device.

The results are amazing: it’s super fast, excellent rendering and works on all browsers and platforms. The only disadvantage is that text is not selectable as every single word is put in one <canvas> tag. In IE 6 where <canvas> is not available a different method is used which allows to select text but only one word at a time. We are currently developing 2 new projects using cufón and we will post results here as soon as we go live.

Update: There is quite a bit of write-up on the net comparing different font rendering methods:

• http://www.erenemre.com/2009/03/cufon-vs-sifrwhich-one-is-better/
• http://chriskjennings.com/2009/02/introducing-cufon-sifr-alternative/
• http://stackoverflow.com/questions/692990/sifr-vs-cufon-vs-typeface-js

Our friends at Valiant asked us to get involved in an international competition to design a logo and a collection bin for e-waste recycling. We designed the basic branding of Design The 4th Bin together with Mina Hatano and developed the website based on Wordpress.

Because we didn’t really want to create too much of a blog look and feel, we chose a Wordpress template that allowed for many static elements and tweaked it quite a bit. I wrote my first little Wordpress plug-in (customization of admin panel/ dashboard), we integrated PayPal payment for the sign-up fee and added some fields to the Wordpress user database which we use to manage contributers.

We hope we we’ll be able to contribute our share in addressing this huge ecological disaster which so far has not received the attention it deserves.

—

UPDATE: Registration Deadline for the competition is June 19, 2009. For the project Valiant also teamed up with Per Scholas, The Architect’s Newspaper, Metropolis Magazine, Soho Reprographics, and Core 77, the New York City Department of Design and Construction, Studio Scott Henderson + MINT, and Ishida Crandall.

First, I signed up with Junction Network’s PSTNgateway service. You get a SIP trunk which is bascially a VoIP service to connect a local server to serve multiple phones instead of just one VoIP phone line (like Lingo or Vonage). It’s very affordable: $9.95 for unlimited lines plus 2.9ct per minute for calling within the US (international rates are also only slightly higher than Skype). I connected a single line to an old VoIP adapter I had and it worked fine.

Then I had to get the server up and running. My plan: use an Asterisk-based free IP PBX software and let it run on an old laptop (to save energy). After digging around, Trixbox appeared to be the best bet and I installed the free lite version (they have a pro version, too, which they bundle with hardware). Around the same time, I also got a bunch of phones: I ordered 4 Cisco 7940 and flashed the firmware to work with SIP (a standard VoIP protocol; more on all the tech stuff here: voip-info.org, the most comprehensive Wiki about Voice over IP). After the installation of trixbox was done I connected one of the Cisco phones and – it didn’t work. It took me quite a bit of poking around to realize, that’s too much for me, I couldn’t get it done, I needed help.

Finally, after spending about 12 – 15 hours configuring Trixbox and the phones, numerous emails going back and forth with Junction Network and the help of a friend, I figured it out. The final solution took modifying the cable modem via SSH (too nerdy to describe), upgrading the router’s firmware and finding the magic switch in Trixbox. But now it works, and it works great!

Supermetric has a new phone number now and 4 of us have own extensions: dial (212) 933-9235 to reach our office and Mia on 104, Marco on 103, Sidney got 102 and I have the 101.