Slide 1

Slide 1 text

ADAPTIVE SYSTEMS with Simon Collison Adaptive Systems for Multiple Devices HD Live 4th Nov 2010 FOR MULTIPLE DEVICES

Slide 2

Slide 2 text

HULL

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

PATTERNS Adaptive Systems for Multiple Devices HD Live 4th Nov 2010 THAT ARE UNIQUELY OURS

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

BALANCE COMPOSITION SYMMETRY MOVEMENT RHYTHM REPETITION PATTERNS

Slide 10

Slide 10 text

SYSTEMS Adaptive Systems for Multiple Devices HD Live 4th Nov 2010 FOR EVOLVING WEBSITES

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

DESKTOP SCREEN RESOLUTION VIEWPORT MOBILE DEVICES ORIENTATION RENDERING ENGINES LAYOUT

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

ADAPTIVE Adaptive Systems for Multiple Devices HD Live 4th Nov 2010 LAYOUTS

Slide 16

Slide 16 text

• 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!

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

No content

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

No content

Slide 21

Slide 21 text

No content

Slide 22

Slide 22 text

No content

Slide 23

Slide 23 text

No content

Slide 24

Slide 24 text

No content

Slide 25

Slide 25 text

RESPONSIVE Adaptive Systems for Multiple Devices HD Live 4th Nov 2010 WEB DESIGN

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

Ethan states that a responsive design is composed of three distinct parts: 1. Flexible grid. 2. Flexible images. 3. Media queries.

Slide 28

Slide 28 text

No content

Slide 29

Slide 29 text

No content

Slide 30

Slide 30 text

No content

Slide 31

Slide 31 text

No content

Slide 32

Slide 32 text

FLEXIBLE GRID Adaptive Systems for Multiple Devices HD Live 4th Nov 2010 RESPONSIVE INGREDIENT # 1

Slide 33

Slide 33 text

No content

Slide 34

Slide 34 text

• Relative measurements • Percentages and ems • min-width and max-width • Maths!

Slide 35

Slide 35 text

http://lessframework.com

Slide 36

Slide 36 text

No content

Slide 37

Slide 37 text

FLEXIBLE IMAGES Adaptive Systems for Multiple Devices HD Live 4th Nov 2010 RESPONSIVE INGREDIENT # 2

Slide 38

Slide 38 text

img { width:380px; height:auto; } img { height:auto; max-width:100%; } For a Windows fix, see http://unstoppablerobotninja.com/entry/fluid-images

Slide 39

Slide 39 text

MEDIA QUERIES Adaptive Systems for Multiple Devices HD Live 4th Nov 2010 RESPONSIVE INGREDIENT # 3

Slide 40

Slide 40 text

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/

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

• nth-child for flow of images • Proportional leading • Change anything you want!

Slide 43

Slide 43 text

CASE STUDY Adaptive Systems for Multiple Devices HD Live 4th Nov 2010 COLLY.COM

Slide 44

Slide 44 text

No content

Slide 45

Slide 45 text

Slide 46

Slide 46 text

@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.

Slide 47

Slide 47 text

@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.

Slide 48

Slide 48 text

No content

Slide 49

Slide 49 text

No content

Slide 50

Slide 50 text

No content

Slide 51

Slide 51 text

No content

Slide 52

Slide 52 text

No content

Slide 53

Slide 53 text

No content

Slide 54

Slide 54 text

No content

Slide 55

Slide 55 text

NO SILVER BULLET Adaptive Systems for Multiple Devices HD Live 4th Nov 2010 FOR THE MOBILE WEB

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

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

Slide 60

Slide 60 text

• Start with mobile! • Use well structured meaningful markup • Consider media queries • Progressive enhancement (JavaScript & media queries) • Adapt content appropriately for each device

Slide 61

Slide 61 text

display:none;

Slide 62

Slide 62 text

WHAT NEXT? Adaptive Systems for Multiple Devices HD Live 4th Nov 2010

Slide 63

Slide 63 text

• Rethink our processes • Be responsive • Progressively enhance • Consider the needs of the mobile user • Be brave, be creative!

Slide 64

Slide 64 text

THANKS Simon Collison http://colly.com @colly Adaptive Systems for Multiple Devices HD Live 4th Nov 2010