CSS & Webdesign » Mobile

La journée mondiale de l’accessibilité, c’est maintenant !

Bruno Bichet — Wed, 09 May 2012 17:49:58 +0000

Le GAAD (Global Accessibility Awareness Day) dédie cette journée du 9 mai 2012 à la sensibilisation du plus grand nombre à l’accessibilité des contenus et applications digitales (web, logiciel, application mobile, etc.) pour les personnes en situation de handicap.

Demain, le Web sera plus humain

Merci à Monique Brunel (Webatou) d’avoir partagé cette vidéo.

Articles sur le même sujet

Media queries et téléchargement des images par les mobiles

Bruno Bichet — Mon, 16 Apr 2012 14:11:15 +0000

A l’heure où l’on parle beaucoup de Responsive Webdesign via notamment les propriétés CSS3 Media Queries, il est important de s’interroger sur la manière dont les différents périphériques mobiles se comportent au moment de télécharger les images. Disons que vous affichez une image en tant “normal” et que vous décidez de lui appliquer display: none si max-width: 600px. L’idéal serait que le périphérique ciblé ne demande pas l’image afin d’épargner la bande passante.

Media Query & Asset Downloading Results fait état d’une série de tests où il apparait que :

Si vous décidez de ne pas afficher une image, il ne faut pas compter à coup sûr sur la propriété display: none. A la place l’auteur recommande d’utiliser Javascript ou une approche côté serveur.
Pour masquer une image définie en background-image, il est préférable de masquer l’élément parent. Si cela n’est pas possible, il est possible d’utiliser une surcharge CSS avec background-image: none.
Pour permuter des images de fond, il faut les définir toutes les deux à l’intérieur des Medias Queries

Articles sur le même sujet

Check your avec le W3C

Bruno Bichet — Wed, 11 Apr 2012 20:35:20 +0000

Suite à l’arrivée W3C mobileOK Checker sur mon écran radar (merci @flashxman), je me suis dit qu’il pourrait être utile de faire une liste des outils proposés par le W3C pour vérifier la conformité de nos sites web par rapport aux standards, aux bonnes pratiques ou aux performances web. D’une manière générale, ces outils œuvrent pour l’amélioration de la qualité web.

Principaux validateurs du W3C

Unicorn– C’est le Validateur unifié du W3C pour :
- Vérifier la conformité générale en effectuant tous les tests possibles.
- Vérifier la validité pour les profils CSS 1, CSS 2, CSS 2.1 et CSS 3.
- Vérifier la compatibilité avec les portables.
- Vérifier la syntaxe des flux Atom ou RSS.
- Un dernier choix permet de sélectionner les tests à effectuer parmi les items précédents.
Markup Validation Service — Connu également sous le nom de Validateur HTML, ce service vérifie la conformité des formats HTML, XHTML, SVG ou MathML.
Link Checker — Vérifie les ancres dans un document HTML / XHTML. Pratique pour faire le point sur les liens brisés.
CSS Validator — Vérifie la conformité des feuilles de style CSS ou des documents qui comportent des styles CSS. Les trois derniers outils sont réunis dans Log Validator qui permet d’améliorer la qualité d’un site web pas à pas en cherchant les erreurs en premier lieu dans les documents les plus populaires. Plus d’information à ce sujet dans Passer aux standards Web rédigé par Karl Dubost (@karlpro).
mobileOK checker — Vous développez pour les périphériques mobiles ? Ce service vous aidera à découvrir les points faibles de votre site lorsqu’il est affiché sur un smartphone.

Autres services du W3C

Semantic Extractor — Affiche votre page web d’un point de vue sémantique : outline, description, langages utilisés, etc.,
RDF Validator — Vérification et affichage des documents RDF,
Feed Validator — Vérification des flux de nouvelles aux formats ATOM et RSS,
P3P Validator — Vérifie si un site est compatible P3P,
XML Schema Validator — Outil en cours d’approbation par le W3C,
Logiciels open source du W3C.

W3C Cheat Sheet

Valider c’est bien, encore faut-il savoir comment améliorer les éléments que ces fabuleux outils soumettent à notre sagacité. Si le W3C est capable de trouver la source des maux dont souffrent nos pages web, il nous donne aussi les clés pour améliorer notre pratique.

W3C Cheat Sheet est un outil open source que le W3C met librement à la disposition des développeurs web. Il fournit un accès rapide à tout un tas d’informations concernant les différentes spécifications publiées par le W3C :

