Emerge Interactive Blog RSS Feed

What do Deli Salads BBQ Season and NASCAR Have in Common

Thu, 09 May 2013 07:35:00 PDT

Reser's Fine Foods has been enjoying NASCAR success this year as an ongoing partner sponsor and a 'premier sponsor' for 5 races in the Nationwide Series for the Joe Gibbs Racing Team. Reser's objectives for this sponsorship are to increase brand awareness and grow sales of Deli Salads across the US. To help them promote this venture, they tapped Emerge to build several digital experiences to spread awareness and brand interaction.

The first experience we developed was the resers.com/resersracing page to serve as the place to find news related to Reser's and the races. Next we architected the idea of an interactive online experience to correspond with an ongoing campaign driven by social media, events, in-store, and radio spots. The Reser's 500 Sweepstakes and game puts fans in the 'driver seat' for greater chances to win the grand prize and other weekly prizes.

The game allows consumers and race fans to compete through predictions, trivia, check-ins, and chance to gain up to 500 laps per week. Participants play against friends via Facebook, and the entire game is responsive, making it fun to play on any device.

Enter the sweepstakes and join the game at resersracing.com!

Small Gestures Are Victories

Fri, 26 Apr 2013 09:03:00 PDT

Glacial melt, climate swings, floating continents of plastic waste; as we stop to recognize Earth Day it's easy to feel environmentally impotent. The scale of the issues we face is enormous. It's bigger than all of us, yet it's composed of the seemingly minor decisions we make each day.

We recently watched a movie trailer for Chris Jordan's feature-length film about his journey to Midway Atoll. Midway is a nesting refuge for seabirds that also happens to be located in the heart of the Great Pacific Garbage Patch, an eddy of modern plastic waste. The islands' birds mistake the plastic for food and feed it to their chicks (about 5 tons of it each year) who often die as a result.

Watch the video trailer, and you'll see a familiar object repeatedly appear in the bellies of the birds photographed by Jordan: the plastic screw-top bottle cap. It's an object most of us use every day. These little conveniences of modern packaging happen to make excellent boats. They flow into the open ocean where they journey with the currents until they're snapped up and swallowed.

In recognition of Earth Day, we spent the past five days retrieving discarded caps from around our neighborhood. By collecting and recycling them, we know these caps won't end up on the beach or in the diet of baby seabirds. It's a small gesture, but one we know can have a real and immediate influence on the health of the Pacific.

What We Found:

Bottle cap recycling is somewhat complex. We've found a good recycling center resource that provides locations for drop-offs.
We should choose alternate packaging options such as reusable containers or select products in more environmentally-friendly packaging.
It's not too much to ask that leaders like Coca Cola and Pepsi find a solution to the problem. Both companies focus significant resources on corporate citizenship, including packaging and plant-based bottle improvements. The caps are still #5 plastic-difficult to recycle, detachable and easy to discard. Not only is it a good idea, they've done it before. Some of us are old enough to remember aluminum cans with pull-tops, which ended up, naturally, everywhere, including the digestive tracts of not only animals but humans as well. That changed starting in 1975, when an engineer at Reynolds Metals named Daniel F. Cudzik invented the Sta-Tab. In the first 16 years after their invention, the use of Sta-Tabs meant that over 4 million tons of aluminum was recovered and recycled rather than discarded (or ingested). This issue has been solved before; let's do it again!

Meet the Newest Members of Emerges Creative Team

Wed, 17 Apr 2013 06:39:00 PDT

Emerge is happy to announce some new additions to our creative team! Tamara Crawford has stepped into the role of Creative Director, bringing with her a wealth of experience from agencies of varying size. She's worked with brands in retail, athletics, music, beauty, and technology-a great complement to our portfolio of clients.

Her leadership style is centered on the essential question of motivation. For team members, this means understanding what drives them at an individual level. When working with clients, Tamara urges them to discover the true reasons why their audience cares. She starts by examining what each unique client is trying to accomplish, and what will motivate people to embrace this.

Tamara's leadership is also guided by team dynamics. Her goal is always to have everyone leave a meeting happier than when it started. This satisfaction is cultivated by collaborating with the team to find a shared vision, so that everyone has a piece of the ownership. She understands that happiness results from clarity, understanding, and purpose throughout the creative process. "Provide that," she says, "and a good dose of sensibility, and you'll find yourself surrounded by a motivated team."

As Creative Director, she'll be responsible for leading brand and user experience strategy for our clients. She will be working closely with the executive team to bring the vision for Emerge to life and to grow our creative team. In her free time, she's a metalsmith for her very own jewelry line and commits time to community gardening.

Joining her on the creative team is Jeremy Cohen, our new Interactive Production Designer. Jeremy brings with him experience in pre-press, production, business identity development, type design, web design and development, and interactive flash experiences. When he's away from work, he enjoys low-budget films from the ‘70s, and has a goal to run a marathon someday. We're very excited to welcome them both to the Emerge family!

Documentation is King WriteTheDocs

Wed, 10 Apr 2013 02:45:00 PDT

WriteTheDocs was billed as a "a two-day conference for technical writers, documentarians, and all those who write the docs." Put on by those behind ReadTheDocs, a project to host, manage, and organize documentation (mostly API docs) for the open source community.

While technical writers were certainly in attendance, people who work the help desk/support and developers made up the rest of the attendees. The talks were just as varied, consisting of everything from software, methods, and best-practices of documenting your code, to typography and psycho-social meanings of words, poetry, and business communications. For an infonerd like myself, it was a very enjoyable experience.

