Clearideaz, le portfolio d'Olivier Gorzalka, webdesigner sur Lille, Nord-Pas de Calais

webdesigner et intégrateur XHTML / CSS

Archive pour décembre 2007

Joyeux noël à tous

Juste ce petit message pour vous souhaiter à tous de bonnes fêtes de fin d’année. J’en profite également pour faire état de mon étonnement concernant les services e-card sur le web. Il y a en réalité peu de services gratuits disponibles sur le net. Si j’ai un peu de temps, j’essaierais de mettre en place une interface dans la pure tradition web 2.0 qui permettra de planifier l’envoi d’e-cards gratuitement :) Joyeux réveillon !

(j’en profite également pour vous dire que le prochain navigateur de Microsoft, IE 8, passe sans problèmes le test Acid 2 et ça c’est une bonne nouvelle)

Ce qui énerve l’internaute

Sur le web, si vous souhaitez fidéliser un visiteur, il va falloir éviter certaines pratiques. Ces conseils valent aussi bien pour un site personnel genre blog que pour un site commercial. Voici donc un bref résumé de ce qui énerve les internautes.

Les popups

Elles arrivent en tête de la liste. C’est un véritable fléau sur le web à tel point que les navigateurs ont du mettre en place des bloqueurs de popup. Mais les “ pollueur du web “ ont bien plus d’un tour dans leur sac et utilisent des techniques alternative pour pourrir votre écran de pub. La fabuleuse lightbox a par exemple été détournée de son utilisation pour servir de popup publicitaire sur certains sites douteux ;)

Lire la suite

La pseudo-classe :hover

CSS a introduit des fonctionnalités très importantes pour le webdesign: les pseudo-éléments et les pseudo-classes.

Les pseudo-éléments sélectionnent une partie spécifique dans le Doctree (le formatage du document source) à partir des informations déjà données par ce dernier: nom, attribut… De fait, on peut appliquer un style sur une partie spécifique du document. Par exemple, avec le pseudo-élement :first-letter permet d’appliquer un style sur la première lettre d’un paragraphe. En combinant cette propriété avec le pseudo-classe :first-child, on peut alors créer une lettrine.

Les pseudo-classes, quant à eux, ciblent des éléments sans forcément prendre en compte les informations renvoyées par le Doctree. Elles ne se déduisent donc pas de ce dernier. (On notera toutefois deux exceptions: :first-child et :lang). Une propriété peut être générée dynamiquement par l’action de l’utilisateur sur le document.

La pseudo-classe qui nous intéresse dans le cas présent est :hover. Elle offre un certains nombre de possibilité que nous allons voir en détail en utilisant plusieurs exemples. Comme beaucoup de pseudo-classes et pseudo-éléments, elle connait des problèmes de compatibilités avec les navigateurs strictement inférieurs à IE 7. IE ne permet cette propriété que sur les balises de liens. Pour résoudre ces lacunes, on peut utiliser le hack JavaScript de Suckerfish pour implémenter la propriété :hover au vieux navigateurs IE.

Lire la suite

Améliorer Internet Explorer (toutes versions)

Dean Edwards est un génie. Internet Explorer a toujours été réputé pour être un navigateur très en retard sur les autres. Un grand nombre de sélecteurs et de propriétés CSS ne fonctionnent tout simplement pas sous les versions inférieures à IE7. C’est là que Dean Edwards entre en jeu. Ce programmeur a conçu une véritable librairie permettant d’émuler par le biais de fonctions javascript, les fonctionnalités CSS 2 absentes de IE. A l’origine, son objectif était de contrer la pratique des hacks CSS qui rendent les feuilles de style invalides. Mais il ne s’est pas arrêté là en implémentant certains sélecteur CSS 3 dans le navigateur certifié Windaube. La dernière version sortie date de août 2005 donc je n’apporte pas une nouveauté, mais ce genre de trésor peut en intéresser un très grand nombre ;)

Vous pouvez télécharger l’ensemble des fichiers sur son site internet personnel.

Mon Top 5 Webdesign du moment

Tout les mois, j’essaierai de tenir à jour une liste de design de sites qui me paraissent particulièrement intéressant tout en les commentant. En naviguant sur le web, je suis souvent interpellé par des types de mise en pages ou par la beauté graphique. Voici donc mon top 5 ;)

