Safe Journeys, BlogBoy

Mar 1 2013

Brian Lusk was a pioneer. He was at the epicenter of BlogSouthwest. In the beginning there was no strategic blueprint yet to follow. It was all about the bravery of a brand, Southwest Airlines, revealing its soul for the world to see.

With Brian in the middle of it, the strategy just worked out. And the rest made history.

Never before did I think we’d be writing about a guy like Brian this way. For me, the title of Andy Lark’s blog post put it in perspective. Brian Lusk is a Hall of Famer. In a world of so many millions of blogs, he was recognized as the best.

I’ll never forget the meetings, presentations, and work sessions we’d have at Southwest HQ. No matter how many times you do it, presenting can put you on edge. But Brian’s presence in the room always set me at ease. He was the kindest and most sincere person I have ever worked with.

As experimental blogs become really big blogs, things happen. Big traffic sometimes shows up on the doorstep. And we all learned so much together. There were times I’d get a call from Brian about a blog hiccup. But even during challenging times, Brian would just calmly ask me to “take a look at the blog.” Things always are easier to fix when heads are cool. Thanks Brian, for that.

A couple of times Brian invited me to attend Blog World in Las Vegas. Brian was very popular there. But it was kinda funny because I’m not sure how many people knew his real name. Can’t tell you how many times people just greeted him as “BlogBoy” and asked for his autograph!

It seems like over the years social media has really changed people. But it never changed Brian. It was Brian who changed social media. None of the awards, industry recognition, and countless case studies on the success of Brian and the Team ever phased him one bit.

The blogging community has lost an important piece of the puzzle. We should take note of how Brian demonstrated the importance of bringing authenticity — our real selves — to the story. Even though that’s what social media is supposed to be about, it’s a haven for the inauthentic.

We need more Brian Lusks. We need armies of him. We could have fixed a lot in the world with those armies. And you only had to meet him once to know that. But we don’t have armies of Brian. We only had one BlogBoy, and he was such a gift!

Safe journeys, Brian. With LUV to your family and those on your Team at Southwest.

Brian Lusk and Chris Ronan at SWA HQ 4909494822_55870f6c28_o

Launch: Naked Pizza reveals all

Feb 27 2013

NP-postcard-670-9

Pizza. That magical pie that has all four food groups in it. Pizza. That wonderful, round, savory food – perfect at childhood slumber parties or for pulling all-nighters in College. Pizza. Hot or Cold, it doesn’t matter.

I guess they are out there, but I have yet to find anyone who does not appreciate the beauty that is pizza. Even some of the pickiest eaters I know hold pizza in high regard. Ask my three and a half year old son what his favorite food is and he will tell you, “Ninja Turtle Pizza!” (The TMNT’s are back, by the way).

When Naked Pizza approached RD2 about revisiting their current website to make it more user friendly across all digital platforms, all we had to hear was ‘naked’ and ‘pizza’ and we were all ears. We knew from the start this was going to be fun. Naked Pizza has a single goal with their food; to make pizzas that are natural with whole food ingredients with no added chemicals. Their special Ancestral Blend® Crust alone has 10 grains plus prebiotic agave fiber and probiotics. It is pretty amazing.

Naked Pizza is a relatively new company yet they have already garnered much press and praise and are beginning to grow at an expedited rate. We knew immediately the new website had to reach as many people as possible on whatever device they happen to be on at that time. Responsive was the only way to go. Not only did we make the overall website responsive, but we also crafted the special experience for people who are on their phones and want to order pizza or find the nearest Naked Pizza location quickly. Google maps integration makes this experience quick and easy.

Since Naked Pizza already has an established brand look and feel, we ensured that the visual language and colors were echoed in the design execution while adding an extra layer of photography that was focused on fresh ingredients. We were able to apply our Responsive Framework to the redesign and as a result were able to build it in an incredibly efficient way in a short amount of time.

We look forward to some great things with Naked Pizza and cannot wait until they open their first location here in Texas, preferably in Dallas.

Visit Naked Pizza

NP-670-Home1

NP-670-Menu

NP-670-Locations

NP-670-SD

NP-670-About

NP-670-iPad1

NP-670-iPad2

NP-670-iPad3

NP-670-iPhone

Launch: Maxava maximizes availability with a new responsive website design

Feb 26 2013

Maxava is a company that is based on responsiveness. Their products help companies react with agility, “when every second counts for high availability.” The case studies of Maxava tell amazing stories about the challenges companies face today in the world of high available data.

When Maxava approached RD2 to help them update their website, we knew their next website had to be accessible to as many people as possible – it had to be responsive. Given the complex nature of their business however, crafting a new responsive website design involved a substantial UX effort to make sure that all content that was accessible on the desktop was also accessible on any device. Additionally, Maxava was already running WordPress Multisite to support the Cloud Microsite as well as a Japanese installation.