Articles sur le même sujet

11 vidéos pour comprendre l'accessibilité du point de vue… des mal-voyants

Bruno Bichet — Sun, 12 Feb 2012 18:54:03 +0000

L’accessiblité des sites web est une choses dont on parle souvent, sans forcément avoir une idée très précise de la manière dont les mal-voyants utilisent les sites que nous concevons, généralement, pour le plus grand nombre. Les enjeux sont importants car le web permet aux mal-voyants de communiquer, de s’informer et de gérer une partie de leur vie quotidienne. Cette série de vidéo proposée par Access-Key de l’Université Nice Sophia-Antipolis devrait fixer les idées sur des cas concrets, pour nous permettre d’améliorer la lisibilité et le décodage de nos sites web.

Ces 11 vidéos en libre-accès illustrent de manière pédagogique les recommandations du WAI :

Utilisation des terminaux mobiles (iPhone, iPad, et plage braille mobile) — Christian, non-voyant, accède en toute liberté à l’information et à l’échange de données, sur un ordinateur portable, un smartphone, une tablette tactile grâce à une synthèse vocale ou une plage braille.
La synthèse vocale — Jean nous présente l’utilisation d’un ordinateur au moyen d’un synthèse vocale.
La plage Braille — Jean accède à son ordinateur au moyen d’une plage tactile braille.
Les tableaux — Ce tutoriel explique comment rendre les tableaux plus accessibles.
Des liens hypertextes compréhensibles — Isabelle utilise un logiciel de revue d’écran qui offre des possibilités de navigation grâce aux liens présents sur la page.
Les alternatives textuelles aux images –Isabelle détaille ici les difficultés qu’elle rencontre lorsqu’il n’existe aucune alternative aux images.
Déclarer la langue dans une page Web — Jean explique les désagréments causés lorsque les changements de langues ne sont pas indiqués.
Des formulaires accessibles — Isabelle explique les difficultés rencontrés avec un formulaire non accessible.
Des images liens accessibles — Jean fait une démonstration des problèmes liés aux images-liens pour une personne utilisant une aide technique pour naviguer.
Le mobile web — Les standards du web ouvrent les portes d’un web accessible pour tous.
L’accessibilité du flash et des composants externes — Quels sont les points qui peuvent poser problème lors de l’accès à une page qui proposent la rubrique actualités uniquement à travers une animation flash ?

Merci à la liste de diffusion Pompeurs !

Pompage et CSS débutant nous offrent une liste de discussion francophone pour créateurs de sites web.

Articles sur le même sujet

Le Petit Journal du Web — 09/2011

Bruno Bichet — Tue, 27 Sep 2011 12:45:23 +0000

Le dernier Petit journal du web paru sur CSS & Webdesign remonte à loin. Pour me faire pardonner, voici les meilleurs liens sur lesquels j’ai trébuché au mois de septembre. Au menu : thème WordPress pour démarrer vos projets de site web ; tutoriel interactif pour apprendre les bases de la programmation en général et Javascript en particulier ; coins arrondis propres pour vos images ; mise en place un Content Delivery Network (CDN) pour améliorer les performances de vos pages web ; tutoriel plein de poésie pour apprendre les CSS ; menu déroulant dédié aux smartphones iPhone, Android, etc.

WordPress Basics — Actuellement en version 0.2.8.1, le Blank Theme Basics est accompagné du thème enfant Beyond Basics pour simplifier le thème parent, faciliter les mises à jour et vous donner une plus grande souplesse dans la mise en place du design de votre site internet.
Codecademy – Apprennez les bases de la programmation Javascript de manière interactive et pro-active. Via roget.biz
CSS3 Rounded Image With jQuery – Arrondir les angles des images proprement avec CSS3 et jQuery pour éviter les effets parfois disgrâcieux de border-radius appliqué directement sur la balise . Voir la démo.
CDN Media Server — Boostez les performances de vos sites avec un « media server ».
CSS : l’Art & la Science — Un parcours initiatique à l’intégration web rempli d’humour et de poésie, par bbxdesign.
Menu déroulant pour mobile — Tutoriel complet sur la mise en place d’un menu accessible adapté aux périphériques mobiles grâce aux Media Queries. Le tutoriel idéal à tester avec mon tout nouveau Samsung Galaxy SCL qui me change de mon Sony Ericsson old School ! Voir la démo.

Articles sur le même sujet

