Laying out web sites and applications has always been a challenge. The web is not print. We can't guarantee the size of "the page". We can't guarantee what device our site visitors will be using, what size it's screen is, what technologies their browser supports, etc. And traditionally, layout tools for the web have been distinctly lacking. But soon, this is all set to change. New layout tools such as Media queries, Flexbox and grids will make tailoring user experiences across different browsers and devices a lot easier, when combined with just a little bit of defensive design practice. In this talk, Chris Mills will lead you gently by the hand, through all these new-fangled toys. GET IN TOUCH WITH SIGMA This presentation is from Camp Digital, a free, one-day event in Manchester exploring some of the most important and emerging themes in the digital industry. To see more presentations and videos from the day visit: http://campdigital.wearesigma.com/2013/. Camp Digital was brought to you by Sigma. We are a leading specialist in User Experience consulting and design, information management, and web technologies. We provide research, analysis, design, development and support services, with specific expertise in usability, accessibility, content and document management, websites, intranets and online applications. If you think we can help you call us on 01625 427718 or email hello@wearesigma.com.

1. Laying out
The future
Friday, 8 March 13

2. Find me...
✴ cmills@opera.com/cmills@w3.org
✴ @chrisdavidmills
✴ slideshare.net/chrisdavidmills
Friday, 8 March 13

3. In the early days
✴ We thought the Web was print
✴ Limited device landscape meant
limited outlook
✴ Limited toolset
Friday, 8 March 13

4. Consistent CSS support
✴ Was very welcome...
✴ Still didn’t give us much in the way
of layout
Friday, 8 March 13

5. CSS2 gave us
✴ floats: limiting, and kind of abused.
✴ positioning: feh.
✴ margins, padding: pfffff.
✴ borders.
✴ meh.
Friday, 8 March 13

6. We still have problems
At this point, there was still a raft of
design problems that were absurdly
difficult to solve on the web.
Friday, 8 March 13

7. What about
✴ Centering stuff?
✴ Same height columns?
✴ Flexible multiple columns?
✴ Complex floats?
✴ Shrinkwrapping contents?
✴ etc.
Friday, 8 March 13

8. Same height columns
Friday, 8 March 13

9. Same height columns
✴ We can fix this with faux columns
✴ Or JavaScript
✴ But really? Should we need to?
Friday, 8 March 13

10. Fortunately we have
A New Hope
Friday, 8 March 13

11. New tools on the horizon
✴ CSS WG + browser vendors
✴ Hard at work
Friday, 8 March 13

12. Media queries
Friday, 8 March 13

13. Media queries
✴ Same content, different layouts
✴ Optimized UIs!
✴ Polyfills/fixed layouts for old IE
Friday, 8 March 13

14. Media queries
/* Mobile first - make your mobile layout
the default... */
@media screen and (min-width: 481px) {
/* ...then do amazing stuff for
wider screens */
}
Friday, 8 March 13

15. Media queries
Friday, 8 March 13

16. matchMedia
✴ matchMedia = media queries inside
script
✴ For IE<10 and Opera Presto, polyfill
github.com/paulirish/matchMedia.js/
Friday, 8 March 13

17. matchMedia example
if (window.matchMedia("(min-width:
480px)").matches) {
/* Do stuff for wider screens */
} else {
/* Do stuff for narrow screens */
}
Friday, 8 March 13

18. More on Media queries
http://dev.opera.com/articles/view/
love-your -devices-adaptive-web-
design-with-media-queries-viewport-
and-more/
Friday, 8 March 13

19. viewport/CSS
device
adaptation
Friday, 8 March 13

20. Mobile browsers lie
✴ About viewport width
✴ Some also lie about the resolution
✴ So media queries alone don’t cut it
Friday, 8 March 13

21. Mobile misbehavior
Friday, 8 March 13

22. Viewport
<meta name="viewport"
content="width=device-width">
Friday, 8 March 13

23. Better
Friday, 8 March 13

24. @viewport
✴ Because viewport is more of a
style thing
✴ Specify viewport inside the
@viewport rule
✴ Opera Presto, IE10, WebKit
Friday, 8 March 13

