USMC Mobile Website

This week, ahead of schedule and under budget, my team delivered a hugely successful mobile deployment for the United States Marine Corps. A terrific example of powerful teamwork and collaboration, this project represents a continuation of the increasingly complex work we’re doing in mobile. With a mobile display layer that accommodates a huge array of handsets and screens, this one was a nice sized effort that required tremendous oversight and a lot of planning & strategy.

One of the biggest challenges with this project was leveraging the existing CMS for content, while presenting larger, longer-form experiences in smaller, bite-sized chunks. We needed to build over an existing infrastructure, a way to take content that was originally (and optimally) designed for a desktop experience, reduce it in both size and scope, and wrap it in a mobile display layer that still reflected both the brand and a look & feel consistent with the desktop experience.

Mission accomplished. Check out some of the shots below, and make sure you take a look at the website in your mobile device.

Pennzoil Fuel Calculator

How do you demonstrate the value of switching to Pennzoil? How do you take a bunch of car data, mash it up with fuel efficiency formulas and communicate (effectively and in an engaging way!) why you should switch to Pennzoil? How do you show, in a tangible way, what those savings represent?

This week, my team launched a Pennzoil Fuel Calculator on Pennzoil.com. I was once again completely blown away by the work my Creative Technology group did on such a fantastic jQuery parallax calculator experience. The Pennzoil Creative team knocked it out of the park with their design work and guidance, and we were able to pick up on their vision and make it a reality. I personally enjoyed watching what happens when you sit creative down at the desk next to developers and get out of the way. Remember, the cleanest lines of communication are the shortest. Put the guy (or gal!) building it next to the guy (or gal!) whose idea it is to build it, and you get sweet, sweet results.

The Arduino/Raspberry Pi Challenge

When you’re responsible for technology, sometimes it can become all too… tactical. You begin to quickly get to “the solution” place and by the time you’re reading this, we’ve already arrived at the end and are just waiting for you to get here. It’s an engineering trap. Forgetting you’re creative. Forgetting that you have a spark, or a natural curiosity; a desire to create things, build stuff. Sometimes you simply forget to come up for air and look around and smell the proverbial flowers.

So one of the first things I did when I took over Creative Technology, Database, and Analytics for JWT was work very hard to focus on the idea, “sure, you’re a developer, I get it… you’re an engineer, but you build stuff… you’re inherently creative and you work in a creative environment… embrace that shit”. I wanted my gang to enjoy using the right side of their brains. So I offered them up a little somethin’ somethin’ to get their creative juices flowing: I would buy anyone who wanted to sign up a Raspberry Pi and Arduino and let them do anything they wanted. Client related, not client related, fun, experimental, new… whatever they wanted. The only catch was, you had to come back in 90 days and give a presentation on your project. You had to tell us what your big idea was, what inspired you, and how you did it… oh, and you had to demo your project.

Five teams signed up. I was impressed right off the bat that it wasn’t individuals that signed up, but that my offer spawned several conversations among like-minded, organic groups (who, I might add, didn’t normally work together… so there’s that!) that evolved into formal ideas. There was a demonstration of Raspberry Pi running Xbox Media Center (XBMC), the open source Home Theater Software. A terrific idea involving geo-fencing/mapping, and outdoor location. One of my lead developers put together a demo/presentation of a larger idea for a “Holiday Card” that could potentially bridge the gap between two remote locations in a fun, engaging, and ultimately very impressive manner (that one I kept in my back pocket. As soon as I saw the idea I just told everyone in the room, “okay, we’re building THAT one this Christmas… you watch”). An iPhone powered paintball gun that was one of the highlights of the demonstration and created such an active discussion in the room, that it went from “An iPhone Powered Paintball Gun” to a “Twitter Powered T-Shirt Cannon” in less than five minutes. Finally, one of the engineers on my team who’s perhaps the quietest person I’ve ever met (he literally sits all the way in the back corner of the office) decided to take my offer of gratis computer power, marry it with a couple of hundred dollars worth of hardware and create a Microsoft Kinect powered, wi-fi enabled, remote controlled car. The beauty of this idea was that you didn’t even need to be in the same room as the car. The car contained all the computational power and network capability, and using node.js, was able to maintain a connection to a remote server that was coordinating the motion and movement. Theoretically, you could control a remote-controlled car on the other side of the world using just your body.

