Black & Decker’s Highly Customized Mobile App

R2i created a highly social Black & Decker site, specifically branded “Recharge Your Yard,” which aggregates conversations about electric outdoor tools happening in real time, promotes widespread interactive features, and makes use of a range of user-generated content.

As a large brand, r2i recognized the B&D app needed to be scalable and assessable from an end-user experience, and the best way to do this in a high-value manner is through an web mobile optimized app. The app was designed to leverage the web site and content management system (CMS) including social media, conversation and user generated content while creating a mobile user experience tailored for all smartphone and tablet devices.

The site, built using an open source CMS, had many community portal content types such as Twitter & Facebook, videos, ratings, surveys, videos, discussions, detailed product specifications and a store locator map. Calls to action were created to engage the users deciding what products to purchase and to encourage switching from gas powered to electric powered equipment.  This includes the “Should You Go Electric” wizard, which helps the consumer determine whether or not they would benefit from their outdoor tool. Widgets were also created that presented a real time Twitter conversation stream with integrated geographic tagging displayed on a Google map. R2i also created a B&D story submission section to showcase specific user experiences with the products.

View the B&D case study here.

Mobile Optimized Design & Development Best Practices

When developing a mobile optimized app there are a number of design and development best practices organizations should follow. First, design for the optimal mobile experience (UI/Design/Functionality) then, content decisions will fall easily into place. Here are a few key details to remember:

• Create re-usable business logic and data layer methods

• Use mobi/m.dot – with automated redirection

• Don’t just re-purposed your website- it needs to feel personalized & interactive, be populated with high value content, render quickly and have analytics/behavior tracking in place / SEO.

• Coordinate Your Resources- U/I Designer (for usability), developer/QA (for functionality), information Manager for content)

Template Considerations:

• Keep file size small – Consider the end-user’s bandwidth and data rates

• Keep server requests to a minimum – Keep files to a minimum: combine CSS files for skin, combine images into sprites, and combine JavaScript (JS) files

• Resist heavy script usage – Utilize CSS 3 transitions and animations for a smoother look

• Use a server side detection and redirection – This approach keeps device from loading the desktop version until it hits a JavaScript or meta redirection

Business Considerations:

• Information Architecture & Content  – Filtered to what is most needed

• Functionality First – keep the end-user experience in mind at all times; K.I.S.S. (Keep It Simple Silly)

• Differentiate – if the market is crowded with identical concepts, do something different

• But Learn from Others – check out similar/competitors apps, use what features and design elements works, change what doesn’t

• UI Design is Critical – clear and accessible to all potential users; screen size, resolution, “touch-ability” are critical; test wireframes and mock-ups with potential users

• Don’t Forget the Icon – your app and brand needs to stand out in both graphic and name

R2i understands that a mobile app is an extension of your brand, a platform connecting your target audience through a seamless online experience. We help with the vision, creation, and tracking of your mobile apps to achieve your marketing goals and functional objectives. Working together, r2i can help you leverage your brand by providing cross platform mobile apps. Learn more about Black & Decker’s “Recharge Your Yard” today or contact us at info@r2integrated.com for more information.

HTML 5 continues to break technical barriers by bringing desktop/client-side-based power and functionality to the browser. To showcase HTML 5, Google went beyond the “Hello World” sample with what they consider a true platform.  In the simplest terms, Google Wave is a next-generation email application. It’s the traditional email client functionality with an insanely intuitive and collaborative social media twist, plus an extendable API, and a bunch more.

Google has a knack for identifying and supporting the people who are ahead of their time with a cool and strategic technology.  Two rock stars in the Google world are the Rasmussen brothers, Lars and Jens. You may remember them from such applications as Google Maps. The story goes that a couple years back they were brainstorming about the next big thing, and as Lars eloquently put it, “We set out to answer the question: What would email look like if we set out to invent it today?”

For more than two years in a secret lab located in Sydney, Lars and Jens approached email behavior like an innocent child absorbing the outside world for the first time. With their imagination, curiosity, and a clean-slate perspective, they made incredible observations and conclusions, some of which embarrass you with their common sense. Ultimately, the Google Wave team reinvented email, messaging, and media in a collaborative message vehicle they call a “Wave.”

The Wave is a conversation that has attributes of messaging, social functionality, media, categorizing, interactivity, and sharing. So how does it work? First you create your own Wave (as in email or messaging) and send it to one or more of your contacts. That’s when the fun starts. The message becomes part wiki and part Facebook wall, where you can collaborate on all or part of the Wave. In a hypertext manner, the Wave departs from the traditional linear messaging thread to an evolving conversation element in a social cloud.

You have to play with it to really understand. Google Wave is one of those technologies that gives you an “ah ha” moment, when your current email experience becomes instantly and hopelessly obsolete. You’re going to want to jump on this ASAP and bring your world of contacts with you.

Google Wave Dashboard

As Tim O’Reilly states, “A key point here is that Google’s relentless focus on reducing the latency of online actions is bringing the online experience closer and closer to our real world experience of face-to-face communication.”

What is a Wave according to Google?:

• A Wave is equal parts conversation and document. People can communicate and work together with richly formatted text, photos, videos, maps, and more.
• A Wave is shared. Any participant can reply anywhere in the message, edit the content and add participants at any point in the process. Then playback lets anyone rewind the Wave to see who said what and when.
• A Wave is live. With live transmission as you type, participants on a Wave can have faster conversations, see edits, and interact with extensions in real time.  

Google Wave Sample

