SlideShare une entreprise Scribd logo
Design et expérience utilisateur sous SharePoint 2013
Design & expérience utilisateur
sous SharePoint 2013
Edwin Stephenson
Amélie Jouineau
Ibrahim Alirkilicarslan
EXPERTIME
www.expertime.com
@expertime

Design - SharePoint 2013
Donnez votre avis !
Depuis votre smartphone sur :
http://notes.mstechdays.fr
De nombreux lots à gagner toutes les heures !!!
Claviers, souris et jeux Microsoft…
Merci de nous aider à améliorer les Techdays !

#mstechdays

Design - SharePoint 2013
#mstechdays

Design - SharePoint 2013

1.0
Design manager

2.0
Device channels

3.0
Display templates

SOMMAIRE

0. User & Design
experience

4.0
Images renditions
#0 USER & DESIGN EXPERIENCE

#mstechdays

Design - SharePoint 2013
#mstechdays

Design - SharePoint 2013
Conception UX

Pensé mobilité
& orienté utilisateur

Mettant en avant l’actualité,
l’image et les valeurs de la marque

#mstechdays

Jouant la carte de l’interactivité permise
par le digital

Avec des contenus organisés
et une hiérarchisation du site

Design - SharePoint 2013

Permettant un accès au moindre clic
à l’information essentielle
Les clés du succès
Penser
« orienté utilisateur »
•
•
•

Définir les attentes de la cible
Définir les différentes
interactions
Recommandations
ergonomiques via une
méthode de conception UX

#mstechdays

Penser
« simple & accessible »
•
•

Limiter les clics
Simplifier les actions par
des interfaces étudiées

Design - SharePoint 2013

Penser « design »
•
•
•

Attractif, moderne, convivial
Navigation intuitive
Mise en avant
des contenus clés
Démarche centrée sur l’expérience utilisateur
(ergonomie UX)

Arborescence
permettant de
structurer et organiser
les contenus au sein
du portail.

Wireframe permettant
d’organiser et prioriser
l’information au sein
des pages du portail.

#mstechdays

Design - SharePoint 2013

Création graphique
permettant de donner
une identité au portail.
Wireframe animé
Focus sur l’outil de wireframing
•

Il permet de modéliser les
contenus.

•

Il permet à l’équipe projet de
mieux appréhender le future site
sans avoir à consulter les
documents de spécification
fonctionnelles.

•

Il permet également d’affirmer
ou non des choix ergonomiques
d’utilisation dès la phase de
conception

Animé et interactif

#mstechdays

Design - SharePoint 2013

Logo
Un incontournable aujourd’hui,
penser les sites pour la mobilité

#mstechdays

Design - SharePoint 2013
Focus mobilité
#1 : les usages digitaux évoluent…

… média, conversation, projet, mobilité, social,
détente, partage, rapidité, applications…

#2 : les supports se multiplient
#3 : les sites doivent s’adapter…

… aux résolutions et tailles d’écrans

#mstechdays

Design - SharePoint 2013
Focus mobilité

#mstechdays

En parallèle, les devices prolifèrent :
ceux des internautes, ceux de l’entreprise,
ceux de vos collaborateurs…

Design - SharePoint 2013
Focus mobilité

Doit-on en arriver à cela pour servir
tous les cas d’usage ?
1 site android
et/ou 1
application

1 site grande
résolution

#mstechdays

1 site moyenne
résolution

1 site iPad et/ou
1 application

Design - SharePoint 2013

1 site wphone
et/ou 1 application

1 site iPhone
et/ou 1
application

…
La solution, le responsive design
« Responsive design » : c’est quoi ?

Un seul site pour
tous les devices

#mstechdays

Design - SharePoint 2013
La solution, le responsive design

Des résolutions d’écrans
structurantes (surtout
dans la largeur)

#mstechdays

Design - SharePoint 2013
La solution, le responsive design
Les utilisateurs d’abord !
#1 : Qui sont-ils ?
#2 : Comment sont-ils équipés ?
#3 : Quels usages par devices ?

#mstechdays

Design - SharePoint 2013
Focus sur la conception en responsive
Concevoir en responsive… implique une méthodologie de travail en ergonomie,
design et intégration propre à un projet en responsive design
•
•
•

Conception des pages avec une grille et des blocs
modulables
Suppression des blocs / fonctionnalités selon
le device et le contexte, ne garder que l’essentiel
Reconsidérer la hiérarchisation de l’information
selon les gabarits

Un mode de pensée « tactile »
• Penser tactile
• Se projeter en gestuelles et interactions
#mstechdays

Design - SharePoint 2013
Focus sur la conception en responsive
Penser la disposition
par gabarits

#mstechdays

Design - SharePoint 2013
Et SharePoint dans tout ça ?
AFFICHAGE PC

NAVIGATEUR
Même contenu
Même url
Même collection de site
layouts et templates
différents

#mstechdays

Design - SharePoint 2013

AFFICHAGE MOBILE / TABLETTE
SHAREPOINT PERMET
201 niveaux de Composed

3

customisation
graphique

Looks

Simple et rapide (pas
de conception ou de
design)

Design manager
Pas besoin de background technique de SharePoint

#mstechdays

Design - SharePoint 2013

Full SharePoint
branding
Custom Master Page et
Styles
Custom Page layouts
Custom Fonctionnalité

Great user experience
LES NOUVEAUTÉS DE SHAREPOINT 2013
VS SHAREPOINT 2010
•
•
•
•

#mstechdays

Design manager
Devices channels
Display Templates
Images renditions

Design - SharePoint 2013
#1 DESIGN MANAGER

#mstechdays

Design - SharePoint 2013
Retour sur SharePoint 2010
Masterpages

P.S.D

HTML

Custom
chanel
managment

CSS
Custom nav

Ribbon

Custom
SharePoint
site

Custom
catalog

SharePoint Designer /Visual studio
#mstechdays

Design - SharePoint 2013
Design manager avec SharePoint 2013
SHAREPOINT
•
•
•
•

Auto-convert
P.S.D

HTML/CSS

UPLOAD

HTML EN
.MASTER

Navigation
Catalog Integration
Content Search Webparts
Channel Panels

Snippet
Gallery

CUSTOM MINIMAL MASTERPAGE
• Ribbon
• Placeholder Main

Notepad ++ ou Sharepoint Designer 2013
#mstechdays

Design - SharePoint 2013

Channel
settings
Design manager
• Exemple site Expertime

#mstechdays

Design - SharePoint 2013
#2 DEVICE CHANNEL

#mstechdays

Design - SharePoint 2013
Device Channels

Les channels utilisent le user agent du navigateur
pour déterminer le device.

