Toward the end of last year, the Springbox Rich Media team was tasked with building an interactive 3D view of the interior of Honda’s CrossTour model. The client wanted a Flash application that was flexible enough to handle additional vehicle models moving forward. This presented an interesting challenge because the 3D had to be interchangeable as well.

After reviewing all of their requirements, I decided to build an XML-driven Flash application that utilized the Away3D open source Flash library. The creation of the application went a lot smoother than I had expected. I had used Papervision (an alternative 3D Flash library) in the past, but I wanted to explore something different. I have to say that, after building this application, I’m a huge fan of Away3D.

The 3D engine performance is great, the documentation is very clear and the implementation of the code is very logical. The toughest part of the entire project was finding a way to plot points inside of the 3D view of the interior. After that was sorted out, it was smooth sailing. Check out the live app for yourself.

For those looking to explore other options in the 3D world of Flash, I highly recommend Away3D. 

Everyone knows that developers aren’t as creative as designers. Not even close. Which is why developers find it hard to work with designers … we’re afraid of having our ideas shot down. Instead of volunteering our ideas, we wait until the designer asks for a suggestion. (Actually, from what I‘ve learned, designers like to have our input. Who knew?) How do we break this cycle of fear? How do we get to a point where we can give designers suggestions that we feel are useful? If designers don’t know what developers are capable of, many potential features could be left out of a project.

The hard part about giving designers suggestions or ideas is trying to give a technical suggestion without making it a design suggestion. This can be hard to do because we don’t always know what the designer is looking for. As developers, we should strive to make suggestions that enhance the way a site functions, without directly impacting the site’s aesthetics.

I recently collaborated with a designer on a microsite, where I recognized an opportunity to streamline the user experience. I wasn’t trying to change the user flow or the way the site looked, I was trying to make the user experience faster. While working with Springbox Art Director Phil Coffman on the AMD Collateral Generator project, I offered suggestions on different technologies that would streamline performance. My idea was to make the site AJAX-based. This would keep the whole page from constantly refreshing, making the user experience a little faster. Much faster, actually. Without taking a chance and sharing my idea, I doubt Phil would have known that we could successfully use that technology.

So, as developers, we have to make sure we don’t cross the line into a designer’s territory. We want to give technical suggestions that aren’t design suggestions but rather complement the overall experience.

This post is first in a two-part series. Look for the second stanza, the Designer's perspective, next week. 

Watir, pronounced water, automates web browsers. It is an open-source library that simulates link clicks, presses buttons, fills out forms and more. If it takes place in a web browser, you can probably make it happen with Watir.

Although it’s a family of Ruby libraries, Watir is a little different to set up and use — but it still supports all web applications, regardless of what you use for development. The library can connect and query databases, read spreadsheets and export XML files. It’s hard to imagine what this looks like when it runs. After you use it once, you realize how nice it actually is.

You can use Watir to perform repetitive testing tasks normally handled by a human user. For example, it can repeatedly click around a page and generate a spreadsheet of results. It can also input data from an Excel spreadsheet into a form and submit it. While it was initially created as a testing tool, you can Watir to accomplish most tasks handled in a browser.

Watir will work on any system, and it works with most of the popular browsers out there, including Internet Explorer on Windows, Firefox on Windows, Firefox on Mac, Firefox on Linux, Safari on Mac, Chrome on Windows and even Flash testing in Firefox. That’s right, Flash testing.

So why Watir?
•    It’s free
•    It’s open-source
•    It supports any type of website or web application
•    It’s easy and fun to use
•    It’s very lightweight
•    It has multi-browser and multi-platform support
•    It allows you to test Flash applications

Why not install Watir now? If you already had, it could click the link for you!

Need a Mobile version of your website? All signs point to yes. 

Apple released the iPhone, named Invention of the Year by Time magazine in 2007, and this October Motorola released its DROID phone, which Time named No. 1 of its Top 10 Gadgets of 2009. BlackBerry can be Bold or Curve, and Palm has its Pre. Chances are you have one of these phones and are just an index finger away from browsing the web.

