Qu’est ce que le responsive web design ?

Il s’agit en fait d’adapter une mise en page de site internet en fonction de la résolution des terminaux. Au moment du développement du web mobile, les techniciens proposaient une version dédiée des sites internet. Mais cette solution a des limites. Internet en 2011, parmi les 34.4 millions d’internautes, on comptait 18.3 millions de clients mobile et 2 millions d’utilisateur tablettes soit plus de 50% de l’audience totale. Avec la multiplication des types de plates-formes, la tâche se compliquait.
Le « responsive webdesign » utilise les possibilités offertes par les nouvelles spécification CSS (feuille de style) et notamment les media queries (styles conditionnels en fonction de la résolution d’écran ou du type de format : impression / écran).

Ethan Marcotte le définit de cette manière :

Récemment, une discipline émergente appelée “responsive webdesign” poser la problématique de l’agencement des espaces physiques en fonction de la provenance des visiteurs. (…) En bref, nous sommes confrontés à un plus grand nombre de dispositifs, de modes d’entrée, et navigateurs que jamais. (…) Notre compréhension du responsive design devrait être élargie afin de couvrir toute approche qui délivrerait des interfaces riches de qualité, indépendamment de la taille de l’écran de l’utilisateur et des limites ou des capacités de l’appareil

Concevoir ce type de page pose des contraintes graphiques. Les éléments doivent pouvoir facilement «épouser» les différents formats de page. Pour se lancer dans ce type de mise en page, il est important que l’intégrateur HTML/CSS et le webdesigner communiquent.

lire la suite

Introduction

Depuis quelques années, de nombreux outils ont fleuri sur le web pour optimiser le temps de création de sites internet et plus particulièrement des feuilles de styles. Des frameworks au pré-processeurs de CSS, les intégrateurs ont désormais de nombreux outils auquel recourir pour minimiser leur temps de développement. Nous allons nous intéresser ici à Less, un pré-processeur qui est de plus en plus utilisé et qui est développé par Alexis Sellier.

Parmi ses avantages :

• Il s’inspire fortement de la syntaxe CSS même pour les fonctions les plus avancées. Cette caractéristique en fait un des pré-processeurs les plus simple à apprendre.
• Il peut s’utiliser côté serveur (via NodeJS) ou côté client (via Javascript). Il donc très simple d’utiliser rapidement LessJS.

lire la suite

Introduction

L’utilisabilité ou usabilité est définie par la norme ISO 9241-11 comme « le degré selon lequel un produit peut être utilisé, par des utilisateurs identifiés, pour atteindre des buts définis avec efficacité, efficience et satisfaction, dans un contexte d’utilisation spécifié » (définition Wikipédia). On nomme ergonomie « l’étude scientifique de la relation entre l’homme et ses moyens, méthodes et milieux de travail » et l’application de ces connaissances à la conception de systèmes « qui puissent être utilisés avec le maximum de confort, de sécurité et d’efficacité par le plus grand nombre. »

Les critères de l’utilisabilité sont :

• l’efficacité : le produit permet à ses utilisateurs d’atteindre le résultat prévu ;
• l’efficience : atteint le résultat avec un effort moindre ou requiert un temps minimal ;
• la satisfaction : confort et évaluation subjective de l’interaction pour l’utilisateur.

Dans cet article, nous allons explorer quelques-une des règles à suivre pour améliorer l’ergonomie d’un site web.

lire la suite

Récemment, l’agence AL’X Communication (agence de conseil en communication web et stratégie de développement) m’a fait parvenir un exemplaire du livre “CSS3 pour les web designers”.

Dans ce livre, Dan Cederholm de Simple Bits fait le tour de la plupart des nouveautés apportés par CSS3 et de manière assez ludique. Contrairement à beaucoup de livres informatiques, la compréhension des différentes propriétés et techniques sont appréhendées dès la première lecture. Pour certains, ce livre sera une vraie découverte, pour d’autre, il apportera une nouvelle manière de voir certaines propriétés CSS grâce notamment aux exemples traités.

lire la suite

Une des règles première en terme de performance est de minimiser au maximum les requêtes HTTP. Voici une méthode qui peut avoir son utilité lorsque vous utilisez une dizaine de plugins jQuery ou si vous êtes attaché à séparer vos styles dans diverses feuilles CSS !

Il est possible de réaliser des inclusions de fichiers coté serveur. Pour cela, il vous faudra d’abord rendre opérationnelle l’extension mod_include sur Apache. Rien de plus simple ! En supposant que votre serveur apache est localisé chemin “/etc/apache2/”, exécutez la commande suivante :