Crazy shit, right?

I relish my technology leadership role, but too often it can become mired in the tactical. The “throw it over the fence and build it” that sort of naturally occurs in these environments with their deadlines and requirements. It’s not bad. It’s the job. It’s just that sometimes it’s nice to stop and smell the roses.

How to have a great conference experience.

My table spot for the conference.


Nothing like a pen and a pad of paper to organize your thoughts

I just got back from “An Event Apart” in Atlanta. This is the second AEA that I’ve attended, the first being in New Orleans several years ago. If you’ve never attended An Event Apart, it’s a truly inspirational conference. Creatively merging design, development, and mixing them all in a tall glass of web standards, it’s really the one other conference, besides Adobe Max, that I feel is a legitimate, “must-attend” learning experience. It’s not for the feint of heart however, it’s a lot of information over a small amount of time. You’re exposed to an eclectic mix of speakers and topics ranging from high level design discussions to low level, technically challenging sessions like the nuts and bolts of CSS, or technical executions of cutting edge HTML5 solutions. It’s not like MAX, where you’re moving from venue to venue over the course of a couple of days, interspersed with keynotes and scoping the sponsor pavilions. You’re essentially in the same place for two straight days (three if, like us, you attended the additional “A Day Apart” session on devoted solely to “Content Strategy”).

Spending two days in the same room can sometimes try even the most patient observer, but the topics breeze by and the challenge instead becomes, “how do I make sure I’m taking this all in?”. Luckily, the brilliant guys and gals at AEA make the presentation slides available to attendees, and armed with an iPad, I quickly discovered the best way to keep up. Each day, before that day’s sessions, I would download all the presentations to my iPad and set it up at my spot, allowing me to keep up with the talking points on a provided pad of paper. Yep, good ol’ pen and paper worked better than anything I could come up with, and leaving my laptop up in the hotel room enabled me to really concentrate on what was being presented.

In fact, this worked so well I think I’m just gonna plan on attending future conferences armed with a moleskine  and a pencil.

Ten minutes of Hype.

So I downloaded Hype from the Apple App store last week. I only just got around to playing with it this weekend and I thought I’d jot down a few thoughts. If you’re running Safari or Chrome, take a minute to check out the home page. I made the little slideshow there in about ten minutes Sunday night playing around with it. I didn’t browse any of the video tutorials, not because I was trying to avoid them, but because when I opened the program for the first time, I wasn’t really trying to do anything with it. I just wanted to see what the interface was like, how it worked, what the palettes looked like, etc. However, it was only a minute or two into it before I said, “hmmm… lemme go about looking for how to set the stage size…” then, “hey, that was easy enough… now let’s import an image or two…”. I had already read a review that mentioned setting up a slideshow was as simple as transitioning between “scenes”, so I began by looking for a way to import images into different scenes, which turned out to be pretty easy. By then I was about 3 or 4 minutes into it and had all my images imported, all my scenes created and named. All that was left was to start playing around with transitions and trying to figure out how to move between scenes to get the effect I was looking for, which was just a simple cross dissolve between images. This actually took the most amount of time, only because I didn’t quite know how things were set up. However, once I got the hang of the Identity Inspector after a few minutes of tinkering, all I needed to do was “Export as HTML5″, choosing the “folder” option (remind me to play with the “Dropbox” option because that sounded intriguing!) and it packaged everything up nicely, providing me with a couple of <DIV> tags that I copied and pasted. Upload the folder containing the javascript (more about that later), and you’re done.

