Mais conteúdo relacionado Semelhante a Creating Responsive Experiences (20) Creating Responsive Experiences3. It's cheap but degrading to reuse
content and design across diverging
media forms like print vs. online or
Jakob Nielsen
desktop vs. mobile.
http://bit.ly/KTERAA
5. It's not enough to simply modify the
layout by moving stuff around on the
screen and enlarging or diminishing
Jakob Nielsen
particular design elements.
http://bit.ly/KTERAA
16. If someone says there’s only one true
way of working and designing online,
Ethan Marcotte
look at them funny.
http://bit.ly/Kzfy2m
18. “
Responsive design simply rearranges the
content of your site to fit on a mobile screen.
http://bit.ly/LjaVxv
27. We see the world through a rear-
view mirror. We march backwards
Marshall McLuhan
into the future.
36. These examples are just the initial,
telltale signs of a huge new wave of
cheap devices about to invade our
Scott Jenson
lives—a zombie apocalypse of
electronics, if you will.
http://bit.ly/giroPy
41. Typically, masking passwords
doesn't even increase security,
but it does cost you business due
Jakob Nielsen
to login failures
http://bit.ly/9X3LAG
54. <html>
<head>
! <meta name="viewport" content="width=device-
width" />
</head>
<body>
! <video id="myVid" width="300" height="375"
autoplay></video>
! <input id="camera" type="button" disabled="true"
value="Take Photo"></input>
! <canvas id="still" width="300" height="375"></
canvas>
</body>
</html>
55. <html>
<head>
! <meta name="viewport" content="width=device-
width" />
</head>
<body>
! <video id="myVid" width="300" height="375"
autoplay></video>
! <input id="camera" type="button" disabled="true"
value="Take Photo"></input>
! <canvas id="still" width="300" height="375"></
canvas>
</body>
</html>
56. <script>
! navigator.getUserMedia({video: true}, function
(stream) {
! ! var video = document.getElementById("video");
! ! var canvas = document.getElementById("still");
! ! var button = document.getElementById("camera");
! ! video.src = stream;
! ! button.disabled = false;
! ! button.onclick = function() {
! ! ! canvas.getContext("2d").drawImage(video, 0, 0);
! };
}, function(err) { alert("Oh snap! There was an error "
+ err)});
</script>
57. <script>
! navigator.getUserMedia({video: true}, function
(stream) {
! ! var video = document.getElementById("video");
! ! var canvas = document.getElementById("still");
! ! var button = document.getElementById("camera");
! ! video.src = stream;
! ! button.disabled = false;
! ! button.onclick = function() {
! ! ! canvas.getContext("2d").drawImage(video, 0, 0);
! };
}, function(err) { alert("Oh snap! There was an error "
+ err)});
</script>
58. <script>
! navigator.getUserMedia({video: true}, function
(stream) {
! ! var video = document.getElementById("video");
! ! var canvas = document.getElementById("still");
! ! var button = document.getElementById("camera");
! ! video.src = stream;
! ! button.disabled = false;
! ! button.onclick = function() {
! ! ! canvas.getContext("2d").drawImage(video, 0, 0);
! };
}, function(err) { alert("Oh snap! There was an error "
+ err)});
</script>
59. <script>
! navigator.getUserMedia({video: true}, function
(stream) {
! ! var video = document.getElementById("video");
! ! var canvas = document.getElementById("still");
! ! var button = document.getElementById("camera");
! ! video.src = stream;
! ! button.disabled = false;
! ! button.onclick = function() {
! ! ! canvas.getContext("2d").drawImage(video, 0, 0);
! };
}, function(err) { alert("Oh snap! There was an error "
+ err)});
</script>
63. Context is the key to moving
from a web that responds to
devices, to a web that
responds to people
65. If nothing else, it would be wise for us
all to remember that, while our
information technology may be
digital in nature, the human beings
Adam Greenfield
interacting with it will always be
infuriatingly and delightfully analog.
66. We need all the tools
we can get
http://flic.kr/p/7MdW6A
75. It is a bad carpenter who quarrels
with his tools.
Mahatma Gandhi
http://bit.ly/Kzfy2m
78. if ($device->getCapability('has_cellular_radio') ===
'true') {
! if ($device->getCapability
('xhtml_make_phone_call_string') !== 'none') {
! ! $wireless = true;
! ! $method = $device->getCapability
('xhtml_make_phone_call_string');
! } else {
! ! $wireless = false;
! }
} else {
! $wireless = false;
}
79. if ($device->getCapability('has_cellular_radio') ===
'true') {
! if ($device->getCapability
('xhtml_make_phone_call_string') !== 'none') {
! ! $wireless = true;
! ! $method = $device->getCapability
('xhtml_make_phone_call_string');
! } else {
! ! $wireless = false;
! }
} else {
! $wireless = false;
}
80. if ($device->getCapability('has_cellular_radio') ===
'true') {
! if ($device->getCapability
('xhtml_make_phone_call_string') !== 'none') {
! ! $wireless = true;
! ! $method = $device->getCapability
('xhtml_make_phone_call_string');
! } else {
! ! $wireless = false;
! }
} else {
! $wireless = false;
}
81. if ($device->getCapability('has_cellular_radio') ===
'true') {
!if ($device->getCapability
('xhtml_make_phone_call_string') !== 'none') {
! ! $wireless = true;
! ! $method = $device->getCapability
('xhtml_make_phone_call_string');
! } else {
! ! $wireless = false;
! }
} else {
! $wireless = false;
}
82. <?php if ($wireless) { ?>
! <p><a href="<?php echo $method; ?>
+18005555555">1-800-555-5555</a></p>
<?php } else { ?>
! <p class="call">1-800-555-5555</p>
<?php } ?>
83. <?php if ($wireless) { ?>
! <p><a href="<?php echo $method; ?>
+18005555555">1-800-555-5555</a></p>
<?php } else { ?>
! <p class="call">1-800-555-5555</p>
<?php } ?>
84. <?php if ($wireless) { ?>
! <p><a href="<?php echo $method; ?>
+18005555555">1-800-555-5555</a></p>
<?php } else { ?>
! <p class="call">1-800-555-5555</p>
<?php } ?>
85. <?php if ($wireless) { ?>
! <p><a href="<?php echo $method; ?>
+18005555555">1-800-555-5555</a></p>
<?php } else { ?>
! <p class="call">1-800-555-5555</p>
<?php } ?>
88. <body id="top" class="<?php echo $device-
>getCapability('pointing_method'); ?>">
hasTouch = 'ontouchstart' in window ||
'createTouch' in document;
89. <body id="top" class="<?php echo $device-
>getCapability('pointing_method'); ?>">
hasTouch = 'ontouchstart' in window ||
'createTouch' in document;
90. <body id="top" class="<?php echo $device-
>getCapability('pointing_method'); ?>">
hasTouch = 'ontouchstart' in window ||
'createTouch' in document;
97. What’s holding smart devices back is
our oh-so-human ability to
misunderstand their potential.
Scott Jenson
http://bit.ly/HS0Jvs