Blog - VISKALI » CSS / CSS3

Dimensions une extension très pratique pour les web designers

Alexandre — Fri, 31 Oct 2014 15:09:27 +0000

Une petite découverte pour cette fin de semaine, un outil très simple mais qui pourra s’avérer très utile pour les web designers qui sont amenés à réaliser des intégrations.

Dimensions Chrome Browser Extension

L’extension Dimensions est sortie la semaine dernière et est réalisée uniquement pour Chrome à l’heure actuelle, cet outil vous permet de connaître les dimensions des éléments ou marges d’un site très rapidement. Un vrai plus si vous devez réaliser des intégrations ou vérifier les espaces entre vos différentes boîtes.

L’utilisation se fait ensuite en activant l’icône dans la barre de Google et vous pouvez ensuite positionner votre souris sur les différents endroits à inspecter. L’outil détecte également les images et peut connaître la distance entre différentes formes graphiques qui composent l’image.

Installer Dimensions

L’installation est très simple et passe par le webstore de Google, si vous réalisez régulièrement des intégrations ou simplement pour connaître les dimensions d’un élément web, cette extension vous sera très utile et elle s’installe en quelques secondes.

Le projet

Le projet est réalisé par Felix Niklas et a mis l’ensemble de son code en open source sur Github.
Découvre le site sur : http://felixniklas.com/dimensions/

Source : http://www.blogduwebdesign.com/ressources/dimensions-extension-pratique-web-designers/1550

Cet article Dimensions une extension très pratique pour les web designers est apparu en premier sur Blog - VISKALI.

Responsive Design : Tester son site web

Alexandre — Tue, 29 Jul 2014 07:29:36 +0000

Au vu de l’évolution technologique constante constatée jour après jour, les sites et applications web doivent être Responsive Design (c’est à dire, être en capacité de s’adapter aux différentes résolutions et tailles d’écran).

À moins d’avoir à disposition tous les terminaux disponibles, la question à se poser est la suivante: comment un développeur peut visualiser la résolution de son site web sous différents terminaux ?

Pour cela, on peut donc se tourner vers le site Screenfly, qui permet de tester ses sites ou applications web sur de nombreux terminaux, parmi les plus populaires.

Concernant les tablettes on pourra retrouver :

Le Kindle Fire HD 7 » (533 x 853)
Le Kindle Fire (600 x 800)
Le Samsung Galaxy Tab (600 x 1024)
Le Google Nexus 7 (603 x 966)
L’iPad 1-3/Mini (768 x 1024)
Le Kindle Fire HD 8.9 » (800 x 1280)

Évidemment côté mobile on retrouvera l’iPhone 3, 4, 5 et la suite Samsung.

On peut même tester son site web sous les résolutions 480p, 720p, 1080p .

Un petit exemple de résolution sous iPad 3 :

Un bon outil très fonctionnel !

Cet article Responsive Design : Tester son site web est apparu en premier sur Blog - VISKALI.

Connaitre le support des règles CSS rapidement !

Alexandre — Fri, 25 Jul 2014 15:21:27 +0000

Bonjour,

Dans le domaine du développement WEB, on est souvent confronté au problème de compatibilité entre les différents navigateurs (IE (source de problèmes), CHROME, FIREFOX, OPERA, etc…)

Le site http://cssvalues.com/ permet de connaitre rapidement la compatibilité d’une propriété CSS.

Petit exemple avec la propriété CSS « opacity » :

Cet article Connaitre le support des règles CSS rapidement ! est apparu en premier sur Blog - VISKALI.