Adaptive Systems at Drupal Dev Days Brussels

On February 5th and 6th, Brussels was invaded by Drupal geeks during the Drupal Developers Days Brussels. There were many cool presentations and Brussels waffles. I also gave a presentation called "Adaptive Systems for multiple devices".

My presentation was about a common ground, something we designers and developers should think about. It was about creating systems that adapt to multiple devices.

I started with a story. The story of an architect called Michael Mozer who
created the "The adaptive house". It was kind of the house of the future. It had a form of intelligence that made it able to predict the behaviour and needs of the inhabitants. For example, it would change the lighting and turn the music down when the phone rang.

The story of the Adaptive House rethinks the relationship between buildings and their environment giving them the ability to actively adapt to constantly changing conditions.

Such concepts change the qualities of form and function. These architects created a system to ensure that this house adapts and reponds to its inhabitants.

Systems

We need to accept that we don’t know how our users will view or experience our site. And we need to find a system that will make our content respond or adapt to different users and multiple devices.

"We don't design web pages, we design web systems"

-Andy Clarke

Most websites we create have a life that doesn't end when the product launches.
We put something out there that will then grow and take shape. And a community like Drupal.org might drive that.

Eventually new devices will come onto the market. That's what when we think in terms of systems, we think about building websites that can adapt, change and evolve with whatever comes our way.

By the way, don't you think it's weird to call it the mobile web ? It seems to me that there is only the web, which we might view in different ways. There's no desktop web or tablet web, is there? It seems to me that there is just one web.

One web

And the reason why the web is so useful and is growing so fast is … universality.

When you make a link, you can link to anything. That means people should be able to put anything on the Web, no matter what computer they have, software they use or language they speak.

The Web should be usable by people with disabilities. It should work with any form of information, —from a silly tweet to a scholarly paper.

And it should be accessible from any kind of hardware that can connect to the Internet:
stationary or mobile, small screen or large. Adaptability is Accessibility

Responsive web design

This is a popular term in web design, first mentioned by Ethan Marcotte. As I mentioned earlier, like buildings could respond to their environment, so should our site respond to screen widths.

We need 3 ingredients: a flexible Grid, flexible images and most importantly, media queries. Some examples of flexible images and flexible grids is
http://www.1pictureaday.com and http://hicksdesign.co.uk

Responsive images

There's also a jquery plugin for these flexible images created by the Filamente group.
This is how it works. For any images that you'd like to scale and load responsively, start by referencing a mobile-friendly image size, adding a ".r" prefix to the file extension, and reference a larger size using a HTML5 custom attribute data-fullsrc (the image referenced by data-fullsrc will be used for screen resolutions greater than 480px).

More about that here.

Media Queries

A media query is a CSS technique that adds expressions to media types to check for certain conditions and to apply different stylesheets. A media query would look something like this:

More examples on media queries can be found on: http://www.webdesignerwall.com/tutorials/css3-media-queries/ and http://mediaqueri.es/

One option is to start with an existing site and responsify that. Another option is to reverse engineer this, by designing for mobile first.

Mobile first

Starting with mobile first forces you to focus on what's important because of the limited screen size. Building mobile first allows teams to utilize the full palette of capabilities to create rich context-aware applications.

The future is mobile

A lot of people are saying, "Mobile is the next big thing." But it's happening now. We can't predict wat device will be next, what screen sizes will be next. We need to accept that the web is unique and has to be flexible. We need to adapt.

That's about all I had to say. I would love to hear your ideas on how we could apply and integrate this to Drupal.

Update: The presentation video is online at http://bxl2011.drupaldays.org/node/227