How to build a perfect <img>

Let's talk about how to build the perfect element. I want to show you how complex, something as simple as putting an image on a webpage can be.

I’m sure you’ve seen an HTML image tag before. You've probably used image tags; either directly through HTML, or via a CMS.

I’m sure that you think the way you do that is perfectly reasonable, and that whatever approach you’re using meets best practices; more or less.

Or if you’re not the one implementing it, your team of highly qualified, expert developers who do it on your behalf, do so in a way that isn’t monstrously wrong.

You’d be surprised.

Transcript

1. #smx @jonoalderson
   How to make a
   perfect website
   
   

   View Slide

2. #smx @jonoalderson
   Photo by Max Baskakov on Unsplash
   

   View Slide

3. #smx @jonoalderson
   src="bob.bmp" />
   

   View Slide

4. #smx @jonoalderson
   alt="A sad cat" />
   

   View Slide

5. #smx @jonoalderson
   alt="A sad cat" />
   

   View Slide

6. #smx @jonoalderson
   .app
   

   View Slide

7. #smx @jonoalderson
   

   View Slide

8. #smx @jonoalderson
   youtube.com/watch?v=F1kYBnY6mwg
   

   View Slide

9. #smx @jonoalderson
   alt="A sad cat" />
   500px
   

   View Slide

10. #smx @jonoalderson
    alt="A sad cat" /> 280px
    

    View Slide

11. #smx @jonoalderson
    alt="A sad cat" />
    ?
    

    View Slide

12. #smx @jonoalderson
    alt="A sad cat"
    srcset="bob.jpg x1,
    cat-2x.jpg x2" />
    

    View Slide

13. #smx @jonoalderson
    alt="A sad cat"
    srcset="cat-2x.jpg x2"
    />
    

    View Slide

14. #smx @jonoalderson
    alt="A sad cat"
    srcset="cat-2x.jpg x2,
    cat-3x.jpg x3" />
    

    View Slide

15. #smx @jonoalderson
    alt="A sad cat"
    srcset="cat-1-35x.jpg
    x1.35 cat-1-5x.jpg
    x1.5, cat-2x.jpg x2,
    cat-3x.jpg x3" />
    

    View Slide

16. #smx @jonoalderson
    [what if we want him
    to be responsive?]
    

    View Slide

17. #smx @jonoalderson
    style="background:
    url(bob.jpg)" />
    

    View Slide

18. #smx @jonoalderson
    alt="A sad cat"
    style="object-fit: cover"
    />
    

    View Slide

19. #smx @jonoalderson
    

    View Slide

20. #smx @jonoalderson
    

    View Slide

21. #smx @jonoalderson
    [what if we want him
    to be responsive?]
    

    View Slide

22. #smx @jonoalderson
    
    srcset="cat-large.jpg, cat-large-2x.jpg 2x">
    srcset="cat-small.jpg, cat-small-2x.jpg 2x">
    srcset="cat-small-2x.jpg x2" alt="A sad cat">
    
    

    View Slide

23. #smx @jonoalderson
    
    srcset="cat-landscp.jpg, cat-landscp-2x.jpg
    2x">
    srcset="cat-portrait.jpg, cat-portrait-2x.jpg
    2x">
    srcset="cat-small-2x.jpg x2" alt="A sad cat">
    
    

    View Slide

24. #smx @jonoalderson
    
    srcset="cat-large.jpg, cat-large-2x.jpg 2x">
    srcset="cat-small.avif, cat-small-2x.avif 2x">
    srcset="cat-small-2x.jpg x2" alt="A sad cat">
    
    

    View Slide

25. #smx @jonoalderson
    
    media="(-webkit-min-device-pixel-ratio:
    1.5)" src="cat-large-dpi_1_5.jpg">
    media="(-webkit-min-device-pixel-ratio: 2)"
    src="cat-large-dpi_2.jpg">
    srcset="cat-small-2x.jpg x2" alt="A sad cat">
    
    

    View Slide

26. #smx @jonoalderson
    
    srcset="cat-large-a.jpg, cat-large-a-2x.jpg 2x">
    type="image/jpeg" srcset="cat-large-b.jpg, cat-large-b-2x.jpg 2x">
    type="image/jpeg" srcset="cat-large-c.jpg, cat-large-c-2x.jpg 2x">
    srcset="cat-large-a.avif, cat-large-a-2x.avif 2x">
    type="image/AVIF" srcset="cat-large-b.avif, cat-large-b-2x.avif 2x">
    type="image/AVIF" srcset="cat-large-c.avif, cat-large-c-2x.avif 2x">
    
    
    

    View Slide

