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

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

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

Tech: Photoshop, Illustrator, Flash, Actionscript
Role: Lead Designer / Flash Designer
Link: www.SaintClares.org

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?

Below is a surprisingly sparse diagram. It’s kind of amazing to me how small the little squares are! Makes me think solar panel production companies would be a good thing to invest in! Germany, Japan and China seem to be in a really good place to reap the rewards of forward thinking… and dare I say it… socialistic government subsidies and legislation? Maybe a little socialism sprinkled on top isn’t the end of the world?… maybe it’s even the beginning of brave new world? Oh I’m sorry, government help in an industry is the wrong way to go… you might as well hand the country over to the pinko commies! Oh wait, what would you call the help we’ve been giving the corn / high-fructose / ethanol industries for the last 30 years? How about the auto industry? Savings and Loans? How about the financing industry in the last 2-3 years? Oh yeah, and what about that pesky military industrial complex our tax dollars have been funding? …so confused…ARGGG…don’t know who to hate…RRRARR…tree huggers…socialists…bankers…farmers… FOX News can you help me find a target for my rage?

And things don’t look quite as easy for wind turbines: