SlideShare ist ein Scribd-Unternehmen logo
1 von 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
SharePoint Mobil
„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
0
500000
1000000
1500000
2000000
2500000
3000000
3500000
2012 2013 2014 2017
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
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
Demo
SharePoint 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 2013
Master Page
(Desktop)
CSS
(Desktop)
Master Page
(Table)
CSS
(Table)
DefaultDeviceChannelTabletDeviceChannel
Optimiert für Desktop
Optimiert für Tablet
Demo
Device 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 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-Klassen
Breitenangaben 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
Demo
Responsive SharePoint
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
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 Responsive - Mobile Webseiten mit SharePoint 2013 und SharePoint Online

Weitere ähnliche Inhalte

Ähnlich wie SharePoint Responsive - Mobile Webseiten mit SharePoint 2013 und SharePoint Online

Responsive Design
Responsive DesignResponsive Design
Responsive DesignMario Fink
 
Microservices – die Architektur für Agile-Entwicklung?
Microservices – die Architektur für Agile-Entwicklung?Microservices – die Architektur für Agile-Entwicklung?
Microservices – die Architektur für Agile-Entwicklung?Christian Baranowski
 
Responsive Webdesign Process
Responsive Webdesign ProcessResponsive Webdesign Process
Responsive Webdesign ProcessSven Wolfermann
 
Typografie im Responsive Webdesign
Typografie im Responsive WebdesignTypografie im Responsive Webdesign
Typografie im Responsive WebdesignSven Wolfermann
 
Android Ice Cream Sandwich WJAX 2011
Android Ice Cream Sandwich WJAX 2011Android Ice Cream Sandwich WJAX 2011
Android Ice Cream Sandwich WJAX 2011Dominik Helleberg
 
Top 10 Internet Trends 2011
Top 10 Internet Trends 2011Top 10 Internet Trends 2011
Top 10 Internet Trends 2011Jürg Stuker
 
SharePoint 2016 - was kommt auf uns zu?
SharePoint 2016 - was kommt auf uns zu?SharePoint 2016 - was kommt auf uns zu?
SharePoint 2016 - was kommt auf uns zu?IOZ AG
 
Top 10 Internet Trends 2007
Top 10 Internet Trends 2007Top 10 Internet Trends 2007
Top 10 Internet Trends 2007Jürg Stuker
 
Responsive Webdesign mit Bootstrap
Responsive Webdesign mit BootstrapResponsive Webdesign mit Bootstrap
Responsive Webdesign mit BootstrapGregor Biswanger
 
Webstandards auf dem Weg zu Standards im Mobilen Bereich
Webstandards auf dem Weg zu Standards im Mobilen BereichWebstandards auf dem Weg zu Standards im Mobilen Bereich
Webstandards auf dem Weg zu Standards im Mobilen BereichPeter Rozek
 
Responsive Webdesign - Unter der Haube
Responsive Webdesign - Unter der HaubeResponsive Webdesign - Unter der Haube
Responsive Webdesign - Unter der Haubefalconwhite
 
Going Mobile: Überblick über Mobile Web
Going Mobile: Überblick über Mobile WebGoing Mobile: Überblick über Mobile Web
Going Mobile: Überblick über Mobile Webch.ch
 
DACHNUG50 Miro-v2.pdf
DACHNUG50 Miro-v2.pdfDACHNUG50 Miro-v2.pdf
DACHNUG50 Miro-v2.pdfDNUG e.V.
 
WP Camp 2012 Mobile First & Wordpress
WP Camp 2012 Mobile First & WordpressWP Camp 2012 Mobile First & Wordpress
WP Camp 2012 Mobile First & WordpressKirstenSchelper
 
2009 - DNC: Silverlight ohne UI - Nur als Cache
2009 - DNC: Silverlight ohne UI - Nur als Cache2009 - DNC: Silverlight ohne UI - Nur als Cache
2009 - DNC: Silverlight ohne UI - Nur als CacheDaniel Fisher
 

Ähnlich wie SharePoint Responsive - Mobile Webseiten mit SharePoint 2013 und SharePoint Online (20)

Responsive Design
Responsive DesignResponsive Design
Responsive Design
 
Top 10 Internet-Trends
Top 10 Internet-TrendsTop 10 Internet-Trends
Top 10 Internet-Trends
 