27. #smx @jonoalderson
    [what if we want him
    to be responsive?]
    

    View Slide

28. #smx @jonoalderson
    <br/>.bob {<br/>width: 100%;<br/>height: auto;<br/>max-width: 500px;<br/>}<br/>
    

    View Slide

29. #smx @jonoalderson
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc
    hendrerit ante ultrices, gravida dolor ac, aliquet quam. Class
    aptent taciti sociosqu ad litora torquent per conubia nostra, per
    inceptos himenaeos. Aenean semper suscipit efficitur. Cras lectus
    metus, tincidunt at tellus quis, eleifend ultrices urna.
    Jono’s fun example webpage
    

    View Slide

30. #smx @jonoalderson
    Lorem ipsum
    dolor sit amet,
    consectetur
    adipiscing elit.
    Nunc hendrerit
    ante ultrices,
    gravida dolor ac,
    aliquet quam.
    Class aptent taciti
    sociosqu ad litora
    torquent per
    conubia nostra,
    per...
    Jono’s fun example webpage
    

    View Slide

31. #smx @jonoalderson
    
    srcset="cat-large.jpg, cat-large-2x.jpg 2x">
    srcset="cat-small.jpg, cat-small-2x.jpg 2x">
    src="cat-small.jpg" srcset="cat-small-2x.jpg
    x2" alt="A sad cat">
    
    

    View Slide

32. #smx @jonoalderson
    
    srcset="cat-large.jpg, cat-large-2x.jpg 2x">
    srcset="cat-small.jpg, cat-small-2x.jpg 2x">
    src="cat-small.jpg" srcset="cat-small-2x.jpg
    x2" alt="A sad cat">
    
    

    View Slide

33. #smx @jonoalderson
    https://css-tricks.com/aspect-ratio-boxes/
    

    View Slide

34. #smx @jonoalderson
    https://css-tricks.com/aspect-ratio-boxes/
    

    View Slide

35. #smx @jonoalderson
    Lorem ipsum
    dolor sit amet,
    consectetur
    adipiscing elit.
    Nunc hendrerit
    ante ultrices,
    gravida dolor ac,
    aliquet quam.
    Class aptent taciti
    sociosqu ad litora
    torquent per
    conubia nostra,
    per...
    Jono’s fun example webpage
    

    View Slide

36. #smx @jonoalderson
    
    srcset="cat-large.jpg, cat-large-2x.jpg 2x">
    srcset="cat-small.jpg, cat-small-2x.jpg 2x">
    height="350px" src="cat-small.jpg"
    srcset="cat-small-2x.jpg x2" alt="A sad cat">
    
    

    View Slide

37. #smx @jonoalderson
    
    srcset="cat-large.jpg, cat-large-2x.jpg 2x">
    srcset="cat-small.jpg, cat-small-2x.jpg 2x">
    height="350px" src="cat-small.jpg"
    srcset="cat-small-2x.jpg x2" alt="A sad cat">
    
    

    View Slide

38. #smx @jonoalderson
    
    srcset="cat-large.jpg, cat-large-2x.jpg 2x">
    srcset="cat-small.jpg, cat-small-2x.jpg 2x">
    width="350" height="350"
    src="cat-small.jpg" srcset="cat-small-2x.jpg
    x2" alt="A sad cat">
    
    

    View Slide

39. #smx @jonoalderson
    Lorem ipsum
    dolor sit amet,
    consectetur
    adipiscing elit.
    Nunc hendrerit
    ante ultrices,
    gravida dolor ac,
    aliquet quam.
    Class aptent taciti
    sociosqu ad litora
    torquent per
    conubia nostra,
    per...
    Jono’s fun example webpage
    

    View Slide

40. #smx @jonoalderson
    https://github.com/malchata/yall.js/
    

    View Slide

41. #smx @jonoalderson
    
    data-srcset="cat-large.jpg, cat-large-2x.jpg 2x">
    data-srcset="cat-small.jpg, cat-small-2x.jpg 2x">
    width="350" height="350" class="lazy"
    src="placeholder.jpg" data-src="cat-small.jpg"
    data-srcset="cat-small-2x.jpg x2" alt="A sad cat">
    
    

    View Slide

