logo

Webdesign

Accueil Webdesign

Webdesign

2 Générateurs de favicons

Pour avoir fait à la « main » les favicons et les Icones Apple Touch, nous pouvons vous dire que c’est long … très long mais voici que ces deux générateurs arrivent pour vous faire gagner beaucoup de temps. En deux clics et quelques secondes et c’est fait … Faire plus simple aurait été difficile !

Le premier ne nécessite qu’un clic, un simple glisser/coller et un clic, celui du téléchargement de votre fichier zippé : Imogen. Il vous suffit de copier coller le code à insérer dans votre header (en vérifiant bien l’adresse des images, une fois que vous les aurez dézippé dans votre dossier).

Le deuxième : Iconifier, est aussi facile (un clic de plus cependant, pour importer votre image !).

générateur de favicon imogen

Kraken.io image lighter

S’il y a un point indispensable, pour l’instant, sur le web c’est bien d’alléger le poids de son site. Vous pouvez déjà commencer (ou continuer) par les images. Souvent trop lourdes et mal dimensionnées, elles ralentissent le temps d’affichage de votre site et ça ce n’est pas très bon ! Les moteurs de recherche peuvent vous pénaliser pour cela. Sans compter que vos visiteurs n’ont pas toujours la patience d’attendre que le site s’affiche.

Kraken est l’outil online idéal, même dans sa version gratuite qui ne permet que l’optimisation du poids de vos images. Et il aussi efficace que rapide ! Un simple glisser/coller d’un groupe d’images sur le site suffit. A savoir qu’en plus il agit sur le poids des SVG.

kraken

Un test de qualité a été fait autour de notre logo et il s’avère très concluant : 92.89 Kb sauver soit 82.42 % de gain et nous ne percevons pas de perte.comparer deux images

kraken1

La version pro de Kraken offre aussi la possibilité de redimensionner les images.

 

 

 

Tester l’accessibilité de votre site

test Accessibilité

test Accessibilité

L’accessibilité c’est rendre visible et audible un site internet à ceux qui n’ont pas les mêmes moyens physiques (mal-voyants, daltoniens, mal-entendants…) ou même à ceux qui n’ont pas les mêmes moyens matériels (vieil ordinateur, vieux navigateur, connexion très lente …). Chaque visiteur est un prospect ; rendre accessible son site favorise un meilleur taux de transformation.

En y regardant bien, de nombreux sites ne sont pas fait pour ce type de visiteurs. En effet, bien souvent, lorsqu’un site est mis en ligne, il est conçu selon ce que voit leurs concepteurs ; avec leur écran, leurs navigateurs, leur connexion… Un site n’est pas perçu de la même façons d’un individu à un autre.

Aussi, il existe des « normes » d’accessibilité. Tanaguru, met à votre disposition un outil de test pour mieux mettre en évidence les points faibles d’accessibilité. Gratuit pour 5 tests par jour.

Alternative à Google font

font adobe

font adobe

Pas toujours facile de chercher et de trouver une police sur Google font, il faut le reconnaitre. Adobe font pourrait être une alternative intéressante, d’abord parce qu’il y a du choix (A ce jour il y a déjà plus de 500 polices gratuites et disponibles sur le site) et aussi parce que l’interface facilite de beaucoup la recherche.

Il ne nous reste qu’à vérifier le temps de chargement de la police sur un site et voir si cela ne le ralenti pas trop, le problème est exactement le même avec les polices proposées par Google.

Générateurs en séries


C’est toujours pratique les générateurs de code CSS, nous en avons déjà maintes fois parlé. Nous ne nous lassons pas !

Css Matic, propose plus qu’un simple générateur de dégradé (comme ici) . Des dégradés verticaux ou horizontaux, radients ou linéaire, ou en diagonales et cela avec autant de couleurs que votre navigateur et votre bon goût pourront supporter. Ajoutez à ça (sur le même site) un générateur de radius, de box shadow et … également un générateur de texture. Sans compter qu’il génère aussi pas mal de gain de temps.

