8 façons simples d'améliorer la typographie dans vos designs Par Antonio Carusone Cet article a été écrit pour publication dans Smashing Magazine le 3 avril 2009. Je le reproduis ici pour vous être agréable. Beaucoup de gens, y compris les designers, pensent que la typographie consiste à choisir une police, sa taille et si elle doit être grasse ou pas. Ces détails donnent au designer le contrôle total, leur permettant d'apporter une typographie belle et cohérente à leurs designs. Voici donc 8 façons simples d'améliorer la typographie, et donc l'ergonomie, de vos designs. Justification La justification est la longueur d'une ligne de texte. Une manière simple pour calculer la justification est d'utiliser la méthode de Robert Bringhurst, qui multiplie la taille de la police par 30. Interlignage L'interlignage est l'espace entre les lignes du corps de texte qui joue un rôle important dans sa lisibilité. Plusieurs facteurs impactent l'interlignage : police, taille, graisse, casse, justification, intermot de la fonte, etc. Ponctuation flottante Emphase
C'est pas en 72 coco La balise <hr> (ou <hr /> en XHTML), qui signifie horizontal rule, est une règle horizontale servant de séparation, pouvant marquer un changement notable dans le contenu. L'une de ses utilisations courantes est de marquer la fin de blocs flottants grâce à la propriété clear qui lui permet de gérer les débordements dûs aux positionnements flottants. Styler la balise <hr> Le premier problème à contourner est alors celui de la décoration de la balise <hr> puisque les différents navigateurs ne sont pas d'accord entre eux. Certains liens anglophones sont alors bien utiles : On y apprend, entre autre, que la couleur de la règle se définit soit par la propriété color, soit par background-color. Un exemple concret ? L'exemple ci-dessous ne nécessite aucune image, se base sur des caractères unicode. Les marges de <hr> Une autre méthode semblerait porter ses fruits dans une certaine mesure : appliquer des marges verticales négatives de la hauteur d'un demi caractère de référence.
Bien optimiser vos images pour le web | Orignal Communication J’ai choisi d’illustrer cet article avec la carte “Gorille de Beringeï” 3e édition bords noirs du jeu “Magic The Gathering” pour faire plaisir à mon grand frère ainsi qu’au parrain de ma fille, à Quentin et à Romain. Le rapport poids /qualité Nous sommes nombreux à publier des images régulièrement sur les internets. Sur les réseaux sociaux (Facebook, Twitter, Instagram, Google +…) on ne se pose même pas la question du format et de la compression, ils s’occupent de tout. Mais lorsque vous publiez sur votre blog ou votre site internet, c’est vous qui avez la main. À gauche l’image a été compressée très fortement pour un poids de 7Ko.Au milieu avec une compression moyenne on obtient un poids de 25koÀ droite avec une compression très faible on obtient un poids de 90ko. On remarque que l’image de gauche, bien que très légère, est totalement illisible tellement elle est compressée. D’accord, mais alors comment obtenir le meilleur rapport poids/qualité ? Mettre le bon nombre de pixels
lorempixel - placeholder images for every case WEB Définition et résolution d'une photo : pourquoi il ne faut plus utiliser le 72 dpi ? Pour commencer une petite devinette ! Connaissez-vous la résolution de votre écran ? un indice se trouve dans le titre de cet article… Commencçons par deux notions de vocabulaire importantes : La définition d’une photoLa résolution d’une photo La définition d’une photo ou d’une image représente le nombre de pixels de cette photo ou dit autrement sa taille en pixels; par exemple le capteur du nouveau Canon 6D a une définition de 20,2 MPixels soit 5472 x 3648 pixels. La résolution d’une photo s’exprime elle en DPI (Dot per Inch ou Point par pouce où 1 pouce mesure 2,54 cm) et dépend donc de la taille/ résolution d’impression. Maintenant, revenons à nos moutons et répondons à la dévinette du titre : mon écran Quato mesure 21 pouces en diagonale et physiquement son plus grand côté mesure 42,3 cm pour 1600 pixels. On est très loin des sacro-saints 72 dpi !!! La résolution d’une image n’a aucune espèce d’importance pour son affichage sur un écran; seule sa définition importe.
HTML Templates News or Magazine This template puts a focus on bold images, perfect for a magazine style site with eye catching content. Your stories are easy to find with large feature blocks. See Demo Real Estate or Travel Big thumbnails with a space for captions and descriptions along with an informative header make this the perfect template for real estate or hotel booking. See Demo Ecommerce Homepage Building an online store? See Demo Agency Bring your work to the forefront with this sleek template that's perfect for agencies or freelancers. See Demo Blog w/ Sidebar Large images, an easy to navigate layout, and versatile sidebar will help you get your blog up and running. See Demo Blog Single Column This sleek, minimal approach can help your blog stand out by putting content front and center. See Demo Portfolio Show off your work and highlight what you do with this grid style thumbnail layout. See Demo Product Page Highlight your new product and educate potential customers with this classic template. See Demo
PhotoFiltre : supprimer les yeux rouges 1 - Téléchargement et installation du plugin Voici l'archive qu'il vous faut télécharger : Une fois l'archive téléchargée, il vous faut extraire le fichier "readjust.pfl" dans le dossier "Plugins" de PhotoFiltre ( exemple : C:\programmes\photofiltre\plugins). 2 - Suppression des yeux rouges Démarrez ensuite PhotoFiltre puis cliquez dans le menu "Fichier" sur "Ouvrir Sélectionnez votre image et cliquez sur "Ouvrir" : Voici l'image que j'ai choisi pour ce tutoriel : Sélectionnez la partie rouge (l'une après l'autre) en maintenant le bouton gauche de votre souris enfoncé et en la faisant glisser afin d'obtenir ceci : Une fois l'oeil rouge sélectionné, cliquez sur le menu "Filtre" puis "Module externe" et enfin "Suppression des yeux rouges" comme ceci : Vous aurez ceci : Réglez la force de correction à votre guise puis cliquez sur le bouton "Ok". Enregistrez ensuite votre image grâce au menu "Fichier" puis "Enregistrer" pour écraser l'ancienne.
Les sprites CSS Le temps des onmouseover, des images préchargées via JavaScript et des autres joyeusetés héritées des grandes périodes de tag soup est, comme le temps des Elfes de la Terre du Milieu, définitivement révolu : faire des effets de rollover sur des images est tout à fait possible en utilisant uniquement les CSS. La technique consiste à exploiter un fichier unique pour stocker de multiples images, positionnées les unes à côté des autres. Celles-ci seront ensuite appelées dans la feuille de style, et la fenêtre d'affichage sur l'une ou l'autre image sera définie en CSS grâce à la propriété background-position. Attention : la technique exposée dans ce tutoriel est à manier avec précaution car elle peut engendrer des problèmes d'accessibilité (typiquement lorsque les images ne sont pas actives). Les avantages des sprites CSS sont multiples : Des sites à fort trafic (Youtube, Google, Facebook, Amazon, ...) exploitent cette technique sur des pages que vous consultez tous les jours : Inconvénients
Guide 2020 : la taille des images sur Facebook, Twitter, Instagram, YouTube, LinkedIn... Retrouvez toutes les dimensions des images sur les réseaux sociaux : Facebook, Twitter, Instagram, YouTube, LinkedIn, Snapchat, TikTok, Pinterest, Tumblr... La taille des images sur les réseaux sociaux. Crédits : Pixabay / Pexels. Les tailles des photos sur Facebook, Twitter, Instagram et consorts viennent d’être mises à jour. Vous pouvez conserver cette page en favori pour accéder plus facilement à toutes les dimensions des images et des photos. Nous l’avons conçue car pour tout projet en lien avec les réseaux sociaux, les mêmes questions se posent : Quelle est la taille d’une photo de profil sur Facebook ? Pour faciliter la tâche des community managers et des designers, retrouvez ci-dessous toutes les tailles à connaître sur les réseaux sociaux. N’hésitez pas à nous contacter si vous remarquez un changement de dimensions des images. La taille des images sur Facebook Ces recommandations vous permettent d’optimiser la plupart de vos visuels sur Facebook. La taille des images sur Twitter
Conseils sur les fichiers sitemaps et le référencement (SEO) Voici tout ce qu'il faut savoir sur le fameux fichier sitemap et son impact sur le référencement. Ce tuto explique les risques d'une mauvaise compréhension de l'utilité du sitemap et donne de nombreux conseils. Article mis à jour le 22/06/2015, publié initialement le 07/06/2014 Un fichier sitemap pour Google, utile au SEO ? Ce dossier fournit des explications et des conseils pour exploiter les fichiers sitemaps XML ou TXT pour votre référencement naturel Qu'est-ce que le fichier sitemap ? J'écris "fichier sitemap" pour ne pas confondre avec le plan de site, cette page web destinée aux internautes, leur permettant de se situer dans le site et de comprendre la logique de son arborescence. Un fichier sitemap est un fichier listant des URL du site que l'on souhaite faire crawler (et donc aussi indexer). Exemple de fichier sitemap XML (sur elysee.fr). Intérêt des sitemaps Un fichier sitemap favorise-t-il le référencement ? La réponse rapide est NON ! Oui, c'est à peu près mon point de vue. <?