Conference Themes
During the two-day conference, several take-home themes became apparent. The first was that documentation is vitally important to the success of your product. It is often the first interaction your customer (or potential customer) has with your product, even before diving into the code. Therefore, well-written, relevant documentation should be rolled into the product development cycle, complete with version control and bug reports ("bad documentation is a bug!").

Along these lines, even if your product was not intended to be customer facing (an internal tool or methods), internal documentation is better than relying on the "tribal knowledge" of only a few (or one!) employees who know how to use it. Additionally, should your internal tool suddenly be open to the outside world, good docs allow a smoother transition than starting from nothing. Opening speaker, Kenneth Reitz, suggests writing your code and docs as if they are intended to be open source from the start.

A third theme that piqued my interest was the notion that good documentation helps one create a better product. Whether we're talking about customer interaction or designing a new feature, the very act of writing documentation helps you focus on the problem your code is meant to solve.

Applying Lessons to the Agency Model
Here at Emerge, our product is the service to our clients. Much of what was discussed at the conference on product documentation does not directly apply. However, there are still very good ideas that can easily be applied to the agency model, especially in the case of internal documentation. Feature specifications have to capture both the needs and wants of the client, and provide instructions for how it should function upon completion.

Applying the lessons mentioned above, we can approach a client's specific problem with docs first. These docs would detail the problem explicitly and provide the solution specs before a line of code is ever written. The documentation could then feasibly be passed to any developer to complete the task. These same docs can be used during QA to determine if the software created is actually solving the problem presented, and with minimal editing, could even become the tutorial/guide for how the client is to use the software.

WriteTheDocs was a conference unlike any other I've attended. It brought a complete focus to the varied yet related fields of documentation that are typically couched as one or two talks at a traditional tech conference. While the conference could do with some minor improvements (more break out sessions, chat/discussion time, maybe a couple tracks), I look forward to seeing how it develops and hope to attend next year.

Portland Conferences to Watch For in 2013

Wed, 13 Mar 2013 03:24:00 PDT

2013 has a slew of technology conferences coming to Portland, which continues to establish itself as a hub for technologists and progressive thinkers. Here are some that our team is attending this year:

Write The Docs

April 8 - 9

We're starting off the year by tending to one of the most fundamental pieces of any project: proper documentation. This inaugural event promises to bring together technical writers and documentarians covering topics from typography and writing for smaller screens to creating tutorials and addressing support documentation needs.

RailsConf 2013

April 29 - May 2

RailsConf is the largest Rails conference in the world, and it is right here in our own backyard! Needless to say, this get-together draws some of the brightest and savviest web developers from all continents.

WebVisions

May 22 - 24

WebVisions has established itself as a force to be reckoned with, providing a similar variety of topics as larger conferences (think SXSW) in various smaller venues around the United States. The Portland conference offers excellent value for anyone interested in design, UX and technology.

jQuery Conference

June 13 - 14

How lucky we are in Portland to have another major technology-specific conference coming through our town! jQuery Conference Portland promises to be the largest jQuery conference to date, drawing over 1000 of the world's most talented JavaScript developers. The event should cover a wide variety of JavaScript related topics, with a heavy bias towards jQuery specific development.

World Domination Summit

July 5 - 7

Mark one for the inspirational category. The World Domination Summit draws entrepreneurs from around the world to exchange ideas on how to improve their businesses, lives, and communities and-what else-dominate the world!

XOXO

September 19 - 22

Probably the most "Portland" conference on the list, XOXO is an arts and technology festival that started as a Kickstarter project and has grown into a show-and-tell for some of the most creative minds in Portland. Think of it as a disruptive TED conference-celebrating independent artists and hackers-all packed into a food-cart catered brick warehouse in southeast Portland.

LavaCon

October 21 - 23

Now in its third year, the LavaCon Conference on Digital Media and Content Strategies will focus on "Managing the Customer Total Information Experience." With tracks on Content Strategy, Content Marketing, User Experience and Multichannel Publishing, LavaCon 2013 promises to help attendees attract and engage tech-savvy customers by delivering user-optimized content when and how the customer needs it, to help solve critical business problems while increasing revenue and decreasing costs.

Emerge Launches Site for Stanford Environmental Institute

Fri, 11 Jan 2013 02:56:00 PST

The Stanford Woods Institute for the Environment is the central hub of Stanford University's environment and sustainability research, where experts across sectors and disciplines find solutions to critical and complex environmental and sustainability challenges throughout the world.

Begun as a grassroots movement by a group of Stanford faculty, the Institute now comprises 10 percent of Stanford University's faculty and research professionals, and produces breakthrough environmental solutions that connect knowledge with action to solve the environmental challenges of today and tomorrow.

A complete redesign of the Institute's website was a key milestone in the their strategic plan, and for that they turned to Emerge Interactive, in large part because of Emerge's award-winning work with leading educational, non-profit and sustainability organizations.

According to Executive Director Debbie Drake Dunne,

"We wanted a more intuitive website experience that makes our work accessible to the scholarly community, the campus at large and the many stakeholders looking for solutions-oriented research when making decisions about the environment and sustainability."

Emerge worked closely with a large and diverse community of stakeholders at Woods, soliciting and organizing feedback from the Woods community, using interviews conducted as part of their strategic planning process, along with data on how visitors used their existing site.

One of the key priorities that emerged from this process was the importance of enabling very different types of users (researchers, community members, global colleagues, members of the press, government and private decision-makers) to easily navigate through an enormous amount of publications and other content that make up the Institute's interdisciplinary research, programs and community.