Team Viget Lab

VigetlabJ’ai été particulièrement séduit par la mise en page originale. Pour naviguer, il y a un défilement horizontal de la zone de contenu afin d’accéder aux autres rubriques. C’est assez original. Ceci est rendu possible grâce aux possibilités du Framework Jquery (mon chouchou) alliées au plugin Easing.

Certes, on pourra me faire remarquer que ce n’est pas très évolutif mais ici, on parle d’une vitrine montrant les possibilités de créations d’une équipe de designers :)

Lire la suite

Faire du buzz sur le web (dernière partie)

Comme on a pu le voir, organiser un buzz pour une opération marketing peut se révéler très efficace. Toutefois, il faut en dégager quelques limites. Cette technique fait partie de ce que l’on appelle le marketing viral. Du fait de l’efficacité prouvée à maintes reprises, cette technique est souvent utilisée à tort et à travers.

Certaines opérations deviennent de véritables génératrices de spam et dans ce cas, on peut juger très clairement que l’opération est ratée. Cela peut même se traduire par un fiasco qui va casser votre image de marque. L’objectif est très clairement de se mettre les internautes dans la poche (pour être quelque peu cynique).

Lire la suite

Faire du buzz sur le web (2nde partie)

Toutouyoutou, la compagne de pub du 118 218Pour promouvoir ce qui sera l’objet du buzz, le plus difficile sera de trouver l’idée qui va permettre de diffuser le message. Comment faire en sorte que ce dernier soit original, intéressant, étonnant (choisissez votre adjectif), au point que les gens aient envie de le relayer ?

Une des clés de la réussite d’un buzz est de créer autour du sujet un caractère évènementiel. Pour cela, on va essayer de “ faire monter la sauce”. Avant le lancement du numéro de service de renseignements 118 218, le service communication de la société avait créé un site internet et diffusé des publicités TV et Radio dans lesquels ont pouvait entendre une chanson rebaptisé “Toutouyoutou” et qui était en fait une reprise du générique de l’émission “sportive” de Véronique et Davina.

Lire la suite

Faire du buzz sur le web (1ère partie)

Le logo de GmailC’est une expression à la mode, “faire du buzz” ! En gros, parvenir à faire parler de son site ou de son activité par le biais du bouche à oreille.

Parfois, il suffit d’utiliser la provocation même si cette technique commence peu à peu à montrer ses limites. Souvent il s’agit de trouver l’idée originale qui va réaliser la communication autour du sujet. La tendance étant au web 2.0 et à l’esprit (faussement) communautaire, on assiste à des opérations offrant aux utilisateurs d’être acteur de cette opération de communication.

C’est ainsi que Gmail a pu faire la promotion de son webmail en invitant les internaute à se filmer en utilisant le logo de l’enveloppe Gmail. Au final, Google (ou plutot les experts en communication de Google) ont selectionné les extraits aillant le plus d’impact pour en faire la vidéo finale.

Lire la suite

Comment ouvrir les hostilités…

Pour ce premier billet qui inaugure ce carnet Web, j’aimerais exposer ma conception de la réalisation Web.

Design du blog de VeerleAujourd’hui, l’apparence d’un site Web est un élément primordial qui peut fidéliser des visiteurs. Le look peut saisir l’utilisateur soit par la beauté de sa simplicité (Flickr pour ne citer que lui) ou encore par sa finesse et sa recherche du détail (le blog de Veerle en est un excellent exemple).

La réalisation web est devenu un exercice particulièrement périlleux au vue de la multiplication des supports de lecture (PDA, Lecteurs d’écran, systèmes d’exploitation) et c’est pourquoi il a fallu définir un certain nombre de conventions en quelque sorte.

On utilise le terme « Accessibilité » à tort et à travers mais de quoi s’agit-il exactement ?

Pour Tim Berners-Lee, directeur du W3C, l’Accessibilité c’est :

Mettre le Web et ses services à la disposition de tous les individus, quel que soit leur matériel ou logiciel, leur infrastructure réseau, leur langue maternelle, leur culture, leur localisation géographique, ou leurs aptitudes physiques ou mentales.

Quelle jolie idée ! Sur le papier c’est pas mal mais sur le terrain, c’est une autre histoire. Le message est parfois mal compris.

Lire la suite