25. Viewport
@viewport {
width: device-width;
}
Friday, 8 March 13

26. More on viewport
and @ viewport
http://dev.opera.com/articles/view/an-
introduction-to-meta-viewport-and-
viewport/
Friday, 8 March 13

27. Flexbox
Friday, 8 March 13

28. Flexbox rocks
✴ Allows easy flexible layouts
✴ Content reordering
✴ Same height columns
✴ Cure for cancer?
✴ Chrome, Opera Presto, FF IE (old
,
syntax)
Friday, 8 March 13

29. An example
<section>
<nav> ... </nav>
<article> ... </article>
<article> ... </article>
</section>
Friday, 8 March 13

30. An example
section {
display: flex;
}
Friday, 8 March 13

31. Gives you
Friday, 8 March 13

32. Rows and columns
section {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
}
/* flex-flow is shorthand for flex-direction/
wrap */
Friday, 8 March 13

33. Main and cross axis
Friday, 8 March 13

34. align items on main axis
section {
justify-content: center;
}
/* can take other values such as flex-start,
flex-end, space-between and space-around */
Friday, 8 March 13

35. Friday, 8 March 13

36. align items on cross axis
section {
align-items: stretch;
}
/* can take other values such as flex-start,
flex-end, and center; */
Friday, 8 March 13

37. Friday, 8 March 13

38. Ordering elements
✴ Reorder child elements easily and
quickly
✴ Without screwing with the DOM
Friday, 8 March 13

39. Ordinal groups
nav {
order: 1;
}
Friday, 8 March 13

40. Gives you
Friday, 8 March 13

41. Flexing our muscle
✴ The flex property
✴ Set what proportion of available
space child elements occupy
✴ Unit-less proportion values
Friday, 8 March 13

42. Flex property
nav {
flex: 1;
}
article {
flex: 3;
}
Friday, 8 March 13

43. Gives you
Friday, 8 March 13

44. But there’s more
article {
flex: 3 2 400px;
}
/* flex-grow shares out positive space
flex-shrink shares out overflow reduction
flex-basis initially applied
= CAN GET BLOODY COMPLICATED */
Friday, 8 March 13

45. A case study
Friday, 8 March 13

46. Placing the nav
section {
display: flex;
flex-flow: row wrap;
}
nav {
flex: 1 100%;
}
Friday, 8 March 13

47. Flexible awesome nav!
Friday, 8 March 13

48. Making awesome
nav {
display: flex;
justify-content: center;
}
nav ul {
display: flex;
flex-flow: row wrap;
justify-content: center;
width: 80%;
}
Friday, 8 March 13

49. Making awesome
nav ul li {
flex: auto;
min-width: 5rem;
}
Friday, 8 March 13

50. More on Flexbox
http://dev.opera.com/articles/view/
flexbox-basics/
Friday, 8 March 13

51. Multi-column
Friday, 8 March 13

52. Multi-col layouts
✴ Break content into multi-col
✴ Cut down on markup cruft
✴ Specify column breaks, column
rules and heading span
✴ Most modern browsers have this
Friday, 8 March 13

53. Great at some things
<article>...</article>
article {
column-count: 2;
column-gap: 1rem;
column-rule: 2px solid rgba(0,0,255,0.25);
}
Friday, 8 March 13

54. Gives you
Friday, 8 March 13

55. Controlling column
breaks
article h2 {
break-before: column;
break-after: avoid-column;
}
Friday, 8 March 13

56. Gives you
Friday, 8 March 13

57. Column-spanning
headings
article h2 {
break-after: avoid-column;
column-span: all;
}
Friday, 8 March 13

58. Gives you
Friday, 8 March 13

59. Can also specify
column width
article {
column-width: 20rem;
column-gap: 2rem;
}
Friday, 8 March 13

60. Gives you
Friday, 8 March 13

61. More on Multi-col
http://dev.opera.com/articles/view/
css3-multi-column-layout/
Friday, 8 March 13

62. Regions
Friday, 8 March 13

63. CSS regions
✴ Turn containers into vessels to
flow content into
✴ Flexible complex layouts
✴ IE10 and Chrome Canary only at the
moment
Friday, 8 March 13

