In the video below you can see on the left hand side what the test person watched. The video on the right was reconstructed purely based on the measured brain activity. Obviously it has ways to go until you’d be able to clearly see what someone else saw or thought about but it’s a pretty radical breakthrough in regards to reading someone’s mind eventually. Good or bad? Probably both.

We’ve added a ton of new work to our main site recently, but one thing that might not be immediately evident is that the site is running on a new content management system (CMS) built with Drupal 7. For years we’d been limping along with a custom-built CMS, but after we built a few Drupal sites we decided it was time to bring that knowledge home.

A Few Goals of the Project:

One CMS for Multiple Sites

Earlier this year we attended An Event Apart Boston, and knew that we needed a radical re-think on our approach to our web work. So when we started mapping out the new CMS we decided that we would not only support our existing Flash site, but build out a mobile site that would allow us to experiment with the latest responsive web design techniques. The end result is a CMS that generates XML feeds for the Flash-capable experience, but detects iOS/Android mobile users and gives them an HTML experience that’s been designed for smaller screens.

Don’t Wait to Get Started: Release, Then Iterate From There

We knew that a fully mobile-first, responsive re-design of the site would take more time than we had, so we decided to do what we could and iterate from there. So: the mobile experience uses Drupal’s Mobile Tools module to funnel mobile users to one of two themes, one for phone-sized devices and one for tablets. We went with separate themes to sidestep the issue of delivering unnecessarily-large images to the smallest screens. We view this as an interim step to something better. The recent responsive redesign of Palantir.net shows that a fully-responsive design can be done in Drupal, so that’s the next step.

A Few Things We Learned:

Drupal 7: A Newscaster Who Sometimes Doesn’t Wear Pants Behind the Desk

Drupal as a CMS consists of core modules, and third-party contributed modules. So while the core modules were ready for primetime and a big improvement over Drupal 6, there were a bunch of third-party modules that were…a little rough around the edges. Metadata for our images was particularly hard to implement, because we were using the Media module that was still in a state of furious development. We also decided not to manage video assets via Drupal, because the support for embedding video directly wasn’t quite there yet. Instead we’re hosting our videos on YouTube, because their entire business is based on making sure video is delivered in the correct format for the user—mobile or otherwise.

We also couldn’t find a good module to translate content to XML feeds for the Flash site, so we wrote custom views to do that instead. Which brings us to the next key learning:

Bring Your Machete

Drupal is remarkably flexible. Part of the price you pay for that flexibility is that the HTML markup it generates is extremely DIV-happy. A single content field could be wrapped in a thicket of DIVs. Towards the end of our project most of our work involved pruning the markup so that we could get it close to what we had in our HTML mockups.

Move in Circles, or: Fingers are Fat

The development cycle for the mobile site was a departure from the conventional design -> build -> ship model of web design. Instead we designed and built the mobile site, then started to test it over the course of several days, using a wide array of devices. You can use mobile device emulators (like the iPhone/iPad Simulator that ships with XCode), but there’s no substitute for testing with a real device. We ended up tweaking a few things with our design (especially for the phone layouts) to accommodate the lower precision of fingers/thumbs. We then implemented those design changes and tested again. The end result was a more organic, iterative process that we’re testing out on projects moving forward.

There is no Finally…

The great thing about releasing something is that it gives you a good marker from which to evaluate things before plunging back in. The mobile version for our site will continue to evolve as we get better at shaping Drupal’s output. It’ll also get better as we slowly integrate the new things we’ve learned in the meantime with respect to adaptive/responsive web design. In the meantime we hope that we’ve improved the experience for our users.

If you’re interested in the latest in adaptive/responsive web design, we highly recommend Responsive Web Design by Ethan Marcotte, and Adaptive Web Design by Aaron Gustafson.

Content (and Mobile) First

For years A List Apart has championed the idea that users, content, and standards are the basis upon which web design should be built, and in his talk opening the conference Jeffrey Zeldman continued to reinforce this core ideal. However, he also made the following statement:

RIGHT NOW is the best time in more than a decade to create websites and applications.

That’s a strong statement, but you can certainly feel renewed energy in web design after a period of stagnation. Part of that is due to browser makers adopting advancements in html and css more rapidly, but in my opinion the largest factor has been the disruptive emergence of mobile browsing. In his talk “Mobile Web Moves”, Luke Wroblewski put up some key statistics, and the one that caught my eye was this one:

Mobile phones will overtake PCs as the most common Web access devices worldwide by 2013

