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

Archive pour le mot-clef ‘CSS’

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

Premailer, transformer vos CSS pour l’email HTML

Par le
No Gravatar

Support du CSS dans les emailsUn des gros soucis de rendu d’un email HTML envoyé à différents services de webmail (Hotmail, Gmail, Yahoo Mail, etc.) ou vers des softs de messagerie électronique (Apple Mail, Outlook, Eudora, etc.) consiste en le support partiel, voire l’absence totalement de support, du CSS, qu’il soit décrit dans une feuille de style externe ou bien intégré directement dans la balise HEAD du document. Le guide to CSS support in Email, de Campaign Monitor (déjà mentionné ici), retrace toutes les balises acceptées ou refusées par tous les grands services ou logiciels d’emails.

Pour pallier à ce problème, la seule solution consiste à mettre tous les attributs de mise en forme directement dans la balise concernée (méthode du CSS inline) . Par exemple, un paragraphe à styler en gras et en vert, au lieu d’être habituellement parée d’un attribut class suffisant :

(p class=grasvert)Le phrasé de ma grand mère est une tuerie.(/p)

Devient ceci :

(p style=color:green;font-weight:bold)Le phrasé de ma grand mère est une tuerie.(/p)

Je vous laisse imaginer le côté « pratique » d’un emailing complet à styler tout à la main, et surtout à maintenir (surtout quand le client demande d’inverser les couleurs au denrier moment). Du pur bonheur, et un retour aux années Dreamweaver…

Jusque là, nous en étions arrivés au point de créer un script PHP qui moulinait la page HTML avec son CSS « classique » en feuille externe, mais pour cela fallait-il encore avoir la connaissance et l’infrastructure pour le faire.
Et voici que sort premailer, qui vous le fait en deux temps et en mode Web. Pratique !

> Visiter le site de Premailer.

Maîtriser la taille progressive des polices en CSS

Par le
No Gravatar

Maîtriser la taille progressive des polices en CSSC’est du classique mais cela ne fait pas de mal à relire de temps en temps, l’excellent article « Définir des tailles de police dynamiques cohérentes avec CSS » de Pompage.net revient sur l’utilisation judicieuse du em en guise d’unité de mesure dans ses pages HTML, en donnant quelques astuces afin d’avoir une présentation homogène dans tous les navigateurs.

» Lire l’article « Définir des tailles de police dynamiques cohérentes avec CSS« .

Faire un style switcher CSS et PHP

Par le
No Gravatar

Style Switcher simple en PHP et CSSAlsacréations publie un tutoriel très rapide et très clair sur la façon de construire un « chargeur de style » (style switcher) par l’usage des langages CSS et PHP.

Simple et rapide, cette méthode éprouvée doit être aujourd’hui utilisée sur des millions de sites dans le monde, alors si vous cherchez un bon style switcher, en voici un !

» Lire l’article « Faire un Style switcher (changement d’habillage) en PHP« .

↑ Haut de page