Responsive design

Ce WE je me suis lancé un nouveau challenge : rendre le site responsive !

En effet ça commençais à devenir pénible d'utilisation sur iPhone.

La partie la plus compliquée c'est surement le menu qui se regroupe en un seul bouton quand la taille devient trop petite. J'avais envie d'une solution "100% CSS". C'est possible, mais il faut se rendre à l'évidence, ce n'est pas très pratique. Le problème principal vient d'utilisation de la pseudo class css hover pour afficher le menu au survol du bouton. Mais sur smartphone, le comportement est hasardeux et le menu reste affiché une fois qu'on l'a activé.

Au final, j'ai choisit d'implémenter **Bootstrap C'était pas évident parce que le framework redéfinit beaucoup de classe que j'avais déjà moi-même implémenter (comme les listes, le breadcrumb, la pagination). Il redéfinit aussi la taille de base des polices, ce qui m'a mit tout mon design en vrac. Gros boulot en somme, mais finalement le résultat en valait la peine.

J'ai tout de même réécrit une classe pour la sidebar. La gestion par colonne est intéressante, mais je voulais garder une largeur fixe pour ma sidebar.

.main,.sidebar{
    position:relative;
    min-height:1px;
    padding-right:15px;
    padding-left:15px;
}
@media(min-width:768px){
    .main,.sidebar{ float:left; }
    .main{ border-right:1px solid #d2d2d2; }
}
@media(min-width:768px){.main{ width:67%; }.sidebar{ width:33%; }}
@media(min-width:992px){.main{ width:74%; }.sidebar{ width:26%; }}
@media(min-width:1200px){.main{ width:80%; }.sidebar{ width:20%; }}

En règle générale, cela manque encore aujourd'hui au framework. Je ne sais pas si c'est juste une philosophie à adopter pour être full responsive, mais j'ai du mal à m'habituer aux largeurs flottantes. Je préfère avoir une colonne fixe, et le main qui prend la place restante.

En conclusion, Bootstrap règle qq problèmes (certes assez pénible à implémenter), mais il faut continuer à coder un peu par soi-même pour l'adapter à son besoin.

Bonne trouvaille tout de même.

En espérant que le framework continuera d'évoluer et que je puisse en bénéficier à long terme.

A vos iPhones !!!