42. #smx @jonoalderson
    
    data-srcset="cat-large.jpg, cat-large-2x.jpg 2x">
    data-srcset="cat-small.jpg, cat-small-2x.jpg 2x">
    width="350" height="350" class="lazy"
    src="cat-low-res.jpg" data-src="cat-small.jpg"
    data-srcset="cat-small-2x.jpg x2" alt="A sad cat">
    
    

    View Slide

43. #smx @jonoalderson
    
    data-srcset="cat-large.jpg, cat-large-2x.jpg 2x">
    data-srcset="cat-small.jpg, cat-small-2x.jpg 2x">
    width="350" height="350"
    src="data:image/png;base64,iVBORw0KGgoAAAANSU
    hEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42
    mP8z8BQDwAEhQGAhKmMIQAAAABJRU5ErkJggg=="
    data-src="cat-small.jpg" data-srcset="cat-small-2x.jpg
    x2" alt="A sad cat">
    
    

    View Slide

44. #smx @jonoalderson
    
    width="350" height="350" class="lazy"
    src="cat.avif" srcset="cat-small-2x.avif x2"
    alt="A sad cat">
    
    

    View Slide

45. #smx @jonoalderson
    
    data-srcset="cat-large.jpg, cat-large-2x.jpg 2x">
    data-srcset="cat-small.jpg, cat-small-2x.jpg 2x">
    width="350" height="350"
    src="data:image/png;base64,iVBORw0KGgoAAAANSU
    hEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42
    mP8z8BQDwAEhQGAhKmMIQAAAABJRU5ErkJggg=="
    data-src="cat-small.jpg" data-srcset="cat-small-2x.jpg
    x2" alt="A sad cat">
    
    

    View Slide

46. #smx @jonoalderson
    
    
    src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAY
    AAAAfFcSJAAAADUlEQVR42mP8z8BQDwAEhQGAhKmMIQAAAABJRU5ErkJgg
    g==" width="350" height="350" data-src="cat-small.jpg"
    data-srcset="cat-small-2x.jpg x2" alt="A sad cat">
    
    
    
    
    srcset="cat-small-2x.jpg x2" alt="A sad cat">
    
    
    

    View Slide

47. #smx @jonoalderson
    
    
    src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAY
    AAAAfFcSJAAAADUlEQVR42mP8z8BQDwAEhQGAhKmMIQAAAABJRU5ErkJgg
    g==" width="350" height="350" data-src="cat-small.jpg"
    data-srcset="cat-small-2x.jpg x2" alt="A sad cat">
    
    
    
    
    srcset="cat-small-2x.jpg x2" alt="A sad cat">
    
    
    

    View Slide

48. #smx @jonoalderson
    
    
    document.documentElement.classList.remove("no<br/>-js")
    <br/>.no-js .lazy {<br/>display: none;<br/>}<br/>
    
    
    [...]
    [...]
    
    
    

    View Slide

49. #smx @jonoalderson
    <br/>.lazy {<br/>will-change: opacity;<br/>opacity: 0;<br/>transition: 1s opacity ease-out;<br/>}<br/>.lazy.loaded {<br/>opacity: 1;<br/>}<br/>
    

    View Slide

50. #smx @jonoalderson
    Lorem ipsum
    dolor sit amet,
    consectetur
    adipiscing elit.
    Nunc hendrerit
    ante ultrices,
    gravida dolor ac,
    aliquet quam.
    Class aptent taciti
    sociosqu ad litora
    torquent per
    conubia nostra,
    per...
    Jono’s fun example webpage
    

    View Slide

51. #smx @jonoalderson
    
    width="350" height="350" class="lazy"
    src="data:image/png;base64,iVBORw0KGgoAAA
    ANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAA
    DUlEQVR42mP8z8BQDwAEhQGAhKmMIQAAA
    ABJRU5ErkJggg==" data-src="cat-small.jpg"
    alt="A sad cat" data-srcset="cat-250.jpg 250w,
    cat-300.jpg 300w, cat-400.jpg 400w, cat-500.jpg
    500w, cat-600.jpg 600w, cat-800.jpg 800w,
    cat-1000.jpg 1000w" sizes="(max-width: 500px)
    100vw, 500px">
    
    

    View Slide