Generateur de rubans CSS

Pour beaucoup, nous pourrions nous demander l’intérêt d’un tel outil… C’est vrai. Pourtant, il nous arrive parfois d’avoir besoin de créer ce type de forme pour la création d’un thème. Ribon Builder de Live Tool propose de vous aider dans la conception d’un ruban en pure CSS (Pas d’image, juste du code), plus léger et surtout bien plus rapide à faire.

Un problème cependant, l’intégration dans une feuille de style CSS responsive. C’est un peu plus difficile !

Le même site propose d’autres outils, tout aussi efficaces.

Optimiser ses images

Smush it : un utilitaire onlinel indispensable pour l’été… La perte de poids étant d’actualité ! Dans ce cas, il s’agit surtout d’alléger vos images avant de le poster sur le web. Cela sans perte de qualité.

Smush it, est un outil Yahoo developper network.

Beautifier Css et html

Pour les amoureux de l’ordre et de la clarté : quelques outils qui devraient vous faire gagner du temps. Des outils capable de mettre de l’ordre dans les arborescences de vos fichiers html, php ou CSS.

Pour les fichier Css : PROCSSOR (propose plusieurs paramétrage)

 

ou FreeFormatter pour le HTML (chosissez l’option Tab Delimited, qui allège votre fichier)

Merci à Maxime pour les liens.

Dummies images pour wordpress

Un outil bien pratique pour tout concepteur de page web. Certes ce n’est pas nouveau, mais c’est toujours bien de l’avoir sous la main ou de se souvenir que cela existe.

Lorem Pixel est de loin le meilleur. De plus il est d’une facilité d’utilisation désarmante et il offre plusieurs choix de thème et « évidemment » toutes les possibilités de tailles.

Utilisation :

http://lorempixel.com/400/200/business/Dummy-Text/
Adresse/largeur/hauteur/thème/avec du texte sur l’image/

Vous pouvez faire varier les thèmes, la largeur et la hauteur. A vous de choisir ce que vous voulez.

Javascript minify

minify javascript

minify javascriptNous savons tous, maintenant, qu’une page légère est un avantage pour un bon positionnement sur google. Commençons par alléger un peu les javascripts, suivront les images et les css. Peu de chose à dire en réalité sur cet outil, si ce n’est, et c’est déjà pas mal, qu’il fait très bien et très intelligemment ce qu’on lui demande. C’est-à-dire, réécrire les fichiers javascript en les réduisant considérablement. Pour en avoir essayé plus d’un, je suis cette fois ravi du résultat puisqu’une fois réduit les animations jquery s’affichent toujours aussi correctement mais aussi plus vite.

Testeurs de formats mobiles

C’est la fin de l’ordinateur de bureau dans la chambre ou dans un coin du salon… L’internaute a déjà muté en mobinaute. Nouveaux outils, nouveaux formats et nouvelles manières. Ces nouvelles pratiques offrent une multitude de possibilités marketing pour les entreprises. Encore faut-il adapter sa communication digitale aux nouveaux formats.

Le concepteur de site internet doit pouvoir tester sa production sur tous les formats proposé pour permettre à tous les formats d’écran de lire correctement les sites internet… mais il y en a beaucoup ! trop ! heureusement il existe sur le net quelques outils qui permettent de faire des tests sans se ruiner à acheter 20 tablettes et 50 smartphones.


QuirkTools : très complet et très ergonomique

 


Cowemo : sussi complet que le précédent, il semble toute même plus efficace mais cependant moins facile d’utilisation.

Générateurs de boutons

genarateur de boutonsExcusez cette mauvaise blague (voir image) : en écrivant le titre je n’ai pu m’empêcher de penser à Biactol … Cela dit ce qui suit n’a rien à voir avec des problèmes de peau.

Il s’agit de trois outils très pratiques qui permettent de gagner du temps et de faire des beaux boutons CSS sans images … rien que du code ! dégradés, arrondis, effet de profondeur, ombres … et plus encore.

