Anyway, what I lacked in actually skating, I like to think I made up for in shooting pics. (I know, I know, Freddy, it’s not the same thing, but let me have this! :-) I have boxes and boxes of pictures. Pictures of both FDR skatepark’s birth and at least half dozen years of it’s development. And also from that era, I have probably equal amounts of pictures of a private skate warehouse (Props to Danny Dansak!) that was, alas, not destined to live as long and as strong as FDR skatepark. (It was converted to, eek! luxury studio condos a bunch of years back) So anyway, it was a big task to gather all the thousands of photos, sort through them all… but I figured FDR makes for a great story, and if I didn’t even try, I knew I’d kick myself later. So in between all the craziness of my wife being pregnant and all the nesting activities that come along with that, I found time to gather all my skate photo stuff together and go through it with a couple of the book’s authors. We came up with some selects, and then I had to find the negatives, which was probably the hardest part of the whole effort. (none of the pictures, negatives, and their envelopes seemed to have retained any proper associations over the years) But all that said, it’s all done, and last week THE BOOK CAME OUT!! Below is a description of the book, and below that are my pics from the book!

This is the cover. I totally didn’t take this shot of Joey P trying a sweeper… but I figured it would be good to include just the same.

This is my little out-of-focus pic of the birth of FDR’s first skater-built construction, the CIA pocket. They blew it up to a full two-page spread! As far as I know, and the authors could figure, this is the earliest picture of skater built construction at FDR. (I wish I’d realized how out of focus it was when I took it, but this was before DSLRs, and I didn’t have a wide-angle lens back then, and had to get pretty far away to get it all in… blah, blah, excuses, excuses. It is what it is.)

FDR Skatepark is famous for it’s 4th of July party… horizontal fireworks were a predictable mainstay right from the beginning. This shot is probably from 1997.

This shot is from the same 1997 4th of July party. Bands and punk rock are a staple of FDR 4th of July celebrations, along with a whole lot of beer, and more kooks than you can shake a stick at. You never know exactly what will go down at these 4th of July jams.

I don’t remember exactly what is going on in this pic, but if I had to guess, Daily Dave of probably telling Mr. Rogers how it’s gonna be, and Carlos & Wes seem to be getting a kick out of the interaction… as Fernando looks pretty fed up with the whole process. :-)

Darren Menditto blasting some head-high air, with seeming ease! And George Draguns holding onto an inverted view of the world, which he rightfully is proud to do.

If I find time, I may post more pics that didn’t make the cut for the book. Look for that sometime around Marchtember Oneteenth.

So here is my re-creation of her slide from my pot-hole filled memory:

I’m really not sure about the title and labels, or even if she had any labels on the slide, but you can probably get the idea. She was driving at the concept that as a designer gets older, they have less new and exciting ideas. (I don’t remember her exact phrasing, but the “Good Ideas” concept is what I remember/interpret from how she was talking about the diagram) So I looked at that pretty simplistic, made-up infographic, and thought about my ever approaching 40th trip around our sun, and that diagram struck me as pretty darned depressing. I thought, “This must have been a diagram she made in her 20′s or early 30′s… and I wonder if she still feels this way?”

So I worked up a couple additions to here diagram. The first, well it speaks to something that can be variable depending on a designer’s engagement, but can be imagined as a pretty straight and inevitable line… Experience:

And while that’s a little comforting to think about the inevitable collection of “experience”… that can be defined in such a way that any lump-on-a-log designer could ride that line up and up. So that’s not gonna quite cut it for me. I need more.

I’m going to settle on something a little less concrete, but infinity more comforting:

Wisdom. Not all folks become wise, but I’m going to hold on to this last diagram in my thoughts as I try to go to sleep tonight. I’m not thinking about riding that arch up. I know you have to climb it. But that idea leaves the power and choice in my hands. And that’s a lot better than where the first diagram leaves me.

You’re welcome for the revisions Paula. Thanks for a great lecture. :-)

