Lighting up your site on Windows 8.1 (3-071)

Session animée par Jacob Rossi – PM Internet Explorer

L’objectif de cette session sera de montrer comment intégrer au maximum son site web dans Windows 8.1 : tile, touch, share…

1/ Mieux répondre aux interaction avec l’utilisateur

Avec les évènements Pointer (que ce soit du touch, un stylet ou la souris)

Et quelques bonnes pratiques : avoir des zones de clics d’au moins 40 pixels, pas de hover, utliser les types HTML5 (numérique, email…) qui aident à la saisie

Il faut aussi utiliser le scroll (-ms-scroll-**, windows.scrollTo()) et le zoom (document.documentElement.msZoomTo) natif qui seront toujours plus fluides et performants !

2/ Proposer une lecture optimisée

Entre les résolutions à supporter et le fait que l’utilisateur peut snapper jusqu’à 4 apps et déplacer le curseur là où il veut, pas de secret, il faut abuser du responsive design et des media queries.

IE 11 ajoute -ms-device-fixed pour garder un élément fixe même en zoomant.

3/ S’intégrer à Windows

  • Avec Win 8, on pouvait déjà définir une image pour épingler son site sur l’écran de démarrage, avec Win 8.1 on peut désormais définir toutes tailles de tuiles.
  • On peut aussi maintenant animer les tuiles de la même manière qu’une app. C’est le même schéma XML que pour les apps. Il existe un service buildmypinnedsite.com qui transforme un flux RSS en live tile.
  • On peut utiliser les markup Open Graph pour s’intégrer au contrat de partage
  • On peut définir une navigation sur le swipe en définissant les meta <link rel=next|prev />

Pierre-Yves Hemery

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