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

Archive pour le mot-clef ‘html5’

Coup de chapeau

Par le
No Gravatar

Agence LunaWeb aime Picourt-Cabis et Blancrème

Une fois n’est pas coutume, aujourd’hui ce n’est pas un billet défrichant pour vous les entrelacs de la galaxie Web, mais un coup de chapeau que je souhaiter tirer publiquement aux guerriers de la LunaTeam.

Nous venons en effet de mettre coup-sur-coup, en l’espace de… deux jours ouvrés, deux sites Internet qui nous ont donné beaucoup de plaisir à concevoir et développer : Picourt-Cabis et Blancrème.
Vous aurez sûrement l’occasion d’en savoir plus sur la genèse de ces projets via des études de cas ad-hoc (découvrez les précédents cas clients LunaWeb) ; mais en attendant, voici un petit zoom rapide sur ces deux projets.

Lire le reste de cet article »

« 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.

Nos billets sans dessus dessous #1

Par le
No Gravatar

Sur un blog, les billets se suivent (et ne se ressemblent pas) pour bien souvent finir tout seul dans le fond du panier. Il est assez rare qu’ils en ressortent, à moins qu’on ne leur redonne un coup de pouce et pourquoi pas une seconde vie.

En plus, ça tombe bien, l’été c’est l’occasion de lire en se dorant la pilule tout ce qu’on a vu passer pendant l’année sans avoir vraiment de temps à y consacrer.

Cette nouvelle rubrique est donc l’occasion de vous faire découvrir ou redécouvrir les billets que nous avons écrit ces derniers mois.

Pour vous mettre en jambe (et passke c’est l’été, même si on y croit plus vraiment), voici un petit interlude relaxant :

Merci Sarah pour ce moment de détente. Maintenant au boulot !

Lire le reste de cet article »

Booster votre référencement naturel sans prise de tête

Par le
No Gravatar

Bien réussir son référencement naturel, c’est un peu le graal de tous les détenteurs de site web : on aimerait tous apparaitre en tête des moteurs de recherche, sans investir des fortunes dans des prestations d’achat de clics, et de manière durable.

Le référencement naturel permet d’optimiser la visibilité d’un site web, presque gratuitement tant que vous restez au B.A-ba de l’optimisation.

Quand on parle de référencement, on parle aussi du SEO (search engine optimization) qui regroupe toutes les techniques d’amélioration du positionnement sur les moteurs de recherche, et du SEM (search engine marketing) qui se consacre aux techniques payantes (achats de mots clés, liens sponsorisés, liens commerciaux).

Nous vous proposons aujourd’hui non pas un, ni deux, mais quatre bons conseils pour optimiser votre référencement naturel, en toute simplicité. Et gratosse en plus !

"Aller plus hauut, allez plus hauuuuuuut"

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 »

Cette semaine chez LunaWeb #20

Par le
No Gravatar

Cette semaine, chez LunaWeb, nous avons…

Making Future Magic: iPad light painting from Dentsu London on Vimeo.

Bon week-end, et à la semaine prochaine !

Cette semaine chez LunaWeb #15

Par le
No Gravatar

Cette semaine, chez LunaWeb, nous avons…

  • découvert la toute dernière folie des créateurs de DeviantArt : après un redesign en début d’année pour donner la priorité aux créations des artistes, DA leur fournit maintenant un outil complet pour créer directement en ligne, entièrement basé sur les dernières technologies du web.
  • testé la nouvelle version du générateur de mots-clés Google.
  • apprécié le redesign de l’un de nos outils de recherche iconographique préféré, le bien nommé iStockphoto ! Un univers graphique & illustratif sobre, élégant & qualitatif, ainsi qu’une ergonomie repensée.
  • trouvé intéressante l’inititative HTML5 Boilerplate : un kit de démarrage html5 / CSS3 qui reprend les meilleures pratiques du moment en la matière. À tester sur l’un de nos futurs projets.
  • mis de côté un instant notre amour envers la firme à la pomme croquée, le temps de regarder la parodie suivante d’Apple !


Bon week-end, et à la semaine prochaine !

Notre ascension au second étage, un test de page en HTML5

Par le
No Gravatar

Les spécifications html5 ne sont toujours pas arrêtées et je voulais quand même y toucher « pour voir ». Malheureusement « coder pour coder », ce n’est pas mon dada. J’avais envie de raconter une histoire et de me servir des nouveaux éléments pour leur apport sémantique dans un contexte appliqué.

Récemment nous avons déménagé au 2è étage du 24 bis Rue Maréchal Joffre. C’est une nouvelle expérience pour toute l’agence. La bonne aubaine : ma première page HTML5 est donc un article qui raconte en quelques paragraphes les bienfaits de notre déménagement sur notre cadre de travail.

J’ai découvert des choses vraiment intéressantes en codant cette page. Le HTML5 me semble être un grand pas en avant vers un langage très adapté au web d’aujourd’hui d’un point de vue sémantique. J’espère que le HTML5 règlera certaines maladies des intégrateurs, notamment la divite ou la spanite aigüe, étant donnée la quantité d’éléments bientôt à notre disposition. D’ailleurs je vous laisse découvrir cela dans la source de l’article.

Notez que j’ai aussi utilisé Cùfon, un moteur de remplacement de texte en son équivalent image (futé pour se permettre certaines fontes non-standards dans une page web). Nous l’utiliserons probablement dans le catalogue produit de l’un de nos clients, qui devra être traduit dans plus de 5 langues (cela nous évitera de refaire toutes les images).

Lire l’article : Notre ascension au second étage

Pour les commentaires, je vous invite à les déposer en bas de l’article lié.

↑ Haut de page