Since their last website launch, it was apparent to both RD2 and Maxava that as their product offering and expertise had grown, so had their audiences. Audience Analysis and Personas research revealed that while some of the target audiences had remained, key messaging had changed to reflect expanding business markets. To that end, a focus on the basics was again necessary: Design, Content, and Information hierarchy.

Focusing on delivering better content faster was key with the redesign. Minimizing the layers of the old website, helping users find points of contact, and clarifying the product offering was regarded as the most important objectives. An added request was the inclusion of Salesforce integration, tying the website and the sales funnel together. Of course, unique user information is now captured to help Maxava understand their visitors, what they download, and how they might improve their CRM solution to better serve their clients and partners.

Keeping in line with other newly redesigned marketing materials, RD2 worked to capture the ingenuity of the company and a sense of control over chaos with clean lines and clear information contrasted with abstract, angular patterns throughout the new responsive website design. Imagery has been revised to more appropriately more global audience.

With the launch, Maxava enters the New Year with a fresh face and confidence that every aspect of the company is engineered to quickly and efficiently respond to all the needs of their clients.

Visit Maxava.com

Maxava gets a new responsive website design | Home page

more…

PowerbyProxi: The Power to Unplug – On Engadget

Feb 25 2013

Screenshot_2_25_13_8_59_AM

For those of us who are techies, this is a big deal. Engadget is the authority of new technology for so many of us. They stay on top of the latest trends. Some of the most important technologies of our age are featured here. It goes without saying, the team at PowerbyProxi are very special to us. To see them featured in Engadget puts a big smile on our faces. The guys at PowerbyProxi are brilliant. They are bravely developing real and sustainable technology in the wireless power space that will make a difference. Congratulations Greg, Fady, and the entire team at PowerbyProxi on the feature!

Tags

Scoble Interviews Andreessen

Feb 21 2013

“All Markets Will Liquify”

Wow. If you are in tech, this is a must watch interview. No matter how busy you are, it’s a fascinating 40 minutes. Kudos to Robert Scoble for landing an interview with Marc Andreessen. We need stuff like this. A level set to remind us that we’re still just seeing the tip of the iceberg.

I’m not sure that I’ve ever seen a video of Marc Andreessen before. But he’s a name many of us have etched into our digital history.

Think back to the first time you ever surfed the web. For me, I skipped the AOL thing. The first time I ever opened a web browser to surf the web was pivotal. I was at a company owned by my pal Chris Hipp called DMPL (Digital Media Performance Labs). He had a few demo SGI Indy computers connected to a T1 line in the Dallas Infomart. There was this thing called Netscape 1. It allowed us to navigate the internet through a graphical user interface. While the first page was loading, there was this indigo blue and black logo. In a white serifed font, the capital letter “N.” It was stepping over the planet. And information with images and hyperlinks populated the page. Stunning.

So, when Robert Scoble interviews Marc Andreessen, and Marc says “all markets will liquify” — then I’m all ears for 40 awesome minutes. Great interview, Robert!

Time to pick ourselves up and take another listen to what’s happening out there. Technology is actually getting amazing’er.

Tags

Back from Down Under

Feb 18 2013

Had a great and productive trip to Australia. First went to Melbourne to see our new friends at Dumbo Feather. Gotta get these issues in the U.S. Then it was off to Sydney to see old friends, new friends, and new clients. Along the way I was sure to take plenty of snapshots. And, I’ve been wanting to try out this new app called Haiku Deck for a while and finally had the chance to put a simple presentation to walk through the scenes from Down Under.


Tags

Launch: RD2 crafts a new responsive website design for The Funding Network, Australia.

Feb 18 2013

RD2 just crafted and launched a new responsive website design for Australian addition to The Funding Network. The Funding Network is a UK based non-profit that takes a unique approach to raising funds for other non-profits…LIVE crowd funding. Having had great success in the UK, the Australian branch is one of several offshoots meant to expand their ecosystem of giving.

With initial setup and funding still in it’s infancy, the Australian arm contacted RD2 to help quickly establish their online presence in a way that was in-line with their published promotional materials, and that would help build buzz about new projects. Designed, built, and tested in just under 5 days, the new website design is both responsive and informative.

In order to more quickly help people identify that this is an Australian-based branch, we opted to use some of the great photography associated with Australia and tie it to each event. Once the event has passed, the Home page of the website will cycle to the next event, highlighting a new place and a new set of charitable projects. Additionally, sign-up forms are on every page to make sure that users never have to flick or scroll far to become part of the movement. Per usual, we recommended this site be a home base for The Funding Network/Australia as they launch their social media information streams and incorporated a blog. Even though the timeline was short, we always insist on making sure our partners are positioned for future growth, which is something we we really hope we see with TFN Australia.