All in all a pretty fun little experience. I didn’t play with the capture/record feature, but reading about others experience with it makes me wanna fire it up. I definitely think it’s a cool tool with a LOT of potential, and an especially polished “version 1.02″. I suspect it’s exactly what Adobe’s going to release as “Project Edge” though, so it won’t be long before some heavyweight competition moves into that same visual design/development territory. Just between you and me, my money’s on Adobe. Speaking of… I did notice that there’s a nifty little “Dreamweaver Preview” button in Hype. Combined with Dreamweaver’s live view, it makes for a nice little round trip workflow. Props to the Hype guys and gals for that little nugget.

The downside? The animations are javascript. No CSS animations, and it doesn’t even use canvas elements. Just wraps it in <DIV> tags. I know weird, right? A quick browser compatibility test confirmed my fears. It works great in Chrome and Safari… but, well… if you’re not using those browsers, you’ll see what I mean. Or, rather, you WON’T see.

So it’s like I said. It’s a great start. Fun little program for a nice opportunity to do some visual design without writing code. I’ll play with it more and maybe dump some examples here. I’m not exactly sure I’d use it for production work just yet… well, maybe for something quick and dirty…

And again, let’s not forget that Project Edge is coming…

Web Directions Unplugged, day one thoughts.

I don’t think I’m going to use the word, “mobile” anymore.

I just don’t think it’s an accurate description of what’s going on. Laptops are mobile. So are tablets. Phones are inherently mobile. It just seems that mobile is redundant at this point, and it doesn’t seem an appropriate portrayal of all of this.

I think it’s better if we all just agree to use the phrase, “device development”. That’s what we’re talking about, right? We’re talking about Galaxy Tabs, Blackberry Playbooks, iPads, Xooms, GoogleTVs, a host of smartphones… the only constants seem to be, A) they have screens, B) they have browsers, and C) they have network connections. They all seems to implement some kind of “App Store”, but the implementations vary. Native Apps seem like a perilous journey, as you’re hitching your horse to a chosen cart. Granted if it’s an Apple cart, your chances seem pretty safe, but what about the rest of the world? Are you comfortable making that choice for a client? Or worse, are you comfortable selling a client on a “multiple native app strategy”?

I spent lunch chatting with a nice gentleman from a very large global airline. His airline has an iOS app. They’ve also got an Android app… and a Blackberry App. He oversees three different teams of developers all with different skillsets that he has to somehow manage and maintain. He’s got a creeping codebase, and from the top, he’s getting pressure on the cost of this whole endeavor. He was in the middle of an epiphany that was fun to watch. He realized, “you know, none of our apps rely on any particular native feature. We’re not using geolocation yet (they plan to down the road, but it’s not something that’s high on his list of “wants” right now) and there’s nothing in our app that couldn’t be replaced by HTML5, CSS3 and jQuery Mobile.” So now he’s rethinking their whole mobile strategy, and I gotta tell ya, I was right there with him.

I’ve said before, I don’t think these technologies are going to replace native app development by any means, and let’s be clear, Apple has a huge… we’re talking giant, interest in keeping native apps at the forefront. They’ll (rightfully) point out that there is a lot of things that Web Apps simply can’t do and for speed, games, graphics acceleration, animation, etc, native apps will always “win”.

See, that’s awesome… if I needed that stuff. But I don’t… really, and there’s the rub. I could take care of my current (and future) clients’ needs with about 99.9% of the features that a web app exposes… and I’d be doing them a service (I think). One codebase, a consistent UI, an effective experience. What’s not to love?

I spent today seeing example after example of open, standard, solutions to the need to create a consistent experience across multiple devices, and I’ve been convinced. I think we’re at a real watershed moment in the development for all these screens and I’m happy to see that the maturity of these tools has allowed such a large and diverse group of developers and designers to move forward in this way. HTML, CSS, Javascript (jQuery)… these are well known, ubiquitous, mature, robust languages and the community has really demonstrated beyond a shadow of a doubt (at least to me) that the future of mobile hasn’t been written just yet.

Whoops! I mean, “the future of device development hasn’t been written just yet…”.

