According to the Department of Transportation, 5,500 people in the United States were killed and another half a million were injured in accidents related to distracted driving in 2009.

“It only takes a moment of distraction to cause a tragedy,” said Jim Guest, president of Consumers Union, the nonprofit publisher of Consumer Reports. “No text or call is worth a life.”

Now a Portsmouth, N.H.-based company has launched a mobile phone application that will let others know when someone is unavailable to text.

Download at www.bzzyapp.com

“Bzzy” is being offered as a free download in April during National Distracted Driving Awareness Month. Bzzy automatically responds to texts using either a pre-set or customized message.

Activate the application and incoming texters will be sent a response: “I am driving,” “I am viewing (a movie)” or a custom message.  All texts received are still available on the phone once the person is ready to respond.

“It’s about staying focused, on whatever you are doing, but especially on driving when your life and others on the road are at risk,” said Erik Dodier, CEO of PixelMEDIA. “Bzzy will remove the urgency we feel to reply back right away, and instead let those who are trying to reach us know we are unavailable.”

The goal is to allow people to focus on what they’re doing, whether it’s driving or even watching a movie or playing with their kids, without being distracted by texts.

“There’s something about a text that seems so instantaneous,” Dodier said. “But we all know there are times we should just let others know we’re temporarily unavailable.”

Dodier said 10 percent of any future proceeds from the product will be donated to efforts aimed at increasing the awareness of the dangers of distracted driving.

Bzzy is currently available on Android phones only, however, PixelMEDIA  is looking at offering Bzzy for iPhones in the future.

“Take a step toward driving safer, download Bzzy for free through April 30^th at www.Bzzyapp.com,” Dodier said. “It will allow a driver’s focus to stay where it should be, on the road.”

Since 1996 the MITX Awards has grown to the largest and most prestigious awards competition in the country for technology innovations and celebrates the best creative and technological accomplishments emerging from New England.

The new Samuel Adams website features an extensive guide to Sam Adams beers and recommended food pairings; behind-the-scenes information on the people and the process behind Sam Adams; and a wide range of opportunities for beer enthusiasts to “share the passion.” The architecture, labeling, and design were inspired by the content. “It’s a treat to have great content to work with,” says Thomas Obrey, Co-founder of PixelMEDIA, Inc. “It kept the team’s thinking fresh from start to finish—every page was like its own mini-project.”

The new website delivers an enormous amount of valuable information to a passionate, engaged audience through the use of engaging information, education, videos, and social media connections. The content does not trail off after the top level pages, it becomes richer and more rewarding. And the information it provides can truly enhance the real-world enjoyment of food and beer.

For PixelMEDIA’s web development team, the diversity of page designs required a lot of deft HTML coding and some brand-new approaches. To honor its social responsibility commitment, Boston Beer insisted on maintaining its 2-step age verification. In addition, the PixelMEDIA team customized a set of content management tools (CMTs) for News, Events, and other time-sensitive content. They even implemented an e-store where Sam Adams fans could buy clothing, accessories, and Samuel Adams Boston Lager® glassware.

“It’s a tremendous accomplishment to be recognized along with our clients as a finalist in the MITX Awards,” said Erik Dodier, President and Co-founder of PixelMEDIA, Inc. “To be selected as the best of the best among such a vast array of talent in the region is quite an honor, and we’re proud to be a part of it again this year.”

PixelMEDIA will be recognized with the other finalists in the category of Consumer Goods at a gala awards ceremony traditionally attended by over 1,000 of the region’s top interactive marketing and technology professionals. Winners will be announced at the ceremony in the Boston Marriott Copley Place on Thursday, November 18th at 6pm.

About MITX
The Massachusetts Innovation & Technology Exchange (MITX) is the region’s premier professional organization for the Internet business and marketing industry. Reaching more than 7,500 professionals in New England, MITX is the community for thought leadership, building business relationships and professional training and development. Members of the MITX community take advantage of events, sponsorships, speaking opportunities and networking to make business connections and exchange ideas. With more than 60 events annually, MITX provides its members with the opportunity to promote their companies to targeted audiences and provides a valuable forum for networking with other likeminded peers to source potential business leads, partnerships, ideas, and funding. MITX is headquartered in Cambridge, MA. Visit us at www.mitx.org.

