AIAIO: Our Blog

The Ai 2012 Paleo Challenge came to an end on Friday, February 10^th.

The final challenge results:

Finish	Name	Title	Blog
Gold	Jessica L.	Project Manager	Link
Silver	Tim	Tech Lead	Link
Bronze	Seth	Graphic Designer	Link
Copper	Nick	Frontend Engineer	Link
Wood	Jessica D.	Frontend Engineer	Link

The second, third, and fourth place finishes were separated by three points each. It was a close challenge, but in the end I took the title, not because I cheated less than others but because the project manager in me didn’t let me forget to post my meals information and photos throughout the day, where others got penalized for not doing it.

Five weeks later, when our schedules finally aligned, the team enjoyed a celebratory non-Paleo cheat meal at Righteous Urban Barbeque (a.k.a. RUB).

We ended the meal with a toast to sticking together and committing to another six weeks of Paleo. We will start cooking once a week for each other this coming Monday, but this time there is no challenge, just a community of coworkers helping each other stay on track and enjoy the benefits of clean eating.

Ai has been busy settling into our new space—pool table, comfy serpent-shaped couches, and lots of much needed conference space. As we prepared for the big move, our IT Director tried to donate a few of our old Pentium 4 Dells. Surprisingly, we found that many NYC non-profits won’t accept such donations unless it’s 20 computers or more. Thankfully, I found them a home at Urban Pathways.

Urban Pathways provides homeless New Yorkers with the services and assistance they need to become stable and move into permanent housing. (For our regular readers, disregard the déja-vu. You read about UP a few months ago during our Thanksgiving Food Drive.) Now, instead of ending up trash, the computers are being utilized by Urban Pathways’ clients living in scatter site housing – private apartments leased by UP then subleased to clients. With the new computers clients find jobs, get an education, and re-enter society.

As many of us upgrade our iPads with every new version, we want to remind everyone that having a personal computer and internet access is not as universal as it may seem—even in New York. Ai is happy to have played a tiny part in bringing New Yorkers online, and we encourage everyone else to do the same.

For more information about life without the internet, check out the recent Huffington Post article, Without Internet, Urban Poor Fear Being Left Behind In Digital Age.

Dell has a partnership with Goodwill industries to reuse or recycle older machines.  PCs can be dropped off at any Goodwill store. For more information, click here.

For other ways to donate, check out the list here.

Happy Donating!

The 2011 holiday season showed us that shoppers are going online for purchases now more than ever.  Small brick-and-mortar retailers would prefer to drive customers offline and into their stores, and here are some thoughts on how a clean, user-friendly website can do just that.  These are quick, cost-effective fixes that small retailers can use that will ensure to drive more customers to their location, with a focus on transactional intelligence.

Think mobile

Customers are on the move.  Depending on your target audience, it’s likely that most shoppers have a smartphone with a mobile web browser.  At a minimum, small businesses should view their website on the most common smartphones, including iPhone and Android, to be certain that all key information is visible and easy to navigate.  If your phone number and address are at the bottom of the screen, move it to the top.  It could take a lot of smudging and swiping and to get down to the most critical information to drive your customer to your store.

Those small businesses with a little more to invest must consider launching a mobile-optimized web experience that caters to the smaller screen size. Prioritize the most important information that a customer needs to know about your business—your phone number and address, this week’s promotions, special “in store only” sales—and make this information very easy to find.

Focus on the user

Some of the best enterprise websites are successful because they build user-centered solutions based on a very deep understanding of the customer.  Small businesses can benefit from the same type of user-centered approach by emulating a number of the techniques used by bigger sites.  Make a list of your most common customer types and the scenarios they are likely to run into—the busy working mom with limited time to browse your products, spouses reviewing together a large purchase, a child letting a parent know the latest and greatest toy they want—and build an experience around these customer personas and scenarios.  Every decision you make about adding a feature or design element to the site should be prioritized to solve the most pressing needs of your customers.

Store locator

The most commonly visited section on a small brick-and-mortar business website is the store locator.  Customers want to know your store locations, your hours, and your phone number.  Don’t bury this information behind multiple screens.  Place your phone number and physical store address prominently on your homepage and at the top of every page of your site.

But don’t stop there.  The best executed store locator pages have calls-to-action or coupons that further encourage customers to come into the store.  Along with your phone number and address include a special web coupon or your hottest products of the week.  Use the opportunity to turn the often dry locator page into a stronger selling tool.  Rewarding customers with a coupon for printing the store locator page or showing a floor salesperson the site on their mobile phone will let give you valuable feedback on the efficacy of your store-driving campaign.

Watch your analytics

