lucmuller.free.fr v4 - Soyons adaptatif

La précédente refonte de mon site datait de 2009, il était temp de se remettre au gout du jour.

Je suis aujourd'hui, fier de vous présenter la v4 qui est aussi ma première tentative d'une approche responsive de conception de site Internet.

Du coté du code

Sachant que ce sité était encore basé sur du code de 2006, je dois avouer qu'il n'était pas franchement développé dans les rêgles de l'art. C'était un joyeux mélange de code php et html imbriqué. Pour réaliser cette nouvelle intégration, je suis passé par une première phase de redéveloppement de tout l'affichage frontend du site. Je suis assez fier d'avoir une structure a présent à peu prêt mvc avec un pseudo système de templates en php.

Il est à noter qu'on est censé y gagner en terme de performance. l'amélioration du système de requettage de la base de donnée me permet de passer de 55 requète à 18 pour l'affichage d'un article. détail d'article qui possède d'ailleurs des fonctionnalités supplémentaires telle que la pagination vers les articles suivants et précédent s'il y a lieu.

Et nous y voila...

Un nouveau (responsive) design

Fini le site centré, étant passé depuis peu sur un portable à écran full HD, je n'en pouvais plus de voir de tout petits sites centrés sur une colonne ridicule au centre de mon écran. Il fallait que quelque chose change.

Je me suis donc inspiré de différents travaux que j'ai vu sur le net.

L'élément déclencheur a été le site de Benjamin Azan. son approche a la fois minimaliste et pleine largeur m'a séduite, et je dois avouer m'être un peu beaucoup inspiré de sa page pour conceptualiser la mienne.

Mais l'approche responsive m'a aussi donné pas mal de boulot. Pour pouvoir adapter le site automatiquement à toutes les résolutions, sans toutefois utiliser de framework CSS complet. J'ai du me mettre en quête de ce qui me semblait être les concepts les plus interessants pour gérer la mise en forme multiple de ma page web.

De ce point de vue là, je me suis arrêté sur deux projets qui m'ont servi à m'inspirer pour ma feuille de style.

Le premier : inuit.css qui propose un système de grille fluide vraiment très interessante. N'ayant pas besoins de toutes ces colonnes, je me suis donc créer une grille de mise en page de 100% 50% 33% et 25% avec ou sans marges de 3% et 5%. Ce système me permet de réaliser simplement tout le système de colonne du site.

Le second est le framework de Raphael Goetter : knackcss dont j'ai repris un certain nombre de ligne notamment au niveau du reset des styles principaux du navigateur.

Mais il est surtout grandement basé sur Wtfcss mon framework ultraléger qui permet de tout faire

Voila pour la structure.

Mais il fallait tout de même quelques éléments graphiques.

Des éléments graphiques

Les boutons sont issus de twitter bootstrap. je trouve ces boutons vraiment jolis et engageant. Je n'ai concervé que le strict minimum pour les mettre en forme et ai créé les déclinaisons de couleurs en fonction de mes besoins.

L'iconographie quant a elle, est réalisée via une font de glyph : Font-Awesome. Ce système est d'ailleurs vraiment bien fait. je vous le recommande.

les icones se trouvant dans la colonne de gauche sont elle toujours celle d'Aquaticus Social Icon Pack.

L'approche responsive webdesign elle, je l'espère sera efficace. Je ne me suis pas basé sur les largeurs d'écrans des différents appareil mobiles pour la réaliser, mais simplement sur la largeur du navigateur. De ce fait, si vous redimenssionnez votre navigateur, la mise en forme devrait évoluer selon la largeur ou la hauteur de votre zone d'affichage.

J'ai, je l'espère, prévu une mise en forme différentes pour quasiment toutes les résolutions possibles entre 0 et 1980px de large en mode paysante et 0 et 1024px de large en mode portrait.

Les polices elles sont fournies par google font il s'agit de Lobster pour les titres et certains élément graphique et d'Open-Sans pour le corps de texte

J'espère que cette nouvelle mise en page vous plaira et qu'elle saura nous accompagner pendant encore quelques années.

Viper mardi 14 mai 2013 : 21:22 Général

Liberté d'expression :

Gravatar de

Par fran6t, lundi 03 juin 2013 à 07:00

Beau travail, bravo j'accroche 100% avec ma config de tous les jours. On pourrait presque lancer une galerie des lecteurs, chaque lecteur pourrait t'envoyer une copie de son cran avec ce blog. Tiens voici une copie du mien sur une ubuntu 12.04 avec un vieux portable 15pouces Dell http://blog.passion-tarn-et-garonne.info/public/C/capture-ecran/Capture_du_2013-06-03_08_56_48.png

Gravatar de

Par Luc, lundi 03 juin 2013 à 19:14

Merci beaucoup.
J'ai regard ton screenshot, il faudrait que j'adapter la colonne de droite cot du formulaire pour que les derniers articles et ceux de la mme catgorie passent sur une seule colonne, se serait un peu plus lisible :)

Flux RSS des commentaires

Donner son avis

les indications suivies d'un * sont obligatoires

Filtre anti-spam

Votre IP est : 54.92.167.9.
En cliquant sur poster, vous acceptez qu'elle soit enregistrée et vous engagez à ce que votre commentaire respecte la législation en vigueur.
Je supprimerai tout commentaire hors de propos.

Se souvenir de mes informations