+ All Categories
Home > Technology > SharePoint Responsive - Mobile Webseiten mit SharePoint 2013 und SharePoint Online

SharePoint Responsive - Mobile Webseiten mit SharePoint 2013 und SharePoint Online

Date post: 04-Dec-2014
Category:
Upload: fabianmoritz
View: 353 times
Download: 2 times
Share this document with a friend
Description:
 
Popular Tags:
35
Platin-Partner: Gold- Partner: SharePoint Responsive - Mobile Webseiten in SharePoint 2013 realisieren Fabian Moritz ITaCS GmbH MVP SharePoint Server Ronny Dyscher ITaCS GmbH Webdesigner
Transcript
Page 1: SharePoint Responsive - Mobile Webseiten mit SharePoint 2013 und SharePoint Online

Platin-Partner: Gold-Partner:

SharePoint Responsive - Mobile Webseiten in SharePoint 2013 realisierenFabian MoritzITaCS GmbHMVP SharePoint Server

Ronny DyscherITaCS GmbHWebdesigner

Page 2: SharePoint Responsive - Mobile Webseiten mit SharePoint 2013 und SharePoint Online
Page 3: SharePoint Responsive - Mobile Webseiten mit SharePoint 2013 und SharePoint Online
Page 4: SharePoint Responsive - Mobile Webseiten mit SharePoint 2013 und SharePoint Online
Page 5: SharePoint Responsive - Mobile Webseiten mit SharePoint 2013 und SharePoint Online

SharePoint Mobil

SharePoint Standard

Responsive? Was und Warum?

Responsive Webdesigns

Page 6: SharePoint Responsive - Mobile Webseiten mit SharePoint 2013 und SharePoint Online

„Mobile browsing is expected to outpace desktop-based access within three to five years”

- Ethan Marcotte, 25. Mai 2010 in Responsive Web Design

Page 7: SharePoint Responsive - Mobile Webseiten mit SharePoint 2013 und SharePoint Online

Quelle: Gartner

2012 2013 2014 20170

500000

1000000

1500000

2000000

2500000

3000000

3500000 PC Ultramobile Table Mobile Phone

Wordwide Device Shipments

Page 8: SharePoint Responsive - Mobile Webseiten mit SharePoint 2013 und SharePoint Online

Warum Responsive Webdesign?

Page 9: SharePoint Responsive - Mobile Webseiten mit SharePoint 2013 und SharePoint Online

Eine Webdesign Methode Adressiert alle Geräte Alle Geräte laden dieselbe Seite

Was ist Responsive Webdesign

Page 10: SharePoint Responsive - Mobile Webseiten mit SharePoint 2013 und SharePoint Online

SharePoint Mobil

SharePoint Standard

Responsive? Was und Warum?

Responsive Webdesigns

Page 11: SharePoint Responsive - Mobile Webseiten mit SharePoint 2013 und SharePoint Online

Die Evolution von SharePoint

2003 2007

2010 2013

2001

Page 12: SharePoint Responsive - Mobile Webseiten mit SharePoint 2013 und SharePoint Online

Mobile Standardansichten

Klassisch Modern Vollbild

Mobile IE 9, Safari 4.0, Android 4.0

Fallback für ältere Browser

Desktop UI

Page 13: SharePoint Responsive - Mobile Webseiten mit SharePoint 2013 und SharePoint Online

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

Page 14: SharePoint Responsive - Mobile Webseiten mit SharePoint 2013 und SharePoint Online

Office 365 Mobile UI

Page 15: SharePoint Responsive - Mobile Webseiten mit SharePoint 2013 und SharePoint Online

DemoSharePoint Mobile UI

Page 16: SharePoint Responsive - Mobile Webseiten mit SharePoint 2013 und SharePoint Online

Device Channel = Adaptives Webdesign

Page 17: SharePoint Responsive - Mobile Webseiten mit SharePoint 2013 und SharePoint Online

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

Page 18: SharePoint Responsive - Mobile Webseiten mit SharePoint 2013 und SharePoint Online

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

Page 19: SharePoint Responsive - Mobile Webseiten mit SharePoint 2013 und SharePoint Online

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

Page 20: SharePoint Responsive - Mobile Webseiten mit SharePoint 2013 und SharePoint Online

DemoDevice Channels

Page 21: SharePoint Responsive - Mobile Webseiten mit SharePoint 2013 und SharePoint Online

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

Page 22: SharePoint Responsive - Mobile Webseiten mit SharePoint 2013 und SharePoint Online

SharePoint Mobil

SharePoint Standard

Responsive? Was und Warum?

Responsive Webdesigns

Page 23: SharePoint Responsive - Mobile Webseiten mit SharePoint 2013 und SharePoint Online

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

Page 24: SharePoint Responsive - Mobile Webseiten mit SharePoint 2013 und SharePoint Online

Die drei Säulen des Responsive Webdesign

Fluid Grid - Flexible Medien - CSS Media Queries

Page 25: SharePoint Responsive - Mobile Webseiten mit SharePoint 2013 und SharePoint Online

Modulare CSS-KlassenBreitenangaben in %Basis = 12 Spalten-

Layout

Content strukturieren - Fluides Grid-System

Page 26: SharePoint Responsive - Mobile Webseiten mit SharePoint 2013 und SharePoint Online

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>

Page 27: SharePoint Responsive - Mobile Webseiten mit SharePoint 2013 und SharePoint Online

Responsive Typografie

Page 28: SharePoint Responsive - Mobile Webseiten mit SharePoint 2013 und SharePoint Online

@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

Page 29: SharePoint Responsive - Mobile Webseiten mit SharePoint 2013 und SharePoint Online

Desktop First = „Graceful Degradation“

Mobile First = „Progressive Enhancement“

Responsive Workflow

Page 30: SharePoint Responsive - Mobile Webseiten mit SharePoint 2013 und SharePoint Online

Frameworks

Skeleton

SharePoint Responsive (Codeplex)

Page 31: SharePoint Responsive - Mobile Webseiten mit SharePoint 2013 und SharePoint Online

DemoResponsive SharePoint

Page 32: SharePoint Responsive - Mobile Webseiten mit SharePoint 2013 und SharePoint Online

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

Page 33: SharePoint Responsive - Mobile Webseiten mit SharePoint 2013 und SharePoint Online

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

Page 34: SharePoint Responsive - Mobile Webseiten mit SharePoint 2013 und SharePoint Online

SharePoint Mobil

SharePoint Standard

Responsive? Was und Warum?

Responsive Webdesigns

Page 35: SharePoint Responsive - Mobile Webseiten mit SharePoint 2013 und SharePoint Online

Recommended