Understanding what your customers are doing on your website, the successful areas that drive customers to the store, and those that are barriers, is paramount to running an effective business.  Google Analytics is a free tool that includes  a number of reports on the activity of your site visitors.  Where are most visitors coming from?  What’s the first and last page they visit on your site?  How many clicks does it take for them to find your brick-and-mortar store information?

UPDATED: May 3, 2013:

Finally! I pushed the plugin to our GitHub account so it has a permanent, source-controlled home.  The latest and greatest Galleria Facebook Plugin can always be found here:

Galleria Facebook Plugin on GitHub

In this release:

• Published initial version to GitHub
• Fixed &limit= to &photos.limit= in querystring arguments (thanks @RoelDekker)

(Note: I’m going to soon remove the old versions that were uploaded as a zip to this post to prevent people from downloading the older, out of date versions.)

UPDATED: April 29, 2013:

• Worked around new Facebook security restriction by using long form graph API
• Upgraded plugin for Galleria 1.2.9
• Latest plugin: Galleria Facebook Plugin 2013-04-29

UPDATED: 12-12-12:

• Fixed Facebook api change to use graph.facebook.com
• Fixed & bug in photo request url pattern
• Latest plugin: Galleria Facebook Plugin 2012-12-12

UPDATED: August 29, 2012:

• Now supports Galleria 1.2.8
• Fixed bug that caused missing thumbnails on Galleria versions 1.2.7+
• Restructured portions of the plugin to be based on latest Flickr plugin in Galleria 1.2.8
• Updated post below to include 1.2.8 documented way of loading themes (slightly different than the documented approach in 1.2.6)
• Latest plugin: galleria.facebook.zip

Facebook provides an easy way for individuals to display photos from their profile using Facebook’s Photo Badge.  You download a small snippet of HTML, embed it in your website or blog, and et voilà.

However, there are a few drawbacks to the tool, most notably:

• The Facebook Photo Badge does not allow much customization. If you’d like control over how your photos are displayed on your website, you will need another solution.
• Photo Badges are currently limited to photos from an individual’s profile and do not support company Pages. If you want to display Facebook Page albums and photos on your site, read on.

Galleria

Galleria is a popular, open source photo gallery whose “aim is to simplify the process of creating professional image galleries for the web and mobile devices.”  Best of all, it’s free and comes with an attractive theme for displaying your photo albums.  You can purchase additional themes, though I’ve found the basic, free theme to be attractive and sufficient for most purposes.

Out of the box, Galleria does not currently support loading Facebook albums, but does have excellent support for Flickr and Picassa.  I adapted their Flickr plugin to work with Facebook.  You can see an example of the Galleria Facebook Plugin in action on The Gaga Center site.

Galleria Facebook Plugin How-To

Instructions on how to display a Facebook photo album on your website using Galleria.

1. You will first need to find the identifier for the Facebook album that you want to display. I haven’t yet found an easy way to do this other than looking in the URL when you’re viewing the album at Facebook. Navigate to the album in question, and copy down the album id that I’ve highlighted in red below (for your own album, of course):

http://www.facebook.com/media/set/?set=a.291489504249941.68160.249094895156069&type=3

2. Download and install Galleria:

http://galleria.io/download/

3. Download and install my Galleria Facebook Plugin:

Get a copy of the plugin: Galleria Facebook Plugin

The Galleria library has a directory called plugins/.  Unzip galleria.facebook.zip and place the facebook/ folder directly in the plugins/ directory so the file layout looks like this:

galleria/
  galleria/plugins
    galleria/plugins/facebook

4. Load jQuery, Galleria, the basic theme, and the Galleria Facebook Plugin in your HTML page (this assumes you’ve put the basic Galleria files in a js/ directory):

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script src="js/galleria/galleria-1.2.8.min.js"></script>
<script src="js/galleria/plugins/facebook/galleria.facebook.js"></script>

5. Add the following snippet of HTML to your page, setting your album_id (gathered in step 1), height, and width:

<script>
Galleria.loadTheme('js/galleria/themes/classic/galleria.classic.min.js');
Galleria.run('#galleria', {
 facebook: 'album:291489504249941',
 width: 745,
 height: 550,
 lightbox: true});
</script>
<div id="galleria"></div>

6. You can explore more Galleria display options and fun tweaks in the Galleria Documentation.

An Example!

See the Facebook Galleria Plugin in action on The Gaga Center website.

Finally, do consider purchasing additional themes as the developer generously donates this photo gallery to the world and I’m sure would appreciate it! (we have no connection to them) The gallery has great support for mobile and tablet, including native swipe gestures.