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

One Web

5ad82c5ba0264363974af89deb743c20?s=47 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.

5ad82c5ba0264363974af89deb743c20?s=128

Jeremy Keith

October 10, 2011
Tweet

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