Lunaweb, une réflexion sur la création web et le marketing Internet

Archive pour le mot-clef ‘CSS’

« Responsive Web Design »: au travail!

Par le
No Gravatar

Le dernier de né de A Book Apart était très attendu chez Luna. Sorti en juin dernier, Responsive Web Design de Ethan Marcotte, tombait à point nommé pour un été studieux, pour partie consacré à notre R&D sur les problématiques de web design pour périphériques multiples, en mobilité notamment.

La version papier n’étant pas encore arrivée et ne pouvant me résoudre à attendre, je l’ai dévoré dans sa version Kindle lors d’un déplacement en train. Malgré l’absence de couleurs et le fait que je n’étais pas connecté pour consulter certains exemples ou références en ligne, sa lecture fût un vrai plaisir.

Le premier chapitre est consacré à un descriptif rapide du “responsive web design” — ou en bon français, web design adaptatif — et de ses enjeux. Il nous rappelle à quel point le support papier a modelé notre manière de penser : la toile sans limite d’une page web reste encore trop souvent perçue comme une contrainte alors que les dimensions pré-définies d’un support papier sont avant tout des limitations du support, que le web propose donc dépasser. Le ton est donné: il s’agit de repenser notre manière de concevoir une page web.

Les trois chapitres qui suivent proposent passer en revue les principaux leviers qui permettront d’appréhender la diversité des dimensions des écrans:

  • “The flexible grid”
  • “Flexible images”
  • “Media queries”

Pas à pas, par itérations successives, on suit l’auteur monter la page Robot Or Not, poser les problèmes propres aux différentes tailles d’écran et déjouer toutes les difficultés rencontrées avec une simplicité déconcertante. Pour qui connait un minimum les CSS, cela semble être un jeu d’enfant. Les techniques présentées sont simples et efficaces. Pour ceux qui aiment comprendre avant d’utiliser (c’est bien entendu votre cas ?), elles donnent les connaissances nécessaires pour appréhender en toute sérénité des outils plus complexes telles que les frameworks 320 and Up ou Less.

Enfin le dernier chapitre est intitulé “Becoming Responsive”. L’auteur aborde à travers son expérience la manière dont on peut mener un projet “responsive”. Il évoque plusieurs cas, pistes, façons de faire. Mais il nous invite finalement à trouver notre propre voie. Même si ce chapitre est probablement celui qui m’a laissé le plus sur ma faim, ce fut finalement salutaire. Il était temps pour moi de lâcher ces pages et de plonger directement dans le grand bain du design adaptatif: une feuille de route , un projet en tête, des motifs fonctionnels à travailler, des solutions techniques à trouver… tout un programme!

Pour conclure, ce livre possède des qualités de synthèse évidentes et rend merveilleusement compte de l’état de l’art de cette discipline, ou plutôt de l’évolution inéluctable vers laquelle tend le web design. Si vous cherchez un manuel qui vous donne des solutions toutes prêtes pour concevoir et mettre en oeuvre vos productions web sur tous les supports, passez votre chemin. Je doute d’ailleurs qu’un tel ouvrage existe actuellement : la discipline est jeune et vos meilleurs alliés sont probablement une veille régulière et beaucoup de pratique. Mais cet ouvrage donne un point de départ et une direction claire à suivre : un vecteur motivant pour appréhender cette nouvelle manière de penser et de produire sur le web.

La typographie pour le web

Par le
No Gravatar

Le Web est un média naissant, l’information qu’il véhicule est transmise par des caractères et des images, animées ou pas. La typographie pour le Web a longtemps été LE parent pauvre du www, quelle misère de devoir composer avec les fameuses 11 polices compatibles !

Table de typographie du 9ème siècle

Non, ce n'est pas la première version du Comic Sans MS

On devait alors composer avec le peu de variété à notre disposition (bon alors pour ce site, Arial ou Verdana ? Youhou !), ou passer les titrages en mode image pour éviter d’avoir une mise en scène proche du traitement de texte. Et donc alourdir le poids de la page, perdre l’accessibilité du texte, et faire reculer le référencement naturel.

Mais c’est fini ! Réduite initialement à un rôle purement pratique (juste pour lire du texte), la typo reprend ses lettres de noblesse sur le Web, et devient enfin un vrai vecteur de communication et d’identification du locuteur.

Lire le reste de cet article »

Le HTML5 expliqué à ma mère

Par le
No Gravatar

