INFOS & ACTUALITÉS

Projets en cours, réalisations à découvrir, actualités webdesign ou mes petites news... Bienvenue sur le blog

::selection, la propriété css qui fait la diff
15
Sept
2021

La qualité réside souvent dans les détails, en webdesign la propriété CSS de selection en est un bon exemple (parmi d'autres évidemment)

Je ne sais pas si vous faîtes ça aussi, mais il m'arrive régulièrement de sélectionner des mots ou phrases sur les sites internet lorsque je navigue. Cela me permet de surligner un mot sur une page et de pouvoir y revenir si j'ai tourné la tête 30 secondes ou bien de faire des copier-coller de mots ou de phrases...

... et parfois je sélectionne des trucs au hasard pendant que je bug ou que je suis au téléphone, BREF.

Un jour j'ai découvert avec surkiffance que la phrase que je venais de sélectionner était dans une autre couleur que ce bleu habituel que l'on retrouve tout le temps sous windows !

En effet, j'ai été ravie de découvrir que l'on pouvait, lorsque l'on créé un site internet, définir cette fameuse couleur - ou même appliquer d'autres styles sur le texte - , grâce à la propriété :

::selection

Je vous invite à sélectionner du texte sur mon site - et ça marche aussi sur mobile -  pour voir en effet la couleur que j'ai choisie afin de garder une cohérence dans le design.

On est d'accord, c'est du détail, mais c'est chouette, non ?

-------------------

Et si vous êtes en train de créer un site et que vous voulez appliquer cet effet, je vous donne ci-dessous le code qui vous rendra heureux ;)

Pour l'utiliser, très simple, dans votre fichier css, vous pouvez utiliser  ceci :

::selection {
/* par exemple */
  background#0b818b;
  color#FFF;
}

Qui aura pour effet de déterminer ce qu'il se passera si l'on sélectionne du texte sur votre site.

Evidemment, à adapter avec des sélecteurs, si vous souhaitez des effets différents selon les sections du site :

.footer::selection {
  background#0b818b;
  color#FFF;
}

Il vous faudra éventuellement ajouter le préfixe -moz- pour une meilleure compatibilité sur les navigateurs :

::-moz-selection {
  background#0b818b;
  color#FFF;
}
.footer ::-moz-selection
{
  background#fff;
  color#0b818b;
}

 

Publié le 2021-09-15
Dans Blog > Webdesign
Get the picture ? L'importance des photos (pro) pour votre site
15
Mar
2021

A l'ère de la communication digitale, le choix de vos photos est très important pour créer ou agrémenter votre image.

C'est une partie à ne pas négliger si vous voulez que votre site et l'image générale de votre activité soit attirante, moderne et de qualité.

C'est parfois un élément auquel vous n'avez pas pensé, mais votre webdesigner va avoir besoin de matière ! Autant que les textes, les images qui vont venir illustrer votre site sont d'une importance capitale. Et on ne se contentera pas de "j'ai quelques photos sur mon portable, je vous les fais passer" ! Non, il faut une vraie qualité d'image pour que celle-ci soit efficace et des photos de trop mauvaise qualité - pas seulement en termes de définition/résolution, mais de qualité visuelle - peuvent même totalement vous desservir !

Dans l'absolu, lorsque vous souhaitez créer votre site web, c'est bien de prévoir une partie du budget ou de votre temps pour la partie photos.

Vos solutions ?

Par ordre de meilleur choix...

  • Faîtes venir un photographe !

Le photographe saura mettre en valeur vos produits, vos services, le lieu ou les lieux que vous présentez, ou encore votre équipe ou vous-même. A condition de bien choisir le prestataire (beaucoup sont même spécialisés dans un domaine), non seulement vous devriez avoir des photos de qualité, mais aussi personnalisées, ce qui n'est pas le cas des 2 solutions suivantes.

  • Les photos libres de droits achetées :

Je propose toujours dans mes formules de création de site l'achat d'un lot de photos pro. En général je les achète sur Adobe Stock, on trouve vraiment un très large choix et souvent on trouve les photos totalement adaptées à ce qu'on imaginait pour notre site.

C'est un très bon choix, souvent plus économique que la 1ère solution, mais l'inconvénient c'est que c'est moins personnalisé. Souvent les gens disent que "ça se voit que c'est une photo achetée". Mais pour certains sites, en fonction de votre activité ou de ce que vous présentez, ça passe !

  • Les photos libres de droits gratuites :

Dans le même principe que la solution des photos achetées, il est possible de trouver aussi des photos libres de droits ET gratuites ! Toutefois vous devrez mettre une petite note avec auteur et lien du site de téléchargement. En général je mets cette note dans les mentions légales du site, sous la photo ou en bas de l'article illustré ;)

L'inconvénient ici, c'est que le temps de recherche va être beaucoup plus long pour trouver LA photo que vous voulez et surtout, ça ne sera pas toujours la photo que vous vouliez exactement, mais une alternative, gratuite au plus proche de ce que vous auriez aimé.

  • Essayer de réaliser vos photos :