Several interconnected solutions were developed to meet this challenge, including:

A streamlined design and organizational structure that allows users to quickly navigate the site by the core research areas.
Filters for different types of content - including news, events, publications and faculty profiles, enabling users to quickly find content by topic, research area, affiliation, etc.
Faculty and researcher profiles that can be fully sorted by type, school and research area and that are cross-linked to publications, presentations and ongoing research.

Emerge developed a highly-customized Drupal-based Content Management System to match the different types of content at the Institute's disposal, as well as the specific ways of indexing and categorizing that content which would make it accessible to the different kinds of users accessing it through the site. Emerge also developed and executed an extensive content migration plan so that Woods and Emerge could work together to move massive amounts of content to the new site in a timely manner, while maintaining extremely high quality standards.

The new site has been extremely well-received by the Woods community and the Woods staff has been extremely busy posting all kinds of new content from the ongoing work at the Institute, including News and Press Releases, Videos and Publications. Check it out!

Emerge Attending GreenBiz Forum 2013

Mon, 25 Feb 2013 05:13:00 PST

Emerge is excited to be sending Scott Rich, our resident Sustainability Client Services Manager, to San Francisco for GreenBiz Forum 2013, one of the first sustainability conferences of 2013. We believe corporations have the power to make sustainability a truly innovative force - environmentally, socially, and economically, and we excel at helping brands realize and communicate this vision.

The 2013 GreenBiz Forum in San Francisco brings together thought leaders and sustainability executives to define and discuss the trends, challenges and opportunities in sustainable business today. Scott is excited to contribute to the conversation, make new connections, bring back innovative, actionable ideas we can share with our team and our clients, and to learn about the latest trends from these thought-provoking sessions:

Craft a Winning Sustainability Story for Your Brand

Tuesday, 1:30pm

One Great Idea: It's All In Our Heads - The Psychology of Sustainability

Wednesday, 9:55am

Sustainability at a Crossroads: Which Direction is Your Program Going?

Wednesday, 1:30pm

Sustainability In Sport

Thursday, 9:45am

Breakthrough Brand Stories

Thursday, 1:30pm

If you are going to be attending the GreenBiz Forum and would like to connect with Scott, drop us a line at info@emergeinteractive.com. Maybe we'll see you there!

How I Learned to Stop Worrying and Love CSS Frameworks

Tue, 16 Oct 2012 04:40:00 PDT

CSS Frameworks

Web development has come of age. No longer a new industry where vendors can get paid to figure it out as they go along, clients and managers expect rapid, efficient, and clean code from their developers on a wide variety of products and solutions. Most of us have swallowed our "I roll my own" pride and adopted many time-saving tools of the trade. One of the most important of those is the CSS framework. There's a bit of a confusion as to exactly what a CSS framework is and what it does, and I hope to clear up most of that here. But be wary, fellow web developer, not all CSS frameworks are created equal and they can vary widely in what they do and for what purpose.

Yes, but what is a CSS framework?

Unfortunately, there isn't a true consensus on what exactly a CSS framework is. Generally, it's a starter set of (usually several) stylesheets ready for you to customize for your project. While some come close to being a true boilerplate or sandbox starter for your front-end markup, others are merely frameworks with a collection of classes that allow you to style your sites' structure (columns, sidebars, etc.) by applying classes inline to your markup. This distinction is important since for the first time it allows you to essentially structure your new project while writing your HTML, nearly eliminating the structural styling step in your CSS.

For example: Before, you might have written some basic markup like so:

<div id="wrapper">
     <div id="header"></div>
     <div id="content"></div>
     <div id="sidebar"></div>
     <div id="footer"></div>
 </div>

Then you would create styles for each of those IDs to set their widths, floats, and relationships with each other. Markup with a CSS framework in mind is actually not much different than the above, but your widths, floats, and relationships are already included and can be added via a class or several classes like so:

<div id="wrapper" class="container_12">
     <div id="header" class="grid_12"></div>
     <div id="content" class="grid_8"></div>
     <div id="sidebar" class="grid_4"></div>
     <div id="footer" class="grid_12"></div>
 </div>

The above is an example from the first (and most minimal) CSS framework I used: the 960 grid system The CSS that comes with 960.gs takes into account common layout problems with floats, gutters, and relationships, so that your prototyped sites and even production sites built using the framework are already robust. After only a short learning period of the class names, one can code up websites almost willy-nilly to near wire-frame perfection in a matter of minutes!

Types of CSS frameworks

The 960 grid system was my "first love" of CSS frameworks. It allowed me to structure a site quickly, but didn't get in the way of my design and styles. It created a grid and that was about it. Since then, I've noticed new frameworks popping up all over the place. Most are variations on the 960 grid with some modernizations and boilerplate cross-browser fixes here and there. But others do a lot more than just structure your site; they start to delve into dictating your design styles as well and even adding common JS libraries.

The two CSS frameworks I'll be diving into are commonly used here at Emerge: YAML4 (not to be confused with the non-market language of the same name) and Twitter Bootstrap. Which one you "should" use and how they compare is well-detailed in this article, but I'll go over some additional differences and uses here.

YAML is a CSS framework we use quite a lot here at Emerge. To the uninitiated, it may seem bloated but as you work with it you realize the creators and surrounding community have thought of most of the things you will think of later; it's already done already! YAML also comes in a variety of flavors already set up: fluid grids, column style, even a port of the 960 grid system! With YAML4, very well done responsive hooks were added and some of the code bloat was reduced resulting in a very workable out-of-the-box framework ready to style to your client's or designer's spec.

