Optimisation de code responsive pour site joomla

Bonjour à tous,

Mon site web terminé, je souhaiterais maintenant le rendre responsive sur smartphones et tablettes en mode portrait et paysage...J'utilise le template beez3 de joomla que j'ai complété pour rendre mon site responsive sur la plupart des smartphones et tablettes (enfin j'espère)...Ci-dessous, la partie du code qui gère les smartphones (personnal.ccs). Je ne m'y connais pas assez pour assurer que ce code est complet et bien écrit si bien que je préfère faire appel à vous.

Pouvez-vous jeter un œil à ce code (les différents "mediaquery" utilisés se ressemblent) et me dire s'il prend en charge les smartphones les plus communs ? Comment l'optimiser un peu ? Votre aide me rassurera un peu sur la pertinence de ce code et de sa clarté...Par avance merci !

/* responsive */
#mobile_select h2 {border:0; margin:-17px 0 0 0; padding:0; background:#0C1D43;text-align:right}
#mobile_select h2 a {
display:inline-block;
font-size:0.8em;
border-radius:4px 4px 0 0;
padding:6px;
font-size:0.75em;
margin-right:5px;
}


@media only screen and (max-width: 800px) {
	img { 
  max-width: 100%;
  height: auto;
  border: 0;
  -ms-interpolation-mode: bicubic;
}


	#fontsize{display:none}
	#nav,#wrapper2,#wrapper,.cols-3,.column-1,.cols-3 .column-2,.cols-3 .column-3,#right,.box,#header form
   {
		float: none;
		width: 100%
	}
	#header {padding-top:3em}
	#header form  {margin:0}
	.logoheader {background:#0C1D43; min-height:100px; margin:0}
	.box {
		border-left: 0 !important;
		border-bottom: solid 1px #ddd;
	}
	#line {
		text-align: center;
		top: 0;
		right: auto;
		max-width: 100% ;
		min-width:100%;

		margin: 0 0px; background:#095197;
	}
	#header form input {
		float: none; margin-bottom:4px
	}
	#menuwrapper { margin-top:10px; }
	#header ul.menu {position:relative; top:0;left:20px; right:20px; margin:0; width:90%; border-radius:4px}
	#header ul.menu li:first-child a {border-radius: 4px 4px 0 0}
	#header ul.menu li:last-child a {border-radius:0 0 4px 4px }
	#header ul.menu li a:link,
	#header ul.menu li a:visited {
		display: block;
		padding: 6px 10px;
		border-bottom: solid 1px #ccc
	}
}

@media only screen and (-webkit-min-device-pixel-ratio: 1.5) , only screen and
		(min--moz-device-pixel-ratio: 1.5) , only screen and
	(min-device-pixel-ratio: 1.5) { /* Styles */
}


/* Partie ajoutée par moi  */
/* change image de fond du logo */
#header .logoheader {
    background-color: #A7396D;
    background-repeat: no-repeat;
    background-size: contain; 
    background-position: top center;
  }


/* pour SMARTPHONES - mode portrait  */
@media only screen and (max-width: 640px) {

/* supprime ligne taille de police */
#header #line {
    display: none;
    visibility: hidden;
  }

/* largeur des articles quand colonne de droite seule */
#wrapper {
    width: 78%;
  }  
   
/* supprime espace au-dessus du logo */
#all #header {
    padding-top: 0;
  }
    
/* change image de fond du logo */
#header .logoheader {
    background-image: url(../images/personal/bandeau.png);
    min-height: 98px;
  }
    
/* positionne le menu mobile */
#header #mobile_select {
   margin-top: 17px;
  }
}


/* pour TABLETTES (minimum 768px et maximum 1024px) */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {

/* supprime ligne taille de police */
#header #line {
    display: none;
    visibility: hidden;
  }

/* largeur des articles quand colonne de droite seule */
#wrapper {
    width: 78%;
  }  
   
/* supprime espace au-dessus du logo */
#all #header {
    padding-top: 0;
  }
    
/* change image de fond du logo */
#header .logoheader {
    background-image: url(../images/personal/bandeau.png);
    min-height: 217px;
  }
    
/* positionne le menu mobile */
#header #mobile_select {
   margin-top: 17px;
  }
}

/* pour SMARTPHONES - mode paysage (maximum 640px) */
@media (orientation: landscape) and (max-device-width: 640px) {

  /* supprime ligne taille de police */
#header #line {
    display: none;
    visibility: hidden;
  }

/* supprime espace au-dessus du logo */
#all #header {
    padding-top: 0;
  }
  
/* change image de fond du logo */
#header .logoheader {
    background-image: url(../images/personal/bandeau.png);
    min-height: 174px;
  }
}

Salut,

Perso je ne défini pas mes breakpoints en fonction des derniers périphériques à la mode (c'est pas pérenne comme manière de faire, selon moi) mais plutôt en fonction de l'interface. Quand est-ce que la lecture n'est plus agréable ? Quand est-ce que le layout se casse ? etc ...

Avec cette façon de faire c'est carrément impossible de te dire si tu as bien fait ton responsive ou pas.

Bonjour Gili,

Je te remercie pour ta réponse. En fait, je ne me suis pas posé de questions sur le périphérique utilisé et je ne sais pas si mon code est valable pour les derniers périphérique à la mode. Les breakpoint de mon code correspondent aux tailles caractéristiques que j'ai trouvées sur le web pour les smartphones et tablettes. C'est un vrai casse-tête car lorsque le code marche pour deux portables (le bandeau en page d'accueil s'ajuste bien), il ne marche pas pour un troisième périphérique et vice versa...Je n'arrive pas à dire si oui ou non mon code est bien "écrit" et optimal pour prendre en compte les interfaces possibles (smartphones et tablettes en mode portrait et paysage). Dans les grandes lignes, le code visible dans mon post précédent permet d'ajuster correctement le bandeau à la taille de l'écran utilisé...L'aspect graphique est celui définit par défaut dans beez3 que je n'ai pas changé par simplicité.

En privé, je peux te transmettre l'adresse du site...