" As the capabilities of the web platform advance, and the pervasiveness of web content proliferates, fundamental design principles are more important than ever: How do you enhance your experience as new capabilities become available in Microsoft Edge and other browsers? You've considered how your content looks and operates on mobile, but how does that design adapt to desktop devices? Is it usable via ""headless"" interfaces like screen readers or Cortana? Does your content adapt gracefully to the constraints of its environment? In this session, Aaron Gustafson will help you think about user experience from its foundation, so you understand what it means to build adaptive web experiences – whether in an app, in a browser, or beyond. We’ll show you some of the newest capabilities coming to Microsoft Edge that let you build differentiated experiences on Windows 10. You’ll walk away practical, cross-platform code examples you can put to use in your projects today, and foundational principles to ensure that your projects are ready for anything. "

4. https://aka.ms/desktop-v-mobile-2016

5. Desktop Mobile
*Based on 77 billion website visits.
https://aka.ms/desktop-web-2017

6. News
Desktop Mobile
Food
Desktop Mobile
Finance
Desktop Mobile
https://aka.ms/desktop-web-2017

7. Desktop Mobile
*Based on 39 trillion seconds.
https://aka.ms/desktop-web-2017

8. Finance
Desktop Mobile
Food
Desktop Mobile
News
Desktop Mobile
https://aka.ms/desktop-web-2017

9. Desktop Mobile
0
5
10
15
20
25
30
35
40
45
50
*Based on 584 billion page views.
https://aka.ms/desktop-web-2017

10. Desktop Mobile
*Based on 584 billion page views.
https://aka.ms/desktop-web-2017

11. Finance
Desktop Mobile
Food
Desktop Mobile
News
Desktop Mobile
https://aka.ms/desktop-web-2017

16. Katarzyna Ostrowska
https://aka.ms/carnival-pwa

20. PWAs start with a great web experience and then
enhance that experience for performance,
resilience, installation, and engagement

21. PWAs start with a great web experience and then
enhance that experience for performance,
resilience, installation, and engagement

22. PWAs start with a great web experience and then
enhance that experience for performance,
resilience, installation, and engagement

25. Consider forbes.com circa 2007

26. “Mobile first” thinking

39. <br>

40. <div class="entry">
<div class="entry__title">Progressive Web Apps and
the Windows Ecosystem</div>
<div class="entry__meta">
<div><b>Published</b> 24 May 2017</div>
<div><b>Reading Time</b> 25 minutes</div>
</div>
<div class="entry__content">
I had the great pleasure of delivering a talk…
<br><br>
I do a lot of traveling and it’s…
</div>
</div>

41. <article class="entry">
<div class="entry__title">Progressive Web Apps and
the Windows Ecosystem</div>
<div class="entry__meta">
<div><b>Published</b> 24 May 2017</div>
<div><b>Reading Time</b> 25 minutes</div>
</div>
<div class="entry__content">
I had the great pleasure of delivering a talk…
<br><br>
I do a lot of traveling and it’s…
</div>
</article>

42. <article class="entry">
<div class="entry__title">Progressive Web Apps and
the Windows Ecosystem</div>
<div class="entry__meta">
<div><b>Published</b> 24 May 2017</div>
<div><b>Reading Time</b> 25 minutes</div>
</div>
<div class="entry__content">
I had the great pleasure of delivering a talk…
<br><br>
I do a lot of traveling and it’s…
</div>
</article>

43. <article class="entry">
<h1 class="entry__title">Progressive Web Apps and
the Windows Ecosystem</h1>
<div class="entry__meta">
<div><b>Published</b> 24 May 2017</div>
<div><b>Reading Time</b> 25 minutes</div>
</div>
<div class="entry__content">
I had the great pleasure of delivering a talk…
<br><br>
I do a lot of traveling and it’s…
</div>
</article>

44. <article class="entry">
<h1 class="entry__title">Progressive Web Apps and
the Windows Ecosystem</h1>
<div class="entry__meta">
<div><b>Published</b> 24 May 2017</div>
<div><b>Reading Time</b> 25 minutes</div>
</div>
<div class="entry__content">
I had the great pleasure of delivering a talk…
<br><br>
I do a lot of traveling and it’s…
</div>
</article>

45. <article class="entry">
<h1 class="entry__title">Progressive Web Apps and
the Windows Ecosystem</h1>
<dl class="entry__meta">
<dt>Published</dt> <dd>24 May 2017</dd>
<dt>Reading Time</dt> <dd>25 minutes</dd>
</dl>
<div class="entry__content">
I had the great pleasure of delivering a talk…
<br><br>
I do a lot of traveling and it’s…
</div>
</article>

46. <article class="entry">
<h1 class="entry__title">Progressive Web Apps and
the Windows Ecosystem</h1>
<dl class="entry__meta">
<dt>Published</dt> <dd><time>24 May 2017</time></dd>
<dt>Reading Time</dt> <dd>25 minutes</dd>
</dl>
<div class="entry__content">
I had the great pleasure of delivering a talk…
<br><br>
I do a lot of traveling and it’s…
</div>
</article>