Si vraiment le budget ne le permet pas et que vous ne trouvez pas votre bonheur dans les autres solutions, alors vous pouvez réaliser vos propres photos, mais essayez de vous renseigner et de vous inspirer de ce qui se fait, et plus précisément de regarder et de vous inspirer de sites concurrents dans votre secteur d'activité. Essayez d'obtenir le rendu le plus pro possible, soyez exigeant et perfectionniste !

  • Pas de photos ?

Oui, pourquoi pas. Selon votre secteur d'activité, le type de projet, le public cible et autres paramètres, cela peut s'envisager. Mais dans la plupart des cas il faudra quand même prévoir des graphismes, dessins ou illustrations.

  • A ne pas faire !

Par contre, n'oubliez pas qu'il est interdit, pour votre site professionnel, de "prendre une photo" sur google, pinterest ou autre, si elle ne comporte pas la mention explicite qu'elle est libre de droits ou d'utilisation ! Et si elle est libre d'utilisation et soumise à certaines conditions, vous devrez respecter ces conditions.

En résumé, il faut se mettre à la place du visiteur et potentiel client de votre site, il faut montrer votre sérieux, votre professionnalisme, il faut aussi être rassurant sur la qualité de vos services ou produits. Un site qui laisse paraitre un trop grand manque de qualité ou de budget, risque de générer l'effet inverse de ce que vous souhaitez...

Soyons honnêtes, nous sommes tous très critiques quand nous navigons sur un site ! S'il a le malheur d'être mal conçu, qu'il est trop lent à charger, qu'il n'est pas très joli ou qu'il n'a pas l'air très pro ou que les photos sont de mauvais goût ou de mauvaise qualité, on va le critiquer, on va même sûrement quitter le site rapidement, en gardant une mauvaise image de l'entreprise qui le propose.

Pour ma part, les photos sont un élément central de la prestation, c'est un vrai bonheur de travailler à mettre en valeur de belles photos (et les belles photos mettent en valeur réciproquement le design du site) et c'est terriblement difficile de travailler avec des mauvaises photos !

Save a webdesigner, make good photos !

Cet article est illustré avec une image par Pexels de Pixabay

Publié le 2021-03-15
Dans Blog > Webdesign
Et si on faisait votre application mobile ?
04
Mar
2021

NOUVEAU ! Je propose désormais la réalisation d'applications mobile !

Suite à une commande pour la création d'une appli à découvrir très prochainement, je propose désormais la réalisation d'applications mobile.

En Progressive Web App (PWA) ou en natif pour Android ou iOS, n'hésitez pas à me contacter pour parler de votre projet !

Nous étudierons ensemble la faisabilité, vos objectifs, les fonctionnalités attendues, votre public cible...

Une petite description du nouveau service est disponible sur la page Développement de mon site et, bien sûr, pour toutes informations complémentaires ou toutes demandes, je reste disponible sur le chat en bas de page, par téléphone ou par mail, ou encore sur ma page Contact

Publié le 2021-03-04
Dans Blog > Webdesign
Le saviez-vous ? Découvrez les propriétés Open Graph
08
Jan
2021

Sens du détail mais aussi utiles pour votre référencement et votre communication web.

Parmi les petites choses quasi invisibles qui se cachent derrière votre site web, il y a (notamment) les données Open Graph.

Qu'est-ce que c'est ?

Lorsque vous publiez le lien de votre site sur facebook, cela vous propose un encart avec une image de votre site, le nom du site, une courte description...  On pourrait aisément croire que ceci est fait automatiquement par Facebook : mais non !

En réalité ceci est maitrisé par votre développeur et, sur votre site, sachez que rien n'est laissé au hasard !

Pour être honnête, oui facebook peut aller chercher les infos par lui-même si jamais les balises n'ont pas été écrites dans le code de votre site. Il trouvera l'image la plus accessible sur la page partagée afin de l'illustrer et prendra le titre et description indiqués dans les "meta tags" qui servent aussi pour l'affichage de votre site sur les moteurs de recherche.

Mais pour ma part, je dois avouer que c'est un petit plaisir de mettre ceci en place joliement, de choisir l'image et le texte pour partager votre site. En général je le fais dans les finitions, juste avant la mise en ligne, ce sont les Propriétés Open Graph.

De plus, pour le référencement il est souhaitable que chaque page de votre site ait des meta tags et des propriétés Open Graph uniques (et cohérentes et pertinentes, cela va sans dire !). Ainsi, chaque page de votre site pourra être partagée avec une image, un titre et une description adaptée, en rapport avec le lien que vous partagez.

Ces propriétés sont définies dans quelques lignes de codes que l'on va répéter "en dur" ou rendre dynamiques pour qu'elles reprennent automatiquement certains contenus des pages de votre site.

Pour pré-visualiser le rendu, j'utilise l'outil facebook debug tool qui me permet de tester, débugger, voir si tout fonctionne bien et si le rendu est comme souhaité.

Cela relève un peu du sens du détail mais c'est aussi un vrai plus pour votre référencement et votre communication sur le web et sur les réseaux sociaux.

Maintenant vous savez ! La prochaine fois que vous partagerez un lien sur facebook, pensez à votre développeur qui a pensé à tout !

Publié le 2021-01-08
Dans Blog > Webdesign
clarisse-b.net © 2021 - mentions légales