Notes de lecture — Livre CSS avancées, vers HTML5 et CSS3

Bruno Bichet — Sun, 03 Apr 2011 17:07:27 +0000

Je viens de terminer le dernier livre de Raphaël Goetter intitulé CSS avancées. Vers HTML5 et CSS3 paru aux Editions Eyrolles mi-mars 2011 et préfacé par Daniel Glazman. Ce livre n’est pas une simple mise à jour de CSS2, pratique du design web paru en 2005 ; il s’agit d’une refonte totale avec une orientation «utilisateurs avancés». L’auteur commence par un état des lieux sur les standards du web et leur prise en charge par les principaux navigateurs : Internet Explorer (IE6, IE7, IE8, IE9), Firefox, Chrome, Safari et Opera. Le livre est ensuite divisé en trois parties : 1) tirer le meilleur de CSS, 2) HTML5 et CSS3 : l’innovation en marche, et 3) CSS et applications spécifiques.

Tirer le meilleur de CSS

La première partie devrait à elle seule déclencher l’acte d’achat. Raphaël passe en revue les propriétés CSS 2.1 dont l’intégrateur HTML & CSS s’est privé pendant des années à cause de leur manque d’implémentation dans IE6 et IE7, bons derniers de la classe à l’école des standards… A nous, désormais, les joies procurées par l’utilisation de sélecteurs sur lesquels nous faisions l’impasse : sélecteur d’enfant, sélecteur de frère adjacent, sélecteur d’attribut, :first-letter et first-line, :first-child, :focus, :before et :after, règle «@» diverses et variées.

Selon votre politique de prise en compte des versions d’Internet Explorer, vous pourrez utiliser tout ou partie de ces «nouveaux» jouets. Le niveau de support spécifique de tel ou tel sélecteur par les versions d’IE est précisé à chaque fois au fil de la lecture. Notons qu’il devient de plus en plus courant de délaisser IE6 et de prévoir une dégradation gracieuse pour IE7, ce qui permet d’utiliser à fond la spécification des CSS 2.1 prise en charge par IE8 et les autres navigateurs modernes.

HTML5 et CSS3 : l’innovation en marche

Cette partie fait le point sur les nouveautés qui arrivent dans le sillage de HTML5 : la syntaxe, les nouvelles balises sémantiques pour structurer les contenus, avec un focus particulier sur les balises video, audio et canvas, les nouveaux attributs de formulaires, etc.

Après HTML5, le livre présente CSS3. Toutes les nouveautés passent sur le grill bien chaud de Raphaël qui en profite pour nous faire saliver avec ses recettes «maison» et ses tours de main, pour que nous aussi, devenions des chefs en CSS ! Toujours très pragmatique, le livre donne dans cette partie — comme dans les autres –, des bonnes adresses permettant de prendre en compte les navigateurs anciens via Javascript, ou des composants HTC.

CSS et applications spécifiques

Web mobile

Cette dernière partie aborde le web mobile avec les défis qu’il lance à l’intégrateur web et les solutions qu’il peut mettre en oeuvre pour tenir compte du parc hétérogène des téléphones portables plus ou moins «smarts» et des tablettes tactiles aux formats et résolutions d’écran disparates.

CSS Print

