Voilà donc un article utile dans la conception de site webresponsive, et qui me sert aussi de pense bête, pour la conception de mes prochains sites.
Le coté “webresponsive” est très important sur les sites internet actuels d’autant plus quand on sait que sur les 55.4 millions d’utilisateurs internet en France (pour une population totale de 66.1 millions), 1 visite internet sur 3 ce fait depuis un smartphone et 1 visite internet sur 10 depuis une tablette.
Pour ma part, je conçois 90% des sites web en webresponsive, et je vous propose de partager un petit fichier que j’ai compilé et que j’utilise régulièrement dans ce but.
A savoir que ce fichier est le résultat de mon expérience, il n’est donc pas parfait, mais je l’ai conçu sur la base de 10 paliers (du très vieux smartphone, au pc / écran très haute résolution, en passant par les tablettes entre autre), qui jusqu’à présent m’ont donnés satisfaction dans la conception de mes différents site internet, perso et clients.
Il s’agit d’un fichier css, à inclure dans le header d’un site web, ou alors en récupérant son contenu et en le copiant collant dans le css principal du site internet.
/* Responsive adaptation by WolwX.net -- DEBUT */
/* http://www.mydevice.io/devices/ -1- tres vieux smartphones (=>2010) */
@media (min-width: 0px) and (max-width: 319px) {
}
/* http://www.mydevice.io/devices/ -2- vieux smartphones (=>2012) */
@media (min-width: 320px) and (max-width: 320px) {
}
/* http://www.mydevice.io/devices/ -3- vieux smartphones (=>2013) */
@media (min-width: 321px) and (max-width: 360px) {
}
/* http://www.mydevice.io/devices/ -4- common smartphones (>=2014) */
@media (min-width: 361px) and (max-width: 479px) {
}
/* http://www.mydevice.io/devices/ -5- common phablets et tablets */
@media (min-width: 480px) and (max-width: 767px) {
}
/* http://www.mydevice.io/devices/ -6- tablets et vieux PC */
@media only screen
and (min-width : 768px) and (max-width: 1023px){
}
/* http://www.mydevice.io/devices/ -7- tablets et vieux PC */
@media only screen
and (min-width : 1024px) and (max-width: 1279px){
}
/* http://www.mydevice.io/devices/ -8- vieux PC */
@media only screen
and (min-width : 1280px) and (max-width: 1599px){
}
/* http://www.mydevice.io/devices/ -9- PC actuels */
@media only screen
and (min-width : 1600px) and (max-width: 1679px) {
}
/* http://www.mydevice.io/devices/ -10- pc high tech et plus */
@media only screen
and (min-width : 1680px) {
}
/* Responsive adaptation by WolwX.net -- FIN */
Petit point important pour l’utilisation de ce fichier CSS, il vous suffit bien entendu de simplement rajouter votre code CSS classique dans l’intervalle de chaque palier, mais surtout, si vous ne souhaitez pas modifier le contenu de vos CSS WordPress / Prestashop ou autre thème CMS, tout en forçant le votre comme prioritaire, il vous faudra inclure “!important” en fin de ligne.
Exemple :
/* http://www.mydevice.io/devices/ -4- common smartphones (>=2014) */
@media (min-width: 361px) and (max-width: 479px) {
#header.logo {
max-width:"350px"!important;
}
}
N’hésitez pas à me faire un retour si vous constatez des paliers bizarres ou non fonctionnels, ou encore si vous avez des suggestions 🙂