What does this have to do with the central idea of content? The emergence of mobile usage is interesting from a technology standpoint, but Luke Wroblewski also cast it as an opportunity to re-focus on the content side. To paraphrase him quite liberally: we’ve increased scrutiny on content that we provide to our mobile users, but why should it stop there? Shouldn’t this be an opportunity to cut the fat from our “desktop” sites as well? Wroblewski has given several talks proposing that writers, designers, and developers should think “mobile first”, and layer enhancements on top of that for devices (mobile or desktop) that have better capabilities. This stands in stark contrast to the more common practice of taking the desktop experience, slashing out non-essential pieces, and serving up what’s left as the mobile version.

Responsive Design

Ethan Marcotte delivered a talk titled “The Responsive Web Designer’s Workflow”. Responsive web design has been one of the hottest (and controversial) trends over the past year (Media Queries has an ongoing collection of notable examples), and it was refreshing to see Marcotte dive into the topic. He started with the philosophical basis, covered the tools/techniques he uses, and finally presented a case study: the Boston Globe, redesigned as a responsive site. The redesign is expected to be unveiled this summer.

Responsive web sites catch attention for visual reasons – it’s easy to get excited by how the design changes depending on the user’s browsing context, from mobile phones to tablets to widescreen desktop monitors. Focusing on layout, however, ignores the whole reason behind responsive design: to present content to users in a visual context that scales with their device’s capabilities. Marcotte and Wroblewski are essentially saying the same thing: start with good content, and then figure out the best way to present that content to your user given what you know about their viewing context. In this way the user on a mobile device isn’t getting a patchwork, dumbed-down subset of content, but instead the full content with a visual treatment appropriate to their context.

In the middle of his presentation Marcotte put up a quote from Jason Santa Maria:

The framework for what a page is has changed considerably even in the past few years, though our applications for designing those frameworks are still stuck in the web of yore, and largely dictated by their use for print design.

Santa Maria was referring to applications (Photoshop/Illustrator/Fireworks), but Marcotte used the quote to draw out a larger issue with traditional production workflows. To illustrate this showed two slides. The first illustrated a more traditional, linear approach to creating a site:

Slide courtesy of Ethan Marcotte

He then followed that slide with one depicting how the workflow for responsive sites follows a more organic, iterative model.

Slide courtesy of Ethan Marcotte

This is a process that acknowledges the rendering differences across devices, and allows the designers and developers the leeway to adjust to what they see in actual testing and usage. It’s something that I hope can make its way into the process here at 160over90.

There is No Page

One of my favorite talks came from Mark Boulton, the designer and author/publisher behind Five Simple Steps. He began his talk “Outing the Mind: Designing Layouts That Think for You” with an overview of typographic grid design through history, and then launched into the back half of his presentation by saying that the web has flipped everything on its head. Where previously designers worked from the page in, Boulton now urged them to work from the content out. He called this “Designing for the Mess”, which in my opinion elegantly captures the tension between the web’s wide-open, multi-linked nature and the desire to enforce some form of visual coherence. In practice this means taking the core elements of your content and using those as a basis for your grid system, as opposed to designing a grid and then forcing your content into that structure.

Here Come the Tools

I’ve been playing around with jQuery and CSS3 animations more and more in the last couple of years, but one thing I’ve always wished for is a solid tool for visualizing these animations. Whatever you think about the Flash format, it has a relatively intuitive timeline-based authoring tool. Why is there no counterpart for creating CSS3 animations? Well, at AEA Andy Clarke showed off Animatable, which is an entirely browser-based tool for building complex CSS3 animations. I’d seen a movie demo of Animatable prior to AEA, but as Clarke walked through a live demo based on the CSS3 Madmanimation piece my head was spinning with the possibilities.

Opening (responsive) screen for Madmanimation

I was glad to see that Clarke was quick to steer the discussion away from the typical knee-jerk “this is the end of Flash” sentiment. I think Flash will continue to be used in contexts where its strengths are best put to use, and at the same time CSS3 animations will continue to give designers alternative options where they previously had none. I can’t wait to try out Animatable and see where it fits into our ever-expanding toolbox.

Do it Yourself

The final day, dubbed “A Day Apart”, was split into two. In the first half Jeremy Keith walked through the new HTML5 elements available to designers, and highlighted the ways in which those could be used right now. In the second half Ethan Marcotte (him again!) focused on CSS3, and the options for web fonts, transformations, and animations. Ending the conference with a practical workshop day was a good idea – it reinforced the previous two days with techniques for immediate use.

I emerged from the conference inspired but focused. I haven’t highlighted the other presentations from the conference, but I found all of them to be worth my while. What could be done better? I hope that the conference organizers are thinking about capturing and distributing the presentations on video (much like the TED conference makes some of their talks available). There’s thousands of web designers who could be inspired by these talks, and it would be a shame if they didn’t have access outside of actually attending the conference. I’m not arguing that access should be free, just that there’s a broader community out there that needs to hear these ideas.