Les CSS pour l’impression ne sont pas oubliées. Il est vrai qu’elles sont souvent le parent pauvre des CSS en dépit de leur utilité indiscutable. Surtout quand on pense que le web — loin d’avoir diminué les besoins en ressources de la planète –, n’a fait qu’augmenter l’utilisation de l’encre et du papier ainsi que l’énergie nécessaire à leur production :-(

Profitons donc de @media print pour limiter l’utilisation de l’encre en éliminant les couleurs, les aplats et tout ce qui n’est pas utile dans le contexte de l’impression.

Lecteurs de mails et CSS

Créer des Newsletters ou tout autre document susceptible de s’afficher sur un client de messagerie est une épreuve que je ne souhaite à personne. Et pour cause : à côté des clients de messagerie de bureau comme Lotus ou Outlook et certains services de messagerie en ligne, IE6 fait figure de champion du monde ! Bref, c’est galère, mais il est possible de s’en sortir en suivant les conseils de conception de page web pour les clients mail de ce livre.

En deux mots

CSS avancées, vers HTML5 et CSS3 est un des rares livres indispensables que tout intégrateur web devrait avoir à portée de main. Raphaël Goetter sait comment expliquer les concepts flous des spécifications (et il y a !) avec humour et simplicité tout en restant didactique. Le livre est à priori destinés aux utilisateur avancés, mais devrait rester accessible aux jeunes «padawans». Toutefois, je recommande fortement à ces derniers la lecture de la 3ème édition de CSS2 — Pratique du design web qui vient d’être rééditée au format semi-poche le 31 mars 2011 !

Informations pratiques

CSS avancées. Vers HTML 5 et CSS 3

Auteur(s) : Raphaël Goetter
Editeur : Eyrolles
Nombre de pages : 400 pages
Date de parution : 17/03/2011
Extraits au format PDF disponibles sur la fiche du livre
EN COULEUR !

Articles sur le même sujet

Journal — « Typographie, HTML5 Boilerplate, Reset CSS, Clearfix, CSS3, Photoshop »

Bruno Bichet — Wed, 23 Feb 2011 14:53:06 +0000

Au menu de ce petit journal, je vous propose un pot-pourri de ce qui a retenu mon attention ces 30 derniers jours. La typographie sur le web avec Font-face et les différents formats de polices de caractère. Apprendre les bonnes pratiques en matière d’intégration HTML & CSS avec HTML5 Boilerplate. Choisir de mettre un reset CSS dans votre moteur ou une simple (mais complète) feuille de style de base. Approfondir CSS3 avec un tutoriel concret et utiliser les pseudo-classes :before et :after pour créer des ombres portées du plus bel effet. Mettre en place une feuille de style pour les périphériques mobiles et autres smartphones (iPad, iPhone ou Android). Avoir une liste d’outils pour vous aider à développer avec Internet Explorer (et IE6 en particulier). Et pour finir, reprendre les bases de Photoshop avec un tutoriel en 5 parties distinctes mais complémentaires.

1. Typographie sur le web

Déclarer vos polices de caractères avec Font-Face

Modification de la méthode de déclaration Font-Face et mise à jour du billet concernant les Bonnes pratiques pour les déclarations font-face. Pas de problème si vous utilisez les kits de FontSquirrel, ils sont à jour ! Sinon, voici la bonne méthode pour inclure vos polices localement :

@font-face {
    font-family: 'MuseoSlab500';
    src: url('Museo_Slab_500-webfont.eot?iefix=') format('eot'),
         url('Museo_Slab_500-webfont.woff') format('woff'),
         url('Museo_Slab_500-webfont.ttf') format('truetype'),
         url('Museo_Slab_500-webfont.svg#webfont8VbsAwew') format('svg');
    font-weight: normal;
    font-style: normal;
}

Museo Slab is robust slab serif with Museo’s friendliness. It is a perfect match for Museo Sans. By Exljbris.

Museo Slab : police de qualité accompagnée de son kit fonte-face

→ FontSquirrel propose un convertisseur de polices de caractères qui permet d’obtenir l’ensemble des formats web pour l’ensemble des navigateurs (.eot, .woff, .ttf, .svg).

Maitrisez l’affichage des Webfonts

[ typographisme ] Maîtriser le délai d’affichage des fontes – Internet Explorer et les navigateurs qui utilisent Webkit (Safari, Chrome) affiche le texte lorsque la police est téléchargée. Quant à Firefox et Opera, ils commencent à afficher le texte avec la police de substitution en attendant que la police soit complètement chargée. Cet article fait le point sur ces deux approches et fournit des astuces pour limiter les dégâts : choix des polices de substitution pour limiter le clignotement ou utilisation de Web Font Loader pour contrôler le chargement et l’affichage des polices.

Unicode et typographie

Unicode et typographie : un amour impossible – Tout ce que vous avez toujours voulu savoir sur les rapport entre Unicode et la typographie10.3166/dn.6.3-4.105-137.)

→ Voir aussi Tableaux de caractères Unicode – Écritures,
→ Lire aussi Le petit journal permanent de la TypOgrApHiE !

Les fontes disponibles selon les plate-formes

→ iOS Fonts — 40 familles de polices de caractères pour iPhone 4.2 et 57 pour iPad 4.2
→ CSS font sampler and survey — The Code Style font sampler is a guide to the most common fonts on Windows, Mac and Linux.

2. HTML5 Boilerplate

