NEW NAME. SAME EXPERTISE.
We changed our name! After 14 years of creating award-winning digital products & services, it’s time for a new identity that better reflects the human insights-driven, digital customer experiences we create.
VISIT OUR NEW SITE
NEW NAME. SAME EXPERTISE.
We changed our name! After 14 years of creating award-winning digital products & services, it’s time for a new identity that better reflects the human insights-driven, digital customer experiences we create.
VISIT OUR NEW SITE

AIAIO: Our Blog

AIAIO: Our Blog

The pulse and reviews of Alexander Interactive

Archive for 2011

Happy Holidays from Ai

We love the holiday season at Ai. Every December our office is filled with Christmas lights, menorahs, gifts and delectable holiday treats. This year we even turned one of our conference rooms into a Maccabee cave.

Another year-end tradition we have is our annual holiday site. The theme this year was finding joy everywhere. You can check out the site here:

Members of the team went around the city, and everywhere they went they found “joy” in one form or another. Whether it was in a gift from a friend or written on the outside of a grande soy triple pump peppermint iced macchiato (no whip)(extra sprinkles), we found joy everywhere. And boy did it make us want to dance (or do something approximating dancing).

Uncategorized

Happy Holidays from the Ai PM Team

Last week David Ow, Director of Project Management, took the PM team out to our annual holiday dinner, a time to get out of the office and change the scenery for a few hours while reminiscing on the past year.  And while we definitely spoke about things other than project plans, budget updates and weekly status reports, it was hard not to reflect on what we’ve learned since the same time last year.

Although the PM team at Ai is comprised of people with diverse backgrounds and experience, as a team, we can all say we’ve learned to keep the following top of mind —

  • Be fact-based.
  • Espouse numbers as a means of supporting your position but remember that the numbers aren’t your position (in and of themselves). That is, critical analysis of what numbers, metrics, etc. are telling you is equally if not more important than the numbers themselves.
  • Provide options and implications to those options in order to (a.) make a decision and/or (b.) help facilitate the making of a decision.
  • Planning has to be realistic.  You can’t succeed if it can’t be accomplished.
  • Champion “reasonable” and “realistic”, but remember it’s your job to figure out creative approaches to getting to the finish line.
  • Think like it’s all on your shoulders, but remember that it’s not.
  • You are a facilitator; a guide; a remover of obstacles; a creative problem solver; a generalist who people will come to for all of the answers – even if you’re not the right person… but you are not The Boss.
  • You’re responsible for bringing the right people in at the right time and setting them up to do what they do best.
  • Be flexible / nimble.  Even the best-laid plans go awry.  Even the most proven processes will go off-the-rails for a variety of reasons.  The true test of your mettle as a PM will be how you respond, react, and adjust in a timely manner.
  • Celebrate success. Since projects are finite, they will have an end…no matter how far off that might seem at present.

Cheers to my fellow PM team members, and to our fearless team captain, David, who continues to guide us to the finish line time and time again.

Happy Holidays!

Ai

Ai Does Some (More!) Good

During the month of November everyone awaits their Thanksgiving tradition. Whether it’s Turkey mid-day or takeout at dinner time, it is a time to be with loved ones, reflect and give thanks. This month we also decided to give back.  And Ai showed up. BIG.

Although usually camera shy, I gladly posed in front of what seems like a delivery for a mid-sized NYC bodega. However it is 564 food items donated by Ai-ers during our Thanksgiving food drive benefitting Urban Pathways (UP). With me are Jennifer Leao, committed staff member of UP, and Ora Timbers, a formerly homeless New Yorker who lived at Ivan Shapiro House – one of the residences Urban Pathways supports. Ora is now in her own apartment in the UP scatter site program with a permanent part time job in UP’s development department. Food drives free up budget dollars, allow for increased critical services and help Urban Pathways have more success stories like Ora’s.

The Ai food drive was scheduled to run from November 8th to 28th.  As our 1st food drive, I was prepared to accept 150 cans as a success. It was a satisfying surprise that we more than tripled our goal.

We got off to a very slow start with no can contributions the first days. Once the race got going, the Front-End Engineers took an early lead.

The last week the competition got tough.

On November 22nd, the Management Team + IT pulled ahead. They continued with a solid pace, courtesy of a genius strategy (i.e. boxes of food delivered from Amazon). At the last moment, the Front-End engineers won back their victory as half of the team trekked to a nearby grocery store returning with over a 100 cans in one trip.