Scalability takes many forms – for example, the ability to easily add new hardware or bandwidth to handle increases in usage – but as it pertains e-commerce, the area that needs the most scalability is the catalog: the product data, the categorization, and the vast amounts of meta-data that typically accompany them. Both the database and the code need to be designed in such a way that a site can launch with a blue one-size-fits-all baseball cap; the following day add a t-shirt with three sizes and six colors; and three weeks later add a mountaineering package that includes a shell of any available size and color, ski pants of any size and color, and a head lamp.

If the site had been designed to handle only the baseball cap, the seller wouldn’t have been able to start selling those t-shirts without major system rework – and every new product type and customization option would require even more.  By spending the extra time and effort to design a robust database and site architecture, the seller can effortlessly add new product types and avoid the delay and expense of modifying an existing system.

Product variations are only the tip of the iceberg. If the site will eventually support international ordering, there are postal codes, taxes, and translations/localization to consider. There may be multiple shipping handlers (e.g. UPS, FedEx, USPS) and payment processors (e.g. PayPal, Authorize.Net). The areas of scalability within an e-commerce site area are endless, and the more features a seller would like to scale, the more time they’ll invest on requirements gathering, planning, design, and development.  If the seller really is only going to sell t-shirts and use PayPal as their payment processor, then designing a more robust system would be overkill. However, any seller who is already selling a wide variety of products, is planning to expand their product line, or is struggling with the limits of their existing system should seriously consider the extra time and expenditure required to create a scalable system.

It’s simple.  People are still using it. Even though the market share is declining, at last look IE6 still makes up about 20% of the market.  Buy why?  To compare a modern browser to IE6 would be like comparing a Corvette to a horse and buggy.  It lacks the bells and whistles of the newer browsers, it’s less secure, it doesn’t support png transparancy and it doesn’t support today’s web standards – which causes developers everywhere hours of frustration.

Ultimately, having to support IE6 is hindering the advancement of websites both in design and functionality.  With the release of HTML5 on the horizon, the web is about to take on a whole new direction and will leave those that don’t support it in the dust.  IE6 users will start to notice sites that look broken or simply do not work.  They will get messages asking them to upgrade (if they haven’t already.)  Even bigger sites like Facebook, YouTube and Digg are starting to limit their support of the browser.

So, my question to you is do you use IE6?  If so, why?  Is it a choice? Are you restricted by your IT department?  Did you just not know there was a difference between browsers, or that there are better ones out there?  Have you noticed sites are prompting you to upgrade, look broken or just don’t work?  Please, leave your answers in the comments.  I’d love to hear from you!

If you are looking for an upgrade try one of these:

• Firefox 3.5
• Google Chrome
• Internet Explorer 8

The sticks stayed in the office through the fall, as the PixelMEDIA team worked to bring them online. Bauer Hockey hired PixelMEDIA to tackle the MY BAUER project, a rich Flash application where players can purchase and personalize Bauer’s top-of-the-line sticks. From choosing a pattern, grip, and color to printing a player’s name right on the stick, MY BAUER walks users through their choices and gives a three-dimensional preview of their purchase.

PixelMEDIA was tasked with updating the site’s look and overhauling the platform that supported it. For Bauer, administering the site would be easier than ever, from managing attributes to handing out discount codes. And the modular, flexible Flash client delivered faster performance and paved the way to new sticks.

For PixelMEDIA, working on MY BAUER meant creating a rich retail experience. The stick models had to look good and load quickly. Customers demanded a full-featured shopping experience, where they could tweak their stick for hours, store it in an online “stick rack” and then share it with a teammate, or say, a parent with a credit card. And the bilingual site made players feel at home whether they logged on from Madison, Wisconsin or Saint-Jérôme, Quebec.

Since MY BAUER launched, PixelMEDIA has had the pleasure of working closely with the Bauer team to maintain and enhance the site, and to launch new product lines – like the Vapor X:60 goalie stick, available as of December.