It’ll take some time… old habits die hard, right?

Sleepless in Seattle… at Web Directions Unplugged.

I arrived in Seattle yesterday for “Web Directions Unplugged”, which begins in a couple hours. Thanks to an early flight and a time-zone shift, it’s 5:30 AM (which is roughly 2:30 AM East Coast Time) and I’m wide awake brewing single cups of Starbucks in my room and getting annoyed by the looping Sheraton Starwood promo on Channel 1.

Why do I always turn on the TV and just leave it on that stupid channel? I only realize it ten minutes later when I hear the words, “Vibrant Social Spaces” for the forty-fifth time.

Anyway, I’m here for a terrific mobile conference that really couldn’t come at a better time. I recently (this past week) upgraded to Adobe Creative Suite Web Premium 5.5 and, as I’ve said before, it’s the most significant upgrade to the product that I’ve ever seen. Integrating jQuery Mobile, PhoneGap, HTML5 and CSS3, this version facilitates the creation of Mobile Web Apps like no other product I’ve ever seen. So like I said, the conference is just absolutely the best conference at the most perfect time. Billing itself as, “two groundbreaking days of practical development and design presented by leading experts in the exploding field of HTML5, CSS3 and Javascript based mobile development” it’s going to be jam packed with terrific speakers, including a couple of speakers from Adobe. Greg Rewis will be speaking on “From Web to Mobile App in 60 seconds” featuring, what else, Dreamweaver CS 5.5, which I can’t wait to see.

The conference has three tracks that focus on three different aspects of mobile development. There’s a “Design Track” featuring content strategy, CSS3, UI prototyping, and touchscreen design (remember, it’s fat fingers, not tiny cursers!). The “Development Track” is going to take a look at maximizing speed and efficiency in your mobile app, HTML5 canvas, offline storage and geolocation. The last track is a “Platforms and Solutions Track” and focuses on the various mobile platforms, devices, and services. They’ll take a look at Android, iOS, and something called, “Blackberry”. Javascript frameworks and packaging technologies like jQuery Mobile and PhoneGap are also going to be featured as part of the Platforms and Solutions Track over the course of the next couple of days.

So like I said, it’s just an excellent conference that’s happening at a perfect time and I’m really excited to get started. I’m going to try and blog my thoughts about all of these technologies and platforms over the next couple of days. Rather than try to “liveblog” the event as one running post, I’m going to switch it up a bit and drop smaller posts about sessions and speakers as they inspire.

First, however, I wanna go get some breakfast. Damn it’s early.

Introducing Project Edge

Last year at Max, there was ONE demo that rocked my world. In fact, it rocked my world so hard, I went on a mission to find Doug Winnie and pick his brain. I was singularly focused wandering the expo hall like a zombie asking everyone wearing a black shirt, “hey, have you seen Doug Winnie?”

It was code named, “Edge”. It’s described as, “an HTML5 animation and interactive design tool”.

Did you read what I just wrote? Stop for a minute. Go back and slowly let that sink in.

The company that owns Photoshop, Flash, Dreamweaver, inDesign, After Effects, Flex, ColdFusion and a whole host of other visual design tools is developing a product that allows you to create interactivity and animation with web standards technologies like HTML5 and CSS3.

When I saw the demo in LA last year, I practically shit myself. I literally can’t wait for this product, and I want you to know, I didn’t use the word “literally” where I should’ve used the word, “figuratively”. No, I literally can’t wait for this product.

Watch Doug give you a couple of brief overviews:

My favorite new feature of Dreamweaver CS 5.5 is a one-two punch in the face.

I only briefly blogged about Dreamweaver CS5.5 the other day and embedded what I thought was a great video of Greg Rewis going through all the bells and whistles of the latest release. He’s got a great blog post on the subject, so I felt like the topic was being covered pretty well.