[ 1stwebdesigner ] 20 bouts de code et bonnes pratiques issus de HTML5 Boilerplate — Comme beaucoup, j’ai entendu parler de HTML5 Boilerplate, un modèle de site HTML/CSS/JS/.htaccess de «tueurs» créé par Paul Irish et Divya Manian qui permet de développer des sites rapides, robustes et prêts pour le futur. HTML5 Boilerplate nous appporte les dernières avancées en matière d’intégration web sur un plateau sous la forme de plusieurs fichiers HTML, CSS, Javascript et .htaccess prêts pour HTM5 et CSS3 (mais pas seulement). Le fichier .htaccess regroupe les bonnes pratiques en matière de compression des différents formats utilisés sur le web, de dates d’expiration pour la mise en cache des éléments, de redirection sur le domaine sans les 3W, etc.

HTML5 Boilerplate existe en deux versions : une pour l’étude avec les explications sous forme de commentaires, et l’autre pour la production. Il y a beaucoup à apprendre en lisant les différents fichiers et en écoutant Paul Irish présenter HTML5 Boilerplate :

→ Lire la documentation de HTML5 Boilerplate sur GitHub,
→ Lire la documentation en mode Boilerplate (cf. HTML5 Boilerplate Documentation… en mode Boilerplate !),
→ Lire Script Loading Techniques.

3. Base.css ou Reset.css ?

[ thinkvitamin ] Setting rather than Resetting Default Styling – Avec l’utilisation (ou non) d’un framework CSS, la question de savoir s’il vaut mieux mettre un reset.css ou une feuille de style de base dans ses pages web est un peu le serpent de mer de l’intégration web. Thierry Koblentz présente les défauts inhérents au reset.css et défend l’approche de la feuille de style de «base» avec base.css qui a inspirée en partie HTML5 Boilerplate !

4. Clearfix reloaded ?

[ Yahoo! User Interface Blog ] Clearfix Reloaded + overflow:hidden Demystified – Tant que la propriété float servira pour bâtir les fondations de nos pages web, nous continuerons à utiliser une méthode pour rétablir le flux après l’utilisation d’éléments «floatants». Il existe plusieurs méthodes que j’avais compilées dans l’article Rétablir le flux après des éléments flottants en CSS sans balise HTML supplémentaire qui faisait lui-même suite à Pour rétablir le flux après un float, vous êtes plutôt HR, BR ou DIV ? Voici le petit nouveau :

.clearfix:before,
.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    overflow: hidden;
}
.clearfix:after {clear: both;}
.clearfix {zoom: 1;}

Une variante utilisée dans HTML5 Boilerplate. Notez le remplacement de la propriété overflow: hidden par visibility: hidden :

.clearfix:before,
.clearfix:after {
    content: "020";
    display: block;
    height: 0;
    visibility: hidden;
}
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }

L’absence de la propriété overflow: hidden peut entrainer des problèmes d’espaces au-dessus de certains éléments. Pour y remédier, il est possible d’utiliser le clearfix suivant (notez que l’utilisation de overflow: hidden sur le container en question dans votre feuille de style suffit généralement à régler le problème) :

.clearfix2:before,
.clearfix2:after {
    content: "020";
    display: block;
    height: 0;
    overflow: hidden;
}
.clearfix2:after { clear: both; }
.clearfix2 { zoom: 1; }

5. Apprendre CSS3

[ onextrapixel ] The No-Pressure Introduction to CSS3 — Utiliser CSS3 dès maintenant est possible. Cet article fait le point sur les différentes propriétés CSS3 avec des exemples concrets, tout en précisant leur niveau de prise en charge par les différents navigateurs, avec ou sans préfixe vendeur. L’auteur n’a pas oublié les nouveaux sélecteurs — tout aussi intéressants, sinon plus, que les «effets» — ni les Medias Queries ou Font-Face. Il nous donne en prime quelques liens vers des sites qui brossent CSS3 dans le sens du poil.

6. Box-Shadow sexy sans image

[ Nicolas Gallagher ] CSS drop-shadows without images — L’article explique comment appliquer simplement des ombres portées originales en utilisant les pseudo-classe :before et :after. Voir la démonstration.

Par exemple :

.drop-shadow {
   position:relative;
   width:90%;
}
.drop-shadow:before,
.drop-shadow:after {
   content:"";
   position:absolute;
   z-index:-1;
   bottom:15px;
   left:10px;
   width:50%;
   height:20%;
   max-width:300px;
   -webkit-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
   -moz-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
   box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
   -webkit-transform:rotate(-3deg);
   -moz-transform:rotate(-3deg);
   -o-transform:rotate(-3deg);
   transform:rotate(-3deg);
}
.drop-shadow:after{
   right:10px;
   left:auto;
   -webkit-transform:rotate(3deg);
   -moz-transform:rotate(3deg);
   -o-transform:rotate(3deg);
   transform:rotate(3deg);
 }

