Actualités Themes

Refonte du design (Et Rebelote)

Comme vous devez le constater, le site a été entièrement refondu en essayant de tirer parti des guidelines Android. Vu qu’en ce moment il y a plus d’articles Android que d’articles PHP (même si certains sont en approche), il m’a semblé normal de le refondre tel quel. Je vais donc vous faire un petit tour des particularités de ce nouveau thème. Si certains d’entre vous sont intéressés par la suite, merci de me l’indiquer dans les commentaires.

Présentation Générale

Comme dit plus haut, le thème se base sur les guidelines Android et utilise donc la touche graphique du thème Holo.Light. Pourquoi le light et non le Dark? Juste une histoire de goût. Je le trouve plus sobre et classe que son contraire. Vous verrez que je joue beaucoup avec les 5 couleurs d’Android. A savoir le bleu, violet, vert, jaune/orange, rouge. J’en joue tellement que selon l’emplacement de votre widget, il optera directement pour une de ces couleurs. Idem au niveau du footer et du header.

Le Header

Le header est composé de 3 éléments. Une ActionBar repensée dans l’esprit d’Android. Au niveau de l’Overflow (les 3 points à droite) vous avez accès aux pages du site. A savoir Contact et A propos (sera mis à jour dans les prochains jours). Bien entendu, le header est responsive et changera de forme pour pouvoir fonctionner parfaitement sur smartphones et tablettes.

On se croirait sur tablette non?
On se croirait sur tablette non?

Ensuite arrive les icônes sociaux à droite. Ils sont au nombre de 6. Vous aurez donc droit, dans l’ordre, aux feeds, mon twitter, mon linkedin, mon Google+, ma bibliothèque GitHub et la liste de mes applications Android. Pourquoi n’y a t’il pas la possibilité de rajouter facebook? Je ne trouve pas facebook professionnel.

Ils sont pas beau?
Ils sont pas beau?

Pour finir, vous trouverez à gauche l’emplacement pour un Logo et un sous-titre pour votre site.

Les Widgets

Les widgets à droite ont pour base celui de GMail sur Android (et oui encore un énorme clin d’oeil). Il faut savoir que tous les widgets ne sont pas obligatoirement adaptés à ce thème. Je ne me suis concentré que sur ceux que j’utilisais et encore, avec ceci, j’ai dû en recréer deux pour qu’ils s’adaptent parfaitement. Il s’agit des commentaires récents et des Posts Populaires. Bien entendu, ils sont arrangés de telle façon à être disposées sur la sidebar ou dans le footer. 

Ah, il est en seconde position. D'où le vert
Ah, il est en seconde position. D’où le vert

Pour ce qui est du footer, j’ai joué sur la sobriété pour l’apparence des widgets. Malgré tout, on retrouve les mêmes bases entre les deux emplacements.

Sobre n'est-il pas?
Sobre n’est-il pas?

Article et Formulaires

Pour ce qui est des différents cadres pour séparer chaque article, pages, formulaires, bloc de commentaires, … je me suis inspiré des cartes dans Google Now. L’intégration avec les rajouts Jetpack est bien fonctionnelle et se marie très bien avec le thème.

Oh j'ai une card dans Google Now
Oh j’ai une card dans Google Now

Pour ce qui est des formulaires, vous avez certainement reconnus le design Android aussi ici. Pour le réaliser, ça n’a pas été simple. Surtout pour son intégration. D’ailleurs  si vous voulez le code à rentrer dans Contact-Form-7 pour qu’il s’intègre parfaitement au thème, n’hésitez surtout pas à me le demander.

Je suis sur une appli native?
Je suis sur une appli native?

Conclusion

Voilà pour la présentation du nouveau thème. Vous découvrirez d’autres particularités en navigant à travers le blog. Bien entendu, si vous êtes intéressés par ce thème pour le réutiliser, merci de l’indiquer dans les commentaires. Ce thème est bien entendu compatible IE mais dans ses version 9 et supérieures ainsi que tous les navigateurs utilisant le moteur de rendu Webkit. Firefox n’est pas en reste loin de là.

Voilà à quoi cela devrait ressembler sur votre smartphone
Voilà à quoi cela devrait ressembler sur votre smartphone

Comme indiqué, le site est Responsive. Qu’est-ce que cette bête? Et bien simplement que le site se réadapte automatiquement selon la taille de l’écran. Vous aurez donc le même site avec le même design que vous soyez sur mobile, tablette, ordi, télé, … Pour se faire, j’ai utilisé l’un des nombreux « frameworks » CSS/Html5 existant à savoir le framework Foundation.

Sur ce, je vous souhaite une très bonne journée à tous.