SharePoint 2013 et Responsive design : 5 lignes directrices pour réussir votre projet

Il est possible de réaliser un site web de publication SharePoint 2013 responsive design, dans une grille fluide et adaptable à plusieurs formats d’écran. Comme c’est souvent le cas avec SharePoint, la question n’est pas tant s’il est possible de le faire, mais comment réussir sans trop se casser la gueule !

Plusieurs approches sont possibles, voici quelques pistes qui pourront vous aider à réaliser un projet responsive dans SharePoint.

1. D’abord, ce qu’il ne faut pas faire

Oubliez la fonctionnalité « affichage de navigateur mobile » ainsi que l’utilisation de canal périphérique (channel). Leur utilisation étant respectivement inappropriée et complexe. Sans vouloir rentrer dans les détails, tout ce que vous réussirez à faire, c’est vous compliquer la vie.

2. Utilisation d’un framework

Ma seconde recommandation et sûrement la plus importante, consiste en l’utilisation d’un framework comme Bootsrap3 ou Foundation the zurb. Leur utilisation est gratuite, simple et très bien documentée, mais il n’y a pas de magie, vous devez avoir les compétences nécessaires pour les utiliser.

Quel framework choisir? Ça, c’est à vous de le déterminer en fonction de votre projet. Voici un article intéressant sur le sujet qui pourra probablement vous éclairer.
http://designmodo.com/bootstrap-vs-foundation/

3. Utilisation d’une trousse de départ

Certaines communautés de développeurs comme Codeplex ont développé des trousses de départ  à partir des framework. Personnellement, j’ai eu l’occasion d’explorer celle développée avec bootstrap 3 et j’ai été très satisfaite des comportements obtenus.

L’ensemble pour la publication comprend :

• Une page maître de départ, clairement construite et commentée
  Rien à voir avec la page maître native de SharePoint.
  D’ailleurs, je vous déconseille fortement d’utiliser les pages maîtres natives comme point de départ pour votre projet.
• Six gabarits de mises en page (Page layout)
• Les composantes du framework (JS,CSS, fonts)

L’avantage d’une telle trousse de départ, c’est qu’il y a déjà une base de grille établie dans la page maître. Il suffit alors de l’ajuster en fonction du design désiré. De plus, un travail a déjà été fait pour ajuster les styles natifs de SharePoint au framework. Il restera sans doute du travail à faire selon votre projet, mais c’est déjà ça d’accompli. Avec une trousse de départ bien montée, on est certain de partir notre projet sur des bonnes bases.

4. Pensez Responsive design

Le projet doit être pensé responsive dès le départ. Quoi que moins technique, c’est un point extrêmement important. Un site web responsive se réfléchit dès la première minute où l’on s’assoit avec le client. Le design, l’architecture d’information, tout doit être conçu en fonction de la grille du framework et de SharePoint. Faites des maquettes en wireframes, pour concrétiser le projet et planifier ce qui s’affichera dans les différentes interfaces. Restez simple, optez pour un visuel épuré et utilisez vos éléments de design plus « punchés » pour faire ressortir ce qui est important dans l’interface.

5. Rappelez-vous que vous êtes dans SharePoint

Même si vous êtes le meilleur intégrateur Web au monde, n’oubliez jamais que vous intégrez dans SharePoint. Il est facile de s’éparpiller et d’engendrer des bogues d’affichage. Méfiez-vous, la plus récente méthode d’intégration ne sera pas toujours la meilleure approche dans SharePoint. Voici quelques conseils d’intégration:

• L’inspecteur de Firebugs sera votre meilleur ami.
• Testez fréquemment, évitez de faire trop de modifications consécutives. C’est plus facile ainsi de savoir d’où provient le problème.
• Testez les composantes natives (ruban, panneau de paramètres des webparts) assurez-vous qu’ils fonctionnent bien et que leur affichage n’est pas affecté pas les styles que vous appliquez. Les contrôles de paramétrisation doivent demeurer 100% fonctionnels.
• Conservez la page maître native pour les pages systèmes. Vous éviterez la gestion de bogues pour des pages où il n’est pas nécessaire que l’affichage soit adaptatif.

Il faut savoir apprivoiser « la bête »: restez simple et le plus natif possible. C’est toujours bon de l’avoir à l’esprit quand on développe sur SharePoint.

Je vous promets un prochain billet dès que j’aurai l’occasion d’explorer davantage l’intégration responsive pour les sites de collaboration (d’équipe) pour lesquels les enjeux sont bien différents.