52. #smx @jonoalderson
    
    width="350" height="350" class="lazy"
    src="data:image/png;base64,iVBORw0KGgoAAA
    ANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAA
    DUlEQVR42mP8z8BQDwAEhQGAhKmMIQAAA
    ABJRU5ErkJggg==" data-src="cat-small.jpg"
    alt="A sad cat" data-srcset="cat-250.jpg 250w,
    cat-300.jpg 300w, cat-400.jpg 400w, cat-500.jpg
    500w, cat-600.jpg 600w, cat-800.jpg 800w,
    cat-1000.jpg 1000w" sizes="(max-width: 500px)
    calc(100vw - 20px), (max-width: 1000px)
    calc(50vw - 20px), 500px">
    
    

    View Slide

53. #smx @jonoalderson
    
    data-srcset="cat-250-dark.jpg 250w cat-300-dark.jpg 300w,
    cat-400-dark.jpg 400w, cat-500-dark.jpg 500w, cat-600-dark.jpg
    600w, cat-800-dark.jpg 800w, cat-1000-dark.jpg 1000w"
    sizes="(max-width: 500px) calc(100vw - 20px), (max-width:
    1000px) calc(50vw - 20px), 500px">
    src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgA
    AAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z8BQDwA
    EhQGAhKmMIQAAAABJRU5ErkJggg==" width="350"
    height="350" data-src="cat-small.jpg" alt="A sad cat"
    data-srcset="cat-250.jpg 250w, cat-300.jpg 300w, cat-400.jpg
    400w, cat-500.jpg 500w, cat-600.jpg 600w, cat-800.jpg 800w,
    cat-1000.jpg 1000w" sizes="(max-width: 500px) calc(100vw -
    20px), (max-width: 1000px) calc(50vw - 20px), 500px">
    
    

    View Slide

54. #smx @jonoalderson
    

    View Slide

55. #smx @jonoalderson
    
    src="data:image/png;base64,iVBORw0KGgoAAAANSUhEU
    gAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z8B
    QDwAEhQGAhKmMIQAAAABJRU5ErkJggg=="
    data-src="/cdn-cgi/image/width=350,height=350,quality=75
    /cat.jpg" alt="A sad cat" width="350" height="350"
    data-srcset="/cdn-cgi/image/width=250,height=250,quality
    =75/cat.jpg 250w,
    /cdn-cgi/image/width=300,height=300,quality=75/cat.jpg
    300w,
    /cdn-cgi/image/width=400,height=400,quality=75/cat.jpg
    400w" sizes="(max-width: 500px) calc(100vw - 20px),
    (max-width: 1000px) calc(50vw - 20px), 500px">
    
    

    View Slide

56. #smx @jonoalderson
    Jono’s fun example webpage
    [what if we want him
    to be responsive?]
    

    View Slide

57. #smx @jonoalderson
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc
    hendrerit ante ultrices, gravida dolor ac, aliquet quam. Class
    aptent taciti sociosqu ad litora torquent per conubia nostra,
    per...
    Jono’s fun example webpage
    1200px
    300px
    

    View Slide

58. #smx @jonoalderson
    
    data-srcset="/cdn-cgi/image/width=1200,height=300,quality=75/cat.j
    pg 1200w,
    /cdn-cgi/image/dpr=2,width=1200,height=300,quality=75/cat.jpg
    2400w" sizes="100wv" height="300" width="1200"
    style="--aspect-ratio:4/1;">
    class="lazy" alt="A sad cat" style="--aspect-ratio:1/1;"
    src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAE
    AAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z8BQDwAEhQGAhK
    mMIQAAAABJRU5ErkJggg=="
    data-src="/cdn-cgi/image/width=350,height=350,quality=75/cat.jpg"
    data-srcset="/cdn-cgi/image/width=250,height=250,quality=75/cat.jp
    g 250w, /cdn-cgi/image/width=300,height=300,quality=75/cat.jpg
    300w, /cdn-cgi/image/width=400,height=400,quality=75/cat.jpg
    400w" sizes="(max-width: 500px) calc(100vw - 20px), (max-width:
    1000px) calc(50vw - 20px), 500px">
    
    

    View Slide

