Les extensions navigateur qui vous changent la vie !

Toute l’équipe de Digi­tal Ping Pong a compilé pour vous les exten­sions navi­ga­teur qui nous sont indis­pen­sables et qui nous changent la vie au quoti­dien dans notre métier.

Les exten­sions sont des petits logi­ciels qui vont ajou­ter des fonc­tion­na­li­tés à votre navi­ga­teur. Il en existe un très grand nombre. Certaines sont plutôt ludiques, d’autres produc­tives. Voici une liste des exten­sions les plus utiles pour notre métier UI/UX !

Ligh­thouse : le diagnos­tic

Cette exten­sion porte merveilleu­se­ment bien son nom : à l’image d’un phare éclai­rant les zones dange­reuse aux abords des côtes, Ligh­thouse met en lumière les points faibles d’un site web pour en opti­mi­ser les perfor­mances.

Une série de test est réali­sée par l’ap­pli­ca­tion, puis un rapport est resti­tué autour de 5 caté­go­ries :

• Perfor­mance
• Acces­si­bi­lité
• Bonnes pratiques
• SEO
• Progres­sive Web App.

Une note asso­ciée à une couleur est attri­bué à chacun de ces critères, ce qui permet en un coup d’oeil de repé­rer les axes d’amé­lio­ra­tion. Cet outil donne en plus des recom­man­da­tions sur des points précis. Une exten­sion qui s’avère très utile en avant-projet.

https://deve­lo­pers.google.com/web/tools/ligh­thouse

Wappa­ly­ser : quésaco cette techno ?

Vous souhai­tez connaître quelles tech­no­lo­gies sont utili­sées sur un site ? Wappa­ly­zer est l’ou­til idéal : en un clic, il génère la liste des diffé­rentes appli­ca­tions utili­sées derrière n’im­porte quel site web.

Des données telles que les API, les librai­ries javas­cript, les réseaux publi­ci­taires, les outils d’ana­lyse ou encore les plate­formes e-commerces sont dévoi­lées. Cette appli­ca­tion est très pratique sur les phases de bench­mark, par exemple.

wappa­ly­zer.com/down­load

Muzli ou Panda : pour la veille on a le choix

Ces deux exten­sions sont idéales pour alimen­ter votre veille. Si vous voulez décou­vrir les derniers sites, photo­gra­phies, illus­tra­tions et bien d’autres inspi­ra­tions, tout cela regroupé en une seule inter­face, n’hé­si­tez pas à en choi­sir une des deux.

Elles fonc­tionnent comme des agré­ga­teurs de contenu : vous pouvez sélec­tion­ner faci­le­ment vos ressources favo­rites parmi de nombreuses propo­sées. De quoi vous inspi­rer de conte­nus créa­tifs quoti­dien­ne­ment et vous débar­ras­ser enfin de votre RSS reader.

muz.li – usepanda.com

Color­zilla : le cham­pion des codes hexa­de­ci­mal

Color­zilla ajoute une pipette de couleur à votre navi­ga­teur. Vous pouvez obte­nir le code hexa­dé­ci­mal de n’im­porte quelle couleur présente sur un site avec votre curseur et l’en­re­gis­trer ensuite dans une palette. Un petit outil à mettre entre toutes les mains des UI desi­gners.

color­zilla.com

What font : allo la police ?

Vous navi­guez de site en site et une font vous fait de l’oeil ? What­font vous dévoi­lera son iden­tité en un éclair. Cette exten­sion s’uti­lise tout simple­ment en survo­lant un texte : elle renseigne le nom de la police utili­sée mais aussi ses autres carac­té­ris­tiques typo­gra­phiques (taille, graisse, inter­li­gnage et couleur). De quoi faire de nouvelles trou­vailles et complé­ter votre top 10(0) de fonts favo­rites, mais aussi vous faci­li­ter la phase de recette !

CSS Peeper : l’ir­rem­plaçable

CSS Peeper est un superbe outil d’ins­pec­tion CSS. Plus besoin d’ou­vrir votre inspec­teur et trifouiller dans le code source du navi­ga­teur pour connaître la taille d’un bouton. En un clic vous pouvez passer à la loupe les éléments de votre page web et tout ça bien orga­nisé !

Trois modes de vue sont possibles :

• La première vue est géné­rale, elle affiche l’en­semble des proprié­tés CSS d’un élément survolé : nom de balise, taille, typo, couleurs.
• La deuxième vue, Color, liste toutes les couleurs présentes sur le site, un bouton permet de copier la couleur choi­sie.
• La dernière vue regroupe les visuels (icon, photos) télé­char­geables faci­le­ment.

Cet outil est à la fois très simple d’uti­li­sa­tion et très complet, il nous est devenu IN-DIS-PEN-SABLE !

csspee­per.com

Respon­sive Viewer : tous les devices en un seul écran

Respon­sive Viewer vous permet d’af­fi­cher en simul­tané plusieurs réso­lu­tions d’écran d’un même site. Certaines tailles stan­dard sont déjà prédé­fi­nies mais si l’on veut une taille parti­cu­lière on peut très bien en créer une nouvelle ! Les fonc­tion­na­li­tés de synchro­ni­sa­tion de scroll et clic sont hyper inté­res­santes pour compa­rer les pages sous diffé­rentes réso­lu­tions. On peut aussi recher­cher des éléments précis dans une page grâce à la fonc­tion­na­lité de recherche.

Vous trou­vez déjà tout ça très chouette non ? Ce n’est pas tout ! Cette exten­sion donne en plus la possi­bi­lité de géné­rer une capture d’écran en un clic. On peut captu­rer seule­ment la partie visible de la réso­lu­tion d’écran ou la page entière, pour n’im­porte quelle taille, desk­top, tablette ou mobile. Très pratique pour complé­ter vos bench­mark.

Cette petite liste d’ex­ten­sion repré­sente une infime partie de ce qu’il existe en réalité, il y a une exten­sion pour à peu près tout. Toute­fois évitez d’en ajou­ter une trop grande quan­tité, elles risquent d’im­pac­ter les perfor­mances de votre ordi­na­teur. Instal­lez les exten­sions les plus utiles, celles qui apportent une valeur ajou­tée et vous rendent plus effi­cace au quoti­dien !