Platform? WordPress, of course.

Be sure to visit the website (on all your devices) and let us know what you think.

The Funding Network, Australia

RD2 crafts a new responsive website design for The Funding Network, Australia | Home Page

RD2 crafts a new responsive website design for The Funding Network, Australia | TFN In Action Page

Tips & Tricks: Creating better textures using CSS3 gradients

Jan 30 2013

Graphic Information is Everywhere

There are two fundamental elements that make up our world and how we understand the information in it: Texture and Color Gradients. These two elements play a vital role in telling us all sorts of information like whether an orange is ripe or whether a button on a website is clickable. In the world of the Web, texture is commonly known as “noise”. Despite it’s prevalent use around the Web, producing noise has always been cumbersome, clunky, graphic intensive.

Creating Noise

Noise is often used to help users distinguish important information from less important information. It is also used to give a website a unique feel or effect. It is almost always rendered in Photoshop and as a direct part of the layer, color, or color gradient on which it is applied. When Photoshop creates it’s Noise Effect, it renders millions of points of varying light and dark pixels directly within the layer on which it’s being applied. This creates a lot of subtle color shifts that are specific to that individual layer, color, or color gradient. Transitioning elements with noise to a website has traditionally meant many large, problematic images and usually a CSS hack or two.

Suddenly, with CSS3 gradients, half of the work was suddenly done! With about 15 minutes to spare, we thought we would try and tackle the other half of the issue…creating a transparent PNG that would create a noise pattern on a variety of colors.

Abracadabra

We knew before starting that as a PNG, we would be strictly limited to Web safe colors and opacity options to create something that normally Photoshop creates unique to each instance.  So we started by creating  a small 250×250 pixel canvas with a transparent background, and then set to work. We then created a new layer, filled it with white, and then added monochromatic Noise in the range of 7-10%. We almost always opt for the Gaussian distribution. Now for the good part…Grab your Magic and do magic.

And Presto! We were able to produce the sweet examples below…

The noise pattern we’ve created here is subtle and perhaps a little large. Although not perfect, we were excited about the initial results. The greatest benefit is that we are able to load 1 small file for every texture on the site.

The Goodies

So of course, we can’t give away ALL our secrets, but what good is having if we can’t share the Love? While the results aren’t perfect, we are happy to have had a successful adventure. Below is the code and resources links to get you started building better textures and a better Web.

Download Noise Background

Solid Background with Noise

background: #575757 url('/images/bg-noise.png') left top repeat;

Gradient Background with Noise

background: #939393 url('/images/bg-noise.png') left top repeat; /* ie fallback */
background: url('/images/bg-noise.png') left top repeat,
            -webkit-gradient(linear, 0 0, 0 bottom, from(#939393), to(#535353));
background: url('/images/bg-noise.png') left top repeat,
            -webkit-linear-gradient(#939393, #535353);
background: url('/images/bg-noise.png') left top repeat,
            -moz-linear-gradient(#939393, #535353);
background: url('/images/bg-noise.png') left top repeat,
            -ms-linear-gradient(#939393, #535353);
background: url('/images/bg-noise.png') left top repeat,
            -o-linear-gradient(#939393, #535353);
background: url('/images/bg-noise.png') left top repeat,
            linear-gradient(#939393, #535353);

View Example

One Color Gradient Background with Noise

In a recent project here at RD2, we built a front-end template for a client. The trick was to create this very complex design using gradients, but to easily change all the colors by simply switching out a single hex value. This is where the beauty RGBA color values and CSS3 multiple backgrounds come in. See the example below:

background: #939393 url('/images/bg-noise.png') left top repeat; /* ie fallback */
background: url('/images/bg-noise.png') left top repeat,
            -webkit-gradient(linear, 0 0, 0 bottom, from(rgba(255, 255, 255, 0.1)), to(rgba(0, 0, 0, 0.5))),
            #939393;
background: url('/images/bg-noise.png') left top repeat,
            -webkit-linear-gradient(rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.5)),
            #939393;
background: url('/images/bg-noise.png') left top repeat,
            -moz-linear-gradient(rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.5)),
            #939393;
background: url('/images/bg-noise.png') left top repeat,
            -ms-linear-gradient(rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.5)),
            #939393;
background: url('/images/bg-noise.png') left top repeat,
            -o-linear-gradientrgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.5)),
            #939393;
background: url('/images/bg-noise.png') left top repeat,
            linear-gradient(rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.5)),
            #939393;

View Example

UPDATE: As happens on the Web, you sometimes find great links and resources after you’ve already done it yourself. As we were pushing “publish” on this post, we found a great tool by Andrew Ckor that we had to pass along: http://www.noisetexturegenerator.com/. It rocks.