2.

Un alias est créé par channel. Il est possible de
prévisualiser chaque rendu par le Ribbon.

3.

On peut appliquer une masterpage spécifique à
un channel ou afficher des parties d’HTML ou de
code différents pour avoir un affichage particulier
sur smartphone par exemple.

4.

Des images Renditions peuvent être appliqués à
un Channel.

5.
#mstechdays

1.

Vous pouvez utiliser l’alias du Channel dans du
code JavaScript.

Design - SharePoint 2013
Exemple du site internet de Dialoge

#mstechdays

Design - SharePoint 2013
Exemple du site internet de Dialoge

#mstechdays

Design - SharePoint 2013
Device Channels
Site Settings > Device Channels
Ajouter un nouvel item
Ajouter un User Agent
Change master Page

•
•
•
•

•

Test: ?DeviceChannel=Name

#mstechdays

Design - SharePoint 2013
#3 DISPLAY TEMPLATES

#mstechdays

Design - SharePoint 2013
Display templates
• SharePoint 2010 vs 2013
• Webpart de recherche
• Result Type

#mstechdays

Design - SharePoint 2013
Display templates

help you style the SharePoint Content the way you want
1. HTML file (.html)
2. Fichier Javascript

#mstechdays

Design - SharePoint 2013
#4 IMAGE RENDITIONS

#mstechdays

Design - SharePoint 2013
Image renditions
avec SharePoint 2013

#mstechdays

Design - SharePoint 2013
Création des dimensions des rendus

#mstechdays

Design - SharePoint 2013
Edition des rendus

#mstechdays

Design - SharePoint 2013
Image renditions avec jQuery
<script type="text/javascript">
$(document).ready(function() {
$image = $(".article-content").find("img");
$image.each(function (i) {
var imagesrc = $(this).attr("src") + "?RenditionID=3";
$(this).attr("src",imagesrc);
});
});
</script>

#mstechdays

Design - SharePoint 2013
Choix du rendu

#mstechdays

Design - SharePoint 2013
#mstechdays

Design - SharePoint 2013
Des questions ?

#mstechdays

Design - SharePoint 2013
www.expertime.com

#mstechdays

www.quatrepointzero.com

Design - SharePoint 2013
Merci.

#mstechdays

Design - SharePoint 2013
Digital is business

Contenu connexe

Tendances

TechDays 2014 - Retours d'expériences et meilleures pratiques pour la migrati...
TechDays 2014 - Retours d'expériences et meilleures pratiques pour la migrati...TechDays 2014 - Retours d'expériences et meilleures pratiques pour la migrati...
TechDays 2014 - Retours d'expériences et meilleures pratiques pour la migrati...
Patrick Guimonet
 
101 Nouvelles fonctionnalités dans SharePoint-2013-FR
101 Nouvelles fonctionnalités dans SharePoint-2013-FR101 Nouvelles fonctionnalités dans SharePoint-2013-FR
101 Nouvelles fonctionnalités dans SharePoint-2013-FR
Slim Cheikhrouhou
 
Les 10 strategies d'adoption de SharePoint 2013
Les 10 strategies d'adoption de SharePoint 2013Les 10 strategies d'adoption de SharePoint 2013
Les 10 strategies d'adoption de SharePoint 2013
Conseils Atelya
 
Devenez un Expert SharePoint - Évitez les erreurs fréquentes
Devenez un Expert SharePoint - Évitez les erreurs fréquentesDevenez un Expert SharePoint - Évitez les erreurs fréquentes
Devenez un Expert SharePoint - Évitez les erreurs fréquentes
GSoft
 
Qu’Est Ce Que SharePoint
Qu’Est Ce Que SharePointQu’Est Ce Que SharePoint
Qu’Est Ce Que SharePoint
SIMOES AUGUSTO
 
Utilisation des fonctionnalités de collaboration dans SharePoint 2010 et 2013
Utilisation des fonctionnalités de collaboration dans SharePoint 2010 et 2013Utilisation des fonctionnalités de collaboration dans SharePoint 2010 et 2013
Utilisation des fonctionnalités de collaboration dans SharePoint 2010 et 2013
GSoft
 
Approfondissons la nouvelle architecture sociale de SharePoint 2013 et Yammer
Approfondissons la nouvelle architecture sociale de SharePoint 2013 et YammerApprofondissons la nouvelle architecture sociale de SharePoint 2013 et Yammer
Approfondissons la nouvelle architecture sociale de SharePoint 2013 et Yammer
Patrick Guimonet
 
Presentation Backup & Restore SharePoint 2013 Farm
Presentation Backup & Restore SharePoint 2013 FarmPresentation Backup & Restore SharePoint 2013 Farm
Presentation Backup & Restore SharePoint 2013 Farm
Youssef El Idrissi
 
Conf'SharePoint 2013 - B05 Une gouvernance orientée services pour share poi...
Conf'SharePoint 2013 - B05   Une gouvernance orientée services pour share poi...Conf'SharePoint 2013 - B05   Une gouvernance orientée services pour share poi...
Conf'SharePoint 2013 - B05 Une gouvernance orientée services pour share poi...
Patrick Guimonet
 
Conf'SharePoint 2013 - C06 approfondissons la nouvelle architecture sociale...
Conf'SharePoint 2013 - C06   approfondissons la nouvelle architecture sociale...Conf'SharePoint 2013 - C06   approfondissons la nouvelle architecture sociale...
Conf'SharePoint 2013 - C06 approfondissons la nouvelle architecture sociale...
Patrick Guimonet
 
Conf'SharePoint 2013 - B08 quelle stratégie de migration vers SharePoint 2013
Conf'SharePoint 2013 - B08   quelle stratégie de migration vers SharePoint 2013Conf'SharePoint 2013 - B08   quelle stratégie de migration vers SharePoint 2013
Conf'SharePoint 2013 - B08 quelle stratégie de migration vers SharePoint 2013
Patrick Guimonet
 
Présentation SharePoint 2016
Présentation SharePoint 2016Présentation SharePoint 2016
Présentation SharePoint 2016
💻 Sylver SCHORGEN ☕️
 
inext café #03 - Automatiser ses processus métier avec SharePoint et Nintex
inext café #03 - Automatiser ses processus métier avec SharePoint et Nintexinext café #03 - Automatiser ses processus métier avec SharePoint et Nintex
inext café #03 - Automatiser ses processus métier avec SharePoint et Nintex
Alexandre David
 
Comprendre la recherche dans SharePoint
Comprendre la recherche dans SharePointComprendre la recherche dans SharePoint
Comprendre la recherche dans SharePoint
Benjamin Niaulin
 