Twitter Bootstrap is what all the "cool" kids are raving about these days. At first, this may have been because "it's what Twitter uses and Twitter is cool," but with version 2, Bootstrap has earned its own reputation as a great web application developer and prototyper. With the LESSified version, it's modularized, fast, and lean. What is perhaps its main drawback is that most Bootstrap sites look like Bootstrap sites (e.g., Twitter). This is because the style and design are not as well separated from the mark-up as they are in YAML4. While this doesn't matter very much for prototyping and rapid web application development, it creates a hurdle when it's time to bring your prototype into production.

Both of these frameworks have their advantages, disadvantages, and times when they're the best fit, which is why we tend to use both here at Emerge, depending on what a given project needs. But in addition, the advantages of one can sometimes be used to address the flaws of the other. For example, Bootstrap is massively modular with LESS files, while YAML is not as much. The easy fix is to LESSify the YAML CSS files and create a base stylesheet that includes each module as needed, just as Bootstrap does. Another example is Bootstrap's treatment of buttons and button styles. The markup is clean and intuitive but relies heavily on CSS3 gradients and styles which do not degrade well in older browsers, which is often a project requirement. Some work can be done to make these more flexible and divorced from design to give them greater flexibility to meet the needs of the project.

One flaw I've noticed with Bootstrap compared to YAML4 that some Bootstrap fans might see as an advantage is the absence of designating the framework's classes with a prefix. YAML4 prepends all their class names with "ym-", which at first seems bloated and is probably why Bootstrap doesn't do this. But I've notice that the prefix allows the developer, especially one new to the framework, to distinguish between framework classes and classes set for specific project styles. This allows you to know which modular CSS or LESS file to check to make alterations and it also keeps the framework vanilla so as not to undo all of the work that's gone into it.

Just because you own a calculator doesn't mean you know math

My dad used to always tell me this and it certainly holds true for CSS frameworks as well. While they save time and provide robust foundations of code, CSS frameworks must still be understood to be utilized properly. Both YAML4 and Twitter Bootstrap allow for a very tempting startup to a website; just install and you're done! But complaints of code-bloat, generic design, and inflexibility are clear indications

BTA Commuter Challenge 2012

Wed, 10 Oct 2012 04:50:00 PDT

Emerge Interactive is proud to report that we had an amazing time participating in this September's BTA's Bike Commuter Challenge! Out of our 20 person staff, 7 riders participated by riding to work and logging miles at least once during the month, for a total of 810 miles in the entire month of September! The average commute rate was 69.7% and there were 89 total commutes.

The challenge is officially over, but a core group has formed who will continue to commute by bike and log miles throughout the year. In fact, 2 of the 7 participants have switched their commutes to bicycle from a different vehicle. Both of these "new riders" are now part of the core group who will regularly commute to Emerge on two wheels!

Emerge Interactive is an organization committed to green practices and sustainability. Learn more about our outreach & sustainability here.

The Impact of Responsive Design on the Native App vs Mobile Web Debate

Thu, 19 Jul 2012 06:47:00 PDT

The debate over when to extend your brand to a native mobile application versus creating a mobile website has been raging on for a while now. While the major arguments on either side haven't changed, there is a new player in town: responsive web.

Responsive web promotes the evolution of the desktop website to also provide a mobile- and tablet-optimized experience, by serving conditional style sheets depending on size of the browser's viewport. The result is that a single website can fulfill the trifecta of serving as desktop, tablet and mobile website (and everything in between... such as the Galaxy Note). When properly executed, the dedicated mobile website becomes obsolete.

So what happens to the question of native mobile vs. mobile web? Well, that conversation has now changed to native mobile vs. responsive web. And as responsive web is establishing itself as a best practice, the arguments on the side of responsive web are stacking up. One of the major downsides to developing mobile applications and creating mobile websites is the cost of those solutions, often times duplicating features that already have been implemented for the desktop website. Responsive web removes this factor out of the equation, as the existing features are reused, albeit slightly reformatted to fit smaller screen resolutions. (Though, of course, the effort to update an existing site into a responsive one must be factored in.)

There will always be cases when a native application is the way to go, hands down. Some examples include any graphics heavy application or when there is the need for close hardware integration that HTML5 cannot provide (yet). Also, for now, device context-specific needs may be better addressed with a mobile-specific application or site (at least until the "one codebase-multiple contexts" challenge is solved). On the other hand, any company looking for a cost-effective way to target mobile users now has a new option in their playbook. I predict that in a matter of 12 - 18 months--as the need to consistently target users across devices becomes mission critical--every new website will need to implement responsive web practices. Choosing a responsive website over developing a native app or mobile website might just be an investment in the future.

Emerge recognized as fastest growing company and small business of the month

Fri, 29 Jun 2012 04:07:00 PDT

June was a fantastic month for Emerge Interactive! We were very excited to be selected as Small Business of the Month by The Small Business Advisory Council for June 2012, as well as to appear on Portland Business Journal's list of 100 Fastest Growing Private Companies in Oregon.

The Small Business Advisory Council (SBAC) was created in 2003 to provide input and advice to the Portland City Council on issues that affect small business and to advocate for a customer-centered business climate. The goal of SBAC is to review and bring forward regulations, policies and issues that support small business growth in Portland. The award is given to provide public recognition and education about outstanding Portland-area small businesses and their achievements in business and community involvement.