The winning Front-End Engineers are below in all of their glory. Congratulations to them on a big win and to everyone who participated for having a positive impact on the lives of homeless this winter. We tip our proverbial hat to you!

Ai Front-End Team

Ai

Hello Cyber Week (R.I.P. Cyber Monday)

Cyber Monday 2011 was the single biggest day of online shopping.  Ever.  And, some of our earlier predictions of sales continuing to hold strong beyond Monday have held true: the newly dubbed “Cyber Week” saw online retailers rake in $6 billion, according to comScore.  This is up 15% from the same period in 2010.

Consumers expect deals, sales, and discounts all week long.  In fact, they will expect them up until the very last day that they can get free shipping and guaranteed delivery before December 24th.  The implication for the savvy marketer is that one must no longer just focus on readying promotions for Black Friday and Cyber Monday, but instead on a strategy that continues to keep a site top of mind throughout the entire holiday shopping season.

Will 2012 bring Cyber Month?

Ecommerce

Cyber Monday is a Thing of the Past

While I was sitting on the couch at my family’s house last Friday casually surfing the sales online via my iPad, I realized that I was having a lot of trouble processing what offers were “Black Friday” deals and what purchases I should wait on until the real sale kicks in. Should I buy it now and get free shipping, or wait until Cyber Monday to get it at a deeper discount? Would it be discounted? Would there be any left? After asking family members about their online holiday shopping strategies it became clear: nobody knew what to expect when it came to Cyber Monday sales.

It appears that it is intentional on the part of retailers. Rather than playing the “compete on price and discount” game with other retailers wherein they slash their margins just to steal eyeballs, they are choosing to encourage and reward their most loyal (and patient) customers with more specific offers in the days that preceded and followed Cyber Monday, as Alex highlighted this Daily Reflector article yesterday.

Even more, the walls between the physical store and the “cyber” store have evaporated for most retailers. No longer is it relevant to have separate sales in-store for “Black Friday” and online for “Cyber Monday” for the same products. Empowered with smartphones, the mobile price check has become the weapon of choice for price-conscious consumers who will often carry the Cyber Monday deals into the store to garner the same discounts on the same products by the method that’s most convenient for them. This realization Alex also discusses in AOL Daily Finance reinforces the idea that consumers see one brand across all shopping channels, forcing the physical/digital price parity that is apparent this year.

As for me, I’ll just wait and see what special tablet-only private deals I can get from my favorite stores through their iPad apps.

Ecommerce

The Font-Bot Project

The Font-Bot Project is something I started for a couple of reasons. The first reason was I wanted to design a site with new HTML 5 markup and CSS3 properties. The second was, as a designer turned full time Front-End-Engineer, I needed a creative outlet.

I didn’t really just want to markup a site for a fake company or a new design portfolio. I wanted to create something that people would enjoy, and visit and maybe even use. As the web is going through somewhat of a type renaissance with the adoption of @font-face, I have become increasingly interested in learning more about typography and how I could use it in my pages. I am also very interested in robots. I have no idea when this started but probably around the time of Transformers and Robotech.

This is where the idea was born – when I was in art school I remembered doing exercises where we would have to design things using only type. So I decided to make the world my classroom and ask my students to create robots out of type.

But what good are dangerous looking robots if they are just standing there?

I figured that since I couldn’t actually make the robots fight that a voting system with a damage bar would bars would be a great addition.  I built the site on WordPress and used one of the many polling plug-ins out there to create the damage system. I also added the comments section so people could talk about the robots they liked and why, or so they could just talk trash about the one they didn’t vote for.

the font bot project

For me Font-Bot is just an ever evolving personal project. I am constantly making small tweaks to it with the feedback I have received from other designers in the community as well as the participants.

It has given me a lot more than I ever thought it would. I get great emails from people who have visited the site and enjoy it. I just received one from a college student in Tennessee who said his entire typography class is making font-bots as a project. I have also been lucky enough to receive a pretty steady stream of submissions. I even get submissions from non-designers, which is great. Just recently I received a submission from a writer. It has also been linked to in several online publications, most notably the recent mention in Smashing Magazine.

I realized the importance of personal projects through this experience. The site was not only fun to build, but also a lesson in design and development for me. It was one of my first experiments with the Modular Scale by Tim Brown. (You can also read more about the scale and Tim Brown here) It was also the first site I ever built using HTML 5 markup, and it built completely on WordPress. Although it’s not the first site I have built on WordPress, each one ends up teaching me valuable lessons.

I encourage other designers to create something for themselves and give it to the world. Doing so keeps your skills sharp and keeps you on top of your craft.