59. #smx @jonoalderson
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc
    hendrerit ante ultrices, gravida dolor ac, aliquet quam. Class
    aptent taciti sociosqu ad litora torquent per conubia nostra,
    per...
    Jono’s fun example webpage
    1200px
    300px
    280px
    

    View Slide

60. #smx @jonoalderson
    
    src="/cdn-cgi/image/width=350,height=350,quality
    =75/cat.jpg" />
    
    

    View Slide

61. #smx @jonoalderson
    
    imagesrcset="/cdn-cgi/image/width=250,height=
    250,quality=75/cat.jpg 250w,
    /cdn-cgi/image/width=300,height=300,quality=75/
    cat.jpg 300w,
    /cdn-cgi/image/width=400,height=400,quality=75
    /cat.jpg 400w"
    imagesizes="(max-width: 500px) calc(100vw -
    20px), (max-width: 1000px) calc(50vw - 20px),
    500px"
    />
    
    

    View Slide

62. #smx @jonoalderson
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc
    hendrerit ante ultrices, gravida dolor ac, aliquet quam. Class
    aptent taciti sociosqu ad litora torquent per conubia nostra,
    per...
    Jono’s fun example webpage
    1200px
    300px
    280px
    

    View Slide

63. #smx @jonoalderson
    click for cats
    
    click for cats
    
    
    

    View Slide

64. #smx @jonoalderson
    click for cats
    <br/>.cat-icon::after {<br/>--icon: url(data:image/svg+xml,[SVG_GOES_HERE]);<br/>line-height: 1.25rem;<br/>display: inline-block;<br/>width: 1.25rem;<br/>height: 1.25rem;<br/>content: "";<br/>background: currentColor;<br/>-webkit-mask-image: var(--icon);<br/>-webkit-mask-size: 1.25rem 1.25rem;<br/>-webkit-mask-repeat: no-repeat;<br/>-webkit-mask-position: center center;<br/>background-size: 100% 100%;<br/>}<br/>
    

    View Slide

65. #smx @jonoalderson
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc
    hendrerit ante ultrices, gravida dolor ac, aliquet quam. Class
    aptent taciti sociosqu ad litora torquent per conubia nostra,
    per...
    Jono’s fun example webpage
    1200px
    300px
    280px
    click for cats
    

    View Slide

66. #smx @jonoalderson
    
    
    src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAA
    BCAYAAAAfFcSJAAAADUlEQVR42mP8z8BQDwAEhQGAhKmMIQAAAA
    BJRU5ErkJggg=="
    data-src="/cdn-cgi/image/width=350,height=350,quality=75/cat.jpg"
    alt="A sad cat, linking to a page about cats" width="350" height="350"
    data-srcset="/cdn-cgi/image/width=250,height=250,quality=75/cat.jpg
    250w, /cdn-cgi/image/width=300,height=300,quality=75/cat.jpg 300w,
    /cdn-cgi/image/width=400,height=400,quality=75/cat.jpg 400w"
    sizes="(max-width: 500px) calc(100vw - 20px), (max-width: 1000px)
    calc(50vw - 20px), 500px">
    
    
    

    View Slide

67. #smx @jonoalderson
    
    
    src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAA
    BCAYAAAAfFcSJAAAADUlEQVR42mP8z8BQDwAEhQGAhKmMIQAAAA
    BJRU5ErkJggg=="
    data-src="/cdn-cgi/image/width=350,height=350,quality=75/cat.jpg" alt="A
    sad cat" width="350" height="350"
    data-srcset="/cdn-cgi/image/width=250,height=250,quality=75/cat.jpg
    250w, /cdn-cgi/image/width=300,height=300,quality=75/cat.jpg 300w,
    /cdn-cgi/image/width=400,height=400,quality=75/cat.jpg 400w"
    sizes="(max-width: 500px) calc(100vw - 20px), (max-width: 1000px)
    calc(50vw - 20px), 500px">
    A sad cat. Photo by href="https://unsplash.com/@snowboardinec">Max Baskakov
    
    
    
    A sad cat. Photo by Max Baskakov
    

    View Slide

