Web

10 outils pour le Web mobile

Article par (Intégrateur du Dimanche, Strasbourg)
Créé le , mis à jour le (29526 lectures)
Tags : mobile, webmobile, responsive

Les contraintes d'ergonomie, d'adaptation et de performance dans le monde du Web mobile impliquent parfois certaines techniques rendues complexes par le peu de spécifications et d'outils existants à l'heure actuelle.

En attendant des modules de positionnements CSS flexibles tels que "Flexbox", ou des spécifications stables concernant les informations de type "retina" ou de bande passante d'un terminal, nous sommes contraints à créer nous-même nos outils et stratégies.

Pour nous faciliter la tâche, voici une sélection de 10 ressources bien pratiques.

La majorité des dispositifs présentés dans cet article consistent en des bibliohèques JavaScript et répondent à des missions bien précises.

Inutile de vous préciser qu'il n'est pas recommandé d'employer l'ensemble de ces outils sur un seul et même projet, pour des raisons évidentes de performances.

Mobile Boilerplate

À l'instar du célèbre HTML5Boilerplate, son petit frère "Mobile Boilerplate" consiste en un kit HTML, CSS et JavaScript de base pour débuter avec son projet de site web mobile.

mobile boilerplate

Voir Mobile Boilerplate

320 and up

320 and up est un framework léger dédié à la philosophie "mobile-first" et automatiquement prévu pour des points de rupture de 480, 600, 768, 992 et 1382 pixels.

Souple et évolutif, il peut être couplé à Modernizr, Bootstrap, LESS et SASS selon vos besoins.

320andup

Voir 320 and up

jQuip (jQuery in Parts)

jQuery in Parts est un framework JavaScript conçu pour être plus léger et plus rapide de jQuery et se vantant d'être compatible et de recouvrir 90% des fonctionnalités de jQuery. Dans la même lignée, ZeptoJS est également un jQuery-light plutôt orienté mobile-first voire sites mobiles dédiés (pas de support IE par exemple).

jquip

Voir jQuip

Respond.js

Respond.js est un polyfill (alternative) très léger et rapide permettant aux anciennes versions d'Internet Explorer (IE6-IE8) de reconnaître les Media Queries CSS min/max-width.

respond

Voir Respond.js

ReView

ReView ou "Responsive Viewport" offre la possibilité à l'utilisateur de passer d'un affichage "mobile" vers un affichage "bureau", et inversement, en modifiant les valeurs de la taille de fenêtre (viewport) du navigateur.

review

Voir ReView

SelectNav

SelecNav.js est un outil permettant de redéfinir la navigation du site : sur petits écrans, la navigation initiale (liste HTML d'élements) est transformée en élément d'interface HTML Select, réputé pour être ergonomiquement idéal en situation de mobilité.

SelectNav est un script autonome. Il existe d'autres outils de ce type, tels que TinyNav, mais ils nécessitent souvent un socle jQuery.

selectnav

Voir SelectNav

Relocate (et minwidth)

Je vous l'ai évoqué en introduction, les positionnements CSS magiques tels que Flexbox ne sont pas encore suffisamment compatibles pour un usage massif.

Relocate et minwidth sont deux scripts qui pallient ce manque :

  • le premier permet tout simplement de déplacer des éléments d'un conteneur à un autre en fonction de la taille de la fenêtre
  • le second permet de faire des chargements conditionnels de script JS ou d'autres ressources, là aussi selon la taille de la fenêtre

relocate

Voir Relocate

Animated scroll to top

Ce tutoriel vous apprend comment générer un bouton permettant de retourner en haut de page de manière animée. Ce bouton n'apparaît bien entendu que lorsque vous avez fait défiler la page. À noter que vous trouverez une autre version de cette fonctionnalité sur le site (en français) de CreativeJuiz.

scrolltotop

Voir Scroll to top

Responsive Tables

Zurb propose une démonstration commentée d'une solution à problème épineux en Responsive Web Design : comment gérer les tableaux de données (complexes) ?

responsive tables

Voir Responsive Tables

Sequence

Sequence.js fait partie des nombreux outils de sliders (ou slideshows) d'images responsive sur le Net. Il a cependant la particularité d'être extrêmement complet et de proposer trois modèles différents d'affichage très séduisants.

sequence

Voir SequenceJS

Nos ressources sur le sujet

Pour aller plus loin dans ce monde merveilleux et en plein essor du Web mobile, n'oubliez pas que nous avons publié quelques articles de référence chez Alsacréations :

Commentaires

rodolpheb a dit le

Excellentes ressources comme toujours, merci pour l'aide ......

Je me permets de souligner une petite faute de frappe : "Relocate et minwidth sont deux scripts qui pallient à ce manque " ---->".....pallient ce manque...."

Amitiés

Raphael a dit le

@rodolpheb : Merci, c'est corrigé.

wilo a dit le

Mer6! excellent tuto :-)

jmlapam a dit le

À rajouter dans mes favoris, merci. Petite question : À Paris Web on parlait d'un support plutôt bon pour flexbox pourtant dans le web mobile non? Je crois que c'est le mec du Smashing.

Ce que j'ai du mal à capter c'est respond.js : c'est media queries pour IE6-8 mais quels appareils tournent avec?