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

And there are some seriously nice positives.

1. Generally, once you get to know your neighbors, they can really be very sweet and considerate.
2. There are corner stores peppered everywhere, so if your wife is wanting to cook something and finds she’s missing an ingredient, most likely the Italian corner store on one side of the block, or the Mexican corner store on the other side of the block will have what you’re looking for. (and I say “your wife” in a non-sexist way, because in our house she really enjoys cooking, and I’m more than happy to handle the clean-up, which she HATES… so we see it as a perfect harmony situation).
3. There are many delicious places to eat out or order in, and they’re mostly within a 10 minute walk!
4. There are multiple forms of mass transit crisscrossing and zig-zagging through the neighborhoods.
5. Ah, Hello? HOLIDAY LIGHTS!!!
6. Valentine’s Day Window DECORATIONS?
7. Pretty cool row house construction sometimes.
8. AND… an ever increasing number of cool new residents. Just to name a few of the positives.

But I want to focus on the first two items on my positives list. This Valentine’s Day morning, my lovely wife decided that she wanted to make waffles from scratch, and at about 8am she started to gather the ingredients together. But wait a minute! We don’t have enough butter?! No problem. Let me (as the assistant to the chef) throw on a jacket and some shoes and take a walk to one of the corner stores and buy some butter for my wife and her cooking proclivities.

So I tried the Mexican corner store first, because they usually have more regular hours of operation… but 8am on a Sunday seems to be a little too early. Ok, how about the Italian corner store? Sometimes they surprise me. Nope, not this time. Ok, lemme walk half a block east and see if the Indian corner store is open yet. They’ve come through in the past for some milk for my morning cereal. But no. They too are closed this fine slush filled Sunday morning.

So coming up with 3 strikes, you’d think this Philly is out… but then I think, “Who knows, it can’t really hurt to ask.” So on my way back from scoping out the Indian corner store, I step into Varallo Brother’s bakery. Italian bakers use a LOT of butter, right? So maybe they’ll take pity on me and sell me a stick of butter? It can’t hurt to ask, right? So I walk up to the counter and hope that it’s one of the nice ladies that know me. (I’ve been known to stop by on occasion for their award winning cannoli or other tasty treats.) But it’s not my familiar ladies… it’s 2 new faces that I’ve never seen before, but more importantly have never seen ME. And I almost chicken out, but I muster my south philly bravado and just say, “Hi, this is gonna be a strange question, but, you wouldn’t be able to sell me a stick of butter could you?” (I know, I know, it’s not exactly “bravado” but it’s all I could muster! My momma raised me to be polite to strangers.) I get a funny look from both ladies, and I clarify that “My wife is wanting to make waffles, and we don’t have butter, and all the corner stores are closed.” Their skeptical looks give way to a half smile each, and the lady that greeted me says that she’ll go ask, but doesn’t think they have just “sticks” of butter.

Not sure what that means because I’m unfamiliar with the inner workings, and purchasing patterns of an Italian bakery, I just wait patiently. I figure at the least, I can tell my wife I’ve exhausted every possibility other than walking all the way (4 blocks) to the local Ack-ah-me. But to my complete and total surprise, one of the Varallo brothers comes out from the back, and in his hand… a 4-stick BRICK of butter still wrapped in its wax paper. He tells me it would be less trouble to “just take her out for breakfast”, and I joke back with him that it would require us to actually go “out”. And we chuckle a little. He puts the brick of golden tastiness in a brown bag and simply hands it to me and waves at me to take it, and scoots back to his kitchen before I could even adequately thank him for his wonderfully generous and nice act.

WOW?! I mean I’ve always felt that the Varallo family is genuinely nice after you get past the oh-so-thin veil of gruffness that seems to mask all the older Italian shopkeeps in the area… but wow this was something else! I felt that I couldn’t just walk out of there with my free butter brick and not give them ANY money at all. So I asked the now surprised and amused looking ladies behind the counter if I could get a couple tasty looking danish and a couple of these little chocolate topped cookie pastries things that I’d never seen before.

I mean, c’mon, like I said… I couldn’t just walk out of there without giving them ANY of my money, right? It’s the neighborly thing to do! :-)

South Philly, sometimes you truly ROCK.

But I tell you this… to create a magazine like this would be no small endeavor. To have content that runs this deep would require a whole lot of people working real hard, probably around the clock. But imagine if Wired magazine were like this? Or how about US News and World Report? Or maybe online news magazines? Like the Huffington Post?

To see all three videos (and a crap-load of awesome stills, go HERE.)

Pomplamoose is basically a duo (and a happy couple btw) out of San Francisco. She’s Nataly Dawn, saucy but demure, and smart (recently got here Masters in French Literature) with a voice on her that makes you sit up and listen. And he’s Jack Conte, creative and free, and talented. (and the ladies at my work feel he’s a looker too!) And they make goddamn good music together! And VideoSongs too! (VideoSongs are basically WYSIWYG music. {WYSIWYG, aka “What You See Is What You Get” or wizi-wig}) Which can be seen on their YouTube channel. Also, you can download some free tracks, and buy a bunch at their MySpace page. (Covers are FREE. Originals are $1.)

Nataly and Jack formed the band Pomplamoose in the Summer of 2008. The band’s presence is primarily online, having only performed one live show. Nevertheless, the collaboration has garnered significant fan support. Fueled by the feature of their video Hail Mary on the main page of Youtube, Pomplamoose’s channel has about 13,000 subscribers as of August 2009. The band recently produced the next studio album of Julia Nunes.

http://en.wikipedia.org/wiki/Jack_Conte

If you haven’t heard them yet, it’s time to check ‘em out and get a good seat on the ol’ bandwagon… pun entirely intended. So here are some of my fav VideoSongs and such:

Thanks for the link Lee.