Design

Pew Study Highlights Growing Tablet Use

Last week BGR posted a great infographic visualizing the results of a Pew study on how tablet users are consuming their news. The findings of the research confirmed findings by Forrester, specifically that people who own tablets use them – a lot. According to the study 77% of tablet owners use their tablets daily.

The study also showed that tablet owners spend an average of 95 minutes per day on their tablets. With Apple reporting record iPad sales (over 11 million sold last quarter), these findings show that e-retailers can only expect the amount of visits from tablet-wielding consumers will continue to grow exponentially.

Some of the most interesting numbers coming out of the study centered around the use of native apps versus mobile browsers. Almost twice as many responders reported using mobile browsers as their main news source compared to apps (40% for browsers, 21% for apps), which shows the importance for having sites optimized for tablet users.

As shown in Ai’s T-Commerce Report, even the largest internet retailers are still struggling to capture this up-and-coming demographic. This report shows that while a few retail giants have capitalized on the t-commerce market with responsive designs, larger calls to action and gesture friendly interfaces (Nike is a prime example), most e-commerce giants are falling behind the curve when it comes to t-commerce. Even Amazon is showing slow adoption of t-commerce best practices in its new redesign; though their new fashion deal site, MyHabit, is highly optimized for t-commerce.

For more on how you can optimize your site for t-commerce check out Alex’s article “Make Way for T-Commerce” or download the T-Commerce Report.

Ecommerce

Solving the IE 7, IE 9 Magento & Prototype Validation Bug

UPDATE: Read this first please…

After receiving some comments from fellow web devs [see comments between 10/26 and 11/11], I decided to integrate some of their changes. I’ve also included some enhancements via my colleague, Tom Rosario. They include a couple of updated variables (hopefully eliminating any headaches with the original ‘fieldsFilled’ infinite increment issue) and a regEx that validates the the email field, once (or if) the core validation fails.

For the rest of you…read the original post [below] to gain a little background/perspective and see if this suits your current issue. Feel free to challenge me and post fixes/improvements (We’re all fighting the same [grunt, groan, teeth-gnash] IE-quirks-battle after all ;) I will also be in the process of trying to find inconsistencies and will update accordingly if I find them.

[original post below]

Hey there fellow Magento-ers,

Have you been spending countless hours scouring the internet for a solution to this odd problem, in Magento, where you use the built-in Prototype validation to validate your form and it does not? And by ‘does not [validate]’ I mean that in Internet Explorer 7 AND 9 (of course) it manages to ‘validate’ your empty fields, when attempting to submit an empty form, and then immediately disregards this ‘validation’ and just submits the form anyway….

Annoying, right? Can’t seem to get around it, right?

Well, have no fear! I’ve already ruined my own life, productivity and sanity in order to bring you this very specific and (I think) simple solution. I wrote (with the help of my pal Tom Rosario) a little unobtrusive Class-based function to handle it!

Just to give you some background, and to ensure I’ve been as thorough as possible, I’d like to list the things I’ve already attempted and failed at. This includes both my own solutions and those suggested by experts on the web:

  • Stopping the page from loading via the location and window object: simply doesn’t work
  • Changing the version of prototype: messes up all kinds of things in Magento, namely, checkout…so don’t do it
  • Using jQuery validation: same issue occurs
  • Using the IE 7/IE 8 compatibility meta tag: should work, but I never had success with it

Now that we’ve covered some of my futile attempts, let me tell you what I know worked; putting a good, old-fashioned ‘ onsubmit=”return false” ‘ on the form itself. This, of course, is only half the work. You then need to remove this, once the validation is satisfied and only if all the required fields are filled. In my humble opinion, this is (currently) the best solution because we’re allowing the built-in validation to still do it’s thing, with an extra layer of validation to prevent any unwanted results. The best part of this is that it doesn’t negatively affect functionality in the other browsers (FF, Chrome, Safari), who weren’t experiencing this problem in the first place. [raised eyebrow]

So speaking of that extra layer, the approach is really quite simple; we prevent the form from submitting anything if all the fields with the ‘required’ classes are empty, then remove that constraint once they’re filled/validated. Prototype validation is still able to do it’s thing, and when it’s done, and all other aspects are satisfied, we go ahead and take the ‘return false’ off the form and let it submit. Pretty simple right? I’m surprised myself that it was that easy.

Here’s the Class:

/* FormValidator Fix for IE7 & IE9 */