But I realized, dammit, I love this product so much that I’m gonna go ahead and toss my two cents out there regardless. I think over the next month or so I’m going to try and blog as much as I can about little features, tips, tricks, and particular things that I love about the app that maybe people who are new, or perhaps haven’t dug into it might not be aware of or maybe haven’t had an opportunity to use.

The first thing that I want to point out is what I call, a “one-two punch in the face”. This is the combination that just knocks me out.

I don’t even really need to start a discussion by saying things like, “hey, have you heard? Mobile is big now…” or, “have you seen these ‘smart phones’ that all the kids have these days?”. I think now, all we need to say is, “Mobile is here. Now”. For years and years people have been talking about it and I sat in on sessions at Max in the early part of the “aughts” that predicted this as, “just around the corner” but I don’t think any amount of hyperbole could be used today to describe the impact of mobile on workflows. It’s for this reason alone that I’m excited enough about Dreamweaver CS5.5 to make sure I got my pre-order in the day it was available.

With this release of Dreamweaver, Adobe has added two features that, I know at least for me, are game-changing. jQuery Mobile support, and PhoneGap. Let me be clear, too. It’s not just “support” for the PhoneGap framework. It’s the PhoneGap framework built right into Dreamweaver. We’re talking package your app for app stores and launch the emulators right from within Dreamweaver. Web developers can now call native APIs like notifications, camera, contacts, etc from PhoneGap now within Dreamweaver CS5.5! My friend, Scott Fegette over at Adobe has written an excellent overview piece on how this integration looks in the upcoming release. Check out this money quote:

For Android, the complex process of installing, configuring, and verifying the Android SDK has always been a bit of a chore. Dreamweaver CS5.5 takes all the pain out of this process by providing an “easy install” option, which will do all of the above for you in the background. Although the Apple iOS SDK tools are subject to a different licensing model (and only available on the Mac platform), once you’ve installed the Apple iOS SDK (or Xcode from the Mac App Store), you simply point Dreamweaver CS5.5 to the /Developer directory on your hard drive and you’re ready to go.

Now, I’m not even about to go down a road about how this “replaces app development”, or “now you don’t have to learn Objective C or Java for Android”. Nope. That’s not the case at all. I think those skills are still going to be needed, but what I do see is the ability to deliver mobile content to a wider audience of clients and customers without the barrier of a potentially costly endeavor.  Look, I’ve got clients who don’t need a game. They might not need an overcomplicated app requiring a computer science degree. They’re clients who have an idea or a product they want to expose to the mobile space where a nicely wrapped HTML/CSS/jQuery mobile experience is perfectly acceptable. Both from a cost standpoint and a deliverable experience standpoint. I think there are plenty of opportunities worth exploring for a wide variety of clients who probably haven’t gotten into the app space precisely because of what I’ll call, “the app barrier”. Now, I think it’s safe to say that Adobe and Dreamweaver have significantly lowered that barrier and allowed me to provide tremendous value to clients.

For more information about all of this, you simply MUST go check out the Dreamweaver Channel over on Adobe TV.

Why I pre-ordered Adobe Creative Suite 5.5. Yes, pre-ordered.

I’ve never pre-ordered software before in my life. In fact, I’ve always given software a wide berth upon release, hoping for that eventual “0.01 update” that gets those inevitable kinks out of before I install it and jump in. So I guess I’ve always been a little conservative with regards to that type of stuff.

Not this time.

Take some time and watch Greg Rewis walk through the creation of an HTML5/CSS3 based workflow using Dreamweaver CS5.5. Watch how he creates documents for multiple screens. Watch how he uses Dreamweaver’s built-in webkit browser. Marvel in amazement.

I’m getting this sight unseen.

From Adobe TV:

Explore all of the new workflows for creating for the web and mobile devices. See how Creative Suite Web Premium 5.5 allow you to create and deliver standards-based websites apps and immersive digital experiences across desktops, smartphones, tablets, and televisions. Author content with HTML5, CSS3, and the JQuery mobile framework; target multiple platforms including Android™ operating systems, iOS, Blackberry RIM and Adobe AIR.