48. <article class="entry">
<h1 class="entry__title">Progressive Web Apps and
the Windows Ecosystem</h1>
<dl class="entry__meta">
<dt>Published</dt> <dd><time …>24 May 2017</time></dd>
<dt>Reading Time</dt> <dd>25 minutes</dd>
</dl>
<div class="entry__content">
I had the great pleasure of delivering a talk…
<br><br>
I do a lot of traveling and it’s…
</div>
</article>

49. <article class="entry">
<h1 class="entry__title">Progressive Web Apps and
the Windows Ecosystem</h1>
<dl class="entry__meta">
<dt>Published</dt> <dd><time …>24 May 2017</time></dd>
<dt>Reading Time</dt> <dd>25 minutes</dd>
</dl>
<div class="entry__content">
<div>I had the great pleasure of delivering a talk…</div>
<div>I do a lot of traveling and it’s…</div>
</div>
</article>

50. <article class="entry">
<h1 class="entry__title">Progressive Web Apps and
the Windows Ecosystem</h1>
<dl class="entry__meta">
<dt>Published</dt> <dd><time …>24 May 2017</time></dd>
<dt>Reading Time</dt> <dd>25 minutes</dd>
</dl>
<div class="entry__content">
<p>I had the great pleasure of delivering a talk…</p>
<p>I do a lot of traveling and it’s…</p>
</div>
</article>

55. Hey Cortana, read me the top three
headlines in today’s New York Times

57. function extractHeadlines( response ){
var $html = document.createElement('div'),
$headings, i=0, headlines=[];
$html.innerHTML = response.contents;
$headings = $html.querySelector('#top-news')
.querySelectorAll('article h1, article h2, article h3');
heading_count = $headings.length;
while (headlines.length < 3) {
let $link = $headings[i].querySelector('a');
if ($link && $link.href) {
headlines.push({
title: $headings[i].innerText.trim(),
link: $link.href
});
}
i++;
}
console.log( headlines );
}

58. https://aka.ms/dependency-awareness

59. <a class="button" href="#">Sign Up</a>
<div class="button">Sign Up</div>
Sign Up

60. Pattern Display Semantics Focusable? Activate By
Submits
Forms
input[type=submit] button button Yes
Mouse, touch,
ENTER, SPACE
Yes
button[type=submit] button button Yes
Mouse, touch,
ENTER, SPACE
Yes
a link
Named
generic
Yes
Mouse, touch,
ENTER
No
div block
Not
exposed
No N/A No

61. Pattern Display Semantics Focusable? Activate By
Submits
Forms
input[type=submit] button button Yes
Mouse, touch,
ENTER, SPACE
Yes
button[type=submit] button button Yes
Mouse, touch,
ENTER, SPACE
Yes
a link
Named
generic
Yes
Mouse, touch,
ENTER
No
div block
Not
exposed
No N/A No

62. Pattern Display Semantics Focusable? Activate By
Submits
Forms
input[type=submit] None None None None None
button[type=submit] None None None None None
a CSS ARIA None JavaScript JavaScript
div CSS ARIA HTML JavaScript JavaScript

63. Dependencies
Potentialforfailure

65. Dependencies
Potentialforfailure

66. Capabilities
UserExperience

68. type="email"
Experience deltas
1. Support for email input type?
2. Validation algorithm implemented?
3. Virtual keyboard?

69. required
Experience deltas
1. Support for HTML validation?

70. required aria-required="true"
Experience deltas
1. Browser exposure of aria-required property?
2. Assistive tech implementation of aria-required?

71. Capabilities
UserExperience

74. Capabilities
UserExperience

75. https://aka.ms/enhanced-css-layouts

76. Good design is
problem solving.

78.  Alignment
 Balance
 Contrast
 Emphasis
 Gestalt
 Harmony
 Movement
 Proportion
 Proximity
 Repetition
 Rhythm
 Unity
 White Space

83. https://aka.ms/vertical-rhythm

86. ☞
☞
☞
☞
☞

87.  Screen size
 Resolution
 Brightness
 Color density
 User preference
 Network speed & quality
 Assistive technology

90. Confirm Cancel
Confirm Cancel
Don’t rely on color
alone to convey
important information

91. https://aka.ms/color-contrast
Good contrast
ensures your content
is readable

92. Explicit connections
ensure everyone can
follow references

93. shows the lodging article
in Safari with only the default
browser styles applied.
…
Explicit connections
ensure everyone can
follow references

95. Consider what
your design
leaves unsaid

96. Consider what
your design
leaves unsaid

97. <b class="hidden">You can</b>
<b class="hidden">“The Web
Should Just Work for
Everyone” in less than
10 minutes</b>
Consider what
your design
leaves unsaid