var ie7 = $j.browser.msie && $j.browser.version=="7.0";
var ie9 = $j.browser.msie && $j.browser.version=="9.0";
var safari =$j.browser.safari;
/*--------------------------------------------------------------------------*/

var FormValidator = function (form, opts) {
	this.form = $j(form);
	this.required = form.find('.required-entry');
	this.defaults = {
		email: form.find('.validate-email')
	};
	this.options = $j.extend({}, this.defaults, opts);
	this.setup();
};
FormValidator.prototype = {
	setup: function () {
		var self = this;

		this.form.submit(function () {
			self.onSubmit();
		});
	},
	validateEmail: function () {
		var emailCheck = this.options.email.val().match(/^([a-z0-9,!\#\$%&'\*\+\/=\?\^_`\{\|\}~-]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z0-9,!\#\$%&'\*\+\/=\?\^_`\{\|\}~-]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*@([a-z0-9-]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z0-9-]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*\.(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]){2,})$/i);
		if (emailCheck != null) { return true; }
		else { return false; }
	},
	onSubmit: function () {
		var self = this, numFilled = 0;
		this.required.each(function (idx) {
			if ($j(this).val().length > 0) {
				numFilled++;
			}
		});

		var valid = this.validateEmail() && (numFilled == this.required.length);
		if (valid) {
			this.form.removeAttr('onsubmit');
			this.form.submit();
			return true;
		} else {
		/*uncomment the alert below to test your numFilled variable
		if all is going well it shouldn't increment and match the
		number of required inputs you have*/
		//alert(numFilled);

		}
	}
};

Here’s the Call (put this below your form markup):

<script type="text/javascript">// <![CDATA[
	var contactForm = new VarienForm('myform', true);
if (ie7 || ie9 || safari) {
    $j('#myForm').submit(function(e){
        if ($j('#myForm').find('.required-entry:input[value=""]').length <= 0 ) { this.submit(); }
    });
    new FormValidator( $j('#myForm') );
} else {
    // remove the 'onsubmit' and don't run the function, as all non-IE browsers don't seem to have this bug
    $j('#myForm').removeAttr('onsubmit');
}
// ]]></script>

It’s really that simple kids. Please feel free to add a comment and let me know if this didn’t work for you, or if you’d like to add something.

Technology

What do you listen to? (podcast edition)

I tend to listen to a decent number of podcasts. Usually while doing the dishes, running, or something or other in the park.  Some are book/comic related and help me keep up to date with what’s coming out and how some books were that I didn’t have time to read.  Others are tech and help me get other opinions on the new libraries or trends.  I’ve found a number of fun libraries/how-tos from listening. Check them out below, what do you listen to?

Tech

Non Tech

* I listen to every episode, others I cherry-pick

Technology

UX Critic: Highrise and LinkedIn

I am an unabashed fan of 37 Signals’ Highrise contact management tool. For concentrated, straightforward sales and CRM, it’s an ideal web app. Between notes, contact information and useful task reminders, it’s a key part of how Canopy does business, and by and large it’s a delight to use.

Today Highrise rolled out LinkedIn profile integration, a nice idea that they say has been regularly requested. But the implementation is cumbersome and disappointing to the point where I’m probably not going to use it.

Here’s why:

It’s reactive. LinkedIn profiles are only added to Highrise profiles once the user has pasted the appropriate link from LinkedIn into a text field in the contact’s edit screen. There’s no dynamic list generation, no scanning the LinkedIn database, and more importantly, no recognition of post-login URLs. Which means…

It’s cumbersome. For each contact, I have to go to linkedin.com, find the right individual, click through to his or her full profile page, and copy the public link off the web page to add to Highrise. Grabbing URLs out of my status bar won’t work, because Highrise can’t reconcile them. (I suppose one could just find public profiles via Google, but that doesn’t seem practical at all.)

It's David! No, it's Reid!It’s account-reliant. Despite the need to use public profile links, Highrise and LinkedIn require users to log into both systems to coordinate data. But:

It’s not relational. Highrise doesn’t care if you have connected with the people whom you access on LinkedIn-via-Highrise. It also doesn’t care about your accuracy. I had no problem, for example, dropping LinkedIn CEO Reid Hoffman’s LinkedIn profile onto my own Highrise contact page. This doesn’t much matter when it’s being manually updated, assuming the user is careful, but it’d sure be nice to hit the right David Wertheimer by cross-referencing company, title and location data between the two services.

This seems like a great idea missing some key integration points that would make it as practical and useful as the rest of the system.

UX