À l’école de La WAB, nous n’avons de cesse de répéter à nos étudiants du cursus Designer Web qu’il faut lire, lire et encore lire. Manque de bol pour nous, ils n’aiment pas ça, lire.
Au sein de nos formations web pour les pros, on n’a de cesse de dire à nos stagiaires qu’il faut écrire, écrire et encore écrire. Que le contenu c’est im-por-tant ! Manque de bol pour nous, nous ne sommes pas fichu de leur montrer l’exemple dans notre blog…par pur manque de temps (et en prime, nous utilisons la même excuse qu’eux).
En ce 15 février nous allons donc faire d’une pierre TROIS coups :
- Mettre à profit notre veille pour nos étudiants
- Avoir un article récent à montrer à nos stagiaires de la formation professionnelle qui suivent nos modules “Apprendre à rédiger pour le web” ou bien encore “Apprendre les fondamentaux du référencement naturel”
- Rendre Marine Lasserre (alias @Redactographe) fière de nous (car c’est principalement elle qui donne les 2 modules de formations précédemment cités…)
Nous allons donc vous faire profiter de tous les sites de veille, les sites qui fournissent des ressources gratuites et les extensions de navigateur que nous utilisons régulièrement.
Par contre, à vos risques et périls … car après la lecture de cet article, vous n’aurez plus la moindre excuse pour ne plus “avoir d’inspiration”, “savoir comment optimiser le référencement naturel de votre site”, “tout connaître des performances de votre site” ou bien encore “savoir où récupérer des ressources graphiques gratuites”… Êtes vous vraiment prêt.e.s à dire adieu à toutes ces merveilleuses excuses ?!!
Acte 1 : Les extensions Google Chrome indispensables
Si je veux identifier les technologies, langages, CMS utilisés
Pour savoir avec quoi un site est fait ; quel CMS est utilisé, quels langages, ou même identifier comment le cache est optimisé ou si le tag Google Analytics est bien présent sur un site web… nous avons retenu 3 extensions Google Chrome tip top :
Wappalyser :
Extension de navigateur parfaite pour décortiquer un site web. Une fois installée, elle vous indiquera le CMS utilisé, les languages, la présence ou non du tag Google Analytics et l’outil utilisé pour optimiser le cache !
Lien d’installation : https://www.wappalyzer.com/
Web Developer :
Extension de navigateur très riche ! Elle permet de consulter la structure du HTML (pour identifier les balises H1, H2…etc), de constater si oui ou non des balises alt sont manquantes sur vos images et mille autres choses ! Petit hic… elle n’est pas des plus intuitives 🙂
Lien d’installation de l’extension sous Google Chrome : https://chrome.google.com/webstore/detail/web-developer/bfbameneiokkgbdmiekhjnmfkcnldhhm?hl=fr
Google PageSpeed Insight Score :
Si vous connaissez le site de Google (du même nom), c’est bien simple, l’extension Google Chrome vous propose la même chose. Mais en version plus light. Elle vous donne une note sur 100 pour la version desktop et la version mobile de votre site internet. Cette note ne concerne que les performances (rapidité du temps de chargement). Si jamais vous êtes frustré.e par cette note, vous pourrez toujours cliquer sur “need more” pour connaître les optimisations proposées par Google !
Lien d’installation : HTTPS://CHROME.GOOGLE.COM/WEBSTORE/DETAIL/GOOGLE-PAGESPEED-INSIGHTS/HFEBKOOAIDMEBOEBLKKEJDOEPILNNJHN
Si je veux améliorer le SEO de mon site web (ou jeter un oeil au travail des concurrents^^)
Si vos préoccupations se portent davantage sur l’optimisation du référencement naturel de votre site internet, d’autres petits bijoux sont disponibles sur Google Chrome. Alors, bien entendu, en faisant un petit Ctrl + U vous pouvez afficher le code source de la page et fouiller … mais franchement… qui voudrait faire un truc pareil !
Nous avons donc retenu 4 extensions !
Mangools SEO extension :
Si vous souhaitez connaître votre Alexa Rank, le nombre de backlinks (en détail), avoir un aperçu de vos métas title et description, analyser la densité de vos mots clés, jeter un oeil sur la structure de votre html (H1,H2…etc), Mangools SEO est l’application qu’il vous faut. Attention cependant, dans sa version gratuite, vous ne pouvait utiliser l’extension que quelques fois par jour.
Installer l’extension Mangools SEO : https://chrome.google.com/webstore/detail/seo-extension-metrics-bac/iodbnclobmalekpemjhncgfphojcgocd
Majestic backlinks analyser :
Si vous connaissez le site Majestic SEO, vous ne serez pas dépaysé avec leur extension ! Vous y retrouverez, le nombre de backlinks du site, son trust flow et son citation flow. Moultement pratique (oui, je sais, le mot moultement n’éxiste pas, mais c’est pas grave).
Installer l’extension Majestic backlinks analyser : https://chrome.google.com/webstore/detail/majestic-backlink-analyze/pnmjaflneibolacpepklokkjnakmikmg
Oncrawl :
Peut-être pas l’extension la plus complète, mais très chouette interface. Oncrawl permet en un clic d’avoir accès au title, la description, le H1, la présence ou non de Google analytics et le nombre de alt manquantes. C’est pas beau ça ?!!
Installer l’extension Oncrawl : https://chrome.google.com/webstore/detail/oncrawl-seo-page-audit/ngcfjikphejojdjnmiegbcjhemldbjhp
Check My Links :
Adieu liens cassés ! Grâce à cette extension vous pouvez crawler tous les liens de la page en cours de consultation. Check my links vous indiquera en détails le nombre de liens présents sur votre page, ceux pointant vers l’extérieur et ceux cassés. Plus la moindre excuse ! (je rappelle que j’avais dis plus haut d’être très vigilant.e avant d’entreprendre la lecture de cet article)
Installer l’extension check my links : HTTPS://CHROME.GOOGLE.COM/WEBSTORE/DETAIL/CHECK-MY-LINKS/OJKCDIPCGFAEKBEAELAAPAKGNJFLFGLF
Si je veux récupérer des informations d’ordre graphique et/ou échanger aisément avec un créa ou un webdesigner
Il y a des choses que l’on ne voit QUE dans les salles de classes. Vraiment. Par exemple :
- L’étudiant qui ouvre Paint pour faire un retour à son collègue de TP,
- Le stagiaire qui fait une capture d’écran puis l’ouvre sur photoshop et prend l’outil pipette pour identifier une couleur,
- Ou bien encore, celui ou celle qui se servira de son double écran pour afficher une typographie sur l’écran de gauche et faire défiler tout DAFONT sur l’écran de droite…
Alors nous allons tenter de gagner un peu de temps sur ce genre de manipulations. Qui sait…cela permettra peut être à nos élèves d’avoir du temps pour lire et à nos pros d’avoir du temps pour écrire. 🙂
Marker :
Marker existe pour que nous puissions vous mettre une petite tape derrière la tête si l’envie vous prenez d’utiliser Paint. Et rien que pour ça on ne peut qu’adorer cette extension. Cet outil va vous permettre soit se faire une capture d’écran sélective soit de capturer l’intégralité de la page (sur toute sa hauteur, que le scroll fasse mille kilomètres de long ou pas). Une fois cela fait, vous pourrez très facilement ajouter vos commentaires et dessins sur la capture et la partager d’à peu près mille façons à votre collègue, client ou partenaire !
Faire des jolies captures avec Marker : https://chrome.google.com/webstore/detail/markerio-visual-feedback/jofhoojcehdmaiibilpcoofpdbbddkkl
ColorZilla :
Vous installez ColorZilla. Lorsque c’est fait, vous avez une petite pipette qui apparaît dans votre barre de favori. Vous cliquez dessus. ET LÀ… vous récupérez le code RGB ou le code hexa de n’importe quelle couleur présente sur un site.
Identifier facilement une couleur sur un site ?! C’est par ici : http://www.colorzilla.com/
FontFace Ninja : Et bien, c’est aussi simple qu’avec ColorZilla. On installe, on clique sur le petit Ninja qui fait un saut de biche dans la barre de fav et MAGIE, l’extension nous délivre toutes les typographies employées sur la page en cours de consultation.
Devenir le roi de la typographie : https://fontface.ninja/
Acte 2 : Les sites de veille que l’on adore !
Alors la technique, c’est bien joli ! Mais qu’en est-il des idées, de la créativité, de l’inspiration … Difficile pour un web designer de toujours être dans la tendance. Difficile aussi de ne pas tomber dans la mode du moment. Un bon web design est simple (et croyez moi, la facilité de cette phrase n’est absolument pas représentative du travail que cela demande).
Il existe une myriade de sites internet qui parlent de comment bien faire un site internet, bien le concevoir, optimiser son SEO, suivre les statistiques … mais cela ne nourrit pas les yeux. Appréhender une interface web n’est pas qu’affaire de technique, on se doit de soigner le design ET l’expérience utilisateur.
Voici quelques sites qui pourront donc nourrir vos yeux :
Fubiz :
D’après notre apprenti <3 Thomas <3, Fubiz c’est “une référence mondiale en termes de création digitale.” Enfin…c’est pas lui qui le dit, c’est le magazine Forbes. Pour Thomas, Fubiz c’est aussi, “un dénicheur et un amplificateur de talents créatifs qui développe des sous-médias importants tels que Fubiz-photo, Fubiz-travel, Fubiz-society, Fubiz-music et Fubiz-movies.” Quand je lui ai demandé de me dire ce qu’il retenait de ce site, Thomas m’a écrit “les créations graphiques, sont organisées en plusieurs catégories ; Inspiration, design, Motion, Graphic, Photography.”… Il ne serait pas un peu maniaque notre apprenti ?!
Visiter Fubiz ?! Par là : http://www.fubiz.net/
FishEye Magazine :
Fisheye est un magazine bimestriel consacré à l’actualité mondiale de la photographie sur le plan économique, esthétique, culturel, technique et sociologique. C’est un magazine qui ne s’adresse pas seulement aux photographes mais aux passionnés d’images, qu’ils aient entre les mains, un Canon 5D, un iPhone, un Huawei Mate P20 Pro ou un Samsung (je pourrais faire une très longue liste de téléphones mais ça serait un peu nul à lire. J’ai donc décidé de ne vexer ni les pro mac, ni les pro androïd, ni même les pro reflex. VOILÀ).
Le site du magazine : https://www.fisheyemagazine.fr/ et si vous ne voulez pas payer du papier, vous pouvez toujours les suivre sur Facebook et Instagram !
PS : dans le même genre, c’est à dire avec une forte dimension images et photographies, nous vous invitons également à découvrir les sites Polka et Art’press.
Instagram :
Je n’en dirais pas plus ! Vous créez un compte, suivez des gens, des hashtags et c’est parti !
(Vous remarquerez que le “nous implique du sérieux et de la rigueur”, alors que le “je” à tendance à supposer des blagues un peu nulles. C’est mon p’tit côté corporate qui veut ça ! Je ne suis pas prête à faire assumer mon humour moisi à la boîte.)
Behance :
D’après Thomas, Behance c’est “un service en ligne qui permet de se créer un portfolio personnel ou d’entreprise dans une communauté créative. C’est une forme de réseau social permettant de voir et publier ses créations graphiques tout en consultant celles des autres. C’est un des fers de lance de l’inspiration graphique, alimenté par des professionnels évoluants dans les plus grandes agences artistiques.”
Visiblement, ici, tout est dit ! Nous vous laissons donc le soin de vous créer un compte !
Se créer un compte immédiatement sur Behance : https://www.behance.net/
Le blog du webdesign :
Si vous souhaitez trouver des ressources PSD (photoshop) et identifier les tendances web du moment c’est le site de veille qui va vous plaire ! Le blog du webdesign propose des sources d’inspiration, mais aussi des tutoriels et toutes les dernières actualités autour du webdesign.
Visiter cette pépite : https://www.blogduwebdesign.com/
Webdesign Trend :
Destiné aux créatifs, professionnels et passionnés du webdesign, vous y trouverez des articles sur les dernières tendances en web design, des présentations de sites inspirants, des outils, des tips sur les bonnes pratiques web ainsi que les plus gros coups de coeurs de l’auteur.
Manger des contenus intéressants : http://www.webdesignertrends.com/
Et le petit dernier, Art Spire :
Toujours d’après notre cher apprenti Thomas, Art Spire c’est “un site web d’inspiration graphique présentant les travaux d’artistes internationaux. Sans cesse à la recherche de nouveaux talents ce site promeut leurs créations. Spire peut signifier la pointe ou se lire comme une contraction de « inspire ». Les créations graphiques y sont organisées sous forme de catégories (Illustration, Graphics designs, 3D, videos). » VOILÀ !
Se balader sur Art-Spire : http://www.art-spire.com/
Acte 3 : ressources gratuites et autres outils sympas pour le graphisme, l’intégration ou le développement.
Maintenant que, vous savez ce que vous pouvez optimiser sur votre site, que vous savez ce que font et utilise vos concurrents et que vous avez une bonne idée d’où aller dépenser votre temps, nous allons vous donner de quoi créer, produire et tester vos interfaces. C’est parti !
Et vous allez voir que la fin de cet article sera bien plus lapidaire car c’est essentiellement Thomas qui en est l’auteur, et Thomas, il déconne pas ! Pour lui, le chemin le plus court, c’est tout droit. Accrochez vous ! On envoie la liste !!!
Google Font : ressource exhaustive de typographies web open source, qui peuvent s’utiliser sur n’importe quel site web. Attention cependant, la comptabilité peut-être imparfaite sur d’autres navigateurs (par autre, nous entendons, différent de Google Chrome). Sans oublier que les typographies sont hébergées par Google, cela nécessite donc l’utilisation de Javascript.
Se rendre sur Google Font : https://fonts.google.com/
Ionicons :
Ionicons est une librairie de pictogrammes vectoriels et gratuits en ligne qui offre un très grand choix d’icônes dans de nombreux domaines d’activités. Inconvénient, maîtriser un peu l’anglais pour effectuer des recherches pertinentes. En plus, les icônes ne peuvent pas être téléchargées dans une couleur ou une taille différente que celles présentées sur le site. Cela implique donc l’utilisation du CSS suite au téléchargement.
Télécharger des icônes gratuitement en mode flatdesign : https://ionicons.com
UiGradient :
Générateur et créateur de dégradés, permettant de les enregistrer sous forme d’images. Avec UiFradient il est possible de récupérer le dégradé sous forme d’image jpg, ou d’un code CSS. ET … Si on ne trouve pas chaussure à son pied, il reste possible de créer son propre dégradé en entrant les codes hexa des couleurs choisies.
Générer un joli dégradé : https://uigradients.com/
Leaflet :
Bibliothèque Javascript open source adaptée pour mobile permettant l’intégration de cartes interactives. Axée sur la simplicité, la performance et la facilité d’emploi. Leaflet propose de nombreux plugs-in additionnels pour personnaliser ses cartes (ajout de marqueurs, de polygones, et d’éléments interactifs cartographiques)
Mettre une carte intéractive sur mon site qui ne soit pas une Google Maps : https://leafletjs.com/
iloveIMG :
Éditeur de photos et d’images en ligne, iLoveIMG permet de compresser, redimensionner, recadrer, faire pivoter, éditer ou bien encore de convertir une image.
Gratuit et simple d’utilisation, les images sont traitées de manière sécurisée (données cryptées). Attention cependant, la version gratuite est limitée, il faut créer un compte utilisateur pour augmenter son plafond de modifications autorisées.
Pour retravailler vos images facilement et gratuitement c’est par là : https://www.iloveimg.com/fr
JsFiddle :
JSFiddle est un outil communautaire accessible en ligne permettant de tester et de mettre en valeur des extraits de code HTML , CSS et JavaScript. En tant qu’utilisateur, on créé des «fiddles» et l’on ouvre cela aux remarques et commentaires des autres développeurs. JS Fiddle permet des appels AJAX simulés et donc de tester directement ses extraits de codes et de créer différentes versions d’un même code. Il est également possible d’y intégrer les bibliothèques JS les plus connues, ainsi que des fichiers CSS ou encore JS externes. Si l’on possède un compte utilisateur, on peut même y enregistrer son travail.
Créer mon premier “fiddle” : https://jsfiddle.net/
ET VOILÀ ! C’est terminé pour aujourd’hui cher.e.s lecteurs et lectrices.
En théorie, si vous êtes arrivé.e.s en une seule fois à bout de cet article c’est que vous êtes un.e passionné.e OU que vous êtes un.e de nos apprenant.e.s qui s’est enfin décidé.e à lire ET LÀ, si c’est le cas, je crois bien que je vais pleurer !
En espérant que tout ça vous sera utile et vous permettra de gagner du temps.
À très bientôt !
Marine (avec la très jolie contribution de Thomas).
Ajouts suite aux lectures de nos formateurs et formatrices :
- www.textfocus.net/ et www.rimessolides.com pour travailler sur son SEO, analyser ses mots clés, trouver des synonymes et des nouvelles idées de contenu
- l’extension Google Chrome nommée « 30 Seconds of Knowledge » qui permet aux développeurs de s’améliorer sur le langage de leur choix.. Un article très intéressant a d’ailleurs été rédigé par Le Blog du Modérateur sur le sujet 🙂