According to Frost & Sullivan, the Growth Partnership Company, “Of the more than 1.2 billion mobile phones expected to ship globally in all of 2009, nearly 190 million will be smartphones.” They estimate this number to increase to 250 million in 2010.

Thanks to the smartphone, and other handheld devices such as Kindle and Sony’s PSP, the web has evolved to become mobile. Per Mary Meeker, Technology Analyst at Morgan Stanley, “People are underestimating how big the mobile Web will be in the coming years.” If you already have a mobile website or are considering creating one, you are way ahead of the curve. Here are a few resources available for developing a mobile version of your website sans coding skills.

MoFuse – A mobile-software start-up working with companies to create and maintain a basic site on all platforms, which is key due to lack of platform standardization.

Zinadoo – Received the Mobile Internet Innovation Award for 2008. It offers a free mobile site creation tool, free hosting and a free .mobi domain name. For these free services, Zinadoo mobile websites will display ads that can be disabled for a small cost.

Contec Innovations – A web content aggregator delivering current news, sports, finance and entertainment via its patent-pending BUZmob Mobile Media Network.

While the resources above will certainly get your mobile presence up and running, it’s important to develop a mobile content strategy beforehand. Springbox has found that condensed, simplified versions of primary sites — designed for navigating content on a smaller screen — are your best option. Next time you are on your smartphone, check out Facebook, Target, YouTube and The Weather Channel to see a few companies who are doing mobile right.

 There goes the web evolving again. This time be ready.

Creating web experiences is a perpetual process. Having a team of skilled tacticians and established processes is paramount to success. This article examines how one framework, the 960 Grid System, streamlines time to launch from two different viewpoints: The designer’s eye and the developer’s expertise.   

The Designer’s Side

Web designers will tell you that regardless of how beautiful your site design may look as a jpg, the translation process from comp to browser will make or break your design’s success. For years, designers have relied on grid systems to create harmony and balance in their designs, and while they are invaluable and fairly easy to work with once set up, recreating that same structure in a browser is a challenge, especially when you factor in page rendering inconsistencies among browsers. That’s why a CSS framework like 960 Grid System is a godsend.

960 Grid System provides designers with a variety of templates that are pre-sized and contain guides set up to either a 12-column or 16-column grid layout. These templates not only help speed up the preliminary steps of design but also ease the hand-off to the developer, as the framework provides consistencies between the comps and the code. 

Not every web designer is fluent in CSS, HTML, PHP or other programming languages, so we often rely on developers or frameworks to see us through the coding phase of a project. However with the 960 Grid System, the framework is so carefully constructed and documented that it empowers a designer to tackle the front-end development of a project, only requiring minimal understanding of mark-up languages. It also gives designers peace of mind in knowing that the things we slave over, i.e. spacing and making sure everything lines up properly (imperative for a successful grid layout), are taken care of automatically via the framework.

The Developer’s Side

At some point, web developers end up reusing the same code over and over, repurposing it for different situations and applications. When it comes to front-end code, the most reused code is a reset CSS of some sort. Once a reset is created, most developers will rewrite the same CSS, modifying it to fit their current needs.

Enter the 960 Grid System. A CSS framework made to streamline front-end production, the 960 Grid System enables developers to build websites designed on a grid efficiently and effectively. Plus it requires the developer to use an object-oriented CSS, thereby meeting better web standards and fostering cross-browser compatibility.

Springbox’s most recent use of the 960 Grid System was on a comprehensive redesign of the Unicast website. The site design called for a width of 960 pixels, so it was an ideal candidate for using the grid system. Since everything was consistent from the beginning, days of time were shaved off of both development and testing.

In the end, the 960 Grid System is a win-win: you get fewer CSS errors and less time is needed for coding and testing. What more do you need to build a nice site quickly?

Art Director Phil Coffman and Developer Josh Kemmerling co-authored this article.