Emerge has a long history of supporting a wide range of non-profit organizations, from local to international. Some of our favorite projects have been for the Portland Hope Ball, an event for the American Cancer Society, Care2Tri, the YMCA of San Francisco and the United Religious Initiative. We thank the SBAC for nominating us and promise to continue our involvement with the Portland community and beyond.

Also in the news, we have received the ranking of 36th out of 100 Fastest Growing Companies in Oregon! This is the third year in a row we have been recognized by the Portland Business Journal for our growth. We hope to make the list again in 2013 & 2014 to receive the prestigious Lighthouse Award. Here's to a prosperous year ahead!
	Tony Starlight and his band provided musical entertainment at the fastest-growing company awards reception.

Turn Your Web Page Into a Responsive Video Scrubber

Wed, 16 May 2012 02:19:00 PDT

This year we were tasked with creating a unique and engaging user interface. One of the key challenges was to come up with a first impression that would intrigue and engage the site's visitors, push the limits of what the web can do.

Our team of UX designers, digital strategists and developers began our search for inspiration, sharing ideas and analyzing what made us all sit back and say "Wow!" (Some of the things that did this for us included http://360langstrasse.sf.tv/page/, http://kyan.com/, http://www.socialsummit.cz/en and http://davegamache.com/.) A few specific technologies stood out to us - frame-by-frame video (JPEG sequence) scrubbing, parallax effects and, of course, responsive design.

Once we had defined our goal and a written rough draft of the functionality requirements, we began creating our first working prototype. Our road to the initial alpha version was almost a single step. Within a day we had extracted a video, converted each frame to compressed JPEG files and setup our canvas to stretch the first image to completely fill the viewport with a method called zoom cropping (zooming to the point of filling a viewport while maintaining aspect ratio). We turned the web page into a virtual timeline and wrote Javascript code that would animate the frames based on how far down the page you scrolled. It didn't take long between developing this first initial working prototype and getting the support and approval from our client. Ambition was high, our goals were clear and we were setting out to build one of the most amazing experiences we could imagine.

The journey from our initial prototype to the final site was long and we looked at a wide variety of ways to animate the video frames before we found something that would work reliably in all of the browsers we were supporting. Whenever you push the limits of technology, you must constantly compromise how you want to do something in order for it to actually work in the real world.

We owe much of the success of our final version to the information in an article written by Paul Irish-http://paulirish.com/2011/requestanimationframe-for-smart-animating/. With this method of animation, "the browser can optimize concurrent animations together into a single reflow and repaint cycle, leading to higher fidelity animation". Which is exactly what we needed to make this work and reduce CPU load and increase battery life for our mobile users!

Here's a code snippet:

 window.requestAnimFrame = (function(){
    return  window.requestAnimationFrame       || 
    window.webkitRequestAnimationFrame || 
    window.mozRequestAnimationFrame    || 
    window.oRequestAnimationFrame      ||  
    window.msRequestAnimationFrame     || 
    function( callback ){
        window.setTimeout(callback, 1000 / 60);
    };
})();

(function animloop(){
    requestAnimFrame(animloop);
    targetStep = Math.max( Math.round( getYOffset() / 30 ) , 1 ); // what frame 
to animate to
    if(targetStep != step ) { step += (targetStep - step) / 5; } // increment the 
step until we arrive at the target step
    changeFrame();
})();

function changeFrame() {
    var thisStep = Math.round(step); // calculate the frame number
    if(images.length > 0 && images[thisStep]) { // if the image exists in the array
        if(images[thisStep].complete) { // if the image is downloaded and ready
            $('#video').attr('src',images[thisStep].src); // change the source of our 
placeholder image
        }
    }
}

Sharing knowledge and information with others is one of the biggest reasons humans have been capable of technological progress. The development team and executives here at Emerge Interactive share this philosophy and strongly support open-source communities, which is why we decided to create this demonstration to share with others who might be interested. We also want to say a special thanks to Paul Irish for the quick study he provided. The deceptively small article he posted has propelled the capabilities of the web forward by leaps and bounds.

We hope you've enjoyed reading about our experience and that you will also enjoy reverse engineering and manipulating the code that we've shared for you:

View Demo | Download Sample Files (ZIP) | Fork on Github

Note: There are several things to keep in mind as you attempt to modify this example to use your own JPEG image sequence and customize it to fit your implementation:

Image optimization is a critical piece of making this work. We ended up resizing each of the images to about 400 pixels tall and compressed them to a target file size of about 15-20KB each.
Keep your JPEG sequence fairly short, each JPEG in the sequence is a file that a user has to download in order to display. Users on slower internet connections could have a hard time or be incapable of viewing your page if you don't focus on optimization.
Try not to have hard cuts in the video. Seamless image transitions are key to making this effect a smooth experience for visitors. We experimented with a wide array of footage, and recommend you do the same. Once you have your setup configured, it's easy to swap out the frames for new image sequences.
You need to preload your images for this work or you'll experience delay as each new image is called and the browser attempts to display each frame. Because of this, the experience can be jarring on a slow computer or through a slow internet connection. Adding conditional configurations for older browsers that reduce the frame-rate (skip every other frame in IE 8 or less, for example) and that reduce the total number of frames is highly recommended. Taking further steps to detect a user's bandwidth and download speed is also very effective to improve the responsiveness and usability of an application like this.
Noscript fallbacks are good practice. Using CSS to size your initial image to fit the viewport ensures that users without Javascript enabled will still be able to use your web site and experience the rest of your content, even though they won't see the scrubbing effect.
Adding a tiling grid pattern overlay on top of your video images is a great way to hide some of the artifacts that are visible after stretching a small, heavily compressed image to fit a large browser viewport. You can also use this overlaid image to lighten, darken or colorize the video JPEGs so the content on the top layers is more readable.

That's it for now! Watch, like and follow

Why You Should Care About Responsive Design

Fri, 11 May 2012 06:33:00 PDT

There's a lot of chatter on the webs about how Responsive Design is the "next big thing," and while it's certainly reaching buzz-word status, what exactly is it and why should you care?

Put succinctly, responsive design is the idea where a website is designed with a variety of screen and browser sizes (viewports) and platforms in mind. The goal is to use the same overall design and user interface but have it slightly adjust itself in order to be optimized for everything from a mobile phone to a desktop with a 22" monitor.

Responsive design has come about largely because of the rise of tablets. In our rush to accommodate them, we've risked regressing to the frustrating days of building more than one version of the same website, only now replacing different browsers with different platforms, screen sizes, orientations, etc. The goal of responsive design is to let you build one website that works on all or most devices and is optimized for each.

Unfortunately, much as the term "Web 2.0" was co-opted and branded to mean something totally different than its original meaning, it's important to stress that responsive design is not a magic wand to be waved around. While several tools are used that can greatly help the process, it's more about conceptualizing how a website's look and feel and UI can and should be shifted to accommodate different experiences, rather than any kind of one-size-fits-all (ha-pun intended) shortcut.

Responsive Design Starts with Design

At its most basic level, designing for desktop, tablet, and mobile all at once may seem like the way to go. The idea is that you allow the website to snap into place for each device, once a certain threshold has been reached in the size of the browser window. However, when done well, responsiveness also thinks of every device in between-the website can literally respond to its environment and adjust accordingly. This does, however, create some amazing challenges for the UX designer to overcome. Designers need to literally think outside of the box, since today's design tools (such as Adobe Photoshop and Illustrator) still try to force us into pixel and print constraints. Working closely with the front-end development team is the only way to overcome this and effectively translate designs to working mock-ups and prototypes.

The Tools

As mentioned, there are a variety of great tools that can get you about halfway to responsive design. CSS3 media queries are a great start, since they let you set thresholds at which styles should change and adjust. Jquery can also greatly assist in optimization and rewriting the DOM as a user moves from one device to another. But even without these tools, stepping back to the accessibility days of full-width percentage-based layouts will get you more than halfway there, since a side bar that takes up 33% of the screen will take up that same percentage of screen real estate in every viewport.

There is an arsenal of tools and techniques to allow for an innovative, dynamic, and of course responsive design. My current favorite CSS framework YAML4, which was already loaded with media queries and ingenious styles that adjusted almost seamlessly. Other CSS platforms have followed suit and provide an initial level of responsiveness built-in, especially Twitter's Bootstrap for quick site development and prototyping.

Above all, it was our team's goal of treating the site as responsive from the beginning and all through the design and implementation process that allowed for the final product to excel on a variety of platforms using the exact same code-base and look and feel. We worked hard not to succumb to the temptation to develop device-specific solutions to issues that could be solved responsively, and the result is a site which will display optimally not only on devices we know about, but also on those that haven't even been invented yet.

Go Mobile with Mangos

Fri, 06 Apr 2012 04:04:00 PDT

The National Mango Board is a promotion and research organization whose mission is to increase awareness and consumption of mangos in the U.S. A key part of achieving that mission is to educate consumers about how to choose and use mangos, including great recipes for a fruit that many Americans are not familiar with. Since more and more consumers access information using mobile devices, they asked Emerge to design and develop a mobile website that would provide consumers with the best mango-related information available, specifically designed for smartphones.

Leveraging an updated brand identity and a new desktop site, we set out to create an easy but also eye-catching mobile experience. The NMB made that much easier by providing great content, including mouth-watering images, easy how-to videos and delicious recipes. On our side, we made sure those images stayed looking good on a wide range of devices (whether held in portrait or landscape orientation).

Emerge's webactive^tm Content Mangement System (CMS) makes it easy for the NMB to keep the site's content "fresh" and up to date, including information on the nutritional benefits of mangos, tips like ‘How To Cut a Mango', helpful videos and recipes for everything from Coconut Shrimp with Ginger Mango Sauce or Mango and Almond Couscous Salad to Mango Bellini—all made easy and available for the consumer on the go.

To make things even easier, you can instantly re-calculate quantities for a different number of servings at any time—while you're shopping for ingredients, or in the kitchen when unexpected guests arrive. Now that's convenience!

The new mobile site was a big hit at the Board's annual meeting in Brazil. The NMB has plans for in-store and point-of-sale promotions featuring the mobile site and are also working on setting measurable goals specific to the mobile site.

Stay tuned for more on mangos.

A Night on the Town for a good cause

Mon, 19 Mar 2012 03:44:00 PDT

For the third year in a row, Emerge Interactive has been a proud sponsor of the American Cancer Society's Hope Ball. This year's event was held on February 25th at Castaway. This year's theme was 1940's Hollywood Glamour with a fundraising goal of $300,000. All proceeds raised support the Society's mission of funding cancer research, education and support programs. Guests participated via silent auction, live auction and through the Special Appeal Paddle Raise, in which they made direct contributions to help send children with cancer to Camp Ukandu, a medically-supervised, week-long camp for children ages 8 - 17 who are currently undergoing cancer treatment or who are within two years of their last treatment.

Our contribution to the Ball is creating the event website, customized to match the theme of each year's event. The site provided all necessary information for attendees and links to a portal for online donations.

Guests were greeted by cigarette girls handing out vintage-label gum and candy. Marilyn Monroe made her rounds and would take pictures with admirers for a $20 donation to the society. Jimmy Martin and his band rocked the night away with swinging tunes that reminded us of days passed and the hottest prize of the evening was a trip to Bali which raked in a cool 15K. We all had a great time and plan to contribute again next year.

Web Standards The rise of the tablet and the fall of IE6 almost

Tue, 06 Mar 2012 06:38:00 PST

Almost immediately after I began building websites back in the late-90s, I hit the wall that still haunts us to this day: cross-browser compatibility. Back then, it was far worse-you almost had to create a completely different website for each browser and version and then had to maintain it! Of course, I wasn't alone in my frustration, and fortunately for all of us, an organization of web developers and designers formed the Web Standards Project in an effort to establish cross-browser consistency based on the World Wide Web Consortium (W3C).

It was an uphill battle, but cut to the present day and things are admittedly a lot better. There are still plenty of browser issues to face when building a website, but gone are the days of creating vastly different experiences for each browser or locking out unsupported browsers altogether. While the Web Standards Project spearheaded much of these changes, so did technology. As more innovative and responsive websites came online, people began to realize that in order to access these sites and tools, they needed to keep up on browser updates. While this provided consumers an incentive to keep their browsers up-to-date, it wasn't until Firefox came along that the browser providers themselves began actively encouraging the adoption of updates, through Mozilla's announcements and alerts. Then Google's Chrome browser came along and began silently updating itself in the background. Firefox has now followed suit and the numbers of users on modern browsers is perhaps the highest it's ever been.

Internet Explorer

For as long as I can remember, the favorite punching bag of most web developers has been Microsoft's Internet Explorer. While the support and usability of the various versions of IE has waxed and waned in the eyes of the web standards community, the frustration has come more from the fact that at any given time since the 90s there have been three or four different versions of Internet Explorer in heavy use at the same time! This is due in large part to the fact that Microsoft does not alert users of new versions as aggressively as Firefox has since its inception. In fact, Microsoft.com still fully supports four different versions of IE and makes little attempt to guide users to upgrade. Recently, however, Microsoft launched a website touting the end of IE6, a browser over ten years old. We will still be grappling with simultaneous versions of Internet Explorer in the foreseeable future, as IE 10 is still in its infancy, while IE 7 and 8 are still very much in use by large numbers of users.

The iPad/Tablets

Perhaps an even bigger challenge facing web standards and web developers are tablets like the Apple iPad and Android-powered devices, including the Motorola Xoom, Samsung Galaxy tablet as well as the barn-burning Kindle Fire from Amazon. These devices actually do support many web standards in a way where most well-designed and implemented websites will render just fine on tablets, there are however, several differences from a traditional web experience. A key difference is their ability to easily switch on the fly between portrait and landscape view, which means designs now have to be fluid and flex for these different orientations. In addition, the variability of processing and connection speeds, long familiar to mobile developers, now needs to be taken into account for full-featured sites. And, like early laptops, these devices, while very powerful for their size, aren't as powerful as desktops and laptops. To make matters even more interesting, developers have discovered that device makers, especially Apple, have programmed shortcuts to circumvent some of these limitations (while presenting other challenges to us!).

Perhaps the biggest gain from the growing use of tablets (now hovering just under 10% by some accounts) is the death of the "fold," the outdated print concept that the most important items should be near the top of the browser. The falling cost of very large screens has diminished the importance of this principle to web developers for years, but the tablet's change in orientation at the flick of a wrist makes the antiquated nature of this concept painfully obvious.

Web standards have moved us a long way towards unifying the web, so experiences are consistent between browsers and devices, but it is nowhere near complete. (Will it ever be?) Internet Explorer continues to lag behind its competitors, but retains enough marketshare to be important, while tablets, especially the iPad, represent new and innovative ways to surf the web, but a proprietary code and hardware base threaten to lead towards a split in consistency. Here at Emerge, we are aware of these trends and changes and are working hard to keep our development standards-compliant while still bringing innovative and responsive design to the web.

AXE Anarchy RealTime Graphic Novel

Wed, 08 Feb 2012 06:29:00 PST

AXE is a consumer brand best known for its ads and products geared towards young men, but in January, parent company Unilever took a new direction by creating its first fragrance for both men and women, AXE Anarchy. Emerge collaborated in a global campaign to promote the new product line, spearheaded by Razorfish (New York) and BBH (London), to create a high-end, custom YouTube channel application. The concept was to create a social-media driven, user-generated graphic novel, created in real-time as actual users interact with the story and suggest how it should develop.

The site shows off a high-end graphic novel created by the expert team at Aspen Comics. Visitors can browse through the story, suggest plot ideas and where they think the graphic novel should go next, vote to choose upcoming characters, interact with each other and much more.

As technical development partner, Emerge delivered the full digital implementation for the graphic novel, including a custom interactive reader, social-media integration, Content Management System, and scalable cloud hosting solution. We built the application using Ruby on Rails, and host it using both Heroku and Amazon EC2 servers with the ability to scale to handle millions of visitors a day.

It has been a great experience delivering the technical foundation for such a groundbreaking, original and extensive campaign. The reception has been excellent, with coverage in publications such as AdWeek, Mashable and MTV. Check it out for yourself before April 30th and see how the graphic novel develops!

The magic of flyinglike the pros

Fri, 09 Dec 2011 03:50:00 PST

I have to admit that becoming a pilot has been a long-time dream of mine. The idea of flight is still magical to me; every time I am on a plane, you'll see me glued to the window. So, when we heard about the opportunity to work with a group of ridiculously experienced and passionate flight instructors to build the next-generation online aviation education application, I was all ears.

After 18 months of developing amazing content and building a cutting-edge online education system, Flying Like the Pros and Emerge Interactive-with our design partners at Hot Studio-are excited to launch www.flyinglikethepros.com. Join 2010 National Flight Instructor of the Year Jeffrey "MossY" Moss and his fellow master flight instructors as they teach tricks and insights that are often only known to the most experienced professional pilots.

To make their vision a reality, we worked closely with Flying Like the Pros to build a custom online education system that would provide general aviation pilots with an immersive learning experience, in which they could learn advanced flying techniques from professional pilots-"The Pros." After an extensive strategy phase evaluating a wide range of Content Management and Learning Management Systems, Drupal was chosen as the foundation for the website because of its customizability, strong user account management capabilities and large developer community. For Ecommerce, open-source Drupal add-on Ubercart was chosen, supporting both online and physical (shipped) products. For content delivery, Flying Like the Pros looked to an area they might avoid when navigating a plane-the Cloud. Emerge developed a comprehensive cloud hosting strategy, utilizing Amazon's S3, EC2 and CloudFront web services, as well as custom integrated Brightcove players to provide a seamless and scalable experience to customers worldwide.

Pilot or not, when you visit Flying Like the Pros, you will gain insight into one of the most fascinating professions-and experience some of what makes flying so magical.

Emerge Makes 2011 List of Healthiest Employers of Oregon

Fri, 14 Oct 2011 05:07:00 PDT

Congratulations Emerge for making the list as one of Portland Business Journal's 2011 Healthiest Employers of Oregon. That's right, folks, we are getting recognized for eating carrot sticks and playing disc golf!

But seriously, there are some real wellness superstars in our office that deserve a shout out: Julian Pscheid, currently training for Ironman Canada 2012. Erik Ruthven, Crossfit Hel master. Justin Barry, who finds time every lunch hour to play bball. Our mascot, Lukas, who can sit pretty and jump through hoops for cookies (organic cookies of course). And all the devoted bikers, hikers and foodies.

Since the company's humble beginning, the leadership team has always encouraged healthy group activities. As a team, we have completed the Shamrock Run twice, climbed the lava tubes at Ape Caves and even participated in some Bollywood dance line ups!

We also like to partner with clients that promote healthy choices. The YMCA of San Francisco and the California Strawberry Commission are just two of our clients with a mission to improve health and well-being.

So, good job team Emerge. Keep moving and shaking your stuff and here's to our health. Cheers!

CRE8CON Returns to Portland

Fri, 23 Sep 2011 02:22:00 PDT

Emerge had the opportunity to partner and contribute to another local event, the Portland Creative Conference. If you’ve been in the Pacific N.W. for the past decade or so you might very well be aware of this endearing conference aka ‘CRE8CON’.

There are many folks and organizations involved in putting this event on annually and the ticket and raffle proceeds go to supporting arts education in the state of Oregon for grades K-12. After a brief hiatus (seven years), Steve Gehlen, the event chairman and crew are bringing it back – in full force. He came knocking and we happily obliged with a commitment to do a mobile conference site for this year and be prepared and queued up for something fun & delightful next year.

The event kicked off with this intro video produced by Funnelbox Production Studios.

The format and atmosphere for this creative conference is much like TEDx. If you attended TEDxPortland, you’ll know what I mean. One big difference was that most of the CRE8CON speakers had 1-hour for their presentation and most did an excellent job sharing with us mementos from their creative thinking and processes.

The speakers ranged from film, advertising and communications, food, music and radio industries all to ‘explore and celebrate’ the creative process.

Here are some goodies:

Rob Legato – He channeled Martin Scorsese to share something from his experiences to talk about when Legato worked on ‘Key to Reserva’ an attempt to document and preserve a movie that was never made by Alfred Hitchcock. Yes, you read it right, ‘the movie that was never made’.

Watch the trailer, you won't be disappointed. Full English version!

The actual short film on Google has the audio removed due to copyright.

Brynn Bardacke – A quote of her’s I liked, ‘To change is difficult. Not to change is fatal.” I concur. One of her shares also included a story from her TBWA/Chiat/Day days working on the Apple account where she received an email from yours truly, Mr. Jobs, containing five words.

‘Shit copy. Can’t approve.’ –Steve

Jelly Helm - He spoke about how he starts his creative process by asking the question of, ‘What is the deep story?’ And how do you tell that deep story? Picture a very old, tall and wise tree with deep roots.

And I am quite looking forward to the new NBC tv show starting up, Grimm, as in the Brothers Grimm that is being filmed here in Portland with screenwriting by Jim Kouf and David Greenwalt.

My takeaways, rather reminders are that the creative process that feeds and drives creativity in all of us never stops. Inspiration and lessons are had from your peers, environment, competition, your state of mind, state of the economy and experiences both good and bad. Failure can be great. Make it comfortable. Embrace change. Love what you do.

Until next year CRE8CON! We’re already thinking of the possibilities.

Surprise performance by The Last Regiment of Syncopated Drummers.