Plénière J03 SharePoint et le cloud
Plénière J03   SharePoint et le cloudPlénière J03   SharePoint et le cloud
Plénière J03 SharePoint et le cloud
Conf'SharePoint 2013
 
REBUILD 2014 - Architectures Yammer - Office 365 - SharePoint hybrides oui ! ...
REBUILD 2014 - Architectures Yammer - Office 365 - SharePoint hybrides oui !...REBUILD 2014 - Architectures Yammer - Office 365 - SharePoint hybrides oui !...
REBUILD 2014 - Architectures Yammer - Office 365 - SharePoint hybrides oui ! ...
Patrick Guimonet
 
JSS2013 Session SharePoint pour le dba sql v1.0
JSS2013 Session SharePoint pour le dba sql v1.0JSS2013 Session SharePoint pour le dba sql v1.0
JSS2013 Session SharePoint pour le dba sql v1.0
Patrick Guimonet
 
Bâtir une analyse fonctionnelle efficace avec SharePoint.
Bâtir une analyse fonctionnelle efficace avec SharePoint.Bâtir une analyse fonctionnelle efficace avec SharePoint.
Bâtir une analyse fonctionnelle efficace avec SharePoint.
GSoft
 
2015 12-11 Gouvernance 2.0 pour SharePoint et Office 365
2015 12-11 Gouvernance 2.0 pour SharePoint et Office 3652015 12-11 Gouvernance 2.0 pour SharePoint et Office 365
2015 12-11 Gouvernance 2.0 pour SharePoint et Office 365
Patrick Guimonet
 
Focus Sauvegardes SharePoint
Focus Sauvegardes SharePointFocus Sauvegardes SharePoint
Focus Sauvegardes SharePoint
Patrick Guimonet
 

Tendances (20)

TechDays 2014 - Retours d'expériences et meilleures pratiques pour la migrati...
TechDays 2014 - Retours d'expériences et meilleures pratiques pour la migrati...TechDays 2014 - Retours d'expériences et meilleures pratiques pour la migrati...
TechDays 2014 - Retours d'expériences et meilleures pratiques pour la migrati...
 
101 Nouvelles fonctionnalités dans SharePoint-2013-FR
101 Nouvelles fonctionnalités dans SharePoint-2013-FR101 Nouvelles fonctionnalités dans SharePoint-2013-FR
101 Nouvelles fonctionnalités dans SharePoint-2013-FR
 
Les 10 strategies d'adoption de SharePoint 2013
Les 10 strategies d'adoption de SharePoint 2013Les 10 strategies d'adoption de SharePoint 2013
Les 10 strategies d'adoption de SharePoint 2013
 
Devenez un Expert SharePoint - Évitez les erreurs fréquentes
Devenez un Expert SharePoint - Évitez les erreurs fréquentesDevenez un Expert SharePoint - Évitez les erreurs fréquentes
Devenez un Expert SharePoint - Évitez les erreurs fréquentes
 
Qu’Est Ce Que SharePoint
Qu’Est Ce Que SharePointQu’Est Ce Que SharePoint
Qu’Est Ce Que SharePoint
 
Utilisation des fonctionnalités de collaboration dans SharePoint 2010 et 2013
Utilisation des fonctionnalités de collaboration dans SharePoint 2010 et 2013Utilisation des fonctionnalités de collaboration dans SharePoint 2010 et 2013
Utilisation des fonctionnalités de collaboration dans SharePoint 2010 et 2013
 
Approfondissons la nouvelle architecture sociale de SharePoint 2013 et Yammer
Approfondissons la nouvelle architecture sociale de SharePoint 2013 et YammerApprofondissons la nouvelle architecture sociale de SharePoint 2013 et Yammer
Approfondissons la nouvelle architecture sociale de SharePoint 2013 et Yammer
 
Presentation Backup & Restore SharePoint 2013 Farm
Presentation Backup & Restore SharePoint 2013 FarmPresentation Backup & Restore SharePoint 2013 Farm
Presentation Backup & Restore SharePoint 2013 Farm
 
Conf'SharePoint 2013 - B05 Une gouvernance orientée services pour share poi...
Conf'SharePoint 2013 - B05   Une gouvernance orientée services pour share poi...Conf'SharePoint 2013 - B05   Une gouvernance orientée services pour share poi...
Conf'SharePoint 2013 - B05 Une gouvernance orientée services pour share poi...
 
Conf'SharePoint 2013 - C06 approfondissons la nouvelle architecture sociale...
Conf'SharePoint 2013 - C06   approfondissons la nouvelle architecture sociale...Conf'SharePoint 2013 - C06   approfondissons la nouvelle architecture sociale...
Conf'SharePoint 2013 - C06 approfondissons la nouvelle architecture sociale...
 
Conf'SharePoint 2013 - B08 quelle stratégie de migration vers SharePoint 2013
Conf'SharePoint 2013 - B08   quelle stratégie de migration vers SharePoint 2013Conf'SharePoint 2013 - B08   quelle stratégie de migration vers SharePoint 2013
Conf'SharePoint 2013 - B08 quelle stratégie de migration vers SharePoint 2013
 
Présentation SharePoint 2016
Présentation SharePoint 2016Présentation SharePoint 2016
Présentation SharePoint 2016
 
inext café #03 - Automatiser ses processus métier avec SharePoint et Nintex
inext café #03 - Automatiser ses processus métier avec SharePoint et Nintexinext café #03 - Automatiser ses processus métier avec SharePoint et Nintex
inext café #03 - Automatiser ses processus métier avec SharePoint et Nintex
 
Comprendre la recherche dans SharePoint
Comprendre la recherche dans SharePointComprendre la recherche dans SharePoint
Comprendre la recherche dans SharePoint
 
Plénière J03 SharePoint et le cloud
Plénière J03   SharePoint et le cloudPlénière J03   SharePoint et le cloud
Plénière J03 SharePoint et le cloud
 
REBUILD 2014 - Architectures Yammer - Office 365 - SharePoint hybrides oui ! ...
REBUILD 2014 - Architectures Yammer - Office 365 - SharePoint hybrides oui !...REBUILD 2014 - Architectures Yammer - Office 365 - SharePoint hybrides oui !...
REBUILD 2014 - Architectures Yammer - Office 365 - SharePoint hybrides oui ! ...
 
JSS2013 Session SharePoint pour le dba sql v1.0
JSS2013 Session SharePoint pour le dba sql v1.0JSS2013 Session SharePoint pour le dba sql v1.0
JSS2013 Session SharePoint pour le dba sql v1.0
 
