Blog des Webmasters et Bloggueurs

Archive pour la catégorie 'Design'

Mar 10
23

Tester la taille de votre site internet dans plusieurs résolutions

Nous vous présentions il y a quelques temps ViewLikeUs et bien voici un petit concurrent gratuit : TestSize

Rien de bien extravagant mais plutôt un service pratique pour tout ceux qui veulent tester la compatibilité de leur site avec les différentes résolutions existantes.

Voici le liste des résolutions supportées par TestSize :

  • 240 * 320
  • 640 * 480
  • 800 * 600
  • 1024 * 768
  • 1280 * 800
  • 1280 * 1024
  • 1366 * 768
  • 1920 * 1024

C’est par ici que vous pourrez tester le service

Oct 09
08

Un autre pack d’icones : WooFunction

Il est toujours utile d’avoir un pack d’icônes gratuites sous la main pour toutes les applications web aussi bien intranet qu’internet. C’est ce que vous propose WooFunction : un pack de 178 icônes gratuites

woothemes-pack

Les icônes sont disponibles en 32px * 32px dans un format PNG transparent. On peut remercier Liam McKay pour ces icônes de très grande qualité.

Site Officiel

Juil 09
24

Une liste de plugins Firefox pour Webmaster / Développeur

Toujours à la recherche d’outils intéressants pour vos développements, je vous fais part d’une liste de plugins que l’on utilise chez Devclic pour gérer Forum-Webmaster au quotidien.

Nous trouvons tout d’abord un plugin essentiel pour tout débugger, j’ai nommé Firebug.

firebug

Firebug est l’ami indispensable pour la création de sites internet, il permet d’inspecter son code HTML et ses feuilles de style CSS à la recherche d’erreurs potentielles. La fonction permettant de voir la taille du bloc est vraiment très utile puisqu’elle nous permet d’inspecter réellement chaque élément. Cette extension est une aide précieuse et vous permettra d’économiser énormément de temps.

Une fois le design du site fini, il faut tester l’intégration graphique du site. Pour cela, on utilise Colorzilla.

colorzilla-eyedropper1

Colorzilla est une extension toute simple et pourtant très complète. Elle vient se loger dans le coin inférieur gauche de votre navigateur. Un simple click suffit à l’activer. Ensuite, elle vous donnera le code RGB de n’importe quelle couleur se trouvant sous votre curseur. Cela fonctionne même pour les images !

En plus de vous donner la couleur, elle se permet de vous donner l’élément HTML sur lequel vous vous trouvez dans le but de vérifier que vous pointiez bien la bonne partie du site web.

Voilà notre site avec des couleurs bien intégrées.

Que se passe-t-il quand un utilisateur n’a pas Javascript d’activé sur son navigateur ? Pour cela, nous utiliseront la Web Developper Toolbar.

La Web Developper Toolbar s’intègre juste en dessous de votre barre de navigation Firefox. Elle permet d’activer et désactiver d’un simple clic tous les éléments de la page web. Javascript, Cookies, CSS, images, etc. Elle permet également de tester, toujours aussi simplement, le design de vos pages sur les principales résolutions des ordinateurs du marché. Autre fonction utile : la désactivation du cache de votre navigateur qui permet de vérifier que votre site est réellement conforme à votre code puisque tous les éléments sont rechargés / chargés, peu importe s’ils existent en cache.

Enfin, il faut optimiser son site pour qu’il puisse tenir au mieux la charge et être accessible le plus rapidement possible pour le confort de navigation de l’utilisateur. Dans ce but, une extension à Firebug, YSlow de Yahoo est nécessaire.

yslow

Tout aussi simple à utiliser que Firebug, elle se lance d’un simple clic et vous donne un résumé des différentes actions à effectuer (tel que l’emplacement des fichiers CSS et JavaScripts sur votre page web) pour optimiser au mieux le chargement de votre site.

firebug-result2

Smushit

smushit-extensionSmushit est une extension précieuse qui vous fera économise du poids sur vos images en enlevant tout ce qui est inutile. On arrive à obtenir des résultats assez impressionnants, de plus l’extension vous livre les images toutes préparées … que demander de plus ?

En espérant que ces plugins vous permettent d’économiser du précieux temps, de vous améliorer car en inspectant ce que le voisin fait … on peut aussi s’améliorer. Pour rappel, toutes ces extensions Firefox sont entièrement gratuites.

