Avec l’expansion des mobiles et des sites pour mobile, il est temps de coder en HTML 5 et de profiter des nouvelles valeurs du tag « input », qui améliorent l’expérience utilisateur en proposant « parfois » un clavier adapté à la saisie, voir une validation automatique.

Voici un article du site Quirksmode.org qui test et fait un bilan du rendu de ces nouvelles valeur du tag « input ».

Si vous pensiez que input type="search" afficherait la petit croix pour vider la saisie, c’est perdu

http://www.quirksmode.org/html5/inputs_mobile.html

Vous n’êtes toujours pas décidé à renoncer aux anciens navigateur tel que Interne Explorer 6 et autres… Peut être que cette article vous aidera à prendre cette décision. Il serait dommage de ne pas profiter des avantages que nous apportent HTML 5 et CSS 3.

Osez renoncer aux vieux navigateurs

Oui c’est possible est le travail qui à été fait pour arriver à ce résultat est impressionnant.

A découvrir au plus vite Pure CSS GUI icons

J’ai déjà parlé de plusieurs sites proposant un tableau de compatibilité des différents tag et fonction HTML5 et CSS3

En voici un nouveau qui intègre en plus les navigateur pour mobile et précise de plus la syntaxe si la fonction nécessise une écriture particulier (tel que -moz – webkit) pour fonctionner

Can I use…

Après HTML5 et Email Boilerplate voici Mobile Boilerplate, un template type pour partir sur de bonnes bases pour un site web pour mobile.

http://html5boilerplate.com/mobile

Vous voulez faire un site web adapté aux mobiles (smartphone, tablette…) Voici un flipcards des bonnes pratiques du web mobile.

Flipcards sur les Bonnes Pratiques du Web Mobile

A quoi ressemble votre site sur un mobile ??? Voici un émulateur qui vous donner une petite idée du résultat. C’est l’occasion de tester vos Media Queries

http://emulateurmobile.com/

Besoin d’un validateur pour HTML5, voici l’adresse : http://html5.validator.nu/

Avec HTML5 et l’arrivée de nouveau tag tel que ARTICLE, SECTION… on à du pain sur la planche et les navigateurs ne nous aide pas dans l’utilisation de ces tag puisqu’ils ne les gèrent pas tous. Du coup par manque de pratique, un guide sur le fonctionnement de chacun ne peu qu’aider.

Voici un site qui répondra à ce besoin, il est sobre, simple et efficace : HTML Elements and Attributes

Envie d’adapter vos CSS aux différents support de lecture (smartphone, tablette etc…) : Voici un tutoriel en vidéo qui vous expliquera comment utiliser les media queries dans vos fichier CSS afin d’adapter le design de votre site dans différents formats.

Tutoriel Vidéo xHTML-CSS : Design « Responsive »