Comment prendre une capture d'écran de site Web avec des dimensions spécifiques à l'aide de Google Chrome
Si vous êtes une agence ou une entreprise avec un portefeuille de sites ou de pages que vous souhaitez partager en ligne, vous avez probablement éprouvé la peine d'essayer de capturer des captures d'écran uniformes de chaque site.
L'un des clients avec qui nous travaillons développe des solutions Intranet hébergées qui peuvent être hébergées en interne dans les limites d'une entreprise. Les intranets sont extrêmement utiles pour les entreprises pour communiquer les nouvelles de l'entreprise, distribuer des informations marketing, fournir des informations sur les avantages sociaux, etc.
Nous avons aidé ce client à migrer son produit de solution intranet à partir du site Web de sa société mère. Il s'agissait d'un vaste projet qui intégrait tout, depuis la création de nouveaux profils sociaux, la mise à jour de Marketo, puis le démontage d'une partie du développement personnalisé qu'ils avaient effectué pour combiner leurs sites.
Une étape critique consistait à s'assurer que nous avions de superbes photos de produits des sites intranet de leurs clients bien en vue sur leur nouveau site Web. Nous voulions nous assurer que chaque capture d'écran avait toujours la même largeur et la même hauteur sur tout le site. Cela peut être difficile… sauf si vous utilisez Google Chrome.
Captures d'écran client avec Google Chrome
Vous ne vous en rendez peut-être pas compte, mais vous pouvez capturer des captures d'écran parfaites avec l'ensemble intégré d'outils de développement robustes de Google Chrome. Fait intéressant, malgré son incroyable flexibilité, ce n'est pas une fonctionnalité très connue. La fonctionnalité vous permet également de prendre des photos de votre site réactif pour des dimensions et des tailles d'écran spécifiques.
Voici un didacticiel vidéo rapide sur la façon de prendre une capture d'écran parfaite, de taille spécifique, d'une page Web à l'aide de Google Chrome :
Étapes pour prendre une capture d'écran avec Google Chrome
Les outils de développement de Google Chrome peuvent prévisualiser un site à l'aide de la barre d'outils de son appareil. L'outil a été conçu pour que les développeurs puissent voir à quoi ressemble le site dans différentes tailles de fenêtres sur différents appareils… mais il s'avère également être un moyen idéal d'obtenir une capture d'écran parfaitement dimensionnée d'une page Web.
Dans ce cas, nous voulons que chacun des principaux clients du client dans tous les secteurs qui ont construit de beaux sites Intranet prenne une capture d'écran afin que nous puissions tous les afficher dans un portefeuille sur leur site Web. Nous voulons que les pages mesurent exactement 1200 pixels de large sur 800 pixels de haut. Pour y parvenir:
- Dans le bouton de navigation tout à droite (3 points verticaux), sélectionnez le Menu de personnalisation et de contrôle.
- Sélectionnez Plus d'outils> Outils de développement
- Basculer le Barre d'outils de l'appareil pour afficher les options et dimensions de l'appareil.
- Définissez la première option sur ., puis définissez les dimensions sur 1200 x 800 et appuyez sur Entrée. La page s'affichera maintenant avec ces dimensions.
- Sur le côté droit de la barre d'outils de l'appareil, cliquez sur le bouton de navigation (3 points verticaux) et sélectionnez Capturer Capture d'écran.
- Google Chrome prendra une capture d'écran parfaite et la déposera dans votre Télécharger dossier où vous pouvez le joindre et l'envoyer dans un e-mail. Assurez-vous de ne pas sélectionner de captures d'écran en taille réelle, car cela prendra toute la longueur de la page et ignorera votre limite de hauteur.
Raccourcis clavier de Google Chrome pour les captures d'écran
Si vous maîtrisez les raccourcis clavier, vous pouvez prendre une capture d'écran pleine page avec ces raccourcis. Je n'aime pas cette approche car je ne peux pas définir la hauteur maximale de la fenêtre d'affichage… mais c'est pratique si vous avez besoin d'une capture d'écran d'une page entière.
Raccourcis clavier (Mac)
1. Alt + Command + I
2. Command + Shift + P
Raccourcis clavier (Win / Linux)
1. Ctrl + Shift + I
2. Ctrl + Shift + P