68. #smx @jonoalderson
    <figure>
    
    
    src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAY
    AAAAfFcSJAAAADUlEQVR42mP8z8BQDwAEhQGAhKmMIQAAAABJRU5ErkJgg
    g=="
    data-src="/cdn-cgi/image/width=350,height=350,quality=75/cat.jpg" alt=""
    width="350" height="350"
    data-srcset="/cdn-cgi/image/width=250,height=250,quality=75/cat.jpg 250w,
    /cdn-cgi/image/width=300,height=300,quality=75/cat.jpg 300w,
    /cdn-cgi/image/width=400,height=400,quality=75/cat.jpg 400w"
    sizes="(max-width: 500px) calc(100vw - 20px), (max-width: 1000px) calc(50vw -
    20px), 500px">
    
    
    <figcaption>A sad cat. Photo by href="https://unsplash.com/@snowboardinec">Max Baskakovfigcaption>
    figure>
    A sad cat. Photo by Max Baskakov
    

    View Slide

69. #smx @jonoalderson
    youtube.com/watch?v=flf2vS0IoRs
    

    View Slide

70. #smx @jonoalderson
    cloudinary.com/blog/evolution_of_img_gif_without_the_gif
    

    View Slide

71. #smx @jonoalderson
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc
    hendrerit ante ultrices, gravida dolor ac, aliquet quam. Class
    aptent taciti sociosqu ad litora torquent per conubia nostra,
    per...
    Jono’s fun example webpage
    300px
    click for cats
    A sad cat. Photo by Max Baskakov
    A sad cat. Photo by Max Baskakov
    

    View Slide

72. #smx @jonoalderson
    Take a breath.
    

    View Slide

73. #smx @jonoalderson
    My point isn’t,
    “images are complex”
    

    View Slide

74. #smx @jonoalderson
    developers.google.com/web/fundamentals/design-and-ux/responsive/images
    

    View Slide

75. #smx @jonoalderson
    My point isn’t,
    “go learn all of this”
    or
    “make your images perfect”
    

    View Slide

76. #smx @jonoalderson
    How to make a
    perfect
    load a font
    

    View Slide

77. #smx @jonoalderson
    href="https://fonts.gstatic.com">
    href="https://fonts.googleapis.com/css2?family=Rub
    ik&display=swap" rel="stylesheet">
    Hello
    world
    

    View Slide