Le HTML5, sujet « tendance » du web en 2010 et pour encore quelques temps, n’échappe pas à la règle : on s’enflamme et on nourrit un peu trop d’espoir dans une innovation, sans encore bien en mesurer l’importance et la véracité. Le HTML5 est-il vraiment exploitable en 2011 ?

Loin de nous l’idée de remettre en cause le HTML5 (parce-qu’on y croit !), il s’agit plutôt de prendre du recul, de revenir sur les bases, et de voir quelle pourrait être la route à suivre.

De quoi parle-t-on ?

Dans la webosphère, les outils et langages sont en constante évolution, et c’est peu dire… Pour différencier une version d’une autre, on précise généralement son nom (par exemple HTML en ce qui nous concerne) ainsi que le numéro de la version (le HTML 5 est donc une spécification du HTML plus récent que le 4 ; c’est bien fait hein ?).

Lire le reste de cet article »

Décliner un site pour iPhone

Par le
No Gravatar

Avant propos

Agence interactive LunaWeb à Rennes

Version iPhone du site Internet de LunaWeb

Découvrez sans plus attendre les différentes pages de la version mobile du site LunaWeb en vous rendant sur notre page référence !

Le site LunaWeb en version Mobile »

* * * Bonne lecture ! * * *

Un téléphone qui tombe à point nommé !

Le smartphone d’Apple est à la mode depuis bientôt deux ans, ça tombe bien il a permis de révolutionner la consommation d’Internet, et de faire entrer de plein pied l’accès Internet nomade dans le monde personnel comme professionnel.

site lunaweb sur iphone en mode horizontal

