sharepoint responsive - mobile webseiten mit sharepoint 2013 und sharepoint online
DESCRIPTION
TRANSCRIPT
Platin-Partner: Gold-Partner:
SharePoint Responsive - Mobile Webseiten in SharePoint 2013 realisierenFabian MoritzITaCS GmbHMVP SharePoint Server
Ronny DyscherITaCS GmbHWebdesigner
SharePoint Mobil
SharePoint Standard
Responsive? Was und Warum?
Responsive Webdesigns
„Mobile browsing is expected to outpace desktop-based access within three to five years”
- Ethan Marcotte, 25. Mai 2010 in Responsive Web Design
Quelle: Gartner
2012 2013 2014 20170
500000
1000000
1500000
2000000
2500000
3000000
3500000 PC Ultramobile Table Mobile Phone
Wordwide Device Shipments
Warum Responsive Webdesign?
Eine Webdesign Methode Adressiert alle Geräte Alle Geräte laden dieselbe Seite
Was ist Responsive Webdesign
SharePoint Mobil
SharePoint Standard
Responsive? Was und Warum?
Responsive Webdesigns
Die Evolution von SharePoint
2003 2007
2010 2013
2001
Mobile Standardansichten
Klassisch Modern Vollbild
Mobile IE 9, Safari 4.0, Android 4.0
Fallback für ältere Browser
Desktop UI
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
Office 365 Mobile UI
DemoSharePoint Mobile UI
Device Channel = Adaptives Webdesign
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
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
Umsetzung mit SharePoint 2013Master Page
(Desktop)CSS
(Desktop)
Master Page (Table)
CSS (Table)
Def
ault
Dev
ice
Chan
nel
Tabl
et D
evic
e Ch
anne
l
Optimiert für Desktop
Optimiert für Tablet
DemoDevice Channels
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
SharePoint Mobil
SharePoint Standard
Responsive? Was und Warum?
Responsive Webdesigns
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
Die drei Säulen des Responsive Webdesign
Fluid Grid - Flexible Medien - CSS Media Queries
Modulare CSS-KlassenBreitenangaben in %Basis = 12 Spalten-
Layout
Content strukturieren - Fluides Grid-System
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>
Responsive Typografie
@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
Desktop First = „Graceful Degradation“
Mobile First = „Progressive Enhancement“
Responsive Workflow
Frameworks
Skeleton
SharePoint Responsive (Codeplex)
DemoResponsive SharePoint
Device Channel
Ausgabe für definierteGerä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
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
SharePoint Mobil
SharePoint Standard
Responsive? Was und Warum?
Responsive Webdesigns