78. #smx @jonoalderson
    <br/>@font-face {<br/>font-family:'Rubik'; src: url('/fonts/rubik.ttf’);<br/>}<br/>
    Hello
    world
    

    View Slide

79. #smx @jonoalderson
    <br/>@font-face { font-family:'Rubik'; font-style:normal; font-weight:400; font-display:swap; unicode-range:U+0000-00FF, U+0131, U+0152-0153,<br/>U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;<br/>src:local('Rubik'), local('Rubik-Regular'), url('/fonts/rubik-latin-400.woff2?ver=1606167081') format('woff2'); }<br/>@font-face { font-family:'Rubik'; font-style:normal; font-weight:700; font-display:swap; unicode-range:U+0000-00FF, U+0131, U+0152-0153,<br/>U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;<br/>src:local('Rubik Bold'), local('Rubik-Bold'), url('/fonts/rubik-latin-700.woff2?ver=1606167081') format('woff2'); }<br/>@font-face { font-family:'Rubik'; font-style:normal; font-weight:400; font-display:swap; unicode-range:U+0100-024F, U+0259,<br/>U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; src:local('Rubik'), local('Rubik-Regular'),<br/>url('/fonts/rubik-latin-ext-400.woff2?ver=1606167081') format('woff2'); }<br/>@font-face { font-family:'Rubik'; font-style:normal; font-weight:700; font-display:swap; unicode-range:U+0100-024F, U+0259, U+1E00-1EFF,<br/>U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; src:local('Rubik Bold'), local('Rubik-Bold'),<br/>url('/fonts/rubik-latin-ext-700.woff2?ver=1606167081') format('woff2'); }<br/>
    

    View Slide

80. #smx @jonoalderson
    
    <br/>@font-face { font-family:'Rubik'; font-style:normal; font-weight:400; font-display:fallback; unicode-range:U+0000-00FF, U+0131,<br/>U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,<br/>U+FEFF, U+FFFD; src:local('Rubik'), local('Rubik-Regular'), url('/fonts/rubik-latin-400.woff2?ver=1606167081') format('woff2'); }<br/>@font-face { font-family:'Rubik'; font-style:normal; font-weight:700; font-display:swap; unicode-range:U+0000-00FF, U+0131, U+0152-0153,<br/>U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;<br/>src:local('Rubik Bold'), local('Rubik-Bold'), url('/fonts/rubik-latin-700.woff2?ver=1606167081') format('woff2'); }<br/>@font-face { font-family:'Rubik'; font-style:normal; font-weight:400; font-display:swap; unicode-range:U+0100-024F, U+0259,<br/>U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; src:local('Rubik'), local('Rubik-Regular'),<br/>url('/fonts/rubik-latin-ext-400.woff2?ver=1606167081') format('woff2'); }<br/>@font-face { font-family:'Rubik'; font-style:normal; font-weight:700; font-display:swap; unicode-range:U+0100-024F, U+0259, U+1E00-1EFF,<br/>U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; src:local('Rubik Bold'), local('Rubik-Bold'),<br/>url('/fonts/rubik-latin-ext-700.woff2?ver=1606167081') format('woff2'); }<br/>
    

    View Slide

81. #smx @jonoalderson
    
    <br/>body, input, button, select, textarea {<br/>font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Ubuntu, roboto, noto, arial, sans-serif;<br/>}<br/>@font-face { font-family:'Rubik'; font-style:normal; font-weight:400; font-display:optional; unicode-range:U+0000-00FF, U+0131, U+0152-0153,<br/>U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; src:local('Rubik'),<br/>local('Rubik-Regular'), url('/fonts/rubik-latin-400.woff2?ver=1606167081') format('woff2'); }<br/>@font-face { font-family:'Rubik'; font-style:normal; font-weight:700; font-display:swap; unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC,<br/>U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; src:local('Rubik Bold'),<br/>local('Rubik-Bold'), url('/fonts/rubik-latin-700.woff2?ver=1606167081') format('woff2'); }<br/>@font-face { font-family:'Rubik'; font-style:normal; font-weight:400; font-display:swap; unicode-range:U+0100-024F, U+0259, U+1E00-1EFF, U+2020,<br/>U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; src:local('Rubik'), local('Rubik-Regular'),<br/>url('/fonts/rubik-latin-ext-400.woff2?ver=1606167081') format('woff2'); }<br/>@font-face { font-family:'Rubik'; font-style:normal; font-weight:700; font-display:swap; unicode-range:U+0100-024F, U+0259, U+1E00-1EFF, U+2020,<br/>U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; src:local('Rubik Bold'), local('Rubik-Bold'),<br/>url('/fonts/rubik-latin-ext-700.woff2?ver=1606167081') format('woff2'); }<br/>
    

    View Slide

82. #smx @jonoalderson
    <br/>@font-face {<br/>font-family: "Rubik-fallback-Arial";<br/>size-adjust: 97.38%;<br/>ascent-override: 99%;<br/>letter-spacing: -0.0135em;<br/>src: local("Arial");<br/>}<br/>body, input, button, select, textarea {<br/>font-family: -apple-system, BlinkMacSystemFont, avenir next,<br/>avenir, segoe ui, helvetica neue, helvetica, Ubuntu, roboto,<br/>noto, Rubik-fallback-Arial, sans-serif;<br/>}<br/>
    

    View Slide

83. #smx @jonoalderson
    My point isn’t,
    “fonts are complex”
    

    View Slide

84. #smx @jonoalderson
    

    View Slide

85. #smx @jonoalderson
    My point isn’t,
    “go learn all of this”
    or
    “make your fonts perfect”
    

    View Slide

86. #smx @jonoalderson
    Deja vu?
    

    View Slide

87. #smx @jonoalderson
    Publishing & optimization suite Telco infrastructure
    (fibre, security, analytics)
    App store
    Operating system
    

    View Slide

88. #smx @jonoalderson
    Anticlimactic, eh?
    

    View Slide

89. #smx @jonoalderson
    “We can do this
    ourselves”
    

    View Slide

90. #smx @jonoalderson
    Stop trying to
    make a perfect
    website
    

    View Slide

91. #smx @jonoalderson
    Stop accepting that
    it’s normal for your
    website to be crappy
    

    View Slide

92. #smx @jonoalderson
    Get other people to
    make your website
    perfect for you
    

    View Slide

93. #smx @jonoalderson
    Telco infrastructure
    (fibre, security, analytics)
    Publishing & optimization suite
    App store
    Operating system
    

    View Slide

94. #smx @jonoalderson
    Get help
    Win
    

    View Slide

95. #smx @jonoalderson
    Thanks!
    

    View Slide