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

Nouveau site Web Metalogique

Le nouveau site web de Metalogique est maintenant en ligne!

Il vous propose une expérience totalement nouvelle, où un contenu entièrement revu s’intègre harmonieusement à un design des plus moderne.

photo

Le projet a été développé dans son entier par Metalogique, avec le concours de plusieurs de ses employés:

  • Michel Bergeron, Charles Gagnon, Claude Vézina et Odette Nadeau  ont contribué à la création des contenus.
  • Pierre Paquet, Véronique Delisle et Richard Dupont ont donné vie au projet en travaillant à la conception et à l’intégration.

Notre nouveau site offre donc une expérience utilisateur complètement renouvelée, alignée sur les réalités d’aujourd’hui. Le design épuré et l’intégration responsive permettent un affichage agréable qui s’adapte sur toutes les plateformes, incluant les téléphones intelligents. De plus, la grande majorité des contenus est accessible directement à partir de la page d’accueil, offrant ainsi une navigation simple et fluide.

Constatez par vous-même le résultant en vous rendant sans plus attendre sur Metalogique.com.

Metalogique accompagne les entreprises et les organisations dans leur évolution TI.
Imaginez demain, réalisez-le aujourd’hui avec nous !
En savoir plus sur nos solutions.

Un intégrateur Web, qu’est-ce que ça mange en hiver?

Je reprends mots pour mots le titre du billet écrit par Guillaume Fugère de la firme Sigmund, car je suis certaine que vous êtes nombreux à vous poser cette question. Surtout que l’hiver est déjà commencé…

Ce billet, donc,  nous éclaire sur ce métier méconnu mais néanmoins essentiel dans l’univers du web.

Cliquez ici pour tout savoir !

Bonne lecture!

unsplash-kitsune-3-1024x682

Source de l’image

Mise en ligne pour TuxedoSim

Récemment, TuxedoSim inaugurait son nouveau site web réalisé en collaboration avec Metalogique.

TuxedoSim ? Situé dans le parc aéroportuaire de l’Aéroport international Jean-Lesage de Québec, cette entreprise est la seule à disposer d’un simulateur de vol MCX de Redbird au Québec. Elle offre donc aux pilotes et apprentis pilotes la possibilité de poursuivre leur apprentissage à l’aide de ce simulateur de vol des plus perfectionné. Les pilotes pourront maintenant s’entraîner beau temps mauvais temps et réserver des heures de vol en ligne.

Le site que nous avons développé pour TuxedoSim s’appuie sur les tous derniers langages de programmation web, soit le HTML 5 et le Responsive Design dont nous avons déjà parlé ici. Nous avons également assuré le design et l’ergonomie de l’interface.

Le site web de TuxedoSim peut donc être consulté tant sur les appareils fixes que mobiles, avec une aisance et une fonctionnalité parfaite.

Nous sommes très fiers du résultat, assurés que ce site contribuera significativement au succès de TuxedoSim !

Responsive design – la pointe de l’iceberg

Chez Metalogique, nous mettons actuellement la dernière main à la refonte de notre site web qui fera désormais partie de la famille des sites en Responsive design. Le travail a été plus exigeant que nous l’avions prévu. Mais le résultat sera à la hauteur de nos attentes et, nous l’espérons, de celles de notre clientèle.

Responsive design ?

Un site web adaptatif (anglais RWD pour responsive web designconception de sites web adaptatifs selon l’OQLF1) est une notion de conception de sites web qui regroupe différents principes et technologies dans laquelle un site est conçu pour offrir au visiteur une expérience de consultation optimale facilitant la lecture et la navigation. L’utilisateur peut ainsi consulter le même site web à travers une large gamme d’appareils (moniteurs d’ordinateur, smartphones, tablettes, TV, etc.) avec le même confort visuel et sans avoir recours au défilement horizontal ou au zoom avant/arrière sur les appareils tactiles notamment, manipulations qui dégradent considérablement l’expérience utilisateur. (source: Wikipedia)

Le Responsive design devient graduellement un incontournable pour quiconque souhaite proposer un site qui s’inscrit dans les toutes dernières tendances du développement web. Cela évite aussi d’avoir à développer un site mobile spécifique, voire plusieurs sites adaptées aux différents navigateurs ou aux multiples résolutions des appareils mobiles.

Mais tout est loin d’être rose dans le monde adaptatif ! Ce type de développement a ses exigences et ses particularités qu’il vaut mieux connaître avant de s’y lancer à corps perdu !

Stéphanie Walter, « Graphiste – Designer Web et mobilité » basée à Strasbourg, nous propose ici un billet des plus pertinent sur le Responsive design:

Dans cet article, nous allons nous intéresser à ce qui est aujourd’hui déjà possible en terme d’optimisation de sites pour mobiles, mais également à ce qui sera possible dans le futur. Nous parlerons de propriétés non encore standardisées comme CSS level 4, HTML5 et d’APIs, ainsi que de techniques qui restent à être améliorées. Cet article est loin d’être exhaustif et nous n’aurons pas le temps d’approfondir chaque technique mentionnée, mais vous aurez à la fin de la lecture à votre disposition suffisamment de liens pour pouvoir continuer l’exploration par vous-même.

Je vous en recommande chaudement la lecture attentive. Elle fait un tour de la question que tout développeur web voudra connaître.

Elle reproduit notamment cette infographie particulièrement éloquente qui nous a inspiré pour le titre de notre billet.

Responsive Design

Alors, si vous envisagez vous lancer dans le Responsive design, le billet de madame Walter est pour vous, d’autant qu’il est riche en hyperliens qui permettent de faire un tour pas mal complet de la question.

Bonne lecture et bon développement !

Nouveau metablog

Bienvenue sur le Metablog :  ici, on discute SharePoint, gestion documentaire, évolution organisationnelle, mobilité et sites collaboratifs pour ne nommer que cela. À l’affût des dernières tendances ou simplement curieux, suivez dès aujourd’hui nos commentaires sur l’actualité et découvrez-en plus sur ces domaines.

Propulsé par l’équipe de conseillers Metalogique – TI évolutive