98. Capabilities
UserExperience

99. Passwords can be a hassle.
Most people don’t create
strong passwords or make sure
to maintain a different one for
every site. People create easy-
to-remember passwords and
typically use the same
passwords across all of their
accounts.

100. Older browsers without RGBa support, ignore the second rule
Passwords can be a hassle.
Most people don’t create
strong passwords or make sure
to maintain a different one for
every site. People create easy-
to-remember passwords and
typically use the same
passwords across all of their
accounts.

101. Modern browsers with RGBa support, overwrite the first rule

102. (That selects h1s that have adjacent sibling paragraphs.)
Passwords can be
a hassle

103. Browsers that don’t support :has() ignore the entire rule set
Passwords can be
a hassle

104. As browsers support :has(), matching h1s will turn green
Passwords can be
a hassle

105. Passwords can be a hassle.
Most people don’t create
strong passwords or make sure
to maintain a different one for
every site. People create easy-
to-remember passwords and
typically use the same
passwords across all of their
accounts.

106. Browsers without media query support ignore the block
Passwords can be a hassle.
Most people don’t create
strong passwords or make sure
to maintain a different one for
every site. People create easy-
to-remember passwords and
typically use the same
passwords across all of their
accounts.

107. Browsers with media query support apply it
Passwords can be a hassle.
Most people don’t create
strong passwords or make sure
to maintain a different one for
every site. People create easy-
to-remember passwords and
typically use the same
passwords across all of their
accounts.

108. Passwords can be a hassle.
Most people don’t create
strong passwords or make sure
to maintain a different one for
every site. People create easy-
to-remember passwords and
typically use the same
passwords across all of their
accounts.

109. Browsers that don’t grok @supports ignore the block
Passwords can be a hassle.
Most people don’t create
strong passwords or make sure
to maintain a different one for
every site. People create easy-
to-remember passwords and
typically use the same
passwords across all of their
accounts.

110. Browsers that understand @supports, but don’t display grid ignore it
Passwords can be a hassle.
Most people don’t create
strong passwords or make sure
to maintain a different one for
every site. People create easy-
to-remember passwords and
typically use the same
passwords across all of their
accounts.

111. Browsers that understand @supports and grid apply it
Passwords can be a hassle.
Most people don’t create
strong passwords or make sure
to maintain a different one for
every site. People create easy-
to-remember passwords and
typically use the same
passwords across all of their
accounts.

114. https://aka.ms/enhanced-css-layouts

115. Capabilities
UserExperience

116. “Mobile first” design

117. “Desktop first”

118. @media (max-width:599px) {
.primary, .secondary {
float: none;
width: auto;
}
}
“Desktop first”

119. .primary {
float: left;
width: 68%;
}
.secondary {
float: right;
width: 32%;
}
“Desktop first”

120. “Mobile first”

121. @media (min-width:600px) {
.primary {
float: left;
width: 68%;
}
.secondary {
float: right;
width: 32%;
}
}
“Mobile first”

123. Capabilities
UserExperience

128. https://aka.ms/js-let-down

129. https://aka.ms/js-let-down

130. Dependencies
Potentialforfailure

132. Capabilities
UserExperience

138. Capabilities
UserExperience

141. navigator.serviceWorker.register('/serviceworker.js')
.then(function(registration) {
console.log('Success!', registration.scope);
})
.catch(function(error) {
console.error('Failure!', error);
});

142. Capabilities
UserExperience

143. Capabilities
UserExperience

144. Capabilities
UserExperience

146. Detecting “dark mode”

147. var uiSettings = new Windows.UI
.ViewManagement
.UISettings();
var color = uiSettings
.getColorValue(
Windows.UI
.ViewManagement
.UIColorType
.background
);
if (color.r == 0 && color.g == 0
&& color.b == 0) {
// changes for Dark Mode
}
Detecting “dark mode”

148. if (window.Windows) {
var color = uiSettings
.getColorValue(
Windows.UI
.ViewManagement
.UIColorType
.background
);
if (color.r == 0 && color.g == 0
&& color.b == 0) {
// changes for Dark Mode
}
}
Detecting “dark mode”

149. if (window.Windows) {
var uiSettings = new Windows.UI
.ViewManagement
.UISettings();
if (color.r == 0 && color.g == 0
&& color.b == 0) {
// changes for Dark Mode
}
}
Detecting “dark mode”

150. if (window.Windows) {
var uiSettings = new Windows.UI
.ViewManagement
.UISettings();
var color = uiSettings
.getColorValue(
Windows.UI
.ViewManagement
.UIColorType
.background
);
}
Detecting “dark mode”

151. https://aka.ms/dark-mode-pwa-demo

153. Capabilities
UserExperience

155. PWAs start with a great web experience and then
enhance that experience for performance,
resilience, installation, and engagement

156. Focus Markup
Design JavaScript