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. 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. 2.
  3. 3.
  4. 4.
  5. 5.
  6. 7.

    web

  7. 12.
  8. 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 “
  9. 17.
  10. 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 “
  11. 19.
  12. 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 “
  13. 25.
  14. 26.
  15. 27.
  16. 28.
  17. 32.
  18. 33.
  19. 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]-->
  20. 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]-->
  21. 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]-->
  22. 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">
  23. 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]-->
  24. 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%; ! } }
  25. 42.
  26. 43.
  27. 44.
  28. 45.
  29. 46.

    if ($(document).width() > 640) { ! $.get('path/to/html', function(data) { !

    ! $('[role="complementary"]').append(data); ! }); }
  30. 47.
  31. 48.
  32. 49.
  33. 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 “
  34. 51.
  35. 55.
  36. 56.
  37. 57.
  38. 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 “
  39. 59.
  40. 60.