Continuons d’avancer

Openweb.eu.org > Blog  > Continuons d’avancer

Abstract

Vous l’aurez peut-être remarqué, OpenWeb continue discrètement sa mue.

Article

Emmanuel a retravaillé la typographie et continue d’ailleurs de plancher (au sens propre) sur la suite du redesign. Pour ma part, je me suis dit : « c’est quand même dommage, je pense qu’il ne faudrait pas grand chose pour que son chouette travail s’adapte aux tablettes et autres smartphones ». En douce, j’ai fait quelques essais.

L’adaptation aux tablettes (en portrait) a été plutôt facile, j’ai tout simplement mis la colonne qui indique l’auteur d’un l’article en-dessous dudit article à partir d’un certain palier (en asséchant un float si vous me permettez ce jeu de mot).

Bloc auteur sur tablette en portrait

Pour la page d’accueil, les quelques blocs ont été linéarisés.

Blocs de la page d'accueil linéarisés

Pour les smartphones, cela a été un peu plus long, de nombreux éléments ont été linéarisés, quelques éléments ont été modifiés ou directement supprimés, comme par exemple la #boussole. De nombreux éléments ont été simplement remis dans le flux via le combo magique : width: auto; float:none;

Version smartphone d'OpenWeb, en vue adaptative sous Firefox

Une remarque sur Twitter nous a suggéré d’augmenter la zone centrale pour les grands écrans, afin de profiter d’un meilleur confort de lecture. Comme j’aime gâter nos lecteurs, une média-query a été vite ajoutée :


@media screen and (min-width: 1280px) {
   #container {
     max-width: 54em;
   }
   #article {
     width: 34em;
   }
   #about {
     width: 8em;
   }
   .comments {
     max-width: 54em;
   }

}

Comme vous pouvez le voir, pas besoin de beaucoup de code pour réaliser cette adaptation ! sourire

Au passage, une version imprimable des contenus a été ajoutée : vous pourriez être là-aussi vraiment surpris de la simplicité du code résultant. Je pense qu’il m’a fallu au moins… 15 bonnes minutes pour arriver à ce résultat. Cacher des éléments, en remettre quelques uns à zéro, etc.

Cela donne ça :


@media print {
  /* là-dedans les éléments qui ont besoin d'être
   * resetés de manière très brute pour le print
   */
  body,
  html, 
  #article, 
  #about,
  #container  {
    background-color: #fff;
    background-image: none;
    border: 0;
    box-shadow: none;
    color: #000;
    float: none;
    height: auto;
    margin: 0;
    min-height: auto;
    padding: 0;
    position: static;
    width: auto;
  }

  body {
    padding: .5em;
  }
  
  #boussole , #nav ul, #unesecondaire, .chemindefer, 
  .comment-form, .comments-feed, #footer, 
  #spip-admin, .spip-admin, .diese{
    display: none;
    }

  .comments {
    margin-top: 2em;
  }
  
  /* éviter saut de page hasardeux */
  blockquote, ul, ol , table{
    page-break-inside: avoid;
  }
  h1, h2, h3, h4, caption {
    page-break-after: avoid;
  }

} /* end print */

Côté code, hormis une légère coquille de validation qui avait dû échapper à la vigilance de nos tueurs de code invalide, ce sont deux métas qui viennent d’être ajoutés :

<meta name="viewport" content="width=device-width" />
<meta name="HandheldFriendly" content="true" />

Le meta viewport indique aux périphériques d’adapter la page à leur largeur « physique », et le HandheldFriendly indique à certains navigateurs plus anciens que le contenu est adapté aux mobiles, pas besoin de faire de zoom ou d’adaptation.

La question que vous pourriez poser est : tout cela a pris combien de temps ? En une à deux soirées en tâtonnant, le gros de l’adaptation était fait. Bien sûr, cela m’a été facilité par une structure et une CSS bien conçues. Comprenez par là que l’ordre hors mise en forme de la structure est cohérent, il n’y a pas d’erreur de validation ou de soupe de balise. Je l’ai déjà dit et je le répète : adapter un site en responsive sera d’autant plus aisé que la base de départ sera bien pensée.

Vous pourriez croire que la peinture est sèche, loin s’en faut ! Ce travail rapide permet d’éviter des bugs et de rendre aussi agréable que possible l’utilisation du site sur tablette et smartphone, toutefois, c’est très loin d’être fini et parfait ! Mais à l’instar d’Emmanuel, je lâche prise, et je préfère proposer quelque chose plutôt que d’attendre indéfiniment que cela soit parfait.

Emmanuel va continuer son travail de redesign, et je resterai en garde-chasse des bugs et du côté responsive s’il y a besoin.

En tout cas, si vous avez des questions, des remarques, des idées, n’hésitez pas à nous en faire part ici.

Ajout : toujours dans l’idée de faciliter la consultation sur smartphone et tablettes, le formulaire pour commenter utilise les nouveaux types url et email pour les champs correspondants. Les petits ruisseaux font les grandes rivières.

À propos de cet article

  • Openweb.eu.org
  • Auteur :
  • Publié le :
  • Mise à jour : 8 juin 2013

Répondre à cet article

Qui êtes-vous ?

Pour afficher votre trombine avec votre message, enregistrez-la d’abord sur gravatar.com (gratuit et indolore) et n’oubliez pas d’indiquer votre adresse e-mail ici.

Ajoutez votre commentaire ici
  • Ce formulaire accepte les raccourcis SPIP [->url] {{gras}} {italique} <quote> <code> et le code HTML <q> <del> <ins>. Pour créer des paragraphes, laissez simplement des lignes vides.

Suivre les commentaires : RSS 2.0 | Atom