Your SlideShare is downloading. ×
0
Responsive Web Design “ The Way is shaped by use,But then the shape is lost.Do not hold fast to shapesBut let sensation fl...
Resources <ul><li>Ethan Marcotte - Responsive Web Design (A Book Apart) </li></ul><ul><li>Smashing Magazine - ( http://cod...
What  is  responsive web design?
 
 
 
 
 
 
 
 
 
 
THE INGREDIENTS
SIMPLES
THREE INGREDIENTS <ul><li>A flexible, grid-based layout </li></ul><ul><li>Flexible images and media </li></ul><ul><li>Medi...
THREE INGREDIENTS <ul><li>A flexible, grid-based layout </li></ul>
Flexible Grid Based Layout
Flexible - Step 1 <ul><li>Typography </li></ul>
The following slides contain maths
“THE ALGORITHM” target ÷ context = result
“THE ALGORITHM” target ÷ context = result 24px ÷ 16px = 1.5em
Flexible - Step 1 <ul><li>Typography </li></ul><ul><li>body { font-size: 100% } </li></ul><ul><li>h1 { font-size: 1.5em /*...
Flexible - Step 2 <ul><li>Typography </li></ul><ul><li>Layout </li></ul>
Flexible - Step 2 <ul><li>Typography </li></ul><ul><li>Layout </li></ul>
The following slides contain maths
“THE ALGORITHM” target ÷ context = result
Flexible Grid Based Layout
“THE ALGORITHM” 620 ÷ 1024px = 0.60546875  (header) 360 ÷ 1024px = 0.3515625  (nav) 730 ÷ 1024px = 0.712890625  (article) ...
“THE ALGORITHM” header {    width: 60.546875%  /* 620 / 1024 */ } nav {    width: 35.15625%  /* 360 / 1024 */ }
 
“THE ALGORITHM” target ÷ context = result
SETTING MARGINS & PADDINGS <ul><li>If the next TYPE element is 11px & is nested within the H1 then use the following 11 / ...
Flexible Grid Based Layout
THREE INGREDIENTS <ul><li>A flexible, grid-based layout </li></ul><ul><li>Flexible images and media </li></ul><ul><li>Medi...
THREE INGREDIENTS <ul><li>A flexible, grid-based layout </li></ul><ul><li>Flexible images and media </li></ul><ul><li>Medi...
Flexible Images / Media <ul><li>Web is not just text </li></ul><ul><li>Facebook </li></ul><ul><li>Flickr </li></ul><ul><li...
 
Golden Egg <ul><li>img { max-width: 100%;   } </li></ul>
Golden Egg cont... <ul><li>img,embed,object,video { </li></ul><ul><li>max-width: 100%; </li></ul><ul><li>}  </li></ul>
IE6 - you bastard! <ul><li>img,embed,object,video { </li></ul><ul><li>max-width: 100%; </li></ul><ul><li>}  </li></ul>
IE6 - you bastard! <ul><li>IE Specific Style Sheet </li></ul><ul><li>img { </li></ul><ul><li>      width: 100%; </li></ul>...
IE7 - you bastard! http://unstoppablerobotninja.com/entry/fluid-images#code
Background Images <ul><li>FAUX columns </li></ul><ul><li>But that's fine for a fixed layout, but what about our responsive...
Background Images <ul><li>CSS3 property called background-size ( http://bkaprt.com/rwd/20/ ), browser support is still pre...
THREE INGREDIENTS <ul><li>A flexible, grid-based layout </li></ul><ul><li>Flexible images and media </li></ul><ul><li>Medi...
THREE INGREDIENTS <ul><li>A flexible, grid-based layout </li></ul><ul><li>Flexible images and media </li></ul><ul><li>Medi...
Media Queries <ul><li>W3C </li></ul><ul><li>Media Types </li></ul><ul><li>all, braille, embossed, handheld, print, project...
Media Types <ul><li><link rel=&quot;stylesheet&quot; href=&quot;global.css&quot; media=&quot;all&quot; /> </li></ul><ul><l...
Then along came... <ul><li><link rel=&quot;stylesheet&quot; href=&quot;tiny.css&quot; media=&quot;handheld&quot;/> </li></ul>
Be GONE Media Types Hel lo  Media Queries Media Queries Media Queries
CSS3 Media Queries <ul><li>Anatomy of a Media Query </li></ul><ul><li>@media screen and (min-width: 1024px) { </li></ul><u...
Anatomy of Media Query <ul><li>Each query still begins with a media type (screen). </li></ul><ul><li>Immediately after com...
CSS3 Media Queries <ul><li>Anatomy of a Media Query </li></ul><ul><li>@media screen and (min-width: 1024px) { </li></ul><u...
Where did I put..... <ul><li><link rel=&quot;stylesheet&quot; href=&quot;wide.css&quot; media=&quot;screen and (min-width:...
Does Size Matter?
YES!!!
Does Size Matter <ul><li>In the spec’s language, every device has a “display area” and “rendering surface.”  </li></ul><ul...
Does Size Matter <ul><li>If your laptop is 1200px in width and your browser is open 50% of the screen, then; </li></ul><ul...
WAIT - There’s MOAR <ul><li>Chain multiple conditions together </li></ul><ul><li>@media screen and (min-device-width: 480p...
Media Queries
Browser Support <ul><li>Works in most browers < 5 years old </li></ul><ul><li>With the obvious exception of IE </li></ul><...
respond.js <ul><li>@media screen and (max-width: 768px) { </li></ul><ul><li>… </li></ul><ul><li>}/*/mediaquery*/ </li></ul...
Responsive Context
MOBILE FIRST <ul><li>“ More often than not, the mobile experience for a Web application or site is designed and built afte...
Image  http://blog.gvnfoundation.org/2011/02/every-once-in-awhile-we-receive-amazing.html
Testing <ul><li>No Substitute for the real thing </li></ul><ul><li>Web Developer Tools (FF Plugin) </li></ul><ul><li>Safar...
Bad Points? <ul><li>Force the users into one way.  Users that like to pinch and zoom </li></ul><ul><li>No Mobile Only, use...
Thanks.  Questions? “ The Way is shaped by use,But then the shape is lost.Do not hold fast to shapesBut let sensation flow...
Upcoming SlideShare
Loading in...5
×

Responsive Web Design

13,580

Published on

Published in: Technology
0 Comments
6 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
13,580
On Slideshare
0
From Embeds
0
Number of Embeds
13
Actions
Shares
0
Downloads
208
Comments
0
Likes
6
Embeds 0
No embeds

No notes for slide
  • The Web is Young No History, very few best practices in comparison to other “artists”. Conditioned to think the way of the graphic designer, or artist. Will it be a canvas, paper, what are the dimensions. For graphic artists, they pick the same width and height, how big is the banner or show stand. More than often they will know exactly where their work is going to end up and use that as their starting point.
  • We&apos;re conditioned to think the way of the graphic designer, or artist. When an artist starts a new piece of work he or she chooses very carefully. Will it be a canvas, paper, what are the dimensions. For graphic artists, they pick the same width and height, how big is the banner or show stand. More than often they will know exactly where their work is going to end up and use that as their starting point.
  • We&apos;re conditioned to think the way of the graphic designer, or artist. When an artist starts a new piece of work he or she chooses very carefully. Will it be a canvas, paper, what are the dimensions. For graphic artists, they pick the same width and height, how big is the banner or show stand. More than often they will know exactly where their work is going to end up and use that as their starting point.
  • Artists have their constraints. Constraints are good because they provide boundaries In Web Design we struggle with boundaries So we create our own.
  • Start with no canvas We set the minimum width of the smallest monitor that we want to design for, probably 960 pixels because that also fits nicely into a grid. This gives us boundaries to begin building the site, because after all boundaries are great because the give us limitations and provide focus. Can you imagine the highway with no lines painted on the road? Or a game of football without markings on the pitch? Or houses without your allotted land parchment? The next time you start looking at designing a site.......
  • Don’t do it! Don’t automatically on your next project go down that road. If we pick a canvas size we might be wrong.
  • But what happens when that occurs and we get the dimensions wrong? We run the risk of the website being clipped and not showing the full extent of what ins supposed to be seen. (include a picture of a scene that has horizontal and vertical scroll bars).
  • Mobile devices are increasing every day. We could look at browser sniffing but there’s a whole bunch of issues there - no js, sending incorrect request headers, overriding headers etc
  • Shorten the list by focussing on widths instead of devices These will increase as well, but it’s easy to accomodate. SO WHAT GOES INTO DEVELOPING A RESPONSIVE WEB DESIGN?
  • SO WHAT GOES INTO DEVELOPING A RESPONSIVE WEB DESIGN? Not as complicated as that looks.
  • SO WHAT GOES INTO DEVELOPING A RESPONSIVE WEB DESIGN? Not as complicated as that looks.
  • The first thing that we’re going to be doing is creating a flexible Grid based layout. Let’s take a look at our example file. http://dev.justinavery.me/design/fixed/
  • 1024 px #container auto margin to center, some box shadow 620px Header 360px navigation 730px content 250px side bar numerous padding &amp; margins
  • The reason we start here is because it doesn’t make our head hurt as much.
  • The first thing that we’re going to be doing is creating a flexible Grid based layout. Let’s take a look at our example file. http://dev.justinavery.me/design/fixed/
  • You will see this a lot. If you choose responsive design You will live and breathe this algorithm
  • You will see this a lot. If you choose responsive design You will live and breathe this algorithm
  • The default body size for browsers is 16px Set body to 100%, and base all typographical decisions from there. This is just typography, so ignore the layout aspects of padding and margins for now.
  • Finish typography and start the Layout
  • Same principal.
  • The first thing that we’re going to be doing is creating a flexible Grid based layout. Let’s take a look at our example file. http://dev.justinavery.me/design/fixed/
  • You will see this a lot. If you choose responsive design You will live and breathe this algorithm
  • 1024 px #container auto margin to center, some box shadow (i’m going to pick an artibrary figure of 90% for this size because...... 620px Header 360px navigation 730px content 250px side bar numerous padding &amp; margins
  • You will see this a lot. If you choose responsive design You will live and breathe this algorithm 360px navigation 730px content 250px side bar
  • You will see this a lot. If you choose responsive design You will live and breathe this algorithm 360px navigation 730px content 250px side bar
  • BE CAREFULL ABOUT THE CONTEXT
  • The context may change throughout the document
  • now before you round, don&apos;t. Browsers will round that themselves to a suitable size, so we want to give them as much information to make that computed change as possible.
  • Go through all the measurements in the site and change them. Paddings. Margins. Widths. Sometimes Heights (height is difficult to have a context)
  • Enter max-width: 100%;
  • this rule allows our image to size to it&apos;s maximum size, or the width of the containing element... Which ever comes first. Remove the fixed width provided width= height=. this might fault.
  • this rule allows our image to size to it&apos;s maximum size, or the width of the containing element... Which ever comes first.
  • There are some issues with IE6 around the max-width. i.e. it doesn’t work exactly right Do some searches, read the Ethans book for more information.
  • There are some issues with IE6 around the max-width. i.e. it doesn’t work exactly right Do some searches, read the Ethans book for more information.
  • You do need to watch out for ie7 rendering image sizes however Simply download the script (available at http://bkaprt.com/rwd/16/ ) and include it on any page with flexible images; it will scour your document to create a series of flexible, high-quality AlphaImageLoader objects.
  • Create a MASSIVE background image, and use the repeat-y “algorithm”
  • There is a CSS3 property called background-size ( http://bkaprt.com/rwd/20/ ), which would allow us to create truly flexible background images, but—you guessed it—browser support is still pretty immatureScott Robbin’s jQuery Backstretch plugin ( http://bkaprt.com/rwd/21/ ) simulates resizable bac kground images on the body element.
  • W3C had an idea Media Types came first These were the types you could choose
  • The phones started getting smarter. Not much support for “handheld”, so phone browsers sent “screen” headers by default
  • The phones started getting smarter. Not much support for “handheld”, so phone browsers sent “screen” headers by default
  • Now, every media query—including the one above—has two components:1. Each query still begins with a media type (screen), drawn from the CSS 2.1 specification’s list of approved media types ( http://bkaprt.com/rwd/26/ ).2. Immediately after comes the query itself, wrapped in parentheses: (min-width: 1024px). And our query can, in turn, be split into two components: the name of a feature (min-width) and a corresponding value (1024px).
  • Think of a media query like a test for your browser. When a browser reads your stylesheet, the Browser asks two questions: first, if it belongs to the screen media type; and if it does, if the browser’s viewport is at least 1024 pixels wide. If the browser meets both of those criteria, then the styles enclosed within the query are rendered; if not, the browser happily disregards the styles, and continues on its merry way.
  • Explain slide. Now there can be some confusion over max-width, min-width, max-device-width etc So we get taken to the age old question.....
  • DOES SIZE of the browser MATTER?
  • DOES SIZE MATTER?
  • Here are two quick guidelines that helped me sort it out: I won’t get into iphone 4 rendering more pixels from a display area than is available on the rendering surface though
  • Visit this link for a list of queries that you can call with CSS3.
  • WAIT - THERE&apos;S MOARChain conditions together so that you can even better target specifics such as width and orientation.@media screen and (min-device-width: 480px) and (orientation: landscape) { … }Be warned though, iPhone iPad example... Moral is test for specific devices, do not assume just because thou might be able.
  • Lets take a closer look.
  • css3-mediaqueries.js - explain it’s hefty and checks all parenthis next screen for respond.js
  • very light weight and quick, but you’re still relying on JS
  • getting away from the code for a whole I wanted to reflect on the application of responsive design. While responsive design is an amazing option for web developers to offer up different layouts and designs for different devices and sizes, it certainly is not the answer in every situation.You could easily code up an entirely two different sites in the HTML markup and set display:none; for the mobile version when viewed on desktop size screens, and switch them in the media queries. Possible, but not a great idea. You&apos;re making both users download a whole bunch of extra markup that simply doesn&apos;t matter, and that&apos;s just not cool. Uncool. UNCOOL!!!In these cases it&apos;s better to offer two completely separate solutions and rely on some server side of JavaScript based redirection.
  • Don’t break a design down from the full size Build it linear to start with Forces you to prioritise content. In a linear environment there is no &amp;quot;this is as important as the that on&amp;quot; because there IS no equal. (insert a picture for the slide of a row of kids shortest to tallest).
  • Don’t break a design down from the full size Build it linear to start with Forces you to prioritise content. In a linear environment there is no &amp;quot;this is as important as the that on&amp;quot; because there IS no equal. (insert a picture for the slide of a row of kids shortest to tallest).
  • there is no substitute for testing on the actual devices, but if you don&apos;t have them then you can check out web developer tools. In fact, set them up as presets for you to push them through. All your business comes online, then buy devices
  • Taking for granted what the user wants to see.
  • Transcript of "Responsive Web Design"

    1. 1. Responsive Web Design “ The Way is shaped by use,But then the shape is lost.Do not hold fast to shapesBut let sensation flow into the worldAs a river courses down to the sea.—DAO DE JING, section 32, “Shapes”
    2. 2. Resources <ul><li>Ethan Marcotte - Responsive Web Design (A Book Apart) </li></ul><ul><li>Smashing Magazine - ( http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/ ) </li></ul><ul><li>A Dao of Web Design ( http://www.alistapart.com/articles/dao/ ) </li></ul>
    3. 3. What is responsive web design?
    4. 14. THE INGREDIENTS
    5. 15. SIMPLES
    6. 16. THREE INGREDIENTS <ul><li>A flexible, grid-based layout </li></ul><ul><li>Flexible images and media </li></ul><ul><li>Media queries - a module from the CSS3 specification </li></ul>
    7. 17. THREE INGREDIENTS <ul><li>A flexible, grid-based layout </li></ul>
    8. 18. Flexible Grid Based Layout
    9. 19. Flexible - Step 1 <ul><li>Typography </li></ul>
    10. 20. The following slides contain maths
    11. 21. “THE ALGORITHM” target ÷ context = result
    12. 22. “THE ALGORITHM” target ÷ context = result 24px ÷ 16px = 1.5em
    13. 23. Flexible - Step 1 <ul><li>Typography </li></ul><ul><li>body { font-size: 100% } </li></ul><ul><li>h1 { font-size: 1.5em /* 24px / 16px */ } </li></ul><ul><li>h2 { font-size: 1.25em /* 20px / 16px */ } </li></ul>
    14. 24. Flexible - Step 2 <ul><li>Typography </li></ul><ul><li>Layout </li></ul>
    15. 25. Flexible - Step 2 <ul><li>Typography </li></ul><ul><li>Layout </li></ul>
    16. 26. The following slides contain maths
    17. 27. “THE ALGORITHM” target ÷ context = result
    18. 28. Flexible Grid Based Layout
    19. 29. “THE ALGORITHM” 620 ÷ 1024px = 0.60546875 (header) 360 ÷ 1024px = 0.3515625 (nav) 730 ÷ 1024px = 0.712890625 (article) 250 ÷ 1024px = 0.244240625 (sidebar) target ÷ context = result
    20. 30. “THE ALGORITHM” header { width: 60.546875% /* 620 / 1024 */ } nav { width: 35.15625% /* 360 / 1024 */ }
    21. 32. “THE ALGORITHM” target ÷ context = result
    22. 33. SETTING MARGINS & PADDINGS <ul><li>If the next TYPE element is 11px & is nested within the H1 then use the following 11 / 24 = 0.458333333333333em </li></ul><ul><li>When setting flexible margins on an element, your context is the width of the element’s container. </li></ul><ul><li>When setting flexible padding on an element, your context is the width of the element itself. Which makes sense, if you think about the box model: we’re describing the padding in relation to the width of the box itself. </li></ul><ul><li>DO NOT ROUND UP. </li></ul><ul><li>DO NOT ROUND UP. </li></ul>
    23. 34. Flexible Grid Based Layout
    24. 35. THREE INGREDIENTS <ul><li>A flexible, grid-based layout </li></ul><ul><li>Flexible images and media </li></ul><ul><li>Media queries - a module from the CSS3 specification </li></ul>
    25. 36. THREE INGREDIENTS <ul><li>A flexible, grid-based layout </li></ul><ul><li>Flexible images and media </li></ul><ul><li>Media queries - a module from the CSS3 specification </li></ul>
    26. 37. Flexible Images / Media <ul><li>Web is not just text </li></ul><ul><li>Facebook </li></ul><ul><li>Flickr </li></ul><ul><li>YouTube </li></ul><ul><li>Vimeo </li></ul><ul><li>more more more..... </li></ul>
    27. 39. Golden Egg <ul><li>img { max-width: 100%; } </li></ul>
    28. 40. Golden Egg cont... <ul><li>img,embed,object,video { </li></ul><ul><li>max-width: 100%; </li></ul><ul><li>} </li></ul>
    29. 41. IE6 - you bastard! <ul><li>img,embed,object,video { </li></ul><ul><li>max-width: 100%; </li></ul><ul><li>} </li></ul>
    30. 42. IE6 - you bastard! <ul><li>IE Specific Style Sheet </li></ul><ul><li>img { </li></ul><ul><li>      width: 100%; </li></ul><ul><li>} </li></ul>
    31. 43. IE7 - you bastard! http://unstoppablerobotninja.com/entry/fluid-images#code
    32. 44. Background Images <ul><li>FAUX columns </li></ul><ul><li>But that's fine for a fixed layout, but what about our responsive design? </li></ul><ul><li>.blog { background: #F8F5F2 url(&quot;blog-bg.png&quot;) repeat-y 50% 0; } </li></ul>
    33. 45. Background Images <ul><li>CSS3 property called background-size ( http://bkaprt.com/rwd/20/ ), browser support is still pretty immature </li></ul><ul><li>Scott Robbin’s jQuery Backstretch plugin ( http://bkaprt.com/rwd/21/ ) simulates resizable background images on the body element. </li></ul>
    34. 46. THREE INGREDIENTS <ul><li>A flexible, grid-based layout </li></ul><ul><li>Flexible images and media </li></ul><ul><li>Media queries - a module from the CSS3 specification </li></ul>
    35. 47. THREE INGREDIENTS <ul><li>A flexible, grid-based layout </li></ul><ul><li>Flexible images and media </li></ul><ul><li>Media queries - a module from the CSS3 specification </li></ul>
    36. 48. Media Queries <ul><li>W3C </li></ul><ul><li>Media Types </li></ul><ul><li>all, braille, embossed, handheld, print, projection, screen, speech, tty, and tv </li></ul>
    37. 49. Media Types <ul><li><link rel=&quot;stylesheet&quot; href=&quot;global.css&quot; media=&quot;all&quot; /> </li></ul><ul><li><link rel=&quot;stylesheet&quot; href=&quot;main.css&quot; media=&quot;screen&quot; /> </li></ul><ul><li><link rel=&quot;stylesheet&quot; href=&quot;paper.css&quot; media=&quot;print&quot; /> </li></ul>
    38. 50. Then along came... <ul><li><link rel=&quot;stylesheet&quot; href=&quot;tiny.css&quot; media=&quot;handheld&quot;/> </li></ul>
    39. 51. Be GONE Media Types Hel lo Media Queries Media Queries Media Queries
    40. 52. CSS3 Media Queries <ul><li>Anatomy of a Media Query </li></ul><ul><li>@media screen and (min-width: 1024px) { </li></ul><ul><li>body { </li></ul><ul><li>font-size: 100%; </li></ul><ul><li>}} </li></ul>
    41. 53. Anatomy of Media Query <ul><li>Each query still begins with a media type (screen). </li></ul><ul><li>Immediately after comes the query itself, wrapped in parentheses: (min-width: 1024px). And our query can, in turn, be split into two components: the name of a feature (min-width) and a corresponding value (1024px) </li></ul>
    42. 54. CSS3 Media Queries <ul><li>Anatomy of a Media Query </li></ul><ul><li>@media screen and (min-width: 1024px) { </li></ul><ul><li>body { </li></ul><ul><li>font-size: 100%; </li></ul><ul><li>}} </li></ul>
    43. 55. Where did I put..... <ul><li><link rel=&quot;stylesheet&quot; href=&quot;wide.css&quot; media=&quot;screen and (min-width: 1024px)&quot; /> </li></ul><ul><li>Attach them to @import statements: </li></ul><ul><li>@import url(&quot;wide.css&quot;) screen and (min-width: 1024px); </li></ul><ul><li>I prefer @media because it keeps the CSS sheet numbers down, there for requests and there for load times. </li></ul>
    44. 56. Does Size Matter?
    45. 57. YES!!!
    46. 58. Does Size Matter <ul><li>In the spec’s language, every device has a “display area” and “rendering surface.” </li></ul><ul><li>the browser’s viewport is the display area; the entire display is the rendering surface. </li></ul><ul><li>So on your laptop, the display area would be your browser window; the rendering surface would be your screen. </li></ul>
    47. 59. Does Size Matter <ul><li>If your laptop is 1200px in width and your browser is open 50% of the screen, then; </li></ul><ul><li>RENDERING SURFACE = 1200px </li></ul><ul><li>DISPLAY AREA (viewport) = 600px </li></ul><ul><li>http://www.w3.org/TR/css3-mediaqueries/#media1 </li></ul>
    48. 60. WAIT - There’s MOAR <ul><li>Chain multiple conditions together </li></ul><ul><li>@media screen and (min-device-width: 480px) and (orientation: landscape) { … } </li></ul>
    49. 61. Media Queries
    50. 62. Browser Support <ul><li>Works in most browers < 5 years old </li></ul><ul><li>With the obvious exception of IE </li></ul><ul><li>css3-mediaqueries.js </li></ul><ul><li>respond.js </li></ul>
    51. 63. respond.js <ul><li>@media screen and (max-width: 768px) { </li></ul><ul><li>… </li></ul><ul><li>}/*/mediaquery*/ </li></ul><ul><li>@media screen and (max-width: 520px) { </li></ul><ul><li>… </li></ul><ul><li>}/*/mediaquery*/ </li></ul>
    52. 64. Responsive Context
    53. 65. MOBILE FIRST <ul><li>“ More often than not, the mobile experience for a Web application or site is designed and built after the PC version is complete. Here's three reasons why Web applications should be designed for mobile first instead... Mobile is exploding... Mobile forces you to focus.... Mobile extends your capabilities... ” </li></ul><ul><li>http://www.lukew.com/ff/entry.asp?933 </li></ul>
    54. 66. Image http://blog.gvnfoundation.org/2011/02/every-once-in-awhile-we-receive-amazing.html
    55. 67. Testing <ul><li>No Substitute for the real thing </li></ul><ul><li>Web Developer Tools (FF Plugin) </li></ul><ul><li>Safari Developer </li></ul><ul><li>Emulators </li></ul>
    56. 68. Bad Points? <ul><li>Force the users into one way. Users that like to pinch and zoom </li></ul><ul><li>No Mobile Only, users will download the WHOLE page not an optimised one </li></ul>
    57. 69. Thanks. Questions? “ The Way is shaped by use,But then the shape is lost.Do not hold fast to shapesBut let sensation flow into the worldAs a river courses down to the sea.—DAO DE JING, section 32, “Shapes”
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×