Our site for Sony PIIQ features a slew of delightful, interactive elements to support this fun, young and innovative brand of headphones. Creating these features in reusable ways that could easily be applied using only flags in the HTML (and without having to edit any JavaScript or CSS) proved to be just the sort of exercise we love. In this post, we'll walk you through the process of building these interactive pieces and we'll share the thinking behind some of our decisions along the way.

Continue reading »

IWC.com is peppered with interactive modules designed to enhance the user's knowledge and appreciation of IWC's products and practices. At the heart of these interactions is a clean, smart and semantic markup, which provides a baseline experience for lowest-common-denominator browsers and feature sets, while acting as a content foundation for the richer experience supplied to modern browsers. There are a myriad of reasons for this progressive enhancement approach, and in this edition of our series on Building IWC.com, we'll explore the building of some of these interactive elements.

Continue Reading »

It's an exciting time in the world of real type on the web. With most modern browsers now supporting the css @font-face property in some way, the emergence of font-hosting services, and interim replacement methods like cufon getting a lot of attention, the time feels right to stop relying on cumbersome image-replacement techniques to display dynamic text with real, rich typography. Unfortunately, it's not exactly that easy, as font license agreements, and the need for type foundries to protect their intellectual property has put a bit of hold on widespread use of @font-face - and has led to some confusion over what, exactly is allowed and supported.

While there is certainly no shortage of articles on the matter, we at Odopod needed a central place to keep the latest information on the various techniques, links to useful resources, and lists of the pros and cons and rendering implications of each method. We put together this handy reference page (a work in constant progress, which we will update as necessary) to meet these needs. As foundries and browser-makers continue to move towards a solution that will ideally result in an accepted universal standard, this discussion is constantly shifting. Hopefully this page will act as a guidepost to help navigate the current state of things.