The Basics

Previously, if clients were concerned about how their site was viewed on mobile devices, firms would build separate device-specific sites for the more popular devices for their users. Typically the iPhone, for the clients that could worry about and pay for the extra design and development.

So, “Responsive Web Design” is basically creating CSS for your HTML pages that listens to what sort of environment the end-user is using to view the page, and serves up typography, graphics and layout that is best for that environment. What do I mean by “environment”? Well, it’s the difference between viewing a site on your maximized 1600×1200 desktop browser, 1024×768 laptop, or maybe viewing the site from your iPhone oriented vertically. Those are some very different environments, and can be treated differently to make for a better viewing experience for your end user in any of those viewing environments.

The first article I took notice of for this technique was, of course, from the folks at A List Apart:
alistapart.com/articles/responsive-web-design
(Specifically, this article was written by Ethan Marcotte from the famous web blog unstoppablerobotninja.com)

And he even created an example website that had pretty good cross-browser adaptability even for May of 2010. It can be viewed here:
alistapart.com/d/responsive-web-design/ex/ex-site-flexible.html
(If you are on a non-mobile device, try resizing the browser, and watch the page completely respond to your changing environment. If you are on a mobile device, you can rotate the orientation of the device to see 2 potentially different layouts.)

If you’ve ever been tasked to make a beautiful and usable website for a client, and then asked as an after-thought to make an iPhone version of the site, this new methodology can be amazingly exciting.

My Experiment

Just as an experiment, to try and play with this a bit, I made a page using my usual technique of cobbling together other people’s online tutorials and examples and then bashing it into something close to what I want it to look like. I need to read up more about Fluid Images but here is what I have so far:
rizzio.net/home/wp-content/uploads/experiments/responsive/index.html

Some Light Reading

If this is as exciting to you as it is to me, here are some additional links to get more details:

The Basic Concept
webdesignerwall.com/tutorials/responsive-design-in-3-steps

Lots more details and examples
coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/#more-75660

A great grouping of additional articles that would prove quite helpful
catswhocode.com/blog/awesome-tutorials-to-master-responsive-web-design

What about applying this to Email Newsletters?
http://www.campaignmonitor.com/blog/post/3163/optimizing-your-emails-for-mobile-devices-with-media/
(Not sure about the cross-browser/email-browser support of @media queries, but this is potentially a powerful application of Responsive Web Design)

Enjoy!
Dave

We wanted a new look for the Night Kitchen website that would encourage visitors to explore our stories, interactive projects and designs in depth. Our redesigned portfolio promotes a selection of recent projects which highlight NK’s engaging approach to interactive storytelling, which aims to provide transformative and meaningful experiences that connect with audiences.

Tech: Illustrator, Photoshop, Flash, Actionscript, HTML, CSS
Role: Lead Designer / Lead Flash Designer
Link: www.whatscookin.com

Using content from the NMAH collections and working with a consultant that specializes in teaching English as a second language, we created a flexible, progressively scaffolded learning environment through which students move through learning, practice, and test stages commensurate with their mastery of the question topics. Given that the interactive experience should appeal to learners for whom English is a second language, and that the civics test is conducted as an oral interview, voiceover narration and closed-captions are provided, and learners have the opportunity to practice responding to the audio prompts.

The framework contains 100 vignettes, 19 activities, and 32 zoomable object explorations, that help extend learning beyond merely teaching to the 100 questions on the test. Instead, using objects and documents from its collections the NMAH offers aspiring citizens a vibrant look at our nation’s history, the functions of our government, the rights and responsibilities of U.S. citizens, and the power of democracy. By providing context to the questions on the test, prospective citizens can facilitate their learning of complex facts and concepts, and draw a deeper connection to the significance of becoming an American citizen.

Tech: Illustrator, Flash, Actionscript, XML, Photoshop, HTML, CSS
Role: Lead Designer / Lead Flash Designer
Link: www.americanhistory.si.edu/citizenship

