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.

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 “ ”
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
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 “
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
29. mobile first
30. content first
31. presentation behaviour content
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%; ! } }
46. if ($(document).width() > 640) { ! $.get('path/to/html', function(data) { ! ! $('[role="complementary"]').append(data); ! }); }
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 “
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 “
60. one web