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

One Web

Jeremy Keith
October 10, 2011

One Web

The range of devices accessing the web is increasing. We are faced with a choice in how we deal with this diversity. We can either fracture the web by designing a multitude of device-specific silos, or we can embrace the flexibility of the web and create experiences that can adapt to any device or browser.

Jeremy Keith

October 10, 2011
Tweet

More Decks by Jeremy Keith

Other Decks in Design

Transcript

  1. e primary design principle underlying the Web’s usefulness and growth

    is universality. e Web should be usable by people with disabilities. It must work with any form of information, be it a document or a point of data, and information of any quality— om a silly tweet to a scholarly paper. And it should be accessible om any kind of hardware that can connect to the Internet: stationary or mobile, small screen or large. —Tim Berners-Lee Long Live the Web “ ”
  2. None
  3. print

  4. print

  5. print

  6. Grid System + The Page order constraint control

  7. web

  8. control web

  9. Table Layout The Browser order constraint control +

  10. CSS The Browser order constraint control +

  11. The Browser unknown

  12. None
  13. speed unknown capability size

  14. size 640 x 480 800 x 600 1024 x 768

    fixed
  15. flexible %

  16. e control which designers know in the print medium, and

    o en desire in the web medium, is simply a function of the limitation of the printed page. We should embrace the fact that the web doesn’t have the same constraints, and design for this exibility.” —John Allsopp A Dao of Web Design “
  17. WYSIWTF

  18. One of the main reasons why many people cling to

    the expectation that a web design should look the same across every browser is that one of the rst things that designers show them is a carefully cra ed static design made in Photoshop or Fireworks.” —Andy Clarke Time to stop showing clients static design visuals “
  19. None
  20. speed capability size unknown

  21. mobile web desktop tablet

  22. one web flexible

  23. Rather than tailoring disconnected designs to each of an ever-increasing

    number of web devices, we can treat them as facets of the same experience. We can design for an optimal viewing experience, but embed standards-based technologies into our designs to make them not only more exible, but more adaptive to the media that renders them.” —Ethan Marcotte Responsive Web Design “
  24. clarification

  25. None
  26. None
  27. None
  28. None
  29. mobile first

  30. content first

  31. presentation behaviour content

  32. None
  33. None
  34. <link rel="stylesheet" href="global.css" media="all">

  35. <link rel="stylesheet" href="global.css" media="all"> <link rel="stylesheet" href="layout.css" media="all and (min-width:

    30em)">
  36. <link rel="stylesheet" href="global.css" media="all"> <link rel="stylesheet" href="layout.css" media="all and (min-width:

    30em)"> <!--[if lt IE 9]> <link rel="stylesheet" href="layout.css" media="all"> <![endif]-->
  37. <link rel="stylesheet" href="global.css" media="all"> <link rel="stylesheet" href="layout.css" media="all and (min-width:

    30em)"> <!--[if (lt IE 9) & (!IEMobile)]> <link rel="stylesheet" href="layout.css" media="all"> <![endif]-->
  38. <link rel="stylesheet" href="global.css" media="all"> <link rel="stylesheet" href="layout.css" media="all and (min-width:

    30em)"> <!--[if (lt IE 9) & (!IEMobile) & (gt IE 6)]> <link rel="stylesheet" href="layout.css" media="all"> <![endif]-->
  39. <link rel="stylesheet" href="global.css" media="all"> <link rel="stylesheet" href="layout.css" media="all and (min-width:

    30em)"> <!--[if (lt IE 9) & (!IEMobile) & (gt IE 6)]> <link rel="stylesheet" href="layout.css" media="all"> <![endif]--> <meta name="viewport" content= "width=device-width">
  40. <meta name="viewport" content= "width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="global.css" media="all"> <link

    rel="stylesheet" href="layout.css" media="all and (min-width: 30em)"> <!--[if (lt IE 9) & (!IEMobile) & (gt IE 6)]> <link rel="stylesheet" href="layout.css" media="all"> <![endif]-->
  41. [role="main"] { ! width: 61.8034%; ! float: left; } [role="complementary"]

    { ! width: 38.1966%; ! float: right; } @media all and (max-width: 60em) { ! [role="main"], ! [role="complementary"] { ! ! width: 50%; ! } }
  42. None
  43. None
  44. None
  45. None
  46. if ($(document).width() > 640) { ! $.get('path/to/html', function(data) { !

    ! $('[role="complementary"]').append(data); ! }); }
  47. None
  48. None
  49. None
  50. It’s my belief that in order to embrace designing native

    layouts for the web – whatever the device – we need to shed the notion that we create layouts om a can as in. We need to ip it on its head, and create layouts om the content out.” —Mark Boulton A Richer Canvas “
  51. web apps?

  52. it depends

  53. context first?

  54. Mind reading is no way to base fundamental content decisions.”

    —Mark Kirby e Mobile context “
  55. None
  56. None
  57. None
  58. My lo e for responsive centers around the idea that

    my website will meet you wherever you are — om mobile to full-blown desktop and anywhere in between.” —Trent Walton Fit To Scale “
  59. None
  60. one web