guide

Astuce pour prévisualiser des modifications sur une page web sans passer par un designer

Comment cela est-il possible ?

En faisant les modifications directement via votre navigateur, vous éviterez l’étape de maquettage – vous pourrez donc vous passer des services d’un designer, ou si vous êtes designer gagner du temps ! – tout en obtenant un aperçu rapidement.

Vous deviendrez autonome sur l’aperçu de modifications mineures de votre site web.

Il s’agit bien ici de modifications mineures. Voici un exemple :
• Modifier un paragraphe, un mot
• Changer une couleur, une taille de police
• Supprimer certains éléments d’une page
Selon vos connaissances en HTML/CSS vous pourrez pousser un peu plus les essais.

A qui s’adresse cette astuce ?

➜ Aux chefs de projet, product owner
GAIN :
• Autonomie
• Prévisualisation du rendu en version mobile et tablette

➜ Aux designers
GAINS :
• Moins de travail à faible valeur ajoutée, surtout lorsqu’on ne dispose pas de maquettes de l’existant
• Prévisualisation du rendu en version mobile et tablette

Prérequis :

• Votre site doit être accessible via un navigateur web
• Le navigateur Chrome ou votre navigateur favoris (Dans ce 2ème cas il faudra adapter les indications, la logique étant identique)
• Une minime connaissance du HTML / CSS
• 10 minutes la première fois, le temps de lire cet article, d’expérimenter et maîtriser. Les fois suivantes il vous faudra moins d’une minute pour faire les modifications !

Voici la marche à suivre :

  1. Chargez la page web sur laquelle vous souhaitez apporter des modifications.
  2. Positionnez la votre curseur sur l’élément que vous souhaitez modifier.
  3. Faites un clic droit sur cet élément que vous souhaitez modifier. Un menu apparaît, sélectionnez “inspecter”.

    Un panneau s’ouvre, à droite, ou en bas, selon les réglages de votre navigateur.

  4. Dans ce panneau qui est apparu, double cliquez sur le texte que vous souhaitez modifier.
  5. Quand vous avez terminé, cliquez sur la touche ENTRÉE.

Vous pouvez dès à présent voir votre modification sur la partie gauche du navigateur.
Pour enlever le panneau et voir l’aperçu sur la totalité du navigateur, cliquez sur la croix en haut à droite de ce panneau.

Pour aller plus loin :

• Prévisualiser en MOBILE ou TABLETTE (à venir)
• Effacer vos modifications : rafraichissez la page (cmd + R sur mac ou ctrl + R sur pc, ou encore ce symbole ⟳ à coté de la barre d’adresse)
• Pour faire une capture d’écran de la page entière : installez le plugin FULL PAGE SCREEN CAPTURE

Bonnes prévisualisations !

Estelle

Laissez un commentaire