Adaptive Systems

ADAPTIVE SYSTEMS

with

Simon Collison

Adaptive Systems for Multiple Devices HD Live 4th Nov 2010

FOR MULTIPLE DEVICES

HULL

PATTERNS

Adaptive Systems for Multiple Devices HD Live 4th Nov 2010

THAT ARE UNIQUELY OURS

The screen brings with it different kinds of challenges for visual design, some of which occur exclusively in interactive media.

It’s unrealistic to think our old methods can fill in all the gaps, but new interaction patterns and visual languages emerge everyday.

These are the building blocks for our new design principles.

JASON SANTA MARIA, 2008

BALANCECOMPOSITIONSYMMETRYMOVEMENTRHYTHMREPETITIONPATTERNS

SYSTEMS

Adaptive Systems for Multiple Devices HD Live 4th Nov 2010

FOR EVOLVING WEBSITES

We don’t design web pages. We design systems.

ANDY CLARKE

DESKTOPSCREEN RESOLUTIONVIEWPORTMOBILE DEVICESORIENTATIONRENDERING ENGINESLAYOUT

http://jasonsantamaria.com/http://gregorywood.co.uk/

ADAPTIVE

Adaptive Systems for Multiple Devices HD Live 4th Nov 2010

LAYOUTS

• Use one set of files for the website

• Manipulate the resolution, viewport, and orientation

• Deliver 100% of the content

• Or, deliver the device-relevant content

• Surprise. Delight. Be creative!

The ability to alter the presentation of a website without altering its structure should have opened up the floodgates of design creativity.

JEREMY KEITH, 2006

RESPONSIVE

Adaptive Systems for Multiple Devices HD Live 4th Nov 2010

WEB DESIGN

http://www.alistapart.com/articles/responsive-web-design/

Ethan states that a responsive design is composed of three distinct parts:

1. Flexible grid.

2. Flexible images.

3. Media queries.

FLEXIBLE GRID

Adaptive Systems for Multiple Devices HD Live 4th Nov 2010

RESPONSIVE INGREDIENT # 1

• Relative measurements

• Percentages and ems

• min-width and max-width

• Maths!

http://lessframework.com

FLEXIBLE IMAGES

Adaptive Systems for Multiple Devices HD Live 4th Nov 2010

RESPONSIVE INGREDIENT # 2

img {width:380px;height:auto;}

img {height:auto;max-width:100%;}

For a Windows fix, see http://unstoppablerobotninja.com/entry/fluid-images

MEDIA QUERIES

Adaptive Systems for Multiple Devices HD Live 4th Nov 2010

RESPONSIVE INGREDIENT # 3

A media query consists of a media type and zero or more expressions that check for the conditions of particular media features.

Among the media features that can be used in media queries are ‘width’, ‘height’, and ‘color’.

By using media queries, presentations can be tailored to a specific range of output devices without changing the content itself.

http://www.w3.org/TR/css3-mediaqueries/

@media  (max-­‐device-­‐width:480px)  and  (orientation:portrait)  {  }

• nth-child for flow of images

• Proportional leading

• Change anything you want!

CASE STUDY

Adaptive Systems for Multiple Devices HD Live 4th Nov 2010

COLLY.COM

<meta  name="viewport"  content="width=device-­‐width"  />

@media  (min-­‐device-­‐width:1024px)  and  (max-­‐width:989px),  screen  and  (max-­‐device-­‐width:480px),  (max-­‐device-­‐width:480px)  and  (orientation:landscape),  (min-­‐device-­‐width:481px)  and  (orientation:portrait)  {div#page  {  width:468px;  }  }

1. Devices with a minimum width of 1,024 pixels and windows with a maximum width of 989 pixels.

2. Screens that have a maximum device width of 480 pixels.

3. Devices with a maximum width of 480 pixels and are also in landscape orientation.

4.Devices with a minimum width of 481 pixels and are also in portrait orientation.

5. When one of the above criteria are met, resize the page division to 468 pixels.

@media  (min-­‐device-­‐width:1024px)  and  (max-­‐width:509px),  (max-­‐device-­‐width:480px)  and  (orientation:portrait)  {div#page  {  width:306px;}

With these two queries, the page division shrinks to 306 pixels wide when viewed with:

1. devices with a minimum width of 1,024 pixels and windows with a maximum width of 509 pixels.

2. devices with a maximum width of 480 pixels which are also in landscape orientation.

NO SILVER BULLET

Adaptive Systems for Multiple Devices HD Live 4th Nov 2010

FOR THE MOBILE WEB

http://www.slideshare.net/bryanrieger/rethinking-the-mobile-web-by-yiibu

http://www.slideshare.net/bryanrieger/rethinking-the-mobile-web-by-yiibu

http://www.slideshare.net/bryanrieger/rethinking-the-mobile-web-by-yiibu

http://www.slideshare.net/bryanrieger/rethinking-the-mobile-web-by-yiibu

• Start with mobile!

• Use well structured meaningful markup

• Consider media queries

• Progressive enhancement (JavaScript & media queries)

• Adapt content appropriately for each device

display:none;

WHAT NEXT?

Adaptive Systems for Multiple Devices HD Live 4th Nov 2010

• Rethink our processes

• Be responsive

• Progressively enhance

• Consider the needs of the mobile user

• Be brave, be creative!

THANKS

Simon Collison

http://colly.com@colly

Adaptive Systems for Multiple Devices HD Live 4th Nov 2010