Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
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 ...
BALANCE
COMPOSITION
SYMMETRY
MOVEMENT
RHYTHM
REPETITION
PATTERNS
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
DESKTOP
SCREEN RESOLUTION
VIEWPORT
MOBILE DEVICES
ORIENTATION
RENDERING ENGINES
LAYOUT
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...
The ability to alter the presentation of a
website without altering its structure
should have opened up the floodgates of
d...
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 ...
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....
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 feat...
@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-­‐dev...
@media  (min-­‐device-­‐width:1024px)  and  (max-­‐
width:509px),  (max-­‐device-­‐width:480px)  and  
(orientation:portra...
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 (JavaScrip...
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 cre...
THANKS
Simon Collison
http://colly.com
@colly
Adaptive Systems for Multiple Devices HD Live 4th Nov 2010
Adaptive Systems
Adaptive Systems
Adaptive Systems
Adaptive Systems
Adaptive Systems
Adaptive Systems
Adaptive Systems
Adaptive Systems
Adaptive Systems
Adaptive Systems
Adaptive Systems
Adaptive Systems
Adaptive Systems
Adaptive Systems
Adaptive Systems
Adaptive Systems
Adaptive Systems
Adaptive Systems
Adaptive Systems
Adaptive Systems
Adaptive Systems
Adaptive Systems
Adaptive Systems
Adaptive Systems
Adaptive Systems
Adaptive Systems
Prochain SlideShare
Chargement dans…5
×

sur

Adaptive Systems Slide 1 Adaptive Systems Slide 2 Adaptive Systems Slide 3 Adaptive Systems Slide 4 Adaptive Systems Slide 5 Adaptive Systems Slide 6 Adaptive Systems Slide 7 Adaptive Systems Slide 8 Adaptive Systems Slide 9 Adaptive Systems Slide 10 Adaptive Systems Slide 11 Adaptive Systems Slide 12 Adaptive Systems Slide 13 Adaptive Systems Slide 14 Adaptive Systems Slide 15 Adaptive Systems Slide 16 Adaptive Systems Slide 17 Adaptive Systems Slide 18 Adaptive Systems Slide 19 Adaptive Systems Slide 20 Adaptive Systems Slide 21 Adaptive Systems Slide 22 Adaptive Systems Slide 23 Adaptive Systems Slide 24 Adaptive Systems Slide 25 Adaptive Systems Slide 26 Adaptive Systems Slide 27 Adaptive Systems Slide 28 Adaptive Systems Slide 29 Adaptive Systems Slide 30 Adaptive Systems Slide 31 Adaptive Systems Slide 32 Adaptive Systems Slide 33 Adaptive Systems Slide 34 Adaptive Systems Slide 35 Adaptive Systems Slide 36 Adaptive Systems Slide 37 Adaptive Systems Slide 38 Adaptive Systems Slide 39 Adaptive Systems Slide 40 Adaptive Systems Slide 41 Adaptive Systems Slide 42 Adaptive Systems Slide 43 Adaptive Systems Slide 44 Adaptive Systems Slide 45 Adaptive Systems Slide 46 Adaptive Systems Slide 47 Adaptive Systems Slide 48 Adaptive Systems Slide 49 Adaptive Systems Slide 50 Adaptive Systems Slide 51 Adaptive Systems Slide 52 Adaptive Systems Slide 53 Adaptive Systems Slide 54 Adaptive Systems Slide 55 Adaptive Systems Slide 56 Adaptive Systems Slide 57 Adaptive Systems Slide 58 Adaptive Systems Slide 59 Adaptive Systems Slide 60 Adaptive Systems Slide 61 Adaptive Systems Slide 62 Adaptive Systems Slide 63 Adaptive Systems Slide 64
Prochain SlideShare
phantom limb pain handout assessment
Suivant
Télécharger pour lire hors ligne et voir en mode plein écran

44 j’aime

Partager

Télécharger pour lire hors ligne

Adaptive Systems

Télécharger pour lire hors ligne

Simon will explore CSS media queries and other methods for creating incredibly flexible adaptive layouts for varying devices, viewports and orientations.

Adaptive Systems

  1. ADAPTIVE SYSTEMS with Simon Collison Adaptive Systems for Multiple Devices HD Live 4th Nov 2010 FOR MULTIPLE DEVICES
  2. HULL
  3. PATTERNS Adaptive Systems for Multiple Devices HD Live 4th Nov 2010 THAT ARE UNIQUELY OURS
  4. 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
  5. BALANCE COMPOSITION SYMMETRY MOVEMENT RHYTHM REPETITION PATTERNS
  6. SYSTEMS Adaptive Systems for Multiple Devices HD Live 4th Nov 2010 FOR EVOLVING WEBSITES
  7. We don’t design web pages. We design systems. ANDY CLARKE
  8. DESKTOP SCREEN RESOLUTION VIEWPORT MOBILE DEVICES ORIENTATION RENDERING ENGINES LAYOUT
  9. http://jasonsantamaria.com/http://gregorywood.co.uk/
  10. ADAPTIVE Adaptive Systems for Multiple Devices HD Live 4th Nov 2010 LAYOUTS
  11. • 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!
  12. 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
  13. RESPONSIVE Adaptive Systems for Multiple Devices HD Live 4th Nov 2010 WEB DESIGN
  14. http://www.alistapart.com/articles/responsive-web-design/
  15. Ethan states that a responsive design is composed of three distinct parts: 1. Flexible grid. 2. Flexible images. 3. Media queries.
  16. FLEXIBLE GRID Adaptive Systems for Multiple Devices HD Live 4th Nov 2010 RESPONSIVE INGREDIENT # 1
  17. • Relative measurements • Percentages and ems • min-width and max-width • Maths!
  18. http://lessframework.com
  19. FLEXIBLE IMAGES Adaptive Systems for Multiple Devices HD Live 4th Nov 2010 RESPONSIVE INGREDIENT # 2
  20. img { width:380px; height:auto; } img { height:auto; max-width:100%; } For a Windows fix, see http://unstoppablerobotninja.com/entry/fluid-images
  21. MEDIA QUERIES Adaptive Systems for Multiple Devices HD Live 4th Nov 2010 RESPONSIVE INGREDIENT # 3
  22. 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/
  23. @media  (max-­‐device-­‐width:480px)  and   (orientation:portrait)  {  }
  24. • nth-child for flow of images • Proportional leading • Change anything you want!
  25. CASE STUDY Adaptive Systems for Multiple Devices HD Live 4th Nov 2010 COLLY.COM
  26. <meta  name="viewport"   content="width=device-­‐width"  />
  27. @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.
  28. @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.
  29. NO SILVER BULLET Adaptive Systems for Multiple Devices HD Live 4th Nov 2010 FOR THE MOBILE WEB
  30. http://www.slideshare.net/bryanrieger/rethinking-the-mobile-web-by-yiibu
  31. http://www.slideshare.net/bryanrieger/rethinking-the-mobile-web-by-yiibu
  32. http://www.slideshare.net/bryanrieger/rethinking-the-mobile-web-by-yiibu
  33. http://www.slideshare.net/bryanrieger/rethinking-the-mobile-web-by-yiibu
  34. • Start with mobile! • Use well structured meaningful markup • Consider media queries • Progressive enhancement (JavaScript & media queries) • Adapt content appropriately for each device
  35. display:none;
  36. WHAT NEXT? Adaptive Systems for Multiple Devices HD Live 4th Nov 2010
  37. • Rethink our processes • Be responsive • Progressively enhance • Consider the needs of the mobile user • Be brave, be creative!
  38. THANKS Simon Collison http://colly.com @colly Adaptive Systems for Multiple Devices HD Live 4th Nov 2010
  • keitakawamoto

    Apr. 30, 2015
  • robinvenneman

    Apr. 8, 2013
  • jessicafrater

    Feb. 27, 2012
  • Duaner11

    Nov. 21, 2011
  • andotyjazz

    Oct. 6, 2011
  • jadie.oh

    Sep. 9, 2011
  • aaronsalmon

    May. 31, 2011
  • jdkunesh

    Mar. 22, 2011
  • zomigi

    Feb. 24, 2011
  • amrindersandhu

    Jan. 24, 2011
  • jackzheng

    Jan. 13, 2011
  • DenisChannov

    Jan. 8, 2011
  • ewilliamson0515

    Dec. 18, 2010
  • stephenhay

    Dec. 3, 2010
  • nestorrojas

    Nov. 15, 2010
  • rubenmedios

    Nov. 15, 2010
  • leivajd

    Nov. 15, 2010
  • mjtellez

    Nov. 13, 2010
  • tonychapelle

    Nov. 12, 2010
  • zumio

    Nov. 11, 2010

Simon will explore CSS media queries and other methods for creating incredibly flexible adaptive layouts for varying devices, viewports and orientations.

Vues

Nombre de vues

19 399

Sur Slideshare

0

À partir des intégrations

0

Nombre d'intégrations

347

Actions

Téléchargements

368

Partages

0

Commentaires

0

Mentions J'aime

44

×