To fulfill student and teacher needs, the site presents a media-rich, scaffolded learning environment with progress tracking and assessment features. Students watch videos, explore interactive activities, and answer questions along the way to gain deeper insights to the integral role the environment plays in the daily lives of American Indian communities and draw connections to local environmental issues. The culminating classroom presentation activity allows students to collect notes taken across the site into one central web-based planner.

The site was designed and built to be visually inviting and reflective of the rich design traditions and unique voice of each tribal community featured therein. The visual and UX design was crafted to create a learning environment that supports the storytelling traditions that are central to communities featured within the project. Feedback from NMAI and Smithsonian has been glowing.

Tech: Illustrator, Flash, Actionscript, Photoshop, HTML, CSS
Role: Lead Designer / Lead Flash Designer
Link: www.nmai.si.edu/environment/

These stories and activities excite and inform young museum visitors, inspiring them to contribute their own creative responses to the museum’s website. Targeting children aged 6-10, a rare audience for modern art, this interactive experience engages younger museum visitors and their families with playful narratives and interactive activities. Each reinforces key learning points associated with an individual work and encourages visitors to share their own creative responses in a visitor-contributed gallery on SFMOMA’s website.

In 2011, SFMOMA was interested in adapting the existing Country Dog Gentlemen animations into an HTML5 experience, so visitors with mobile devices that do not support Flash can still partake in the enhanced rich-media experience. We implemented the main menu utilizing “responsive web design” techniques promoted by many of today’s most advanced HTML5 and CSS gurus. We used @media CSS queries in combination with Max and Min device-widths to create a single menu page (and CSS) with break-points that serve up different layouts and different graphics depending on the size and orientation of your device! It was really fun and exciting to be part of bringing this new technique to life while working to improve the museum and online experience for SFMOMA’s younger audiences.

Tech: Illustrator, Photoshop
Role: Lead Designer / Technical Advisor
Link: In-Progress

Adapted from the codebase originally developed for PhilaPlace (www.philaplace.org), the AnyPlace platform allows organizations to establish their own interpretive website, using their own brand and visual aesthetic, and engaging visitors in exploration of their places, topics, curation, and media.

Each organization’s instance of AnyPlace would provide its visitors with a rich online tool for browsing place-based stories, images and videos on a map, by topic, or as collections. Visitors could alter content geographically and thematically, take virtual tours, save favorite places, print Google directions and submit their own stories and media for consideration.

The design challenge was to create an aesthetic that had enough of a “brand” to promote as a branded product, but not so much that potential clients felt that they would not be able to break-out of the AnyPlace look. The result is an exercise in subtlety and minimalism.

Tech: Illustrator, Photoshop, HTML, CSS
Role: Lead Designer
Link: anyplace.whatscookin.com / demo.anyplace.whatscookin.com

We built on the community and mapping platform of PhilaPlace to design and develop the OHC desktop and mobile optimized websites. Through the integration of two open source solutions – Google Maps and the CollectiveAccess collections management system – PhilaPlace supports a rich feature set that presents a mosaic of historical and contemporary records about sites within a particular area.

Designing over top a preexisting PhilaPlace framework, most functionality and UI restrictions needed to be understood and followed, along with a strong brand inherited from the Chicago Architectural Foundation. The result is a website that through the desktop and mobile devices conveys the richness of the content as well as its place within the larger organization and brand.

Tech: Illustrator, Photoshop, HTML, CSS
Role: Lead Designer
Link: myitinerary.openhousechicago.org

It’s an exciting project to bring to the world, the on-site living history program of Fort Snelling, by building an interactive content-rich, collections-based website, and identifying innovative ways to engage visitors of all ages in Fort Snelling’s rich history. My main contribution to the Project Plan was through the creation of high-fidelity wireframes for client approval and UX by-in and with the creation of the preliminary visual creative treatments.

Tech: Illustrator, Photoshop
Role: Lead Designer / Preliminary UX Designer
Link: In-Progress