Bâtir une analyse fonctionnelle efficace avec SharePoint.
Bâtir une analyse fonctionnelle efficace avec SharePoint.Bâtir une analyse fonctionnelle efficace avec SharePoint.
Bâtir une analyse fonctionnelle efficace avec SharePoint.
 
2015 12-11 Gouvernance 2.0 pour SharePoint et Office 365
2015 12-11 Gouvernance 2.0 pour SharePoint et Office 3652015 12-11 Gouvernance 2.0 pour SharePoint et Office 365
2015 12-11 Gouvernance 2.0 pour SharePoint et Office 365
 
Focus Sauvegardes SharePoint
Focus Sauvegardes SharePointFocus Sauvegardes SharePoint
Focus Sauvegardes SharePoint
 

En vedette

Conférence TechnoArk 2016 - 16 entreprises innovantes
Conférence TechnoArk 2016 - 16 entreprises innovantesConférence TechnoArk 2016 - 16 entreprises innovantes
Conférence TechnoArk 2016 - 16 entreprises innovantes
Laurent Borella
 
Gestion Documentaire Enrichie pour SharePoint 2010 : Capture, Recherche et Co...
Gestion Documentaire Enrichie pour SharePoint 2010 : Capture, Recherche et Co...Gestion Documentaire Enrichie pour SharePoint 2010 : Capture, Recherche et Co...
Gestion Documentaire Enrichie pour SharePoint 2010 : Capture, Recherche et Co...
Microsoft Technet France
 
Présentation de SharePoint 2013
Présentation de SharePoint 2013Présentation de SharePoint 2013
Présentation de SharePoint 2013
Mahfoud EL HOUDAIGUI
 
SharePoint Overview
SharePoint OverviewSharePoint Overview
SharePoint Overview
Amy Phillips
 
SharePoint & Gestion Electronique de Documents: Adoption Utilisateurs, Contrô...
SharePoint & Gestion Electronique de Documents: Adoption Utilisateurs, Contrô...SharePoint & Gestion Electronique de Documents: Adoption Utilisateurs, Contrô...
SharePoint & Gestion Electronique de Documents: Adoption Utilisateurs, Contrô...
Microsoft Décideurs IT
 
The Mini-Guide to Presentation Practice
The Mini-Guide to Presentation PracticeThe Mini-Guide to Presentation Practice
The Mini-Guide to Presentation Practice
Ethos3
 
Ems ksf collab_201312.sanit
Ems ksf collab_201312.sanitEms ksf collab_201312.sanit
Ems ksf collab_201312.sanit
Maximilien Chayriguès
 

En vedette (7)

Conférence TechnoArk 2016 - 16 entreprises innovantes
Conférence TechnoArk 2016 - 16 entreprises innovantesConférence TechnoArk 2016 - 16 entreprises innovantes
Conférence TechnoArk 2016 - 16 entreprises innovantes
 
Gestion Documentaire Enrichie pour SharePoint 2010 : Capture, Recherche et Co...
Gestion Documentaire Enrichie pour SharePoint 2010 : Capture, Recherche et Co...Gestion Documentaire Enrichie pour SharePoint 2010 : Capture, Recherche et Co...
Gestion Documentaire Enrichie pour SharePoint 2010 : Capture, Recherche et Co...
 
Présentation de SharePoint 2013
Présentation de SharePoint 2013Présentation de SharePoint 2013
Présentation de SharePoint 2013
 
SharePoint Overview
SharePoint OverviewSharePoint Overview
SharePoint Overview
 
SharePoint & Gestion Electronique de Documents: Adoption Utilisateurs, Contrô...
SharePoint & Gestion Electronique de Documents: Adoption Utilisateurs, Contrô...SharePoint & Gestion Electronique de Documents: Adoption Utilisateurs, Contrô...
SharePoint & Gestion Electronique de Documents: Adoption Utilisateurs, Contrô...
 
The Mini-Guide to Presentation Practice
The Mini-Guide to Presentation PracticeThe Mini-Guide to Presentation Practice
The Mini-Guide to Presentation Practice
 
Ems ksf collab_201312.sanit
Ems ksf collab_201312.sanitEms ksf collab_201312.sanit
Ems ksf collab_201312.sanit
 

Similaire à Design et expérience utilisateur sous SharePoint 2013

Visual Studio 2013 / SharePoint 2013 duo de choc de 2010 à 2013 en un clin d’œil
Visual Studio 2013 / SharePoint 2013 duo de choc de 2010 à 2013 en un clin d’œilVisual Studio 2013 / SharePoint 2013 duo de choc de 2010 à 2013 en un clin d’œil
Visual Studio 2013 / SharePoint 2013 duo de choc de 2010 à 2013 en un clin d’œil
Microsoft Technet France
 
Le responsive design : adapter ses contenus aux formats mobiles
Le responsive design : adapter ses contenus aux formats mobilesLe responsive design : adapter ses contenus aux formats mobiles
Le responsive design : adapter ses contenus aux formats mobiles
Big5media
 
Design Trends
Design TrendsDesign Trends
Design Trends
Hannah Sellam
 
"Responsive Design" : Pourquoi et comment y aller ?
 "Responsive Design" : Pourquoi et comment y aller ? "Responsive Design" : Pourquoi et comment y aller ?
"Responsive Design" : Pourquoi et comment y aller ?
WebSchool Orléans
 
Formation mobile-cross-platform
Formation mobile-cross-platformFormation mobile-cross-platform
Formation mobile-cross-platform
Atelier IHM Polytech Nice Sophia
 
Pourquoi Azure a changé ma vie de développeur SharePoint
Pourquoi Azure a changé ma vie de développeur SharePointPourquoi Azure a changé ma vie de développeur SharePoint
Pourquoi Azure a changé ma vie de développeur SharePoint
Microsoft
 
DrupalCamp Paris 2013 : Sites mobiles avec Drupal
DrupalCamp Paris 2013 : Sites mobiles avec DrupalDrupalCamp Paris 2013 : Sites mobiles avec Drupal
DrupalCamp Paris 2013 : Sites mobiles avec Drupal
Actency
 
Customer Show case : Mise en place d’une solution de gestion de projet avec l...
Customer Show case : Mise en place d’une solution de gestion de projet avec l...Customer Show case : Mise en place d’une solution de gestion de projet avec l...
Customer Show case : Mise en place d’une solution de gestion de projet avec l...
Microsoft Ideas
 
Exemple de mise en place d'une solution EPM 2013
Exemple de mise en place d'une solution EPM 2013Exemple de mise en place d'une solution EPM 2013
Exemple de mise en place d'une solution EPM 2013
Charbel Abdo
 
M2i Webinar - Le Design Thinking et l'UX
M2i Webinar - Le Design Thinking et l'UXM2i Webinar - Le Design Thinking et l'UX
M2i Webinar - Le Design Thinking et l'UX
M2i Formation
 
Après Coding4Fun, voici NUI4Fun !
Après Coding4Fun, voici NUI4Fun !Après Coding4Fun, voici NUI4Fun !
Après Coding4Fun, voici NUI4Fun !
Microsoft
 
Etat de l'art (et roadmap) de la BI mobile Microsoft
Etat de l'art (et roadmap) de la BI mobile MicrosoftEtat de l'art (et roadmap) de la BI mobile Microsoft
Etat de l'art (et roadmap) de la BI mobile Microsoft
Microsoft Décideurs IT
 
SharePoint en action 2013 - AFF-02 - Expérience utilisateur réussie - Francoi...
SharePoint en action 2013 - AFF-02 - Expérience utilisateur réussie - Francoi...SharePoint en action 2013 - AFF-02 - Expérience utilisateur réussie - Francoi...
SharePoint en action 2013 - AFF-02 - Expérience utilisateur réussie - Francoi...
Marc Gagnon
 
Le Design « centré-utilisateur » ou comment améliorer l’adéquation entre vos ...
Le Design « centré-utilisateur » ou comment améliorer l’adéquation entre vos ...Le Design « centré-utilisateur » ou comment améliorer l’adéquation entre vos ...
Le Design « centré-utilisateur » ou comment améliorer l’adéquation entre vos ...
AudéLor
 
Comment intégrer Yammer et SharePoint pour plus d'efficacité ?
Comment intégrer Yammer et SharePoint pour plus d'efficacité ?Comment intégrer Yammer et SharePoint pour plus d'efficacité ?
Comment intégrer Yammer et SharePoint pour plus d'efficacité ?
Microsoft Technet France
 
Intégrer Yammer et SharePoint pour plus d'efficacité
Intégrer Yammer et SharePoint pour plus d'efficacitéIntégrer Yammer et SharePoint pour plus d'efficacité
Intégrer Yammer et SharePoint pour plus d'efficacité
Guillaume Meyer
 
#MobileStrategy #MobileTransfo - Sommets du Digital #SOMDIG16
#MobileStrategy #MobileTransfo - Sommets du Digital #SOMDIG16#MobileStrategy #MobileTransfo - Sommets du Digital #SOMDIG16
#MobileStrategy #MobileTransfo - Sommets du Digital #SOMDIG16
Alexandre Jubien
 
Devenez Mobile Enterprise-Ready en développant vos applications LOB pour Wind...
Devenez Mobile Enterprise-Ready en développant vos applications LOB pour Wind...Devenez Mobile Enterprise-Ready en développant vos applications LOB pour Wind...
Devenez Mobile Enterprise-Ready en développant vos applications LOB pour Wind...
Microsoft
 
OCTO Talks - State of the art Architecture dans les frontend web
OCTO Talks - State of the art Architecture dans les frontend webOCTO Talks - State of the art Architecture dans les frontend web
OCTO Talks - State of the art Architecture dans les frontend web
OCTO Technology
 
Enteprise Social Workplace : Microsoft SharePoint 2013
Enteprise Social Workplace : Microsoft SharePoint 2013Enteprise Social Workplace : Microsoft SharePoint 2013
Enteprise Social Workplace : Microsoft SharePoint 2013
Armando Benzaquen
 

Similaire à Design et expérience utilisateur sous SharePoint 2013 (20)

Visual Studio 2013 / SharePoint 2013 duo de choc de 2010 à 2013 en un clin d’œil
Visual Studio 2013 / SharePoint 2013 duo de choc de 2010 à 2013 en un clin d’œilVisual Studio 2013 / SharePoint 2013 duo de choc de 2010 à 2013 en un clin d’œil
Visual Studio 2013 / SharePoint 2013 duo de choc de 2010 à 2013 en un clin d’œil
 
Le responsive design : adapter ses contenus aux formats mobiles
Le responsive design : adapter ses contenus aux formats mobilesLe responsive design : adapter ses contenus aux formats mobiles
Le responsive design : adapter ses contenus aux formats mobiles
 
Design Trends
Design TrendsDesign Trends
Design Trends
 
"Responsive Design" : Pourquoi et comment y aller ?
 "Responsive Design" : Pourquoi et comment y aller ? "Responsive Design" : Pourquoi et comment y aller ?
"Responsive Design" : Pourquoi et comment y aller ?
 
Formation mobile-cross-platform
Formation mobile-cross-platformFormation mobile-cross-platform
Formation mobile-cross-platform
 
Pourquoi Azure a changé ma vie de développeur SharePoint
Pourquoi Azure a changé ma vie de développeur SharePointPourquoi Azure a changé ma vie de développeur SharePoint
Pourquoi Azure a changé ma vie de développeur SharePoint
 
DrupalCamp Paris 2013 : Sites mobiles avec Drupal
DrupalCamp Paris 2013 : Sites mobiles avec DrupalDrupalCamp Paris 2013 : Sites mobiles avec Drupal
DrupalCamp Paris 2013 : Sites mobiles avec Drupal
 
Customer Show case : Mise en place d’une solution de gestion de projet avec l...
Customer Show case : Mise en place d’une solution de gestion de projet avec l...Customer Show case : Mise en place d’une solution de gestion de projet avec l...
Customer Show case : Mise en place d’une solution de gestion de projet avec l...
 
Exemple de mise en place d'une solution EPM 2013
Exemple de mise en place d'une solution EPM 2013Exemple de mise en place d'une solution EPM 2013
Exemple de mise en place d'une solution EPM 2013
 
M2i Webinar - Le Design Thinking et l'UX
M2i Webinar - Le Design Thinking et l'UXM2i Webinar - Le Design Thinking et l'UX
M2i Webinar - Le Design Thinking et l'UX
 
Après Coding4Fun, voici NUI4Fun !
Après Coding4Fun, voici NUI4Fun !Après Coding4Fun, voici NUI4Fun !
Après Coding4Fun, voici NUI4Fun !
 
Etat de l'art (et roadmap) de la BI mobile Microsoft
Etat de l'art (et roadmap) de la BI mobile MicrosoftEtat de l'art (et roadmap) de la BI mobile Microsoft
Etat de l'art (et roadmap) de la BI mobile Microsoft
 
SharePoint en action 2013 - AFF-02 - Expérience utilisateur réussie - Francoi...
SharePoint en action 2013 - AFF-02 - Expérience utilisateur réussie - Francoi...SharePoint en action 2013 - AFF-02 - Expérience utilisateur réussie - Francoi...
SharePoint en action 2013 - AFF-02 - Expérience utilisateur réussie - Francoi...
 
Le Design « centré-utilisateur » ou comment améliorer l’adéquation entre vos ...
Le Design « centré-utilisateur » ou comment améliorer l’adéquation entre vos ...Le Design « centré-utilisateur » ou comment améliorer l’adéquation entre vos ...
Le Design « centré-utilisateur » ou comment améliorer l’adéquation entre vos ...
 
Comment intégrer Yammer et SharePoint pour plus d'efficacité ?
Comment intégrer Yammer et SharePoint pour plus d'efficacité ?Comment intégrer Yammer et SharePoint pour plus d'efficacité ?
Comment intégrer Yammer et SharePoint pour plus d'efficacité ?
 
Intégrer Yammer et SharePoint pour plus d'efficacité
Intégrer Yammer et SharePoint pour plus d'efficacitéIntégrer Yammer et SharePoint pour plus d'efficacité
Intégrer Yammer et SharePoint pour plus d'efficacité
 
#MobileStrategy #MobileTransfo - Sommets du Digital #SOMDIG16
#MobileStrategy #MobileTransfo - Sommets du Digital #SOMDIG16#MobileStrategy #MobileTransfo - Sommets du Digital #SOMDIG16
#MobileStrategy #MobileTransfo - Sommets du Digital #SOMDIG16
 
Devenez Mobile Enterprise-Ready en développant vos applications LOB pour Wind...
Devenez Mobile Enterprise-Ready en développant vos applications LOB pour Wind...Devenez Mobile Enterprise-Ready en développant vos applications LOB pour Wind...
Devenez Mobile Enterprise-Ready en développant vos applications LOB pour Wind...
 
OCTO Talks - State of the art Architecture dans les frontend web
OCTO Talks - State of the art Architecture dans les frontend webOCTO Talks - State of the art Architecture dans les frontend web
OCTO Talks - State of the art Architecture dans les frontend web
 
Enteprise Social Workplace : Microsoft SharePoint 2013
Enteprise Social Workplace : Microsoft SharePoint 2013Enteprise Social Workplace : Microsoft SharePoint 2013
Enteprise Social Workplace : Microsoft SharePoint 2013
 

Plus de Microsoft

Uwp + Xamarin : Du nouveau en terre du milieu
Uwp + Xamarin : Du nouveau en terre du milieuUwp + Xamarin : Du nouveau en terre du milieu
Uwp + Xamarin : Du nouveau en terre du milieu
Microsoft
 
La Blockchain pas à PaaS
La Blockchain pas à PaaSLa Blockchain pas à PaaS
La Blockchain pas à PaaS
Microsoft
 
Tester, Monitorer et Déployer son application mobile
Tester, Monitorer et Déployer son application mobileTester, Monitorer et Déployer son application mobile
Tester, Monitorer et Déployer son application mobile
Microsoft
 
Windows 10, un an après – Nouveautés & Démo
Windows 10, un an après – Nouveautés & Démo Windows 10, un an après – Nouveautés & Démo
Windows 10, un an après – Nouveautés & Démo
Microsoft
 
Prenez votre pied avec les bots et cognitive services.
Prenez votre pied avec les bots et cognitive services.Prenez votre pied avec les bots et cognitive services.
Prenez votre pied avec les bots et cognitive services.
Microsoft
 
Office 365 Dev PnP & PowerShell : exploitez enfin le potentiel de votre écosy...
Office 365 Dev PnP & PowerShell : exploitez enfin le potentiel de votre écosy...Office 365 Dev PnP & PowerShell : exploitez enfin le potentiel de votre écosy...
Office 365 Dev PnP & PowerShell : exploitez enfin le potentiel de votre écosy...
Microsoft
 
Créer un bot de A à Z
Créer un bot de A à ZCréer un bot de A à Z
Créer un bot de A à Z
Microsoft
 
Microsoft Composition, pierre angulaire de vos applications ?
Microsoft Composition, pierre angulaire de vos applications ?Microsoft Composition, pierre angulaire de vos applications ?
Microsoft Composition, pierre angulaire de vos applications ?
Microsoft
 
Les nouveautés SQL Server 2016
Les nouveautés SQL Server 2016Les nouveautés SQL Server 2016
Les nouveautés SQL Server 2016
Microsoft
 
Conteneurs Linux ou Windows : quelles approches pour des IT agiles ?
Conteneurs Linux ou Windows : quelles approches pour des IT agiles ?Conteneurs Linux ou Windows : quelles approches pour des IT agiles ?
Conteneurs Linux ou Windows : quelles approches pour des IT agiles ?
Microsoft
 
Administration et supervision depuis le Cloud avec Azure Logs Analytics
Administration et supervision depuis le Cloud avec Azure Logs AnalyticsAdministration et supervision depuis le Cloud avec Azure Logs Analytics
Administration et supervision depuis le Cloud avec Azure Logs Analytics
Microsoft
 
Retour d'expérience de projets Azure IoT "large scale" (MicroServices, portag...
Retour d'expérience de projets Azure IoT "large scale" (MicroServices, portag...Retour d'expérience de projets Azure IoT "large scale" (MicroServices, portag...
Retour d'expérience de projets Azure IoT "large scale" (MicroServices, portag...
Microsoft
 
Plan de Reprise d'Activité avec Azure Site Recovery
Plan de Reprise d'Activité avec Azure Site RecoveryPlan de Reprise d'Activité avec Azure Site Recovery
Plan de Reprise d'Activité avec Azure Site Recovery
Microsoft
 
Modélisation, déploiement et gestion des infrastructures Cloud : outils et bo...
Modélisation, déploiement et gestion des infrastructures Cloud : outils et bo...Modélisation, déploiement et gestion des infrastructures Cloud : outils et bo...
Modélisation, déploiement et gestion des infrastructures Cloud : outils et bo...
Microsoft
 
Transformation de la représentation : De la VR à la RA, aller & retour.
Transformation de la représentation : De la VR à la RA, aller & retour.Transformation de la représentation : De la VR à la RA, aller & retour.
Transformation de la représentation : De la VR à la RA, aller & retour.
Microsoft
 
Quelles architectures pour vos applications Cloud, de la VM au conteneur : ça...
Quelles architectures pour vos applications Cloud, de la VM au conteneur : ça...Quelles architectures pour vos applications Cloud, de la VM au conteneur : ça...
Quelles architectures pour vos applications Cloud, de la VM au conteneur : ça...
Microsoft
 
Introduction à ASP.NET Core
Introduction à ASP.NET CoreIntroduction à ASP.NET Core
Introduction à ASP.NET Core
Microsoft
 
Open Source et Microsoft Azure, rêve ou réalité ?
Open Source et Microsoft Azure, rêve ou réalité ?Open Source et Microsoft Azure, rêve ou réalité ?
Open Source et Microsoft Azure, rêve ou réalité ?
Microsoft
 
Comment développer sur la console Xbox One avec une application Universal Win...
Comment développer sur la console Xbox One avec une application Universal Win...Comment développer sur la console Xbox One avec une application Universal Win...
Comment développer sur la console Xbox One avec une application Universal Win...
Microsoft
 
Azure Service Fabric pour les développeurs
Azure Service Fabric pour les développeursAzure Service Fabric pour les développeurs
Azure Service Fabric pour les développeurs
Microsoft
 

Plus de Microsoft (20)

Uwp + Xamarin : Du nouveau en terre du milieu
Uwp + Xamarin : Du nouveau en terre du milieuUwp + Xamarin : Du nouveau en terre du milieu
Uwp + Xamarin : Du nouveau en terre du milieu
 
La Blockchain pas à PaaS
La Blockchain pas à PaaSLa Blockchain pas à PaaS
La Blockchain pas à PaaS
 
Tester, Monitorer et Déployer son application mobile
Tester, Monitorer et Déployer son application mobileTester, Monitorer et Déployer son application mobile
Tester, Monitorer et Déployer son application mobile
 
Windows 10, un an après – Nouveautés & Démo
Windows 10, un an après – Nouveautés & Démo Windows 10, un an après – Nouveautés & Démo
Windows 10, un an après – Nouveautés & Démo
 
Prenez votre pied avec les bots et cognitive services.
Prenez votre pied avec les bots et cognitive services.Prenez votre pied avec les bots et cognitive services.
Prenez votre pied avec les bots et cognitive services.
 
Office 365 Dev PnP & PowerShell : exploitez enfin le potentiel de votre écosy...
Office 365 Dev PnP & PowerShell : exploitez enfin le potentiel de votre écosy...Office 365 Dev PnP & PowerShell : exploitez enfin le potentiel de votre écosy...
Office 365 Dev PnP & PowerShell : exploitez enfin le potentiel de votre écosy...
 
Créer un bot de A à Z
Créer un bot de A à ZCréer un bot de A à Z
Créer un bot de A à Z
 
Microsoft Composition, pierre angulaire de vos applications ?
Microsoft Composition, pierre angulaire de vos applications ?Microsoft Composition, pierre angulaire de vos applications ?
Microsoft Composition, pierre angulaire de vos applications ?
 
Les nouveautés SQL Server 2016
Les nouveautés SQL Server 2016Les nouveautés SQL Server 2016
Les nouveautés SQL Server 2016
 
Conteneurs Linux ou Windows : quelles approches pour des IT agiles ?
Conteneurs Linux ou Windows : quelles approches pour des IT agiles ?Conteneurs Linux ou Windows : quelles approches pour des IT agiles ?
Conteneurs Linux ou Windows : quelles approches pour des IT agiles ?
 
Administration et supervision depuis le Cloud avec Azure Logs Analytics
Administration et supervision depuis le Cloud avec Azure Logs AnalyticsAdministration et supervision depuis le Cloud avec Azure Logs Analytics
Administration et supervision depuis le Cloud avec Azure Logs Analytics
 
Retour d'expérience de projets Azure IoT "large scale" (MicroServices, portag...
Retour d'expérience de projets Azure IoT "large scale" (MicroServices, portag...Retour d'expérience de projets Azure IoT "large scale" (MicroServices, portag...
Retour d'expérience de projets Azure IoT "large scale" (MicroServices, portag...
 
Plan de Reprise d'Activité avec Azure Site Recovery
Plan de Reprise d'Activité avec Azure Site RecoveryPlan de Reprise d'Activité avec Azure Site Recovery
Plan de Reprise d'Activité avec Azure Site Recovery
 
Modélisation, déploiement et gestion des infrastructures Cloud : outils et bo...
Modélisation, déploiement et gestion des infrastructures Cloud : outils et bo...Modélisation, déploiement et gestion des infrastructures Cloud : outils et bo...
Modélisation, déploiement et gestion des infrastructures Cloud : outils et bo...
 
Transformation de la représentation : De la VR à la RA, aller & retour.
Transformation de la représentation : De la VR à la RA, aller & retour.Transformation de la représentation : De la VR à la RA, aller & retour.
Transformation de la représentation : De la VR à la RA, aller & retour.
 
Quelles architectures pour vos applications Cloud, de la VM au conteneur : ça...
Quelles architectures pour vos applications Cloud, de la VM au conteneur : ça...Quelles architectures pour vos applications Cloud, de la VM au conteneur : ça...
Quelles architectures pour vos applications Cloud, de la VM au conteneur : ça...
 
Introduction à ASP.NET Core
Introduction à ASP.NET CoreIntroduction à ASP.NET Core
Introduction à ASP.NET Core
 
Open Source et Microsoft Azure, rêve ou réalité ?
Open Source et Microsoft Azure, rêve ou réalité ?Open Source et Microsoft Azure, rêve ou réalité ?
Open Source et Microsoft Azure, rêve ou réalité ?
 
Comment développer sur la console Xbox One avec une application Universal Win...
Comment développer sur la console Xbox One avec une application Universal Win...Comment développer sur la console Xbox One avec une application Universal Win...
Comment développer sur la console Xbox One avec une application Universal Win...
 
Azure Service Fabric pour les développeurs
Azure Service Fabric pour les développeursAzure Service Fabric pour les développeurs
Azure Service Fabric pour les développeurs
 

Design et expérience utilisateur sous SharePoint 2013

  • 2. Design & expérience utilisateur sous SharePoint 2013 Edwin Stephenson Amélie Jouineau Ibrahim Alirkilicarslan EXPERTIME www.expertime.com @expertime Design - SharePoint 2013
  • 3. Donnez votre avis ! Depuis votre smartphone sur : http://notes.mstechdays.fr De nombreux lots à gagner toutes les heures !!! Claviers, souris et jeux Microsoft… Merci de nous aider à améliorer les Techdays ! #mstechdays Design - SharePoint 2013
  • 4. #mstechdays Design - SharePoint 2013 1.0 Design manager 2.0 Device channels 3.0 Display templates SOMMAIRE 0. User & Design experience 4.0 Images renditions
  • 5. #0 USER & DESIGN EXPERIENCE #mstechdays Design - SharePoint 2013
  • 7. Conception UX Pensé mobilité & orienté utilisateur Mettant en avant l’actualité, l’image et les valeurs de la marque #mstechdays Jouant la carte de l’interactivité permise par le digital Avec des contenus organisés et une hiérarchisation du site Design - SharePoint 2013 Permettant un accès au moindre clic à l’information essentielle
  • 8. Les clés du succès Penser « orienté utilisateur » • • • Définir les attentes de la cible Définir les différentes interactions Recommandations ergonomiques via une méthode de conception UX #mstechdays Penser « simple & accessible » • • Limiter les clics Simplifier les actions par des interfaces étudiées Design - SharePoint 2013 Penser « design » • • • Attractif, moderne, convivial Navigation intuitive Mise en avant des contenus clés
  • 9. Démarche centrée sur l’expérience utilisateur (ergonomie UX) Arborescence permettant de structurer et organiser les contenus au sein du portail. Wireframe permettant d’organiser et prioriser l’information au sein des pages du portail. #mstechdays Design - SharePoint 2013 Création graphique permettant de donner une identité au portail.
  • 10. Wireframe animé Focus sur l’outil de wireframing • Il permet de modéliser les contenus. • Il permet à l’équipe projet de mieux appréhender le future site sans avoir à consulter les documents de spécification fonctionnelles. • Il permet également d’affirmer ou non des choix ergonomiques d’utilisation dès la phase de conception Animé et interactif #mstechdays Design - SharePoint 2013 Logo
  • 11. Un incontournable aujourd’hui, penser les sites pour la mobilité #mstechdays Design - SharePoint 2013
  • 12. Focus mobilité #1 : les usages digitaux évoluent… … média, conversation, projet, mobilité, social, détente, partage, rapidité, applications… #2 : les supports se multiplient #3 : les sites doivent s’adapter… … aux résolutions et tailles d’écrans #mstechdays Design - SharePoint 2013
  • 13. Focus mobilité #mstechdays En parallèle, les devices prolifèrent : ceux des internautes, ceux de l’entreprise, ceux de vos collaborateurs… Design - SharePoint 2013
  • 14. Focus mobilité Doit-on en arriver à cela pour servir tous les cas d’usage ? 1 site android et/ou 1 application 1 site grande résolution #mstechdays 1 site moyenne résolution 1 site iPad et/ou 1 application Design - SharePoint 2013 1 site wphone et/ou 1 application 1 site iPhone et/ou 1 application …
  • 15. La solution, le responsive design « Responsive design » : c’est quoi ? Un seul site pour tous les devices #mstechdays Design - SharePoint 2013
  • 16. La solution, le responsive design Des résolutions d’écrans structurantes (surtout dans la largeur) #mstechdays Design - SharePoint 2013
  • 17. La solution, le responsive design Les utilisateurs d’abord ! #1 : Qui sont-ils ? #2 : Comment sont-ils équipés ? #3 : Quels usages par devices ? #mstechdays Design - SharePoint 2013
  • 18. Focus sur la conception en responsive Concevoir en responsive… implique une méthodologie de travail en ergonomie, design et intégration propre à un projet en responsive design • • • Conception des pages avec une grille et des blocs modulables Suppression des blocs / fonctionnalités selon le device et le contexte, ne garder que l’essentiel Reconsidérer la hiérarchisation de l’information selon les gabarits Un mode de pensée « tactile » • Penser tactile • Se projeter en gestuelles et interactions #mstechdays Design - SharePoint 2013
  • 19. Focus sur la conception en responsive Penser la disposition par gabarits #mstechdays Design - SharePoint 2013
  • 20. Et SharePoint dans tout ça ? AFFICHAGE PC NAVIGATEUR Même contenu Même url Même collection de site layouts et templates différents #mstechdays Design - SharePoint 2013 AFFICHAGE MOBILE / TABLETTE
  • 21. SHAREPOINT PERMET 201 niveaux de Composed 3 customisation graphique Looks Simple et rapide (pas de conception ou de design) Design manager Pas besoin de background technique de SharePoint #mstechdays Design - SharePoint 2013 Full SharePoint branding Custom Master Page et Styles Custom Page layouts Custom Fonctionnalité Great user experience
  • 22. LES NOUVEAUTÉS DE SHAREPOINT 2013 VS SHAREPOINT 2010 • • • • #mstechdays Design manager Devices channels Display Templates Images renditions Design - SharePoint 2013
  • 24. Retour sur SharePoint 2010 Masterpages P.S.D HTML Custom chanel managment CSS Custom nav Ribbon Custom SharePoint site Custom catalog SharePoint Designer /Visual studio #mstechdays Design - SharePoint 2013
  • 25. Design manager avec SharePoint 2013 SHAREPOINT • • • • Auto-convert P.S.D HTML/CSS UPLOAD HTML EN .MASTER Navigation Catalog Integration Content Search Webparts Channel Panels Snippet Gallery CUSTOM MINIMAL MASTERPAGE • Ribbon • Placeholder Main Notepad ++ ou Sharepoint Designer 2013 #mstechdays Design - SharePoint 2013 Channel settings
  • 26. Design manager • Exemple site Expertime #mstechdays Design - SharePoint 2013
  • 28. Device Channels Les channels utilisent le user agent du navigateur pour déterminer le device. 2. Un alias est créé par channel. Il est possible de prévisualiser chaque rendu par le Ribbon. 3. On peut appliquer une masterpage spécifique à un channel ou afficher des parties d’HTML ou de code différents pour avoir un affichage particulier sur smartphone par exemple. 4. Des images Renditions peuvent être appliqués à un Channel. 5. #mstechdays 1. Vous pouvez utiliser l’alias du Channel dans du code JavaScript. Design - SharePoint 2013
  • 29. Exemple du site internet de Dialoge #mstechdays Design - SharePoint 2013
  • 30. Exemple du site internet de Dialoge #mstechdays Design - SharePoint 2013
  • 31. Device Channels Site Settings > Device Channels Ajouter un nouvel item Ajouter un User Agent Change master Page • • • • • Test: ?DeviceChannel=Name #mstechdays Design - SharePoint 2013
  • 33. Display templates • SharePoint 2010 vs 2013 • Webpart de recherche • Result Type #mstechdays Design - SharePoint 2013
  • 34. Display templates help you style the SharePoint Content the way you want 1. HTML file (.html) 2. Fichier Javascript #mstechdays Design - SharePoint 2013
  • 36. Image renditions avec SharePoint 2013 #mstechdays Design - SharePoint 2013
  • 37. Création des dimensions des rendus #mstechdays Design - SharePoint 2013
  • 39. Image renditions avec jQuery <script type="text/javascript"> $(document).ready(function() { $image = $(".article-content").find("img"); $image.each(function (i) { var imagesrc = $(this).attr("src") + "?RenditionID=3"; $(this).attr("src",imagesrc); }); }); </script> #mstechdays Design - SharePoint 2013