C5 Mashup
C5 MashupC5 Mashup
C5 Mashup
 
Microservices – die Architektur für Agile-Entwicklung?
Microservices – die Architektur für Agile-Entwicklung?Microservices – die Architektur für Agile-Entwicklung?
Microservices – die Architektur für Agile-Entwicklung?
 
Responsive Webdesign Process
Responsive Webdesign ProcessResponsive Webdesign Process
Responsive Webdesign Process
 
design
designdesign
design
 
Web Design Trends 2011
Web Design Trends 2011Web Design Trends 2011
Web Design Trends 2011
 
Typografie im Responsive Webdesign
Typografie im Responsive WebdesignTypografie im Responsive Webdesign
Typografie im Responsive Webdesign
 
Android Ice Cream Sandwich WJAX 2011
Android Ice Cream Sandwich WJAX 2011Android Ice Cream Sandwich WJAX 2011
Android Ice Cream Sandwich WJAX 2011
 
Top 10 Internet Trends 2011
Top 10 Internet Trends 2011Top 10 Internet Trends 2011
Top 10 Internet Trends 2011
 
SharePoint 2016 - was kommt auf uns zu?
SharePoint 2016 - was kommt auf uns zu?SharePoint 2016 - was kommt auf uns zu?
SharePoint 2016 - was kommt auf uns zu?
 
Top 10 Internet Trends 2007
Top 10 Internet Trends 2007Top 10 Internet Trends 2007
Top 10 Internet Trends 2007
 
Responsive Webdesign mit Bootstrap
Responsive Webdesign mit BootstrapResponsive Webdesign mit Bootstrap
Responsive Webdesign mit Bootstrap
 
Webstandards auf dem Weg zu Standards im Mobilen Bereich
Webstandards auf dem Weg zu Standards im Mobilen BereichWebstandards auf dem Weg zu Standards im Mobilen Bereich
Webstandards auf dem Weg zu Standards im Mobilen Bereich
 
Responsive Webdesign - Unter der Haube
Responsive Webdesign - Unter der HaubeResponsive Webdesign - Unter der Haube
Responsive Webdesign - Unter der Haube
 
Going Mobile: Überblick über Mobile Web
Going Mobile: Überblick über Mobile WebGoing Mobile: Überblick über Mobile Web
Going Mobile: Überblick über Mobile Web
 
Responsive Images
Responsive ImagesResponsive Images
Responsive Images
 
DACHNUG50 Miro-v2.pdf
DACHNUG50 Miro-v2.pdfDACHNUG50 Miro-v2.pdf
DACHNUG50 Miro-v2.pdf
 
WP Camp 2012 Mobile First & Wordpress
WP Camp 2012 Mobile First & WordpressWP Camp 2012 Mobile First & Wordpress
WP Camp 2012 Mobile First & Wordpress
 
2009 - DNC: Silverlight ohne UI - Nur als Cache
2009 - DNC: Silverlight ohne UI - Nur als Cache2009 - DNC: Silverlight ohne UI - Nur als Cache
2009 - DNC: Silverlight ohne UI - Nur als Cache
 

Mehr von fabianmoritz

Office Add-ins entwickeln
Office Add-ins entwickelnOffice Add-ins entwickeln
Office Add-ins entwickelnfabianmoritz
 
Formulare vNext - Was ist die richtige Formularlösung für mich?
Formulare vNext - Was ist die richtige Formularlösung für mich?Formulare vNext - Was ist die richtige Formularlösung für mich?
Formulare vNext - Was ist die richtige Formularlösung für mich?fabianmoritz
 
Search driven Apps mit SharePoint 2013 und SharePoint Online
Search driven Apps mit SharePoint 2013 und SharePoint OnlineSearch driven Apps mit SharePoint 2013 und SharePoint Online
Search driven Apps mit SharePoint 2013 und SharePoint Onlinefabianmoritz
 
SharePoint 2013 Security (IT Pro)
SharePoint 2013 Security (IT Pro)SharePoint 2013 Security (IT Pro)
SharePoint 2013 Security (IT Pro)fabianmoritz
 
