1. Platin-Partner: Gold-Partner:
SharePoint Responsive - Mobile Webseiten
in SharePoint 2013 realisieren
Fabian Moritz
ITaCS GmbH
MVP SharePoint Server
Ronny Dyscher
ITaCS GmbH
Webdesigner

5. SharePoint Mobil

6. „Mobile browsing is expected to
outpace desktop-based access within
three to five years”
- Ethan Marcotte, 25. Mai 2010 in Responsive Web Design

7. Quelle: Gartner
0
500000
1000000
1500000
2000000
2500000
3000000
3500000
2012 2013 2014 2017
PC Ultramobile Table Mobile Phone
Wordwide Device Shipments

8. Warum Responsive Webdesign?

9.  Eine Webdesign Methode
 Adressiert alle Geräte
 Alle Geräte laden dieselbe Seite
Was ist Responsive Webdesign

10. SharePoint Mobil

11. Die Evolution von SharePoint
2003 2007
2010 2013
2001

12. Mobile Standardansichten
Klassisch Modern Vollbild
Mobile IE 9, Safari
4.0, Android 4.0
Fallback für ältere
Browser
Desktop UI

13. Einfach zu nutzen (/m oder ?mobile=1)
Optimierter HTML Code und schnelle Ladezeiten
Kontrolle über die UI (Mobile Ansichten + Feature)
Ausschließlich für Collaboration, nicht für Publishing
Keine Anpassungsmöglichkeiten
Kein anonymen Zugriff
Mobile Standardansichten

14. Office 365 Mobile UI

15. Demo
SharePoint Mobile UI

16. Device Channel = Adaptives
Webdesign

17.  Verschiedene “Channels” für mobile Geräte
 Definition auf Basis des User Agent Strings
 Zuordnung einer Master Page
 Spezielle Controls für Channels
SharePoint Device Channel

18. Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1)
Mozilla/5.0 (Windows NT 6.3; WOW64; Trident/7.0; rv:11.0) like Gecko
Mozilla/5.0 (Windows NT 6.3; WOW64; rv:30.0) Gecko/20100101 Firefox/30.0
Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like
Gecko) Chrome/35.0.1916.114 Safari/537.36
Mozilla/5.0 (iPad; CPU OS 7_0 like Mac OS X) AppleWebKit/537.51.1 (KHTML,
like Gecko) Version/7.0 Mobile/11A465 Safari/9537.53
User Agent Strings

19. Umsetzung mit SharePoint 2013
Master Page
(Desktop)
CSS
(Desktop)
Master Page
(Table)
CSS
(Table)
DefaultDeviceChannelTabletDeviceChannel
Optimiert für Desktop
Optimiert für Tablet

20. Demo
Device Channels

21. Optimiertes serverseitiges Rendering pro Device
Zahlreiche Tools und Support in der SharePoint UI
Funktioniert auch in Office 365 Public Facing Websites
Nur für Publishing Portale
Maximal 10 Device Channels pro Site Collection
Maximal 150 Inclusion Rules pro Device Channel
Device Channel

22. SharePoint Mobil

23. SharePoint nutzt zahlreich Tabellen-Layouts
Die Controls sind teilweise sehr komplex
Man hat keinen Einfluss auf das Rendering der Controls
Die Anpassungen sind mitunter sehr aufwändig
Aber: Es ist machbar!
Die Herausforderungen in SharePoint

24. Die drei Säulen des Responsive Webdesign
Fluid Grid - Flexible Medien - CSS Media Queries

25. Modulare CSS-Klassen
Breitenangaben in %
Basis = 12 Spalten-Layout
Content strukturieren - Fluides Grid-System

26. Bilder, Videos und andere Medien
Flexible Bilder
Flexible Videos
Flexible Bilder mit HTML5:
<picture>
<source media="(min-width: 1200px)" src="high-res.jpg">
<source media="(min-width: 640px)" src="med-res.jpg">
<source media="(min-width: 320px)" src="low-res.jpg">
<img src="fallback.jpg" alt="Fallback">
</picture>

27. Responsive Typografie

28. @media (min-width:320px) {
/* Smartphones, iPhone,
Portrait-Modus bei 480px x 320px */
}
@media (min-width:481px) {
/* Portrait-Modus bei E-Readern (z.B. Kindle),
kleine Tablets mit 600px oder 640px Breite. */
}
@media (min-width:641px) {
/* Portrait-Modus bei Tablets,
Portrait-Modus beim iPad,
Landscape-Modus bei E-Readern,
Landscape-Modus bei 800px x 480px
oder 854px x 480px */
}
@media (min-width:961px) {
/* Tablets, Landscape-Modus iPad,
Laptops und Desktop-PCs mit geringer Aulösung */
}
@media (min-width:1025px) {
/* Große Tablets (Landscape-Modus),
Laptops und Desktops */
}
@media (min-width:1281px) {
/* Hochauflösende Laptops und Desktop PCs */
}
Media Queries

29. Desktop First = „Graceful Degradation“
Mobile First = „Progressive Enhancement“
Responsive Workflow

30. Frameworks
Skeleton

31. Demo
Responsive SharePoint

32. Device Channel
Ausgabe für definierte
Geräte
Adaptiv (Touch,
Bandbreite etc.)
Fallback möglich
Device Channel vs. Responsive Webdesign
Responsive Webdesign
Eine Ausgabe für alle
Geräte
Nur in aktuellen Browsern
möglich
Fallback mit JS und
anderen Hacks

33. Frameworks verwenden
Adaptives und fluides Design sinnvoll kombinieren
Mobile first
SharePoint-Eigenarten kennen
Denke an die realen Szenarien
Testing, Testing, Testing (mit allen Devices)
Best Practices

34. SharePoint Mobil