Responsive/Adaptive Web Design

I haven’t posted anything to my blog in way too long of a time, but all I can say is, being a new Poppa can be all consuming. There’s good and bad to that… but mostly good as far as I can see. :-) Anyway, I’ve been excited by the possibilities I’ve been seeing with “Responsive Web Design” for well over a year now, and figured I’d post a little something about it.

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.

Three different sizes (or environments) for viewing the same web page.

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

Night Kitchen Website Re-Skin

Night Kitchen Website Re-Skin - Home Page
Night Kitchen Website Re-Skin – Home Page
Night Kitchen Website Re-Skin - People Page
Night Kitchen Website Re-Skin – People Page
Night Kitchen Website Re-Skin - Portfolio Page
Night Kitchen Website Re-Skin – Portfolio Page

Summary: What’s that old expression? “The cobbler’s children have no shoes.” The Night Kitchen website had been neglected for more than a few years, and needed a refreshing. There were extremely tight restrictions on time and technology used, so this was definitely a “re-skinning” and not a full redesign.

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

Smithsonian’s NMAH ~ Educational Citizenship Website

Summary: Working in partnership with the Smithsonian’s National Museum of American History (NMAH) and the U.S. Citizenship and Immigration Services (USCIS) Office, we developed an interactive, multimedia-rich website that supports aspiring citizens’ efforts to pass the civics portion of the new USCIS Citizenship Test.

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.

Stats
100 Historical vignettes
51 Interactive activities
15 Topic areas
1 Daunting test demystified

Awards
AAM EdCom Award for Excellence, 2013
IMA Award Best in Class for Government, 2013
IMA Award Best in Class for Education, 2013

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

SFMOMA Country Dog Gentlemen ~ Mobile Website Conversion

Summary: In 2009, with some of the 20th century’s greatest artists as inspiration, Night Kitchen Interactive created an engaging kiosk installation and website, bringing to life the works of Piet Mondrian, Jackson Pollock, Frida Kahlo and others. Roy De Forest’s colorful work acted as an aesthetic springboard, paving the way for vivid, lively animations. Each animated story reflects an individual artist’s unique approach, creating different extraordinary worlds to be explored. Performance artist Sebastienne Mundheim collaborated with Night Kitchen to craft the voices of two colorful canine characters from Roy De Forest’s work. With the dogs as guides, modeling behaviors of inquiry, this journey through modern masterpieces is reflective, whimsical, and insightful.

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

My very first SlideShare presentation!

Looky here! My first ever SlideShare.net presentation! It’s a little ditty I created to help our traditional media buying folks transition over to the brave new world of online banner ads and all the specs they have to understand and bring into their Work Orders. It’s pretty basic, and it assumes I’ll be talking through some of the details, but it’s hopefully still somewhat informative… and maybe a little entertaining.

Saint Clare’s – Site Redesign

Summary: Create a full website redesign to build off of the Saint Clare Health System’s rebranding and refocusing. A new brand was developed, built around a sky blue color scheme and the phrase “Turning Promise into Practice”. The website relied heavily on that sky blue aesthetic, and brought in a triadic color scheme for emphasis elements. The new design had to be clear, professional and a lot more usable than their previous design, and reinforce the new focus of turning promise into practice for their patients.

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

The future of “Print”?

Wow. Talk about deep content. This little visualization of what Sports Illustrated could turn into on is completely “Game ON!” (sorry, had to do it) This is exactly the type of thing that has so many people excited about the prospect of some sort of Apple “Tablet”. Really nice work Time, Inc. and WonderFactory!

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?

Google Wave

Can’t speak for it’s actual usefulness, as I don’t have an invite yet… but from the videos I’ve seen (good overview video below) it looks like it could be a really amazing new communications shift. Almost like going from paper letters to email… but I’ll hold off judgement until I actually get to try it out. :-)