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.

responsive

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.

Advertisements

2 avis sur « SharePoint 2013 et Responsive design : 5 lignes directrices pour réussir votre projet »

  1. Merci et tres bon article.
    Pourriez vous me donner le nom de la trousse de départ que va avez utilisé?
    Merci d’avance

    • Bonjour, dans l’article je parle de la trousse de départ « Responsive SharePoint » pour SharePoint 2013 de CodePlex. http://responsivesharepoint.codeplex.com/
      À l’époque où l’article à été écris c’était effectivement une solution intéressante pour intégrer facilement un plateforme de publication SharePoint responsive. Dépendamment de votre projet, si votre but est d’obtenir très rapidement un résultat avec un visuel simple, le kit de départ de Codeplex est encore une bonne solution. Cependant, noter bien que je ne recommande pas sont utilisation pour les sites de collaboration (team Site), mais pour un site de publication, il fonctionne bien. Si vous désirez personnaliser d’avantage votre interface, je vous recommande d’utiliser une masterpage de départ « starter » comme celle de Codeplex (http://startermasterpages.codeplex.com/releases/view/97062) et de faire votre propre intégration avec Bootstrap. Il sera plus facile de faire ce que vous voulez de cette manière qu’en essayant de modifier le kit de départ. Heureusement l’avenir du responsive design avec SharePoint 2016 s’avère beaucoup plus prometteur!

Laisser un commentaire

Entrer les renseignements ci-dessous ou cliquer sur une icône pour ouvrir une session :

Logo WordPress.com

Vous commentez à l’aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l’aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l’aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l’aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s