Archive

Posts Tagged ‘fluid grids’

Responsive Web Design: The Future of Interactive Design

July 16th, 2010 socialamigo No comments
responsive-web-design, interactive-design, fluid-grid, Ethan-Marcotte, alistapart

Standard Interactive Experiences Remain Elusive Over Spectrum Of Today's Devices

In his forward-thinking article, Responsive Web Design, for alistapart, Ethan Marcotte put forth an edict about changes to the entire interactive design process that will, in my opinion, be the web standard of the future. In it he talked about client project requirements that include secondary interactive experiences like iPhone websites and others. It’s safe to say we all have begun to see these will be the norm moving forward. In the article Marcotte said,

“…as designers, I think we often take comfort in such explicit requirements, as they allow us to compartmentalize the problems before us,…(but) can we really continue to commit to supporting each new user agent with its own bespoke experience?”

Rather than generating separate content, architecture, and development for each different initiative, the answer he puts forth is Responsive Web Design. This is not to be confused with the fluid grid and flexible images that many of us have tried as solutions in the past. Even with fluid grids, interactive content delivery is problematic for anything less than the desktop experience and across the spectrum of browsers – a standard experience remains elusive. Working with CSS3 and web standards put forth by W3C, designers and developers are beginning to experiment with coding that allows the entire website to float and architect itself depending on the screen size, resolution, and device-type.

Media queries, a robust part of the new CSS3 specifications, allow interactive designers and programmers to build to the various parameters of the devices themselves by sending queries that test the field where the content will land and then define a specification for that field. These queries can be chained together and, once the device passes a given test query, will further apply the specification(s) to the content in the markup. This is quite simplified for the sake of this post (you can find out more about media queries and CSS3 in the article link above), but the important thing is understanding that the lay of the interactive landscape is changing and designers and digital marketers must change with it. Soon it will be your clients who have heard that this is possible and will want to know if you can supply this design/programming solution. You’ll want to be able to say yes!