Upgrade to Pro — share decks privately, control downloads, hide ads and more …

What does Responsive Web Design mean in 2016

What does Responsive Web Design mean in 2016

At the heart of every progressive web app is a responsive site, built to be mobile first.

Unfortunately the techniques used to build mobile first sites are the same we have used for over a decade. Thankfully, browsers have been busy implementing new features that enable us to build better sites and have more fun while doing it!

So today we are going to look at ways we can build better responsive sites in 2016 using these new features

Jonathan Fielding

May 09, 2016
Tweet

More Decks by Jonathan Fielding

Other Decks in Programming

Transcript

  1. What does Responsive
    Web Design mean in 2016?
    Jonathan Fielding @jonthanfielding

    View full-size slide

  2. A bit about me…
    • Technical Architect at Beamly
    • Author of Beginning Responsive Design
    • Regular contributor to open source, including
    SimpleStateManager, Echo.js, CriticalJS, FT’s
    Polyfill Service, Doccy among many projects
    • Lover and user of ‘the Twitter’

    View full-size slide

  3. At the heart of every
    progressive web app is a
    responsive site

    View full-size slide

  4. Built to be mobile first

    View full-size slide

  5. .floated-element {
    float: left
    }
    .clearfix {
    overflow: auto;
    }
    .vertical-content {
    height: 40px;
    position: absolute;
    top: 50%;
    margin-top: -20px;
    }
    However the
    techniques used to build
    mobile first sites are the
    same we have used for
    over a decade

    View full-size slide

  6. Browsers have been busy
    implementing new features
    that enable us to build better
    sites and have more fun while
    doing it!

    View full-size slide

  7. Our site content

    View full-size slide

  8. Bobby Anderson
    Everyday Designer
    “Content is king, it always has been
    and always will be. Content is why
    users visit your site, subscribe to
    your newsletters and follow you on
    social media. Content is the single
    most important aspect of your
    website...”
    http://everydaydesigner.net/design/change-your-focus-and-design-content-first

    View full-size slide

  9. Content must work across a
    wide variety of devices

    View full-size slide

  10. Device usage (Global averages)
    54% 41% 5%
    source: Statcounter http://gs.statcounter.com/#all-comparison-ww-monthly-201504-201604

    View full-size slide

  11. Where possible, don’t rely on
    global statistics, look at your
    own site’s usage stats

    View full-size slide

  12. Auditing your content

    View full-size slide

  13. An audit of your content is
    simply an inventory of what
    you want to include in your
    page

    View full-size slide

  14. The audit of our content
    needs to be done before you
    start your UX or Design

    View full-size slide

  15. Jeremy Girard
    UXPin
    “Starting a website design without
    content is like creating packaging
    design without the product. You can
    do your best, but who knows if the
    end content or product will truly fit
    into what you create?”
    https://studio.uxpin.com/blog/a-better-responsive-web-design-process-for-2016/

    View full-size slide

  16. And you should include your
    stakeholders in the auditing
    process

    View full-size slide

  17. Prioritising Content

    View full-size slide

  18. Content does not have to be
    in the same order on every
    device

    View full-size slide

  19. Example: Different content
    priorities for a restaurant
    Small devices Large devices
    Phone number Atmosphere
    Directions Menu
    Booking Booking
    Menu Phone number
    Atmosphere Directions

    View full-size slide

  20. So this is how it could
    look on mobile

    View full-size slide

  21. and this is how it transforms to larger devices

    View full-size slide

  22. To reorder content based on
    the type of device we can use
    CSS Flexbox to handle the
    ordering and target the
    device based on the screen
    size

    View full-size slide



  23. I am more important on mobile


    I am more important on desktop


    View full-size slide

  24. @media only screen and (min-width: 768px) {
    .wrapper {
    display: flex;
    flex-direction: column;
    }
    .better-content-for-desktop {
    order: 1;
    }
    .better-content-for-mobile {
    order: 2;
    }
    }

    View full-size slide

  25. Ensuring content is
    discoverable

    View full-size slide

  26. On larger devices navigating
    a site is often really easy

    View full-size slide

  27. Unfortunately, on the
    majority of smaller devices,
    navigation on a site becomes
    less obvious

    View full-size slide

  28. Larger devices also have
    more space for content but
    don’t hide content
    completely on small devices

    View full-size slide

  29. Instead think of ways in
    which you can change the
    functionality to better suit
    the device

    View full-size slide

  30. Laying out your content

    View full-size slide

  31. Responsive design has lead
    us to building our
    components to be fluid

    View full-size slide

  32. Enabling our components to
    scale to the different device
    sizes we are aiming to
    support

    View full-size slide

  33. Only recently however have
    we been able to do this
    without resorting to hacks

    View full-size slide

  34. Input Add-ons

    View full-size slide




  35. Go


    .input-wrap {
    display: flex;
    }
    .input-wrap__field {
    flex: 1;
    /* field styles */
    }
    .input-wrap__button {
    /* item styles */
    }
    HTML CSS

    View full-size slide

  36. Vertical Centered
    Content

    View full-size slide



  37. I'm Centered!

    This box is vertically
    and horizontally centered



    .aligner {
    display: flex;
    align-items: center;
    justify-content: center;
    }
    .aligned-content {
    max-width: 50%;
    }
    HTML CSS

    View full-size slide

  38. Sticky Footer

    View full-size slide


  39. ...
    ...
    ...

    .site {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
    margin: 0;
    }
    .site-content {
    flex: 1;
    }
    HTML CSS

    View full-size slide


  40. ...
    ...

    .grid {
    display: flex;
    }
    .grid-cell {
    flex: 1;
    }
    HTML CSS

    View full-size slide

  41. Individual Sized Grids

    View full-size slide

  42. How to measure the
    success of content
    optimisation

    View full-size slide

  43. Invite your users into your
    office and have them test
    your site

    View full-size slide

  44. Go out into the streets and
    ask people to test your site

    View full-size slide

  45. A-B test different
    functionality

    View full-size slide

  46. Content is King

    View full-size slide

  47. Time for obligatory kittens

    View full-size slide

  48. Site Performance

    View full-size slide

  49. There are three key types of
    performance that are
    important to a website

    View full-size slide

  50. Render performance -
    The time it takes for the
    browser to start rendering
    the page

    View full-size slide

  51. Page load performance -
    The time it takes to fully load
    a page and be fully
    interactive

    View full-size slide

  52. Perceived performance -
    the perception of the user of
    the performance of our site

    View full-size slide

  53. Why should I care about
    the performance of the
    site?

    View full-size slide

  54. A responsive site is expected
    to work on a wide variety of
    internet connections

    View full-size slide

  55. and from a financial point of
    view, it can affect your
    business

    View full-size slide

  56. Amazon found every 100ms
    delay in loading a page cost
    them 1% in sales

    View full-size slide

  57. Google found an extra
    500ms delay in loading of
    search results decreased
    traffic by 20%

    View full-size slide

  58. The trend of the past few
    years however is for pages to
    increase in weight

    View full-size slide

  59. Average page weight has been increasing
    year on year
    Average Page Size (kB)
    0
    575
    1150
    1725
    2300
    April 2013 April 2014 April 2015 April 2016
    Data from http://httparchive.org/interesting.php

    View full-size slide

  60. Average Page
    Weight
    >

    View full-size slide

  61. Scripts
    Fonts
    Video
    Images
    Stylesheets
    HTML
    Other
    0 350 700 1050 1400
    4
    56
    69
    1,350
    209
    107
    354
    Data from http://httparchive.org/interesting.php

    View full-size slide

  62. The average time to start rendering is also
    increasing
    Render start (ms)
    0
    1150
    2300
    3450
    4600
    March 2014 August 2014 March 2015 August 2015
    Data from http://httparchive.org/interesting.php

    View full-size slide

  63. What steps can I take to
    improve site performance?

    View full-size slide

  64. Create a performance
    budget

    View full-size slide

  65. A performance budget
    relates to the size of the
    assets in our page

    View full-size slide

  66. Tim Kadlec
    “The purpose of a performance
    budget is to make sure you focus
    on performance throughout a
    project. The reason you go
    through the trouble in the first
    place though is because you want
    to build a site that feels fast for
    your visitors.”
    http://www.timkadlec.com/2014/11/performance-budget-metrics/

    View full-size slide

  67. At the start of your project
    you need to understand the
    metrics you want to achieve

    View full-size slide

  68. As we are building a
    responsive site, today’s
    example will aim to start
    rendering in 5 seconds on a
    slow 3G connection

    View full-size slide

  69. To start with we need to
    define ‘slow 3G’

    View full-size slide

  70. WebPageTest defines this as
    96 kilobytes per second

    View full-size slide

  71. So as we want to load our site
    in 5 seconds…

    View full-size slide

  72. 96KB x 5secs = 480KB

    View full-size slide

  73. We can then split 480KB
    across our assets

    View full-size slide

  74. Budget we defined
    HTML CSS JavaScript Images
    30kb 40kb 50kb 360kb

    View full-size slide

  75. If we then decide we want to
    add web fonts to our website
    we then adjust our budget

    View full-size slide

  76. Budget we defined
    HTML CSS JavaScript Images Fonts
    30kb 40kb 50kb 300kb 60kb

    View full-size slide

  77. These figures seem very
    ambitious when we compare
    them against the industry
    averages but they are
    achievable

    View full-size slide

  78. Calculate your budget
    yourself using
    www.performancebudget.io

    View full-size slide

  79. Optimise how you load
    your assets

    View full-size slide

  80. Provide different images for
    different viewport sizes using
    the element

    View full-size slide

  81. To use the picture element on your site
    you will need to include the polyfill which
    is called “picturefill”

    View full-size slide

  82. Defer loading of both image
    and video to improve the
    initial page load

    View full-size slide

  83. The most common content to defer
    loading is images

    View full-size slide

  84. In cases where loading assets
    was deferred, it is important
    to ensure a suitable
    placeholder is in place

    View full-size slide

  85. In deferring the loading of
    our content only those
    images immediately visible to
    our users contribute to our
    page budget

    View full-size slide

  86. Defer loading of
    content

    View full-size slide

  87. The content is the heart of
    our site but not all content is
    created equal

    View full-size slide

  88. Lets look at an example of
    how Metro defer the
    loading of related content

    View full-size slide

  89. The biggest danger of
    deferring content is that if
    JavaScript fails to load the
    content that is deferred will
    not be loaded

    View full-size slide

  90. We should therefore be
    careful with what content we
    choose to defer loading

    View full-size slide

  91. The biggest advantage of
    deferring content is that we
    are able to reduce the size of
    what we initially deliver to
    our users

    View full-size slide

  92. Building a responsive site is
    about much more than
    building a site that works
    across mobile, tablet and
    desktop

    View full-size slide

  93. It’s about adapting the user
    experience of a site so that
    regardless of the device the
    user still gets the best
    experience possible

    View full-size slide

  94. When building a responsive
    site we should spend time
    focusing on the content and
    performance

    View full-size slide

  95. Our content should be
    prioritised and discoverable

    View full-size slide

  96. And the perception of our
    site to our users should be
    that it loads fast

    View full-size slide

  97. Full examples of everything we have
    talked about can be found at
    www.jonathanfielding.com/talks/
    responsive-design-in-2016/

    View full-size slide

  98. Flexbox examples based upon Solved by Flexbox
    by Philip Walton
    https://philipwalton.github.io/solved-by-flexbox/

    View full-size slide

  99. A special thanks goes out to to Charlie
    Fielding, Kate Montgomery and everyone at
    Beamly who helped me with putting these
    slides together.

    View full-size slide

  100. Thank you,
    any questions?

    View full-size slide