$ sudo ln -s /etc/apache2/mods-available/include.load /etc/apache2/mods-enabled

Cette commande va créer un lien symbolique du module “include” dans le dossier des modules activés de Apache.

lire la suite

Je ne sais pas pour vous mais la livraison d’un projet est souvent sujet à bon nombre d’incertitudes. A-t’on pensé à tout ? Un bon nombre de clients va chercher à évaluer la réponse apportés à sa demande initiale, ce qui est tout à fait normal. Il est important d’avoir une checklist qui servira de contrôle qualité avant la livraison d’un site web. Je précise que ces contraintes sont largement inspirées de celles de l’équipe web “BNP E-business”.

lire la suite

La méthode $.delegate de jQuery fonctionne sur le principe de la délégation d’évènements. La délégation permet notamment de pouvoir ajouter de nouveaux éléments dans le DOM dynamiquement (via Ajax par exemple) sans pour autant leur ré-attacher d’évènements préalablement défini. Elle assure également de meilleures performances.

Sur la plupart des projets, je m’amusais à déléguer des évènements à des objets globaux. C’est ensuite au moment de l’appel à l’évènement que je filtrais le type d’action à effectuer. C’est un exercice plutôt fastidieux…

J’ai donc décidé de créer un plugin jQuery permettant de faciliter la gestion d’évènement via delegate. Il suffit pour cela de créer un objet recensant les objets globaux, les évènements attachés, le filtre, puis l’action a effectuer.

lire la suite

Des débuts (très) difficiles

Internet Explorer a (très) souvent été la cible de critiques passionnées. En cause, son moteur de rendu (Trident) non conforme aux standards du web définis par le W3C et ses nombreux bugs. La version 6 s’imposait de nombreuses années au sein du système Windows XP.

Microsoft décide de publier la version 7 de son navigateur qui sera en série sur le tout nouveau système, Windows Vista. Les améliorations sont nombreuses mais la firme Redmond persiste dans sa volonté d’imposer ses “standards”. Il intègre toutefois de nouveaux pseudo-sélecteurs CSS (IE6 ne supportant que les pseudo-sélecteurs affectés aux liens) et supporte enfin le format PNG alpha. Problème, la plupart des utilisateurs de Windows XP ne migrent pas vers Vista, le système ayant une mauvaise réputation en terme de stabilité et d’ergonomie. Le passage vers IE7 prendra beaucoup de temps et encore aujourd’hui, IE6 dispose d’une part importante dans le pourcentage des navigateurs utilisés. Cette lente migration s’explique également par le fait qu’Internet Explorer 6 ne dispose d’aucun système de mise à jour automatique (à contrario de Firefox par exemple).

lire la suite

Avec l’arrivée des nouvelles propriétés CSS3 (dont la spécification n’est toujours pas finalisée…), il est devenu assez facile de créer des sites internet attrayants sans pour autant avoir recours à Flash ou à JavaScript.

Dans la démonstration associée à cet article, vous aller pouvoir visualiser quelques possibilités offertes par CSS3.

Le pseudo-selecteur :target

:target est un pseudo-sélecteur permettant d’accéder à un élément du DOM possédant l’id du lien référent. En clair, si je clique sur un lien dont l’attribut href est égal à #test, la propriété de style a:target { background-color:red; } affectera un fond de couleur rouge à l’élément ayant pour ID #test.

C’est de cette manière que j’obtiens la méthode de sélection des images agrandie dans la démo. Pour IE qui ne supporte par cette propriété, j’ai bidouillé grâce à l’overflow. En clair, le cadre conteneur des images agrandies a pour attribut overflow, la valeur hidden. Il dispose en outre des dimensions exactes d’une de ces images. Au clic sur le lien de la miniature, l’image cible est directement appelée par le hash du lien.

lire la suite

Comme vous avez surement pu le constater, il est possible en HTML5 d’encadrer des balises de type bloc par une balise de type lien inline de cette manière :

<a href="http://www.smashingmagazine.com">
  <h1>Smashing Magazine</h1>
  <h2>online magazine dedicated to designers and developers.</h2>
</a>

Le lien devient ainsi actif sur l’ensemble des balises bloc. Ceci évite d’insérer plusieurs fois le même lien.

Ce balisage marche sur la plupart des navigateurs dont IE6 seulement voilà, sur ce dernier, le curseur n’est pas correct au survol des balises de type bloc. A la place du pointeur, on à le curseur de type de texte.

Voici ce que l’on peut ajouter dans la feuille de style pour corriger celà :

a * { cursor:pointer; }

Et miracle, le curseur par défaut des liens fonctionne également sur les balises type bloc.