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.

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. 

“I hate that place”

I hear that so often these days. From friends, from co-workers, from Twitter followers. Seems like everyone hates Facebook.

So why are so many people still using it?

I don’t post pictures there. I don’t upload video there. My only participation is to use it as a broadcast medium to point to the place where I control the universe. Here. I might share a link or two, but they’re also shared here as well. I don’t want Facebook to actually have any of my content. It’s mine. Not theirs. They don’t have any right to my family photos, my videos, my thoughts, my ideas. They make money off my stuff. If all of a sudden everyone stopped giving Facebook all their shit, Facebook would be completely value-less. Facebook’s whole value is wrapped up in your eyeballs. Increasingly, they’re becoming a walled garden. I saw a post the other day comparing them to AOL, and I thought, “that’s perfect”. AOL used to be a lot of people’s “internet experience”. You’d sign on to their world, play around in their playground, interact with their users, then log off. Once you started sniffing around outside their walls, they were essentially done. People went, “waitaminute, you mean there’s all THIS out there? Why didn’t you tell me?”. Then it was all over for AOL.

Seems like the same thing’s happening with Facebook.

It’s the end of the year. Time for people to start writing those “retrospective” posts looking back on “the year that was” and a lot of them seem to be themed around the idea of “moving on from Facebook”. People seem to be coming around to the idea that there’s life beyond 500 million users. That juggernauts can be stopped cold in their tracks. That there will be a “next big thing” and they’re already starting. That can’t bode well for Facebook, but it could be good for users.

See, I think, as an idea, Facebook’s great. Share shit with your friends and family. As a platform, it’s been great as what I would call, “the first iteration” of that idea. Sort of a “here’s how you do it and make it easy for people”. What I think it’s failed at miserably though, is the obvious obsession with monetizing the idea. In an effort to somehow get money out of an idea that’s inherently NOT a money making idea, they’ve had to open the “social graph” to people who weren’t part of your conversation in the first place.

I was talking with my friends and family. Who invited Coca-Cola and Toyota?

Then there’s the whole notion of Facebook making money off of my life. Seriously? You take my photos, my videos, my thoughts, my ideas… and you monetize them so YOU make money? And you don’t offer me a cut? How does that work?

Turns out it doesn’t. At least not very well. In order for Facebook to make that money, they’ve got to run completely counter to their idea. They have to open what was originally a very closed idea. I liked it when the idea was closed. I liked it when I had friends, I could share, they could share, and that was our world. Now, this whole, open platform environment runs counter to my comfort level and the comfort level of most users. You think I want all my friends to see my activity on Huffington Post? Do I want everyone I’m friends with on Facebook, business Friends, personal friends, family, to see what I like on Buzzfeed? You think that’s appropriate? I don’t. It’s also not the deal we signed up for.

So what happens now? Well, it’s anybody’s guess, but judging from some of the conversations out there, we won’t have to wait long to find out. There are a lot of really smart people out there who see this coming and are already working on solutions to “the Facebook problem”. I’m confident they’re smarter than Zuckerberg, too. Here’s the best part, you don’t have to “train” a new audience what the idea of Facebook is now. All you have to do is be the one who comes up with the next, “It’s Facebook, but better”.

Hey, here’s a question…

…and I genuinely don’t know the answer.

I recently attended the Adobe Max conference and was one of about two thousand lucky recipients of a new Google TV. The unit, a Logitech Revue, arrived last Thursday, and I blogged about my initial reaction on Friday. Since then, I spent the weekend playing around with it more, customizing the UI a little, adding my own bookmarks, deleting some that I won’t use, moving some stuff around, and generally playing around on it, and I have to admit, it’s not bad. Combined with a nice little, entry-level HDTV (40″ LCD, 60Hz, HDMI) it’s a pleasant experience, and I stand by my initial reaction. It’s not bad, in fact, once I realized that I could watch videos on my TV over the weekend, my appreciation of it skyrocketed. I don’t have an HD converter box in my back room, so it’s just straight cable, and as a result, I’m not using the box to its fullest (no DVR functionality, no “Live TV”). I also still stand behind my sort of “consumer confusion empathy” point of view as well. I see the potential, but I don’t know if the mainstream consumer walking into a Best Buy is going to think, “oh, I need that” and move to spend $299 on a device that, at least in my mind, competes for Xbox, Playstation, Macbook AIR, and iPad eyeballs. Each makes a compelling argument. If I’m going to spend $299, why not just spend another $200 to get a dedicated little portable tablet that can browse the web, view video, and has the added benefit of being portable?, etc.

So it got me thinking. Google just reportedly offered $6 billion for Groupon. That’s a lot of money. Why couldn’t Google spend a portion of that subsidizing the shit out of Google TV? Why is it $299? Why not $49? Why not offer every television, DVD, Blu-Ray, game-box, manufacturer subsidized versions of Google TV as well? Why not offer every set manufacturer a $500 incentive to pass along to the customer? Imagine you walked into a Best Buy or Target to buy an HDTV and there were two models, both 42″ or 50″, whatever. One was $1500 and the other was $1000? Or more realistically, one was $1000 and another was $500, then on sale it was, say, $399? The only difference being the cheaper one had Google TV built in? Or even better, what if, for every HDTV you bought, Wal-Mart offered you a free GoogleTV? Imagine the ancillary sales for Logitech for cameras, Harmony remotes, etc?

Part of my frustration was the lack of content and apps when I powered mine up. Now early adopters are used to that. I had an Android phone for months before there was even one compelling app to download from the marketplace. I played Rainbow Six online with the same dozen or so complete strangers for months before anyone else I knew was on Xbox Live, so I’m used to being in virtual deserts, but how compelling would it be, from a developer standpoint to know that after this holiday season, everyone who bought a television was going to be a Google TV user on December 26th? Six billion (with a “b”) is a lot of fucking money. I think it’s technically a shit-load. One sixth of that is still more money than I can fathom, and I can fathom quite a bit. If you’ve got 6 billion to drop on something as ridiculous as Groupon, don’t you think you could put a little of that cheddar behind something you actually own and developed in an effort to see it gain traction?

What am I missing here?