Designing for the ebb & flow…

The Web is finally actualizing into its own thing. The transition from print design and human tendency to “hang on to the old” is about gone. We are entering another new phase of web design. We are now at the threshold perhaps, of really inventing what will be the web of the future. John Allsopp wrote about “A Dao of Web Design” in A List Apart back in 2000. In that article he referenced a number of excerpts from the Tao Te Ching. One of those related to the designer’s need to control web pages, whereas The Sage “…accepts the ebb and flow of things, Nurtures them, but does not own them,” Tao Te Ching; 2 Abstraction.

We are in that state with the new tools and technologies arriving daily, and it is our responsibility to nurture them, but not own them. As web designers we are faced with a multitude of devices we are designing for – including mobile phones, laptops, tablets, e-readers, game consoles, and soon most likely, the display in my Honda! There are more people connected using mobile phones today than those using desktops/laptops. This could be a really big hassle for web design, but instead we have arrived at a time when the tools and the technologies are available to solve these problems and allow a more holistic approach to design. Responsive Web Design guru, Ethan Marcotte, suggests in a recent interview in .NET, that “we can finally design for the “ebb and flow of things,” referencing the Allsopp article stated above.

Responsive Web Design represents a transition from fixed styles to flexible design that includes fluid grids, flexible images, and media queries layered together to create a responsive design. Responsive in the sense that we can design sites that are responsive to the devices out there rather than remaining stuck in a single device mentality. Obviously we need more design focused on Mobile computing, as well as the rapidly growing tablet products. Responsive web design allows us to address all of these devices in one website.

So we will evolve our teaching with Responsive Web Design, learning the various techniques available, and the rapidly growing bank of frameworks and new technologies that address the issues we face. But one site for all devices is not a simpler solution in that we are designing for different users – a user may be on his/her laptop in the morning, using their tablet during the lunch hour, and then their mobile as they head to a meeting. Same user, different devices, and different needs! It will require thinking skills, paying attention to how these different devices involve different needs. It is challenging but exciting. Web design is becoming more important in the global landscape, and from where I view it all, it’s getting to be much more fun and meaningful!

There will be more about Responsive Web Design in the near future. In the mean time, here are some of the articles, books, websites, frameworks, etc. that I have been reading, and pondering. Please share the resources you find that inform you about this important era and responsive design.

Ethan Marcotte’s article on A List Apart: http://alistapart.com/articles/responsive-web-design (started the conversation)

His book published by A Book Apart: http://www.abookapart.com/products/responsive-web-design

Dan Cederholm’s new book: Bulletproof Web Design, third edition; http://simplebits.com

Examples of Responsive Web Design:

http://paravelinc.com

http://trentwalton.com/2011/05/10/fit-to-scale

http://thedolectures.co.uk

http://atxwebshow.com

http://netmagazine.com/features/ethan-marcottes-20-favorite-responsive-sites (these are pretty special)

http://mediaqueri.es/ – Media Queries

http://www.netmagazine.com/features/21-top-tools-responsive-web-design

And one of the interesting new frameworks related to Responsive Design: http://lessframework.com/

Advertisements