CSS button generator, Button Maker et CSS3buttongenerator … J’aime bien les trois !

Skeleton

Pour les webdesigners perfectionnistes il y avait Grid960, qui permet de tracer droit son site. L’arrivée en masse des smartphones nous oblige maintenant à proposer à nos clients des thèmes « mobile friendly » … et cela sans oublier les tablettes.  Alors que nous avions commencé à nous y habituer Grid960 était devenu obsolète. Il fallait rapidement le remplacer.

Après un tour d’horizon sur ce que nous pouvions trouver en terme de « grid responsive » avec des medias queries donc. Nous avons choisi de travailler avec Skeleton qui pour plusieurs raisons nous a séduit.

Les webdesigners comprendrons et l’adopterons, si ce n’est pas déjà fait.

Generateur de Gradient CSS

CSS3 Gradient Generator

Encore un petit outil bien pratique pour les designer web. Un générateur de code CSS pour réaliser des effets radiants sur les boutons ou sur n’importe quel objet de votre CSS.

Ultimate CSS Gradient Generator : Très efficace et complet. Il nous vient de Colorzilla et permet l’ajout de plusieurs couleurs. Il fonctionne sur tout les navigateurs. Produit de grosses lignes de code cependant.

 

 

CSS3 Gradient GeneratorCSS3 Gradient Generator : Très efficace également et quand même plus simple (moins complet quand même) que le précédent.

 

(suite…)

Convert HTML to PDF

Convert HTML to PDF vous permet, comme son nom l’indique de convertir une page html au format pdf. C’est vrai que le besoin n’est pas quotidien… Mais il suffit souvent d’une fois pour que ce genre d’outil vous facilite un peu la vie ! Autre outil utile présent sur le site : un éditeur wisywig.

Pdf converter est un autre outil dans le même genre, la qualité de l’image pdf est un peu plus mauvaise que le précédent, mais il permets d’autres possibilités de conversion, word (dans les deux sens), excel, image, url …

3 Générateurs de nuage de tags

Nous ne reviendrons pas sur l’intérêt ou non d’un nuage de tag sur votre site. Cependant nous nous attarderons un peu sur son esthétique. Car, avouons le, la plupart du temps le nuage de tag est moche ! S’il est acceptable sur un blog, il l’est moins sur un site d’entreprise, parce qu’il prend de la place est n’est pas forcément cohérent en terme marketing. Personnelement, je m’en passe très bien ! d’autant qu’il ne garanti absolument rien en terme de référencement ! Cela dit, il y est des fois, où il est peut être utile de le mettre… quand on vous le demande ! Dans ce cas :

(suite…)

Générateur de « loader »

loaderUn outil pour faire des « loader », vous savez ces petit gif qui tourne pour vous indiquer que votre page est en train de se charger. Si vous avez eu un jour l’occasion de le faire vous même, vous devez savoir combien c’est fastidieux. Heureusement il existe des générateurs très efficaces et complètement paramétrables.

loadinfo.net

5 outils pour construire son site

grid 960 Grid 960, c’est l’outil indispensable pour se simplifier la vie et avoir une feuille de style irréprochable de clarté et d’alignement. Un peu difficile à prendre en main (quoique !) mais une fois que c’est fait vous ne pourrez plus vous en passer.

templatrEn quelque clic, faites votre thème WordPress. A la sortie, il ne vous reste qu’à placer celui-ci dans votre FTP et l’activer sur WordPress. Le résultat est un peu basique, mais très efficace.

sandboxComplémentaire avec les précédents,  Sandbox est un outil simple qui vous permettra de construire rapidement les éléments de votre feuille de style en wysiwyg.

izzymenu IzzyMenu, pour des menus simples et esthétiques.

phpformPhpForm, pour construire la base de vos formulaires. L’outil ne fournit que la partie visuelle du formulaire et en aucun cas la partie php.