Fabian Moritz - SharePoint 2013 Security V2
Fabian Moritz - SharePoint 2013 Security V2Fabian Moritz - SharePoint 2013 Security V2
Fabian Moritz - SharePoint 2013 Security V2fabianmoritz
 
SharePoint Branding Best Practices - Grafische Gestaltung von SharePoint-Webs...
SharePoint Branding Best Practices - Grafische Gestaltung von SharePoint-Webs...SharePoint Branding Best Practices - Grafische Gestaltung von SharePoint-Webs...
SharePoint Branding Best Practices - Grafische Gestaltung von SharePoint-Webs...fabianmoritz
 
Search driven Applications mit SharePoint 2013
Search driven Applications mit SharePoint 2013Search driven Applications mit SharePoint 2013
Search driven Applications mit SharePoint 2013fabianmoritz
 
Brand My SharePoint
Brand My SharePointBrand My SharePoint
Brand My SharePointfabianmoritz
 
SharePoint 2013 Security
SharePoint 2013 SecuritySharePoint 2013 Security
SharePoint 2013 Securityfabianmoritz
 

Mehr von fabianmoritz (9)

Office Add-ins entwickeln
Office Add-ins entwickelnOffice Add-ins entwickeln
Office Add-ins entwickeln
 
Formulare vNext - Was ist die richtige Formularlösung für mich?
Formulare vNext - Was ist die richtige Formularlösung für mich?Formulare vNext - Was ist die richtige Formularlösung für mich?
Formulare vNext - Was ist die richtige Formularlösung für mich?
 
Search driven Apps mit SharePoint 2013 und SharePoint Online
Search driven Apps mit SharePoint 2013 und SharePoint OnlineSearch driven Apps mit SharePoint 2013 und SharePoint Online
Search driven Apps mit SharePoint 2013 und SharePoint Online
 
SharePoint 2013 Security (IT Pro)
SharePoint 2013 Security (IT Pro)SharePoint 2013 Security (IT Pro)
SharePoint 2013 Security (IT Pro)
 
Fabian Moritz - SharePoint 2013 Security V2
Fabian Moritz - SharePoint 2013 Security V2Fabian Moritz - SharePoint 2013 Security V2
Fabian Moritz - SharePoint 2013 Security V2
 
SharePoint Branding Best Practices - Grafische Gestaltung von SharePoint-Webs...
SharePoint Branding Best Practices - Grafische Gestaltung von SharePoint-Webs...SharePoint Branding Best Practices - Grafische Gestaltung von SharePoint-Webs...
SharePoint Branding Best Practices - Grafische Gestaltung von SharePoint-Webs...
 
Search driven Applications mit SharePoint 2013
Search driven Applications mit SharePoint 2013Search driven Applications mit SharePoint 2013
Search driven Applications mit SharePoint 2013
 
Brand My SharePoint
Brand My SharePointBrand My SharePoint
Brand My SharePoint
 
SharePoint 2013 Security
SharePoint 2013 SecuritySharePoint 2013 Security
SharePoint 2013 Security
 

SharePoint Responsive - Mobile Webseiten mit SharePoint 2013 und SharePoint Online

  • 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
  • 2.
  • 3.
  • 4.
  • 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
  • 9.  Eine Webdesign Methode  Adressiert alle Geräte  Alle Geräte laden dieselbe Seite Was ist Responsive Webdesign
  • 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
  • 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
  • 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
  • 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>
  • 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
  • 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

Hinweis der Redaktion

  1. http://technet.microsoft.com/de-de/library/jj673030.aspx
  2. 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 Mozilla/4.0 (compatible; MSIE 6.0; Windows CE; IEMobile 7.11) 320x240; VZW; Motorola-Q9c; Windows Mobile 6.1 Standard http://user-agent-string.info/
  3. Vorteile Entspricht unserer Gewohnheit Moderne Systeme werden voll ausgereizt. Neuste Technologien können eingesetzt werden Nachteile Schwache Systeme werden oft nicht oder nur schlecht berücksichtigt Performance-Probleme: Schwache Systeme können überlastet werden Informationen sind nicht für alle Menschen gleich zugänglich, wenn schwache Systeme und/oder kleine Displays bestraft werden Schwierige Erweiterung der Website. Änderungen müssen in allen schwächeren Systemen getestet und ggf. nachgerüstet werden