The upgrades in the technology of MY BAUER allows us to easily update the wide variety of choices we are able to provide the consumer as well as enhance the overall user experience. —Evan Baker, Product Line Manager, Sticks, Bauer Hockey.

The Impact

• Deliver a new look and rebrand for Bauer’s premium retail experience
• Design a bi-lingual site with fully configurable product options
• Support transactions in multiple currencies
• Move MY BAUER to a new e-commerce platform, for simpler maintenance and greater reliability
• Replace the existing stick configurator with a modular, easy-to-update Flash client

Recently we had a site that was getting ready to go live, hosted on a 64-bit version of Windows Server 2008 (IIS7). I won’t bore you with all the details of all the issues we worked through but we had one nasty issue that, as soon as it occurred it brought the server down; 100% CPU usage by the w3wp.exe process and memory usage steadily climbing. Our error logger was catching primarily one xml argument exception (but with a few variations).

A partial stack trace looked like this:


System.Web.HttpUnhandledException: Exception of type 'System.Web.HttpUnhandledException' was thrown. ---> System.ArgumentException: The node to be removed is not a child of this node.
at System.Xml.XmlNode.RemoveChild(XmlNode oldChild)
at System.Xml.XmlNode.RemoveAll()
at System.Xml.XmlElement.RemoveAll()


This error was at the heart of our navigation framework which makes heavy use of xml and xsl. The process we go through for building a pages navigation looks something like this:

• Check to see if the xml navigation file has been cached, if so get it from cache, otherwise load it and cache it.
• When navigation is ready to be rendered, it is first manipulated to add in an xml node section that stores the current pages selected states.
• The modified (in memory) xml is then passed to the desired xsl which handles converting the xml to xhtml and returning the transformed string.

Originally the process of modifying the xml (in memory) looked like this:


protected virtual void AddNavigationSelectedStates()
{
XmlNode navigationScheme = this._xml.SelectSingleNode("navigationScheme");
XmlNode selected = this._xml.CreateNode(XmlNodeType.Element, "selected", "");
if (null != navigationScheme.SelectSingleNode("selected"))
{
selected = navigationScheme.SelectSingleNode("selected");
selected.RemoveAll();
}

for (int i = 0; i < base.Selected.Count; i++)
{
XmlElement choice = this._xml.CreateElement(“choice”);
choice.SetAttribute(“level”, (i + 1).ToString());
choice.InnerText = base.Selected[i].ToString();

selected.AppendChild(choice);
}
navigationScheme.InsertBefore(selected, this._xml.SelectSingleNode(“//navigationScheme/mainNav”));
}

During stress testing we identified that the problem code was the if (null != navigationScheme.SelectSingleNode("selected")) block. As I was the original developer I struggled to remember why such code was there, given that this node should never exist as the page builds. So, after reproducing the errors locally with the above code I removed the if statement and retested. Not a single error. Quickly browsed the site and didn’t notice any issues (I should have looked harder, there were plenty).

We posted an updated build, stress tested the site, still no errors. Then another developer noticed that the site navigation wasn’t working properly. So, back into the source I went. Digging deep I eventually found that each time the XmlNode navigationScheme = this._xml.SelectSingleNode("navigationScheme"); was run, the section of the document grew with all previous “choices”.

Through more debugging and some pair programming with a fellow developer (and a lot of discussion about what was really happening) we discovered that, while we were never stuffing the modified xml back into cache, it was indeed being updated. I’m still trying to determine why this is but I think I have read somewhere that XmlDocument objects are in memory structures that are passed by reference (and not by value as I originally thought).

Armed with this information we attempted to clone the document and modify that and while that ultimately worked, it didn’t fit into the system we had for navigation render behavior. With some changes to how we passed along the modified xml we ended up with this modified method (name changed to better reflect it’s newer intent):


public virtual XmlDocument SelectedStatesXml()
{
XmlDocument xmlDoc = (XmlDocument)this._xml.CloneNode(true);
XmlNode navigationScheme = xmlDoc.SelectSingleNode("navigationScheme");
XmlNode selected = xmlDoc.CreateNode(XmlNodeType.Element, "selected", "");

for (int i = 0; i < base.Selected.Count; i++)
{
XmlElement choice = xmlDoc.CreateElement(“choice”);
choice.SetAttribute(“level”, (i + 1).ToString());
choice.InnerText = base.Selected[i].ToString();

selected.AppendChild(choice);
}
navigationScheme.InsertBefore(selected, xmlDoc.SelectSingleNode(“//navigationScheme/mainNav”));
return xmlDoc;
}

Be sure to note in the code above, the call to (XmlDocument)this._xml.CloneNode(true); as this is important. We are doing a deep copy of the entire XmlDocument. Manipulation is done strictly to the clone and never the master xml document. So now when we call out to render navigation, it looks like this:


return base.OutputNavigation(
new XslTransformBehaviour(
((XmlNavigation)this.Navigation).SelectedStatesXml(),
XslHelper.GetTransformer(path),
((XmlNavigation)this.Navigation).NavigationArguments
)
);


I hope this helps someone someday. I don’t think this behavior is something I’m going to forget any time soon.

The client, however, found this a bit confusing—once they had expanded the hidden list, it wasn’t obvious to them how to close it. They wanted to be able to click somewhere else on the page and have the list close so they could continue browsing. No problem, I figured, a few JavaScript tweaks and we’d be all set. Simply putting a click event on the body element to close the list would be pretty straightforward.

Lets take a look at the code we used:

function initFauxSelect() {
  $('a.showSelect').click( function(e) {
      e.preventDefault();
      var $theList = $(this).parent('.fauxSelect').next('.selectList');
      hideShow($theList);
  });
}
 
function hideShow(obj) {
  $theList = obj;
  if ($theList.is(':visible') ) {
    $theList.hide();
  } else {
    $theList.show();
  }
}

It’s a simple click event on a.showSelect that calls the hideShow() function. If the list is visible, hide it, otherwise show it.

I figured it would be as simple as binding a new click event to the body tag whenever we show the list. The new event would hide the list when someone clicked elsewhere on the page. Let’s look at the updated hideShow() code:

function hideShow(obj) {
  $theList = obj;
  if ($theList.is(':visible') ) {
    $theList.hide();
    $('body').unbind('click.fauxselect');
  } else {
    $theList.show();
    $('body').bind('click.fauxselect', function(e) {
      $theList.hide();
      $('body').unbind('click.fauxselect');
    });
  }
}

Now, whenever we’re showing the list, we’re creating a new click event on the body that hides the list. It also unbinds itself once its job is done. If someone closes the list by clicking a.showSelect again, we also unbind the event just to keep things clean.

However, I ran into a problem. The event I was binding to the body was being called right away, which stopped the list from ever appearing! It seemed a bit strange, as my assumption was that you’d never want your new event to fire as the same time as the current event.

Thankfully, there’s an easy way prevent this from happening. In our original click event on the .showSelect element, we need to stop that event from bubbling up the DOM.

function initShortcutsSelect() {
  $('a.showSelect').click( function(e) {
    e.preventDefault();
    e.stopPropagation();  // ----- ADDED THIS LINE
    var $theList = $(this).parent('.fauxSelect').next('.selectList');
    hideShow($theList);
  });
}

By telling the event to stopPropagation, it never bubbles up the DOM, never reaches the body and never calls the new click event you bound there until the user actually clicks the body.

The PixelMEDIA award provides a complete set of strategy, design, and development services, valued at approximately $50,000, to the first- and second-place winners as well as to a third entry selected by PixelMEDIA. Scheduled to be launched by the end of the summer, each recipient will have new tools to assist with bringing the winning plans and products to market.

According to Dan Innis, the Dean of the Whittemore School of Business and Economics, “The Holloway competition is a great opportunity for our students to present their ideas to a panel of experienced business people. Their input helps the students improve the work they have done. We’re excited to have PixelMEDIA as a partner in the Holloway competition. PixelMEDIA’s support of the student’s web marketing needs will enable the students to communicate and market their products and ideas to investors and companies.”

This year’s first place winner was PhD candidate Christopher Suprock of Suprock Technologies. His product, the Wireless Sensor Integrated Metal Cutting Tool Holder, combines metal cutting tools and wireless sensors and enables customers to solve complex machining problems and manufacture parts more quickly and safely. The second-place prize was awarded to Whittemore School students Jason Norton, Michelle Pirro, and Cole Connolly for ComposiMold, a reusable mold-making material derived from a safe, natural polymer designed for at-home crafters, artists, and artisans.

In addition to the winning entries, PixelMEDIA chose the work of graduate student Alexander Shyrokov as the third recipient of the PixelMEDIA Award. Shyrokov’s project, the Software Skydiving Simulator, is a PC-based training tool that can be used by individuals at all experience levels, from the person about to make their first jump to the skilled jumper who wants to experiment with more intricate and expensive jumps.

The PixelMEDIA Web Marketing Services Award was established to provide a professional set of web marketing tools to future business leaders and groundbreaking not-for-profit organizations. The award offers full strategy, design and development services as well as professional consulting and channel guidance.

PixelMEDIA cofounder and CEO Erik Dodier participated in the judging, and co-founder Thomas Obrey will provide strategy and oversight of the three initiatives. “Everyone at PixelMEDIA is looking forward to working with the Holloway prize winners,” says Obrey, “It gives us a chance to support some amazing ideas and talented students, but also all the great work UNH and the Whittemore School do to build our economy and community.”

Unfortunately, the height of the page being pulled in would vary wildly. This led to a fairly disappointing experience where the page was either far too long, or content in the iframe was cut off and the user had to scroll within the iframe to see everything.

We came up with what we thought might be an interesting solution. If the page loading inside of the iframe (the child page) could calculate its height, and somehow let the parent page know, the parent page should be able to reset the height of the iframe.

With a little inspiration, we came up with a pretty neat solution that we’d like to share. Our solution requires that you have the ability to edit the code of both the parent and child pages.

The child page being loaded into the iframe will simply reset the location of the parent page, and include a hash with the height of itself.

1
2
3
4
5
6
7

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.js"></script>
<script>
var parentUrl = "http://example/iframe-outside.html";
setHash = function() {
    parent.location = parentUrl + "#" + $('body').height();
}();
</script>

We’re using jQuery here to easily get the height of the <body> tag.

On the parent page that includes the iframe, we’ll again use jQuery and write a small function that gets the height from the hash in the URL, and uses that to reset the height of the iframe.

8
9
10
11

function setHeight() {
    var newHeight = parseInt(location.hash.substring(1)) + 50;
    $('#hashFrame').attr('height', newHeight);
}

We ran into a bit of an issue: the page we were loading was taking a few seconds to load, and we didn’t want to set our height on the iframe until the content within the iframe had finished loading (and it had a chance to set the proper height to the url hash).

More jQuery to the rescue! The jQuery .load() method allowed us to call our setHeight() function after the iframe had finished loading.

12
13
14

$('#hashFrame').load( function() {
    setHeight();
});

Putting it all together gave us a great way to use our new application inside our legacy application, and make it faily seamless to the end user.

PixelMEDIA Solution
PixelMEDIA accepted the challenge and worked to create an experience as emotional and intuitive as the products themselves. Incorporating motion and rich media into the new website brings the products to life. A sense of global reach and availability is apparent through specialized content and navigation for target audiences. The new website meets the needs and desires of many—Segway, their users, and partners alike. The innovative solution delivers a compelling and immersive feeling by incorporating various features and tools:

• Audience segmentation and contextual content
• 3D animation and product renderings
• XML-driven Flash® video players
• Dealer locators
• User-created content and forums

Our new website does much more than inform; it instantly provides visitors with the opportunity to see how our product works, while infusing the emotional Segway experience.” —Eric Fleming, Marketing Communications Manager, Segway

The Impact
The launch of the redesigned Segway website has increased the tools and knowledge available to customers and potential buyers worldwide.

• Target audiences can easily find the Segway product that best fits their lifestyle and needs
• Customers and fans can view the exhilarating sensation of riding a Segway before purchasing
• Segway dealers can be easily located for trial rides and purchasing

For this initiative, PixelMEDIA provided

• User research and usability testing
• User experience strategy and design
• Flash® design and development
• Site development and application programming
• Third-party application integration with Salesforce.com