Le développement d’applications iPhone suit des guidelines mises à disposition par Apple, d’un point de vue technique mais également ergonomique et fonctionnel. Dans le grand nombre d’applications disponibles sur l’AppStore, de nombreuses applications mettent par exemple en place une navigation qui se base sur le composant adéquat mis à disposition dans le SDK. Pour l’utilisateur, c’est l’assurance d’une appréhension plus simple et plus intuitive de l’interface.
[Source : Ergonomic Garden - iPhone & Android ou la prise en compte des guidelines - http://is.gd/1Ktf6]

Lire le reste de cet article »

Quelques bonnes pratiques e-mailing pour vos campagnes de la rentrée

Par le
No Gravatar

Lancement de nouveaux produits, ouverture de nouveaux services, fidélisation de clientèle et politique relationnelle auprès de ses consommateurs… La rentrée est LA bonne période pour concevoir des campagnes d’emailing efficaces. Voici quelques conseils techniques pour assurer la meilleure délivrabilité et utilisabilité à vos messages.

Quelques bonnes pratiques pour vos campagnes e-mailing en cette rentrée 2009
Lire le reste de cet article »

Coder en CSS plus rapidement, plus intelligemment

Par le
No Gravatar

Lors de la conception de sites assez conséquents, il est intéressant de jeter un coup d’œil à ce qu’il est possible de faire afin d’optimiser son rendement en intégration. Après avoir testé en profondeur plusieurs solutions (dont le très bon Blueprint CSS), j’ai retenu 2 solutions qui me font gagner un temps fou et me permettent de me concentrer sur l’aspect créatif des projets que j’intègre.

CSS Intelligent
Lire le reste de cet article »

Coder le Web pour les mobiles

Par le
No Gravatar

design-pour-mobiles.jpgDans son article Coding for the mobile web, Chris Mills dresse un panorama des différentes techniques utilisées pour servir un contenu adapté aux terminaux mobiles (téléphones, PDA, UMPC, etc.). :

  • la simple application des standards du Web
  • la création d’un site spécial mobiles en doublon au site « normal »
  • créer un seul site, mais ajouter du code pour optimiser le rendu de celui-ci en fonction du terminal d’affichage (utilisation des CSS filtrés par l’attribut media).

Il liste également les contraintes à respecter afin de pemrettre un affichage idéal :

  • fonctions de contrôles restreints
  • taille d’écran limitée
  • faibles bande passante et mémoire
  • petite palette de polices disponibles
  • palette de couleurs réduite

» Lire l’article Coding for the mobile web

À lire sur le même sujet :

Décliner un site pour iPhone
Application iPhone ou site mobile iPhone ?
Créer l’icône de son site Web pour Iphone/Ipod Touch

Créer un graphique en barres avec CSS et PHP

Par le
No Gravatar

Créer un graphique en barres avec CSS et PHPVous souhaitez publier régulièrement des données graphiques ? Vous avez besoin de communiquer sur votre site des chiffres fréquemment actualisés à l’aide d’un diagramme en barres ?

Rien de plus simple grâce à l’usage conjoint de CSS et PHP !
Lire le reste de cet article »

Internet Explorer 8 utilisera une balise META pour respecter les standards

Par le
No Gravatar

internet explorerInternet Explorer, connu des webmaster pour sa fâcheuse habitude à ne pas respecter les standards du Web, va utiliser une balise META (inscrite dans l’entête des pages Web) pour se référencer aux normes du W3C.

Cette caractéristique permettra, selon Microsoft qui s’en explique sur son blog MSDN, de conserver les artifices utilisés par les webmaster pour rendre leurs sites correctement interprétables par les versions antérieures de leurs navigateur (Internet Explorer dans sa livrée 7, 6, 5…) lorsque l’on tentait de coder un site correctement par l’usage de xHTML strict et de CSS 2.1 ; et donc de ne pas « casser » le rendu des anciens sites (ceux faits pour IE 6 et 7 notamment, avec des patchs spéciaux pour corriger le mauvais rendu du CSS) dans le nouveau navigateur.

C’est ma foi une relative bonne nouvelle dans la mesure où IE8, qui passe le test ACID2 (le test Acid2 vise à tester la qualité de la mise en œuvre d’un choix de fonctionnalités liées à différents standards du web dans un navigateur, dixit Wikipedia), se plie enfin aux bonnes règles du W3C et pourra afficher un rendu correct de sites conçus selon des règles communes à tous les navigateurs.

Petit accroc dans le tableau, la balise lui permettant de suivre ces principes est la suivante :

META HTTP-EQUIV="X-BALL-CHAIN"

Comme un fait exprès, cette balise est spécifique à IE8, et donc non standard au sens strict du terme, c’est à dire qu’elle fera échouer la certification aux tests de validité du W3C…

Il est dommage de constater (mais que peut-on espérer de plus avec Microsoft) l’usage d’une balise propriétaire pour valider le fait d’utiliser les standards, c’est véritablement prendre le problème à l’envers que de forcer à utiliser un élément étranger aux normes pour valider au navigateur l’usage de celles-ci.

Enfin, si déjà IE8 suit à la lettre le reste des instructions xHTML et CSS, ce sera beaucoup de temps de développement de gagné, en attendant que tout le monde switche à Firefox Internet Explorer 8.

[Mise à jour] C’est pas moi qui le dit, c’est Jeremy Keith dans le A List Apart du 15/02/08 :

Version targeting will allow Microsoft to reach new heights of standards compliance where CSS and (especially) scripting are concerned. But to benefit from it, developers must explicitly opt in. That’s just not right, says Jeremy Keith. And it’s doomed to fail, because standardistas, by their very nature, will refuse to opt in.

Et, toujours dans ALA, par Jeffrey Zeldman lui-même :

Version targeting shakes our browser-agnostic faith. Its default behavior runs counter to our expectations, and seems wrong. Yet to offer true DOM support without bringing JScript-authored sites to their knees, version targeting must work the way Microsoft proposes.

» Lire l’article They Shoot Browsers, Don’t They? etVersion Targeting: Threat or Menace?

Personnaliser la présentation de vos encarts Google Adsenses

Par le
No Gravatar

Google AdsenseLes Google Adsenses sont partout, mais combien de sites les intègrent harmonieusement à la charte globale de l’environnement du site ?

Il est souvent déplorable de voir ces encarts promotionnels défigurer un design très sobre ou très étudié, et qui vient immanquablement dénaturer l’ensemble et déséquilibrer la perception de l’internaute. De plus, puisque le but des Google Adsenses est de s’intégrer au mieux du site afin de jouer sur la contextualité des informations affichées avec celles de la page en cours, pourquoi ne pas s’attacher à personnalisation la présentation de ces encarts publicitaires textuels ?

L’article Style your AdSense links vous explique comment procéder afin de réussir une intégration idéale. Il revient sur les 3 types d’Adsense que sont :

  • les Adenses de contenu,
  • les Adsenses de recherche,
  • les Adsenses de référents.

Via quelques astuces CSS, l’auteur nous explique les tours de mains à appliquer (notamment en CSS) afin de personnaliser complètement ses annonces textuelles.

» Lire l’article Style your AdSense links

↑ Haut de page