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

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

2. HULL

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

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

9. BALANCE
COMPOSITION
SYMMETRY
MOVEMENT
RHYTHM
REPETITION
PATTERNS

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

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

13. DESKTOP
SCREEN RESOLUTION
VIEWPORT
MOBILE DEVICES
ORIENTATION
RENDERING ENGINES
LAYOUT

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

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

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

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

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

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

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

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

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

35. http://lessframework.com

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

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

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

40. 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/

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

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

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

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

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

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

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

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

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

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

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

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

61. display:none;

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

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

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