7. Feuille de style spécialisées pour les mobiles

[ Alsacréations ] Une feuille de styles de base pour le Web mobile — Raphaël nous propose un exemple de feuille de style CSS pour les médias mobiles qui condense les bonnes pratiques à respecter :

Fixer le Viewport,
Passer tous les éléments de largeur fixe en largeur automatique,
Fixer une largeur maximale de 100 % aux éléments potentiellement problématiques,
Gérer les mots longs,
Passer à une seule colonne,
Masquer les éléments superflus,
Afficher un message personnalisé.

8. «Faire avec» Internet Explorer

[ Design your way ] Internet Explorer In A Web Designer’s Life – Problems And Solutions –De plus en plus de développeurs et d’intégrateurs web déclarent ne plus prendre en charge IE6 dans leur projet de développement. Si ce n’est pas votre cas, sachez qu’il existe des outils pour se faciliter la vie avec le dernier de la classe (IE6) en particulier et Internet Explorer d’une manière générale. Via @_jiann.

Outils d’aide au développement

Scripts

Outils CSS3 /HTML5

Tester votre site

Articles et discussions

→ Lire aussi les articles tagués Internet Explorer, IE6 et commentaires conditionnels.

9. Compatibilité CSS et Internet Explorer

[ msdn ] Compatibilité CSS et Internet Explorer — Si votre site Web est destiné à être utilisé avec certaines anciennes versions d’Internet Explorer, vous devez connaître leur niveau de conformité à la spécification CSS. Cette article contient une vue synthétique des spécifications CSS prises en charge dans les versions récentes d’Internet Explorer et dans Internet Explorer 8.

10. Apprendre Photoshop en vidéo

[ Lifehacker ] Learn The Basics Of Photoshop: The Complete Guide — Un dossier composé de textes et de vidéos sur l’apprentissage des bases de Photoshop en cinq parties distinctes et complémentaires :

Articles sur le même sujet

WordPress — Un blog version «mobile» sans plugin

Bruno Bichet — Tue, 02 Sep 2008 07:45:47 +0000

Avec la réduction des tailles d’écrans qui va des téléphones portables aux ultra-portables comme l’eeePc, il devient urgent de proposer aux visiteurs une version mobile de votre blog. Il existe de nombreux plugins pour WordPress permettant d’obtenir une version mobile ou une version iPhone, mais je me suis amusé à chercher une solution minimaliste pour afficher mes derniers articles sans fioriture.

J’ai écarté la mise en place d’un style switcher pour changer la feuille de style CSS standard par une CSS spécifique aux mobiles ; difficile dans ce cas de partager une URL de type http://mobile.css4design.com ! Sans compter la reconnaissance des périphériques qui va du format 240 x 320 pixels des téléphones portables aux 800 x 480 pixels des premiers eeePC !

Créez votre version mobile à partir des modèles de pages WordPress

Je suis donc partie sur l’idée d’utiliser le moins de ressources possible (y compris intellectuelles) et de voir ce qu’il est possible de faire sans quitter WordPress. La création d’une nouvelle Page Version mobile basée sur une le Modèle de page mobile.php s’est imposée :

Créez votre template mobile :

        


    
            
                css4design | Version mobile du blogzine d'un intégrateur web
            

        
            
            
            Publié le  par .

Créez ensuite une nouvelle Page (Ecrire -> Page),
Donnez-lui le titre Version mobile,
Sélectionnez le modèle de page mobile (Modèle de page -> choix du modèle dans la liste déroulante),
Enregistrez, c’est fini.

Ce template affiche les 5 derniers billets et il suffit de modifier le paramètre showposts="5" pour l’adapter à vos besoins en gardant à l’esprit que le poids de votre page fait partie des éléments à surveiller de près pour un affichage optimum sur un téléphone portable notamment.

En savoir plus : sur la création d’un modèle de page et sur les boucles WorPress.

les plus

Basique, permet d’aller à l’essentiel : proposer un lien pour afficher les 5 derniers billets sans formatage, donc accessibles depuis n’importe quel périphérique accédant au web,
Service minimum, rapidité maximum ;)
l’identifiant dans le body permettra de styler légèrement cette version mobile de votre blog (changer la taille de la police de caractère, gérer les interlignage de texte, etc.)

