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

Dans cette page :

← Chapitre 3Chapitre 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 3Chapitre 5 →