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

This is for Everyone (LDNIA #4)

This is for Everyone (LDNIA #4)

Graphic designers have long honed their craft to meet the specific constraints of television. As web designers begin to understand the true nature of our own medium, isn’t about time we did the same?

Paul Robert Lloyd

August 21, 2013
Tweet

More Decks by Paul Robert Lloyd

Other Decks in Design

Transcript

  1. This is for
    everyone
    Paul Robert Lloyd
    LDNIA #4
    21 August 2013 – London, England

    View Slide

  2. View Slide

  3. View Slide

  4. View Slide

  5. 14:9 image safe
    14:9 text safe

    View Slide

  6. View Slide

  7. View Slide

  8. The nature of the web

    View Slide


  9. The web’s primary design principle is
    universality... it should be accessible
    from any kind of hardware that can
    connect to the Internet: stationary or
    mobile, small screen or large.
    scientificamerican.com/article.cfm?id=long-live-the-web
    Long Live the Web: A Call for Continued Open Standards and Neutrality
    — Tim Berners-Lee

    View Slide

  10. View Slide

  11. flickr.com/photos/brad_frost/7387823392/

    View Slide

  12. View Slide

  13. View Slide

  14. View Slide

  15. © Jay Harrison

    View Slide

  16. 5 July 2012
    @marcoarment
    If you’re a web designer, you really, really
    need to get a Retina MacBook Pro so you can
    see how bad your site looks on it and fix it.
    twitter.com/marcoarment/status/220968507117015040

    View Slide

  17. 6 July 2012
    @anna_debenham
    If you’re a web designer, you really, really
    need to get a cheap Dell monitor so you can
    see how bad your site looks on it and fix it.
    twitter.com/anna_debenham/status/221277339517067265

    View Slide

  18. console.maban.co.uk

    View Slide


  19. It is the nature of the web to be
    flexible, and it should be our role as
    designers and developers to
    embrace this flexibility.
    alistapart.com/articles/dao
    A Dao of Web Design
    — John Allsopp

    View Slide

  20. View Slide

  21. Total Transfer Size and Total Requests: Top 1000 Sites
    httparchive.org/trends.php
    700
    800
    900
    1,000
    1,100
    1,200
    1,300
    2012 Aug Sep Oct Nov Dec Jan Feb Mar Apr May Jun 2013
    88 90 91 97 97 98 98 98 98 100 100 99 100
    Total Requests
    Total Transfer Size (kB)

    View Slide

  22. What Users Want From Mobile
    e-commercefacts.com/research/2011/07/what-usrs-want-from-mobil/19986_WhatMobileUsersWant_Wp.pdf
    > 5s
    12%
    5s
    18%
    4s
    11%
    3s
    24%
    2s
    21%
    < 1s
    14%
    3 seconds or less:
    59%
    What are your
    expectations for
    how quickly a
    website should
    load on your
    mobile phone?

    View Slide


  23. It’s time for us to treat performance as
    an essential design feature, not just
    as a technical best practice.
    bradfrostweb.com/blog/post/performance-as-design/
    Performance As Design
    — Brad Frost

    View Slide

  24. flickr.com/photos/teegardin/5913014568/

    View Slide

  25. Average Bytes per Page by Content Type: Top 1000 Sites (July 2013)
    httparchive.org/interesting.php
    CSS
    37 kB
    HTML
    47 kB
    Other
    184 kB
    Flash
    79 kB
    Scripts
    209 kB
    Images
    668 kB
    Total
    1246 kB

    View Slide

  26. Responsive images

    View Slide

  27. View Slide

  28. Flexible
    Adaptable
    Scalable
    %, ems
    The web

    View Slide

  29. Fixed
    Static
    Rasterised
    px
    Flexible
    Adaptable
    Scalable
    %, ems
    The web Bitmap images

    View Slide

  30. Flexible
    Adaptable
    Vectorised
    %, ems
    Flexible
    Adaptable
    Scalable
    %, ems
    The web Scalable Vector Graphics (SVG)

    View Slide

  31. View Slide


  32. welcomebrand.co.uk/thoughts/the-responsive-web-will-be-99-9-typography/
    The responsive web will be 99% typography
    — James Young
    The responsive web will be
    99% typography

    View Slide

  33. View Slide

  34. Meaning is the baseline
    Design is an enhancement

    View Slide

  35. How do we decide
    which images should
    exist in our markup?

    View Slide

  36. Interface Informative Decorative
    Vector (SVG)
    Icon font
    Bitmap (JPG, PNG) Bitmap (JPG, PNG)
    CSS image replacement

    CSS background
    Remove?
    Image Types

    View Slide

  37. Interface Informative Decorative
    Vector (SVG)
    Icon font
    Bitmap (JPG, PNG) Bitmap (JPG, PNG)
    CSS image replacement

    CSS background
    Remove?
    Image Types

    View Slide

  38. Interface Informative Decorative
    Vector (SVG)
    Icon font
    Bitmap (JPG, PNG) Bitmap (JPG, PNG)
    CSS image replacement

    CSS background
    Remove?
    Image Types

    View Slide

  39. View Slide

  40. The Jobcentre Plus brand
    Our brand encompasses the nature of our
    relationship with customers. It is expressed
    throughout our communications, the attitude
    of our staff, and is symbolised by our identity.
    Within the offices, the expression of the brand
    identity is delivered through branded signs,
    graphic communications, and a range of
    component elements that are synonymous
    with Jobcentre Plus. These are set against a
    backdrop of colours, finishes and materials of
    the brand environment. The consistent
    Informative
    Decorative
    UK unemployment total
    falls to 2.5m
    UK unemployment fell in the three months to
    December, while the number in work also jumped to a
    new record, official figures show.
    The jobless total fell by 14,000 between October and
    December to 2.5 million, the Office for National
    Statistics (ONS) said.
    The number in work rose by 154,000 to 29.7 million. More
    than 580,000 more people are employed than a year ago.
    The number of people claiming Jobseeker's Allowance in
    January fell by 12,500 to 1.54 million.

    View Slide

  41. Facebook U-turn after
    charities criticise
    decapitation videos
    Facebook has said it will delete videos of people
    being decapitated which had been spread on its site.
    "We will remove instances of these videos that are
    reported to us while we evaluate our policy and approach
    to this type of content," it said.
    The news came less than two hours after the BBC
    revealed a member of Facebook's own safety advisory
    board had criticised its stance.
    The social network had previously refused to ban the
    Facebook U-turn after
    charities criticise
    decapitation videos
    Facebook has said it will delete videos of people
    being decapitated which had been spread on its site.
    "We will remove instances of these videos that are
    reported to us while we evaluate our policy and approach
    to this type of content," it said.
    The news came less than two hours after the BBC
    revealed a member of Facebook's own safety advisory
    board had criticised its stance.
    The social network had previously refused to ban the
    ‘HiDPI’ image Standard resolution image
    Decorative
    46kb 8kb
    Decorative

    View Slide






  42. Alternative textual description of image.

    The picture element: An HTML extension for adaptive images
    picture.responsiveimages.org

    View Slide

  43. Responsive Enhance
    https://github.com/joshje/Responsive-Enhance
    Scalable Bitmaps
    http://ericportis.com/posts/2013/scalables/
    Responsive Image Patterns
    http://paulrobertlloyd.github.com/responsivepatterns

    View Slide



  44. Feature to make elements not load their images until needed
    w3.org/Bugs/Public/show_bug.cgi?id=17842
    HTML Markup
    DOMContentLoaded

    View Slide

  45. 28 April 2013
    @paulrobertlloyd
    Consider new attributes over new elements
    over new markup languages.
    twitter.com/paulrobertlloyd/status/328487022429888512

    View Slide

  46. The Web Aesthetic

    View Slide

  47. The Web Aesthetic
    alistapart.com/article/the-web-aesthetic

    View Slide

  48. nytimes.com

    View Slide

  49. nytimes.com/skimmer

    View Slide

  50. rdio.com

    View Slide

  51. rdio.com

    View Slide

  52. qz.com

    View Slide

  53. buzz.blogger.com/2011/09/dynamic-views-seven-new-ways-to-share.html

    View Slide

  54. buzz.blogger.com/2011/09/dynamic-views-seven-new-ways-to-share.html

    View Slide

  55. thatemil.com/blog/2013/05/22/drowning/
    HTML, CSS, JavaScript, Sublime Text, PHP, Python, Ruby, Rails, Django, bash,
    Grunt, Git, Photoshop, Fabric, XPath, GPU, CPU, URLs, pen and paper, BDD,
    Sharpies, Textmate, IE, Composer, jank, Ice Cream Sandwich, Node, XP,
    Marionette, Cake, npm, Transmit, e-mail, flexbox, Firefox, a11y, Yeoman, Brunch,
    zsh, MVC, angular, Ghostlab, Illustrator, Backbone, dotfiles, Express, A/B testing,
    Chrome, stand-ups, semver, bizdev, Fireworks, .gitkeep, TDD, Silex, HTTP,
    rebase, jQuery, Jekyll, Travis, Charles, JSON, Hammer, i10n, Bower, Capybara,
    Capistrano, Watir, Buster, Mocha, Puppet, Chef, Virtualbox, CoffeeScript, Firefox,
    Adobe Edge, Jellybean, Webdriver, LightTable, Cucumber, Batman, ARIA, Web
    Components, Flight, AdWords, SPDY, Agile, shadow DOM, uglify, svn, clojure,
    RWD, blink and you will have missed something.
    Drowning

    View Slide

  56. thatemil.com/blog/2013/05/22/drowning/
    HTML, CSS, JavaScript, Sublime Text, PHP, Python, Ruby, Rails, Django, bash,
    Grunt, Git, Photoshop, Fabric, XPath, GPU, CPU, URLs, pen and paper, BDD,
    Sharpies, Textmate, IE, Composer, jank, Ice Cream Sandwich, Node, XP,
    Marionette, Cake, npm, Transmit, e-mail, flexbox, Firefox, a11y, Yeoman, Brunch,
    zsh, MVC, angular, Ghostlab, Illustrator, Backbone, dotfiles, Express, A/B testing,
    Chrome, stand-ups, semver, bizdev, Fireworks, .gitkeep, TDD, Silex, HTTP,
    rebase, jQuery, Jekyll, Travis, Charles, JSON, Hammer, i10n, Bower, Capybara,
    Capistrano, Watir, Buster, Mocha, Puppet, Chef, Virtualbox, CoffeeScript, Firefox,
    Adobe Edge, Jellybean, Webdriver, LightTable, Cucumber, Batman, ARIA, Web
    Components, Flight, AdWords, SPDY, Agile, shadow DOM, uglify, svn, clojure,
    RWD, blink and you will have missed progressive enhancement.
    Drowning

    View Slide

  57. View Slide

  58. Design for the web.

    View Slide

  59. cc
    Thank you!
    Creative Commons Licensed
    Attribution, Non-Commercial, Share Alike
    paulrobertlloyd.com
    @paulrobertlloyd

    View Slide