In this presentation I give a brief introduction into Responsive Web Design, Adaptive Web Design and SharePoint Device Channels.
What are the key facts and what needs to be considered to build a great user experience no matter what or where you like to view the content.
15. Media
Query
@media
print
{
…
}
@media
handheld
and
(min-‐width:
20em),
screen
and
(min-‐width:
20em)
{
…
}
16. Birth
of
Responsive
Web
Design
Date
of
Birth:
25.5.2010
LocaMon:
Responsive
Web
Design
@
A
list
apart
17. Mobile
browsing
is
expected
to
outpace
desktop-‐based
access
within
three
to
five
years.
Two
of
the
three
dominant
video
game
consoles
have
web
browsers.
Responsive
Web
Design
@
A
list
apart
–
25.5.2010
18. Original
Web
Design
RWD
opMmized
Web
Design
Responsive
Web
Design
@
A
list
apart
–
25.5.2010
36. Device
Channels
in
SharePoint
2013
Device
Channel
• Output
for
different
device
classes
• Op1miza1on
by
features
– Touch
– Bandwidth
– ...
• Fallback
for
older
browser
• Accessibility
Responsive
Web
Design
• Output
for
different
screen
resolu1ons
only
• Limited
op1miza1on
through
JS
– Modernizer
– ..
• Limited
fallback
for
older
browser
37.
38.
39. Common
User
Agent
Mozilla/5.0
(compaMble;
MSIE
9.0;
Windows
NT
6.1;
Trident/5.0)
Mozilla/4.0
(compaMble;
MSIE
8.0;
Windows
NT
6.0;
Trident/4.0)
Mozilla/4.0
(compaMble;
MSIE
7.0;
Windows
NT
6.0)
Mozilla/5.0
(Macintosh;
Intel
Mac
OS
X
10_7_4)
AppleWebKit/536.5
(KHTML,
like
Gecko)
Chrome/
19.0.1084.46
Safari/536.5
Mozilla/5.0
(Macintosh;
Intel
Mac
OS
X
10.7;
rv:11.0)
Gecko/20100101
Firefox/11.0
Mozilla/5.0
(Windows;
Windows
NT
6.1)
AppleWebKit/536.5
(KHTML,
like
Gecko)
Chrome/
19.0.1084.46
Safari/536.5
Mozilla/5.0
(Windows
NT
6.1;
rv:11.0)
Gecko/20100101
Firefox/11.0
Mozilla/5.0
(Windows;
Windows
NT
6.1)
AppleWebKit/536.5
(KHTML,
like
Gecko)
Chrome/
19.0.1084.46
Safari/536.5
Mozilla/5.0
(Macintosh;
Intel
Mac
OS
X
10_8_4)
AppleWebKit/536.30.1
(KHTML,
like
Gecko)
Version/
6.0.5
Safari/536.30.1
Mozilla/5.0
(Windows;
Windows
NT
6.1)
AppleWebKit/534.57.2
(KHTML,
like
Gecko)
Version/5.1.7
Safari/534.57.2
Mozilla/5.0
(iPhone;
CPU
iPhone
OS
5_1
like
Mac
OS
X)
AppleWebKit/534.46
(KHTML,
like
Gecko)
Version/5.1
Mobile/9B179
Safari/7534.48.3
Mozilla/5.0
(iPod;
CPU
iPhone
OS
5_1
like
Mac
OS
X)
AppleWebKit/534.46
(KHTML,
like
Gecko)
Version/5.1
Mobile/9B176
Safari/7534.48.3
Mozilla/5.0
(iPad;
CPU
OS
5_1
like
Mac
OS
X)
AppleWebKit/534.46
(KHTML,
like
Gecko)
Version/5.1
Mobile/9B176
Safari/7534.48.3
40. Mozilla/5.0
(compa1ble;
MSIE
10.0;
Windows
Phone
8.0;
Trident/6.0;
IEMobile/10.0;
ARM;
Touch;
NOKIA;
Lumia
920)
Mozilla/5.0
(iPhone;
CPU
iPhone
OS
5_1
like
Mac
OS
X)
AppleWebKit/534.46
(KHTML,
like
Gecko)
Version/5.1
Mobile/9B179
Safari/7534.48.3
Device
Channel
Configura1on
-‐
Phones
41. Mozilla/5.0
(compa1ble;
MSIE
10.0;
Windows
Phone
8.0;
Trident/6.0;
IEMobile/10.0;
ARM;
Touch;
NOKIA;
Lumia
920)
Mozilla/5.0
(iPhone;
CPU
iPhone
OS
5_1
like
Mac
OS
X)
AppleWebKit/534.46
(KHTML,
like
Gecko)
Version/5.1
Mobile/9B179
Safari/7534.48.3
Device
Channel
Configura1on
-‐
Phones
WRONG
42. Mozilla/5.0
(compa1ble;
MSIE
10.0;
Windows
Phone
8.0;
Trident/6.0;
IEMobile/10.0;
ARM;
Touch;
NOKIA;
Lumia
920)
Mozilla/5.0
(iPhone;
CPU
iPhone
OS
5_1
like
Mac
OS
X)
AppleWebKit/534.46
(KHTML,
like
Gecko)
Version/5.1
Mobile/9B179
Safari/7534.48.3
Device
Channel
Configura1on
-‐
Phones
List
of
User
Agents
-‐
http://user-agent-string.info/list-of-ua
43. Device
Channel
Panel
Snippet
<div
data-‐name="DeviceChannelPanel">
<!-‐-‐CS:
Start
Device
Channel
Panel
Snippet-‐-‐>
<!-‐-‐SPM:<%@Register
Tagprefix="Publishing"
Namespace="Microsoft.SharePoint.Publishing.WebControls"
Assembly="Microsoft.SharePoint.Publishing,
Version=15.0.0.0,
Culture=neutral,
PublicKeyToken=71e9bce111e9429c"%>-‐-‐>
<!-‐-‐MS:<Publishing:DeviceChannelPanel
runat="server"
IncludedChannels="MyPhoneChannel,
MyTabletChannel">-‐-‐>
<!-‐-‐PS:
Start
of
READ-‐ONLY
PREVIEW
(do
not
modify)-‐-‐><!-‐-‐PE:
End
of
READ-‐
ONLY
PREVIEW-‐-‐>
<div
class="DefaultContentBlock"
style="border:medium
black
solid;
background:yellow;
color:black;
margin:20px;
padding:10px;">
You
should
replace
this
div
with
content
that
renders
based
on
your
Device
Channel
Panel
Properties.
</div>
<!-‐-‐PS:
Start
of
READ-‐ONLY
PREVIEW
(do
not
modify)-‐-‐><!-‐-‐PE:
End
of
READ-‐
ONLY
PREVIEW-‐-‐>
<!-‐-‐ME:</Publishing:DeviceChannelPanel>-‐-‐>
<!-‐-‐CE:
End
Device
Channel
Panel
Snippet-‐-‐>
</div>
44. Device
Channel
Panel
Snippet
• Allows
hiding
specific
element
for
defined
device
channels
• Can
be
added
to
ar1cle
page
layout
• Reduce
amount
of
master
pages
45. Limita1ons
of
Device
Channels
• Works
with
Publishing
Site
only
• 10
device
channels
per
site
collec1on
• 150
inclusion
rules
per
device
channel
• Works
with
Office
365
public
facing
web
site
46. Think
about
the
USER
and
the
CONTEXT
the
DEVICE
will
be
used
47.
48.
49. Device
Channels
-‐
Summary
• Begin
planning
soon
• User
Experience
and
NOT
Device
Experience
– RWD
+
Device
Channels
• Performance
op1miza1on
– Image
Rendi1on,
Condi1onal
loading,
…
• Reach
op1miza1on
• Future-‐Friendly
Design
– Progressive
Enhancements
54. This
presenta1on
was
held
at
the
ShareCamp
Vienna,
September,
7th
2013
Thanks
to
@magrom,
@ThorstenHans,
@cglessner,
@atwork
for
making
this
event
possible
Special
thanks
to
@Brad_Frost
for
some
awesome
slides
and
some
I
was
allowed
to
borrow.
You
rock
!!!
Thank
you
@S>Bauer