Les moins

Il s’agit d’une page unique qui ne permet pas (d’après des tests rapides) l’affichage des commentaires de l’article,
Les liens internes pointent vers la version standard,
Il ne s’agit pas d’une vraie version mobile (manque le Doctype adapté, code HTML non-valide au regard des possibilité des mobiles, page encore un peu lourde, etc.),

Ressources pour la conception de pages web « mobiles »

Voici quelques liens en relation avec la conception de sites pour mobiles :

ready.mobi — Cet outil de test gratuit évalue la conformité de votre page ou de votre site web au regard des standards et des bonnes pratiques spécifiques à ce secteur d’activité. Les résultats se présentent sous la forme d’une note de 1 à 5 et d’une analyse approfondie de la page pour en évaluer les performances sur un périphérique mobile. Nombreux conseils pour corriger les erreurs.
dev.mobi — Toutes les informations pour développer votre site mobile ready : guide du développeur, outil pour construire votre site rapidement, etc.
Votre blog sur un téléphone portable, really ready ? — Présentation détaillée de ready.mobi avec l’analyse de mon blog.
W3C mobileOK Checker [Beta] — Make your Web site mobile-friendly! Déclinaison pour mobile du validateur du W3C.
Developing Wireless Content using XHTML Mobile — Cet article montre comment créer un document XHTML adapté aux périphériques mobiles : mise en place de l’environnement de travail et transformation d’un document XHTML en WML.

Peut mieux faire !

Coluche vous le dirait, cette solution ne promet pas le grand soir, mais juste à manger et à boire ;) Elle s’inscrit dans une démarche visant à proposer aux lecteurs différentes manières d’accéder aux articles en complément des flux RSS. N’hésitez pas à proposer vos idées pour l’améliorer (notamment pour afficher les commentaires, n’afficher qu’un seul article avec pagination pour alléger la page, etc.).

Articles sur le même sujet

Votre blog sur un téléphone portable, really ready ?

Bruno Bichet — Sat, 21 Apr 2007 03:41:07 +0000

Des fois c’est facile, des fois… pas facile. Pourtant, un site web ou un blog devraient être accessibles depuis n’importe quel périphérique, y compris un téléphone portable. Après la lecture du billet de Nico, j’ai testé mon blog sur le site .mobi qui a évalué ma page d’accueil sur une échelle de 1 à 5 en fonction de sa lisibilité sur un petit écran, de sa taille et de l’estimation de sa vitesse (ou coût) de chargement. Le tout en une trentaine de tests. Strict is the way…

Comme vous pouvez le constater, avec une note de 2 sur 5, mon blog n’est pas mobile ready. A cause notamment du marquage XHTML non valide au regard des possibilités de traitement des navigateurs embarqués. Au moins ais-je échappé à la shame frame ^^

Le résumé des tests est sans appel, mais plein d’enseignements : un lien sur chaque élément pris en compte détaille les raisons de l’échec. Sans oublier les avertissements ou les commentaires sur les spécificités non bloquantes à prendre tout de même en considération pour une meilleure accessibilité de mon contenu sur ces petits appareils.

Résultats des tests

Ce blog échoue donc lamentablement à sept d’entre eux :

La page n’est pas conforme à XHTML-MP (wap 2.0, formulation de XHTML à l’usage des périphériques mobiles), ni même à un autre langage comme :
- i-mode (cHTML)
- wap 1.0 (WML)
Le marquage XHTML n’est de toute façon pas valide ! C’est vrai que j’ais laissé la DTD Strict Made in Dotclear alors que je devrais mettre une DTD Transitionnal. (c’est fait depuis la capture),
Taille des images. Au moins une image n’a pas de hauteur ou de largeur spécifiée,
Mesures. Des dimensions spécifiées en pixel ou de manière absolue sont détectées dans la feuille de style,
Feuilles de style. Mon utilisation des feuilles de style n’est pas en accord avec les bonnes pratiques. L’usage des styles en ligne en est principalement la cause. Mais aussi l’utilisation des balises sup ou del mal prises en charge par les navigateurs mobiles,
La taille de la page (en incluant les images et les feuilles de styles) est trop importante : si le code HTML se stabilise à 68 ko, la page complète pèse dans les 277 ko… Depuis, j’ai remplacé Prototype et script.aculo.us par la Splash Box de Xuxu pour l’effet lightbox, et j’ai installé jQuery en version compressée pour le reste : j’ai économisé plus de 50 ko,
La page est liée à trop de ressources externes, (images, feuilles de styles et autres objets) ce qui ajoute du temps au chargement de la page.