64. Put your content in a
separate block
<article class="content">
<h2>Introduction</h2>
<p>Hello, dear readers...
</article>
Friday, 8 March 13

65. Then create your layout
blocks
<div class="layout">
<div class="text-container"></div>
<div class="text-container"></div>
<div class="image-container">
...
</div>
<div class="text-container"></div>
</div>
<div class="text-overflow"></div>
Friday, 8 March 13

66. Specify where to
flow it into
.content {
-webkit-flow-into: article;
}
.text-container, .text-overflow {
-webkit-flow-from: article;
}
Friday, 8 March 13

67. A little something I
cooked up
Friday, 8 March 13

68. Exclusions and
shapes
Friday, 8 March 13

69. CSS exclusions
✴ Create really complex floats
✴ Flow content around (and inside)
complex shapes
✴ Chrome Canary/IE only at the
moment
Friday, 8 March 13

70. Friday, 8 March 13

71. Position your exclusion
<article class="content">
<header>
...
</header>
...
</article>
header {
position: absolute;
etc.
}
Friday, 8 March 13

72. Then exclude it!
header {
position: absolute;
etc.
wrap-flow: both;
/* Can also take values of start, end,
minimum, maximum, clear */
}
Friday, 8 March 13

73. Different effects
both start end
Text
minimum maximum clear
Friday, 8 March 13

74. Shape your exclusion
shape-inside: rectangle(0, 0, 100%, 100%,
25%, 25%);
shape-inside: polygon( ... )
shape-outside: polygon( ... )
Friday, 8 March 13

75. shape inside/outside
Friday, 8 March 13

76. A note on
CSS units
Friday, 8 March 13

77. rems
✴ rem units used throughout my
examples
✴ size relative to the root (html) font-
size, not the parent font size.
✴ Much easier maths
Friday, 8 March 13

78. vh, vw, and vmin
✴ Percentage of viewport size
✴ 1vw = 1% of viewport width
✴ 1vh = 1% of viewport height
✴ 1vmin = 1vw or 1vh, whatever is
smallest
Friday, 8 March 13

79. vh, vw, and vmin
✴ Supported in IE10, FF Chrome, iOS,
,
Blackberry?
✴ text-size relative to viewport =
accessibility problem?
Friday, 8 March 13

80. New responsive
capabilities
Friday, 8 March 13

81. Fallbacks and
alternatives
Friday, 8 March 13

82. So do we just wait until support is
everywhere and IE6-9 is destroyed?
Friday, 8 March 13

83. Hell no!
✴ Intelligent alternatives via feature
detection
✴ @supports: native feature
detection
✴ Modernizr is still an excellent
solution
Friday, 8 March 13

84. Modernizr
<html lang="en-US" class="no-js">
<head>
<script src="modernizr.js"></script>
</head>
Friday, 8 March 13

85. Modernizr
<html class=" js flexbox canvas canvastext
webgl no-touch geolocation postmessage no-
websqldatabase indexeddb hashchange history
draganddrop websockets rgba hsla multiplebgs
backgroundsize borderimage borderradius
boxshadow textshadow opacity cssanimations
csscolumns cssgradients no-cssreflections
csstransforms no-csstransforms3d
csstransitions fontface generatedcontent
video audio ... ">
Friday, 8 March 13

86. Modernizr CSS
.feature-no-regions .layout, .feature-no-
regions .text-overflow {
display: none;
}
.feature-no-regions .content {
float: left;
width: 48%;
padding: 1%;
}
Friday, 8 March 13

87. Fallback basic layout
Friday, 8 March 13

88. Modernizr JS
function rotateForm() {
if(Modernizr.cssanimations &&
Modernizr.csstransforms3d) {
form.setAttribute("class","form-rotate");
form.style.left = "0rem";
} else {
back.style.zIndex = "5";
}
}
Friday, 8 March 13

89. “Subtle” advertisement
Buy my book
Friday, 8 March 13

90. Thanks!
Friday, 8 March 13

91. Photo credits
✴ Star wars adidas posters by
Dorothy Tang: http://
www.flickr
.com/photos/adifans/
4265441265/
Friday, 8 March 13