Technically Google Wave is more than an end product. As Lars states, “The Google Wave product (available as a developer preview) is the Web application people will use to access and edit Waves. It’s an HTML 5 app, built on Google Web Toolkit. It includes a rich-text editor and other functions like desktop drag-and-drop (which, for example, lets you drag a set of photos right into a Wave).”

A Wave has very non-tradition ways to actually perform work and communicate. For instance, say recipients are now participating in the Wave. If people are active at the same time, a Wave behaves like an instant message, except that you see each character as it is typed. You have the ability to enter a Wave at any point in the document/conversation. There is even a playback feature that allows you to go back in time and see the Wave from any point in its history.

Google Wave is really a platform with the ability to extend functionality via a set of open APIs that enable developers to embed waves in other Web services and build extensions. Of course, true to Google’s philosophy, they intend to open-source the Google Wave code. This is always a win/win for Google and community of developers adopting their platforms.

Some API Extensions: 

• Polly: an embedded poll/survey. In the wave shown below, participants are asked whether they can make it to a party. Responses appear immediately in the wave.
• Bloggy: A blog client, lets you make a blog post as a Wave. When people comment, they join the conversation.
• Spelly: A spell-checker that uses the entire Web as its dictionary.
• Linky: A link-recognition engine that is clever enough to recognize the link you just entered (e.g. a YouTube video or a link to a photo) and give you the option to embed the target of the link into the Wave.
• Buggy: A bug-reporting tool that can also be a participant in a Wave.
• Interactive Games: Here’s a real-time interactive chess game in Google Wave:

Google Wave Extended API - Polly

Useful References:

• wave.google.com: Current home for Google Wave.
• code.google.com/apis/wave: API extensions, documentation and sample code.
• waveprotocol.org: home for the protocol specs (draft), whitepapers and a discussion forum about the open Google wave protocol
• http://en.wikipedia.org/wiki/HTML_5: HTML 5 wikipedia resource

WordPress.

If you have never used WordPress, you are in for a nice surprise!  This open-source (and free!) content management platform has one of the cleanest, most user-friendly interfaces I’ve seen and it’s extremely easy to learn how to use. Look at the screen shot below for a behind-the-scenes glimpse of the management dashboard.

It is usually easy to install (depending on your hosting environment), and it is surprisingly SEO-friendly. Since blogging platforms like WordPress, Blogger, and BlogSpot hit the scene, search engines seem to be paying special attention to them. In comparison to traditional sites, blogs tend to be updated more frequently, consistently, and allow a level of communication and collaboration similar to Wiki’s. All three of these things when working in combination create an environment online that Google apparently likes quite a bit. Of course, there are a lot of other things to consider with regard to SEO.  See the Link for more information or contact us.

With regard to design, you can adjust your WordPress site to look however you would like it to appear. There are out-of-the-box “themes” you can download and install, and if you have a designer/developer handy, you can customize that theme. (WordPress calls the site template a “theme” whereas other systems use different terminology. A Wordpress theme consists of the design, layout, menu and styles.)

There is an active and growing community of developers which work to make the already-free system even better. All types of interesting plug-ins are available (“plug-in” is the terminology WordPress uses to describe add-on functionality that can be installed on the base WordPress framework such as a form generator, basic commerce, games, etc…). Many large enterprises and publishing media organizations are even adopting WordPress for their blog sections. See CNN’s Political Ticker; Dow Jones’ All Things D; Fox’s GretaWire; Time Inc’s The Page; People Magazine’s Style Watch; famous bloggers like Dan Lyons, Om Malik, Curt Schilling, and Robert Scoble; blogs for Flickr and Second Life; and many more.

DotNetNuke.

The other content management system that’s near and dear to my heart is DotNetNuke, also called “DNN.”  Also open-source (and free!) DotNetNuke (DNN) is a power-house framework, used by many large and small organizations and is capable of a wide variety of basic to advanced functionality. One main advantage of DNN is that it can be used to easily create and administer your company’s website, and it can also be used for intranet and extranet portals.  It has a modular framework structure with a large community for support and active vendor community for additional functionality not included in the core framework.  DNN competes with other popular open source CMS; for example: Joomla, Drupal and Ruby.

DNN includes over 30 “plug and play” modules (DNN calls functionality-adding applications “modules” – synonymous with WordPress “plug-ins”) such as Wiki, Forum and Chat that allow content managers to add functional content easily to sites.  DNN also has an intuitive management interface for content managers to do actions easily such as:

•    Manage roles and groups of users
•    Add pages and dynamically create a menu
•    Modify site design and layout
•    Easily manage massive amounts of content
•    Integrate the system with other systems you’re using
•    Create Intranet and Extranets
•    Create multiple portals

DotNetNuke and WordPress

There is a debate as to whether WordPress is a CMS.  It can certainly do many of the same functions as a CMS.  Our feeling is DNN and WordPress both have a place and often will be used together on the same site.  A solution like WordPress is not ideal for you if you require outside system integration, advanced commerce features, menu navigation, or other features required by larger enterprise organizations.  While DNN is considered overkill at times when all organizations require is a blog or a more text based site.

Of course, there are other open source and free CMS available and even more commercial systems. So how are you supposed to choose amongst the hundreds?  Focusing on the main purpose of the site is one key.
Here are some initial questions to help determine the direction to go with your CMS decision:

•    How will you use the system? Are you using it for a specific purpose such as a blog or need a full scale set of broad functionality?
•    Are you using it to put up a corporate, personal or social networking site?
•    What are the technology requirements?
•    What types of features and functionality does the new site require?
•    Will the site require outside integration of data or information?

See our detailed list of the Top Content Management Systems

Go back to the main R2integrated.com blog

Return to the R2integrated.com homepage