Avertissements et commentaires

Grâce à ces derniers, j’en ai appris davantage sur les éléments à prendre en compte lorsqu’on veut cibler les navigateurs embarqués dans les appareils mobiles. Répétez avec moi :

J’évite de concevoir mes pages web avec des propriétés display ou float,
Je garde sur un coin du bureau un post-it pour me souvenir que la plupart des périphériques mobiles ne supportent pas Javascript,
Je mets le focus sur les champs input pour faciliter la saisie, et je fournis des valeurs sélectionnées par défaut,De toutes manières, étant données les limitations typiques des formulaires sur les appareils mobiles, une interface utilisateur devrait autant que possible en minimiser l’usage, Lorsque c’est possible, je privilégie les checkbox, radio, et autres button qui ne nécessitent pas de saisie fastidieuse,
Je me retiens d’utiliser des tableaux qui sont par nature difficiles à rendre sur ces petits appareils,
J’utilise les accesskeys sur tous les liens,
Pour finir, je place un fichier sitemap.gz à la racine du site. Chez moi il s’appelle sitemap.xml… je changerais le nom à l’occasion.

Résumé

Pour être mobile ready un site web devrait donc :

Posséder un code XHTML non seulement valide, mais conforme au XHTML-MP, ou en tout cas débarrassé de certaines balises comme sup, del, ou table,
Spécifier les dimensions des images,
Abandonner les unités de mesures fixes (sauf peut-être pour les images) au profit des unités relatives comme em, ex ou %,
Éviter les styles CSS en ligne comme style= »border: 0; » par exemple,
Limiter (voire supprimer) les liens vers les ressources externes comme les scripts, ou les balises object,
Etre léger, léger…

Malgré le haut-débit et la puissance des processeurs, l’allègement des pages web est toujours d’actualité

Le poids des mots, le choc des photos

Faire un site adapté aux périphériques mobiles ne se limite pas à modifier quelques balises et à en supprimer d’autres. Car même en ne visant que les navigateurs compatibles WAP 2.0, le poids total des pages handicape la plupart des blogs et des sites web.

Toutefois, rien n’est gravé dans le marbre et il est toujours possible d’alléger la page. A cet égard, le choix d’une librairie Javascript légère et évolutive est essentiel. Nous faisons trop souvent comme si le chargement des éléments tels que les CSS ou Javascript dans le cache du navigateur à la première requête, nous autorisait à être léger sur l’accessibilité et à avoir la main lourde sur les effets graphiques ou les animations.

Suite à ces tests, je me suis rappelé que chaque jour, près de 75% des visiteurs venaient ici pour la première fois, et qu’une partie non négligeable, repartait après la première page vue. Ces visiteurs-là n’ont pas le temps d’apprécier les bienfaits de la mise en cache par le navigateur ! Reste l’étude de la mise en cache via PHP qui pourrait — avec compression gzip — faire l’objet d’un autre billet.

L’avenir appartiendrait-il aux flux Atom et RSS…

On peut envisager de détecter le navigateur et décider de charger ou non ces ressources, mais cette approche ne règle pas les autres particularités des navigateurs embarqués concernant notamment les propriétés float. Et encore je ne parle même pas des unités de mesure trop souvent définies en pixels.

Pour moi, la solution se trouve du côté des flux Atom ou RSS qui vont à l’essentiel du contenu. A cet égard, j’ai trouvé I Feed You qui permet de convertir un fil RSS/Atom au format Wap et i-mode pour suivre l’actualité d’un site ou un blog très simplement depuis un mobile.

…avec du semacode dedans ?

C’est déjà pas mal. Mais sachez que nous pouvons épargner cette fastidieuse saisie de l’adresse du flux en question en utilisant les tags visuels de semacode.

Alors n’hésitez plus, et créez un code barre pour le flux RSS/Atom de votre blog. Il sera ainsi facilement accessible aux utilisateurs d’un mobile avec appareil photo.

PS : Si vous connaissez un bon lecteur de flux pour téléphone portable, ou d’autres solutions, c’est le moment de dégainer :)

Stay tuned and mind the gap!