On a final note, I was struck by how generous the speakers were with their time during the breaks between sessions. In my opinion that’s always been a hallmark of the web design community at large, but it was extremely encouraging to see the passion the speakers brought to sharing knowledge and building community away from the podium. That’s arguably more important than any idea or technique they could have shared up on stage.

DARK SIDE OF THE LENS from Astray Films on Vimeo.

Making Future Magic: iPad light painting from Dentsu London on Vimeo.

Amazing effects achieved here. Images are animated on the screens of moving iPad’s then photographed in timelapse. The result enables one to light paint 3-d forms.

Hey, remember that movie Space Camp, where the kids get accidentally launched into space? Well, I came close to that cinematic glory on my recent vacation to Florida, when I went to (watch) the Space Shuttle Atlantis launch in Cape Canaveral.

It was the perfect experience for an ex-Space Camp Nerd-turned-writer, and a sad send-off to the space program. Needless to say, it was an incredible day. The viewing area was set up about 6 miles away from the Cape Canaveral launch site at the Kennedy Space Center, so we entertained ourselves with Astronaut Ice Cream, flight simulators and IMAX movies about the Hubble Telescope while we waited for the countdown. There was also a “Rocket Park” filled with to-scale models of nearly all the aircrafts throughout NASA’s history, including a replica of the Space Shuttle Atlantis, as well as one of the Mercury capsule, Freedom 7, that sent Alan Shepard to space in a compartment about the size of a bathtub. (FACT: did you know the outside of the space shuttle is made out of silica tile that can be safely handled at nearly 2000 degrees Farenheit, only ten seconds after removal from a high temperature oven?)

The launch itself was really impressive, and the day was so clear that we not only got a great view of the shuttle as it went up, but also got a glimpse of the external fuel tank as it fell off the shuttle, and the after-burners diminishing into space. It was pretty cool to be able to simultaneously watch the flight video on a large flat screen, hear expert commentary, and watch the actual shuttle taking flight. NASA has obviously created many checks, balances, and procedures that go into such a large, complex, and carefully choreographed production. Enjoy some of my own photos of the venue and the launch below. (The shuttle photos were taken with a telephoto lens–click on them to get a larger resolution.) Or for some really breathtaking ones of liftoff, check out this photo gallery.

I have to say, even as I get older, space exploration (like dinosaurs and costume parties) really doesn’t get any less mind-blowingly awesome.

The Launch:

This screen showed the different steps to Countdown, and then video feed of the launch:

it’s like Woodstock for aerospace afficionados:

Zoomed out photo of the stream of smoke:

The Venue:

“Astronauts” attached the roof of the Kennedy Space Center:

The Rocket Park:

To give you a sense of the size of these rocket boosters:

You: e-mail, iChat, add Greasemonkey to Firefox, send out Google Wave invites, edit code, write macros for Excel, add blog posts in WordPress, tweet, update Facebook, Photoshop images, design, mech layouts, obsessively organize typefaces, tag MP3s, subscribe to RSS feeds, download Breaking Bad torrents, fire up MacTheRipper, run VLC, run sudo, rebuild directories, comment to Gizmodo, snipe ebay auctions, calibrate your 27″, download MAME ROMs, upload to the FTP, and crack with Resourcer.

Your mom, your cousin, and everyone else you know: e-mail, Web sites, iTunes (for music), and photos. Maybe an ebook or film someday. Does Apple have that mall cop movie starring that guy who plays the UPS driver on that show?

The end of the year is a big time for lists, and publications, and publications that make lists.  It’s kind of like VH1, except instead of Carrot Top commenting on MC Hammer’s pants or how hot Brooke Shields was in the 1981 Calvin Klein campaign, we have a tweed-coated columnist telling us about the year’s best…everything.

Although I normally skim over these lists skeptically (did Adventureland REALLY make it onto a list for the ten best movies of the decade?), I was blown away by the New York Times Magazine’s’ “9th Annual Year in Ideas” list. It’s full of discoveries that are cool (face-detecting digital advertisements that move and respond to passers-by), relevant (a beer bottle is more effective at cracking the human skull if it’s empty, rather than full), and futuristic (the development of an ethical robot; a Google algorithm applied to the analysis of animal extinction). From start to finish, the list offers a broad and refreshing look at the innovations that will likely shape the kinds of technological, cultural, social and artistic strides that will be made in 2010.

Oh, and for whoever got my name in the Secret Santa pool, I wouldn’t say no to Ruppy the flourescent dog. (It sure beats my invisible one.)