Bon développement et en cas de soucis, nous sommes là pour vous aider

Et vous qu’utilisez-vous en plus ?

Ils en parlent aussi : Korben

Juil 09
22

Des icônes gratuites pour votre site internet

Les icônes sont devenues indispensables dans l’internet, de nos jours tous les sites en utilise et il est bien pratique d’en avoir des gratuites contre un petit lien vers l’auteur pour le remercier de partager gracieusement son travail.

Je pense surtout à Mark James et son jeu d’icônes Silk qui est d’une remarquable qualité pour un prix totalement dérisoire, un lien …

famfamfam_silk

A noter que si vous cherchez des drapeaux, vous pourrez aussi trouver votre bonheur chez l’ami Mark James alias FamFamFam

Télécharger Famfamfam SilkLes icônes au format PNG

Si vraiment vous ne trouvez absolument pas votre bonheur parmi les icônes ci-dessus, vous pouvez toujours tenter votre chance sur Iconfinder qui est un moteur de référence pour la recherche d’icônes en tout genre.

iconfinder

Fonctionnement très simple, il suffit de mettre le mot clé (en anglais) qui correspond à l’icône recherchée et le moteur de recherches vous proposera toutes les icônes en rapport avec cette thématique (un fonctionnement par tags …)
Vous pouvez également lui préciser quelle taille d’icône vous souhaitez et il fera le tri tout seul, assez pratique !

Iconfinder

Juil 09
15

XRefresh : le refreshing automatique

Quand on intègre un design, si l’on peut gagner quelques secondes, c’est toujours ça de pris et c’est ce que XRefresh est capable de vous faire gagner : un peu de temps. Ce petit logiciel qui se greffe à votre navigateur va automatiquement recharger la page de votre navigateur dès lors qu’une modification est effectuée sur votre code source.

xrefresh

Le logiciel fonctionne en 2 parties, un plugin et une application qui se lance sur votre système d’exploitation. Elles se connectent ensemble et permettent de rafraichir automatiquement votre navigateur : ultra pratique surtout quand vous avez 2 écrans.

Cet outil fonctionne sous Windows et OS X, les navigateurs supportés sont Internet Explorer 6 / 7 ainsi que Firefox 1.5+

Télécharger xRefresh

Juil 09
13

Tester votre site internet sur plusieurs résolutions avec ViewLikeUS

ViewLikeUS vous permettra de vérifier si votre cher site internet sera agréable à la navigation sur plusieurs résolutions : de 800 X 600 jusque 1920 X 1200.

Ce service est entièrement gratuit et vous permet même de tester votre site internet sous une plateforme iPhone ou bien Wii browser

viewlikeus

Pour vous servir de ce service, direction ViewLikeUs

Mar 09
04

Alléger vos pages facilement et rapidement

De nos jours, le concours à la performance sur les sites internet est présent et on cherche tous les moyens pour y parvenir alors on va vous faire partager une petite trouvaille qui vous permet d’économiser sur la taille de vos images.

Le nom de ce projet : Smush.it !

Cela se présente sous la forme d’une extension Firefox que vous installez et par celle-ci vous pouvez soumettre votre site et Smush it vous dira combien vous pouvez économiser.

De plus, il vous propose de télécharger une archive avec vos images compressées. Que demander de plus ?

Nov 07
30

Comment centrer un design en CSS ?

Voici une petite astuce bien utile et sans hack en tout genre.

Le code html serait :

<div id="global">Design centré</div>

Le CSS approprié :

#global{
     margin-left: auto;
     margin-right: auto;
     width: 770px;
}

La largeur du design est fixée ici par le width


Votre statut : Invité
Vous devez être membre pour participer.
 
 
 
 
 
 
 
 
 
 
Let’s Encrypt : le certificat SSL gratuit
Tester votre site internet sur différents navigateurs
[WordPress] Des problèmes avec l’administration ?
Rappel : Mettez à jour vos CMS et vos sites E-commerce
Le .fr fête ses 25 années d’existence !
Mesurer votre audience en temps réel avec BubbleStat
Porter réclamation contre Google Panda ?
Zlio n’est plus …
 
 
 
 
 

Copyright (c) Devclic 2002 - 2019 - Tous droits réservés

creation site internet strasbourg