Creating beautiful and engaging websites with SharePoint 2010

Session animée par Randy Drisgill et John Ross (MVPs SharePoint 911)

La session débute !

Randy et John vont répondre à la question suivante : comment faire en sorte que des sites publics faits sous SharePoint ressemblent à tout sauf à SharePoint ?

Et tout ça, sans s’attarder sur les classiques MasterPage, PageLayouts et css…

Nous allons parler d’un nouveau terme marketing, le « branding ».  Ils nous définissent  c’est qu’est le branding en posant la question : pourquoi utiliser des « Kleenex » plutôt qu’un bout de papier ou pourquoi payer 2$ pour un café?

Pour résumer le branding, c’est chercher à être un symbole de qualité.

Il peut s’agir des couleurs, de la police, des logos ou de n’importe quel support graphique qui définit le look and feel d’une entreprise…

SharePoint est moche?  C’est une question de gout ! Une seule chose est sûre, il ne correspond certainement pas aux émotions et sensations que veut transmettre une société.

Heureusement, on peut faire ce que l’on veut avec SharePoint ;).

Pour le prouver, nous avons le droit à quelques exemples de sites qui en jettent.

Ils sont visibles sur topsharepoint.com. Leur sélection de sites pour lesquels l’utilisation de SharePoint est insoupçonnable : brembo, chillies, chicago, shaerpie , washington the state…

Effectivement, on n’aurait pas deviné !

Les étapes nécessaires pour customiser un site :

  • Planifier
  • Créer le design/l’expérience utilisateur
  • Créer les Masterpages, ccs, PageLayouts,Webparts
  • Tester
  • Saisir le contenu
  • Faire des devs custom

Par quoi on commence ? Définir sa vision et ses buts puis  créer une équipe.

Il faut se poser les questions: A qui on s’adresse ? Quels besoins pour la navigation, la recherche ? Quels types d’informations ? Quel est l’identité du groupe ?

Ça prend du temps tout ça, beaucoup d’allez-retour, de meetings, …

Quelques règles à garder à l’esprit:

  • La mémoire courte de l’humain ne retient que 5 à 9 choses simultanément
  • 3 clics maxi pour arriver à ce que l’on cherche. Plus de clics: l’utilisateur doit savoir précisément sait où il en est
  • L’utilisateur ne doit pas attendre, avoir l’impression que le serveur charge quelque chose

Plusieurs axes d’accès à l’info : recherche, navigation, contenu, raccourcis pour les utilisateurs habitués…

On peut prendre des décisions graphiques d’abord en noir et blanc, sans couleurs, sans images…

On peut faire ça avec Visio,  Sketchflow ou Balsamique.

Ils montrent un exemple de page pas en noir et blanc faite au stylo. Les clients ont du mal mais ça fait un premier axe de travail.

Le process du design : les besoins, les wireframes, les specs technique…

Souvent les clients expliquent « Je ne sais pas ce que je veux mais je le saurai quand je le verrai ».

On peur utiliser des design patterns modernes : jquery, etc

Faire les maquettes avec Photoshop ou Microsoft expression design, ça coute moins cher.

Mettre de « lorem ipsum » et des photos simples pour que le client puisse se faire une idée.

C’est important d’avoir un feedback des utilisateurs.

Il nous présente des liens vers A/B testing et intuitionHQ.

Il est important de penser à quelle plateforme le site est destiné : ordinateur, tablette, téléphone…

Conseils :

  • Tester avec plusieurs navigateurs (avec expression super preview par ex)
  • Utiliser un doctype xhtml strict
  • Tester avec le test w3c

En fonction du besoin :

  • Effort faible : thèmes …
  • Effort moyen css, images, …
  • Effort élevé : masterpages, pagelayouts, css, xslt…

Si on veut faire une custo assez poussée, tout commence par la MasterPage.

On peut utiliser la starter Masterpage disponible sur codeplex (qui contient des commentaires et moins de contrôles) puis ajouter le css et l’html , masquer les composants natifs inutiles.

Nous avons droit à une démo montrant le contenu de la MasterPage avec SharePoint designer.

On peut utiliser la webpart content editor pour insérer du  css et du javascript mais, attention, il faut éduquer les utilisateurs à ne pas faire n’importe quoi avec. Ce n’est pas la meilleure solution ceci dit !!!

Ils nous présentent la webpart content query qui remonte des informations présentée avec du xslt.

Nous avons droit à une démo…

On peut également sortir du OOTB avec du code custom sous VS ou en achetant des composants (webparts, …)

Petit coup de pub aux éditeurs de composants…

Il faut penser à désactiver la vue mobile si on ne la gère pas.

IOS et Android ont des problèmes avec le ribbon par exemple.

http://www.mobileentree.com: produit pour optimiser l’expérience mobile.

Il faut garder à l’esprit que le contenu est Roi :
Mettre des metadata
Mettre des noms parlants sur les titres et les noms de pages

Penser aussi aux performances du site: il faut que les pages chargent vite (aptimize.com peut aider).

Les étapes d ‘un déploiement : finir les devs, penser au packaging et a la stratégie de déploiement, tester, saisir le contenu.

Souvent, après avoir utilisé SharePoint, les clients veulent revoir le design (nouvelles idées à l’utilisation).

On peut faire pratiquement ce que l’on veut côté design avec SharePoint mais penser à bien planifier et faire le plus possible de choix hors SharePoint.

Bilan mitigé pour cette première session, pas assez concrète à mon goût…

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

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