Chapitre 4 : Les bases d’un bon site Web mobile

Dans cette page :

← Chapitre 3 — Chapitre 5 →

Sommaire du chapitre

  • Retour aux sources de la simplicité
    • Privilégier une présentation linéaire
    • Ne pas chercher les problèmes inutiles
    • Images : la taille compte !
      • Préciser la taille avant toute chose
      • Des images aux mensurations parfaites
    • Soigner la navigation
      • Le juste équilibre
      • Une navigation cohérente
      • Touches de raccourci : prudence !
    • Contenu : aller droit au but
    • Limiter la longueur des pages [*]
  • S’adapter aux interactions utilisateur
    • Liens : cliquer n’est pas jouer
    • Du bon usage des formulaires
      • Limiter les entrées manuelles
      • Guider la saisie
      • À chaque champ son étiquette
      • Compact et à suivre
    • Adresses et codes barres 2D
  • Personnaliser l’expérience utilisateur
    • Authentification de l’utilisateur
      • Nom d’utilisateur et mot de passe
      • Contrôler sa ligne en mangeant des cookies
      • Compléter les liens avec un jeton de session
    • Mémoriser les préférences
    • Combler le trou de la sécu
    • Vie privée, vie publique
  • Adresse : .mobi ou m. ?
    • Trouver la version mobile d’un site web
      • Saisie de l’adresse
      • Référencement dans les moteurs de recherche
      • Partage de liens et de signets
    • L’utilisateur est roi
    • Récapitulons

      Apartés

      • Le saviez-vous ? Services d’optimisation d’images
      • Attention Algorithmes de réduction d’images
      • À la pointe Le retour des touches de raccourci dans HTML 5
      • Le saviez-vous ? Mobilité et accessibilité
      • Conseil Soyez flexible !
      • Dans les coulisses L’attribut inputmode
      • Point de vue d’expert Interactions utilisateur sur les mobiles (par Barbara Ballard, auteure de Designing the Mobile User Experience)
      • Le saviez-vous ? Opérateur et identité
      • À la pointe OpenID, OAuth et les terminaux mobiles
      • B.A.-Ba HTTPS, HTTP sécurisé
      • Le saviez-vous ? Ce que je connais, ce que je possède

      Extraits de code

      Les différents morceaux de code du chapitre sont à votre disposition ci-dessous pour faciliter leur copie…

      Spécifier la taille d’une image en HTML
      <img src="monimage.jpg" 
     alt="Dom et François sur le volcan Eyjafjöll"
     width="300" height="150" />

      Touches de raccourci pour un clavier numérique
      <ol class="menu">
 <li><a href="accueil.html" accesskey="1">Accueil</a></li>
 <li><a href="cat.html" accesskey="2">Catégories</a></li>
 <li><a href="aide.html" accesskey="3">Aide</a></li>
 <li><a href="apropos.html" accesskey="4">À propos de</a></li>
</ol>

      Pré-sélection de l’option la plus probable
      <p>Souhaitez-vous recevoir Spam-Spam magazine ?</p>
 <select>
  <option value="oui">Oh oui !</option>
  <option value="non" selected="selected">Non</option>
</select>

      Quelques exemples de champs en HTML 5
      <p>Votre email :
 <input type="email" /></p>
<p>Votre téléphone :
 <input type="tel" /></p>
<p>Date souhaitée :
 <input type="date" /></p>
<p>Proposez un mot de 8 lettres :
 <input id="motus" pattern="[A-Z]{8}" /></p>

      Associer des étiquettes aux champs de saisie
      <form action=''>
 <p>
  <label for='n'>Nom de famille :</label>
  <input name='n' id='n' />
  (<abbr title='requis'>*</abbr>)
 </p>
 <p>
  <label for='p'>Prénom :</label>
  <input name='p' id='' />
  (<abbr title='requis'>*</abbr>)
 </p>
 <p>
  <input type="submit" value="S’inscrire" id='submit'/>
 </p>
</form>
<p>Les champs marqués d’une astérisque (*) sont requis.</p>

      http://www.example.com/monsitesupercool

      Exemple de jeton de session PHP ajouté aux liens en HTML
      <a href="page.php?PHPSESSID=65437125701349">
 Voir mon profil
</a>

      Lien vers l’adresse par défaut dans une page HTML
      <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title>[titre]</title>
  <link rel="canonical" href="http://cool.example.com/" />
 </head>
 <body>
  [contenu]
 </body>
</html>

      Liens

      Retrouvez les liens donnés dans le chapitre ci-dessous :

      Erreurs et corrections connues

      • L’extrait d’article du site web mobile de Wikipédia (figure 4–2 page 100) a été tronqué à la publication. L’image complète, qui illustre bien le concept de « section cachée » mentionné dans la page, est reproduite ci-dessous :

        Extrait de la version mobile de la page de Wikipédia sur « L’Art poétique »

      ← Chapitre 3 — Chapitre 5 →