Rendre un template HTML responsive

Bonjour a tous,

J'avais y a quelques années, le projet d'un site, mais des événements ont fait que je les mis de côté.

Aujourd'hui, ayant plus de temps et une motivation pour le réaliser, je vais m'y remettre.

Niveau codage PHP/Mysql pour sa réalisation, je pense pouvoir m'en sortir aisement.

Cependant, niveau HTML/CSS, je suis un peu dans le brouillard lol

J'ai depuis le début un template, que je souhaite utiliser, il est en HTML/CSS, et je souhaiterais le modifier en responsive.

Y a t-il une méthode simple pour éffectuer cela ?

Sinon, quel serais le cout d'une mise a niveau de celui ci ?

Amicalement

Arcadia72800

La methode c'est de savoir comment tu veut qu'il se comporte. Ce que tu veut réordonner, caché, gerer tes images, les menus, etc ... . Il n'y a pas de solution toute prête, mais tu peut trouver des exemples de themes et des bases. (template/framework CSS/JS qui peuvent t'inspirer ou te servir de base d’intégration).

J'ai tout fait moi-même et c'était long... d'utiliser correctement les media queries, en revanche j'ai beaucoup appris. J'ai besoin de partager ce que j'ai trouvé, ça peut t'aider.

Pour tester j'ai utilisé Opera Mobile Emulator, et des sites qui sont indiqués ici sur Alsacreations.
http://www.alsacreations.com/article/lire/1634-comment-tester-un-site-responsive-partie-1.html
A en croire Marcotte et son bouquin sur le responsive Web, il faut développer en Mobile First, j'ai suivi son conseil et il avait raison.

En revanche j'ai été lent à comprendre quelle était la syntaxe pour utiliser plusieurs AND dans une media querie... les exemples sont souvent avec deux and, mais ça ne suffit pas. Et j'ai trouvé ici, finalement la syntaxe.
Mon site s'adapte à tout : voilà les media queries que j'ai utilisées.

/* ordinateurs plus de 1920 */
@media all and (min-width:1920px){}

/* ordinateurs et tablettes entre 1024 et 1919 */
@media all and (min-width:1024px) and (max-width:1919px){}

/* Amazon Kindle FIRE HD 8.9 */
@media all and (min-width:600px) and (max-width:1023px) and (min-height:728px){}

/* grands portables */
@media all and (min-width:600px) and (max-width:1023px) and (max-height:727px){}

/* amazon kindle Fire et Kindle HD7 */
@media all and (min-width:350px) and (max-width:599px) and (min-height:780px){}

/* portables orientation paysage */
@media all and (min-width:350px) and (max-width:599px) and (orientation:landscape){} 

/* petits portables orientation portrait */
@media all and (min-width:350px) and (max-width:599px) and (max-height:779px) and (orientation:portrait){} 

/* LG OPTIMUS et modèles analogues */
@media all and (max-width:349px) and (min-height:426px){} 

/* TRES PETITS APPAREILS HTC ou d'avant 2011 */
@media all and (max-width:349px) and (max-height:425px){}

/* Très petits appareils orientation paysage */
@media all and (max-width:349px) and (orientation:landscape){}

En revanche je mets tout en ALL, je crois que ce n'est pas sémantiquement correct, mais je n'ai vu aucune différence quand j'ai testé alors je me suis dit : hop, ALL
Modifié par Alvano (29 Feb 2016 - 10:15)

Le "ALL" auquel Alvano fait référence désigne le type de média concerné (screen, printer, handheld etc).

Ceci est détaillé sur l'article Les types de media de YoyoDesign.org.

Alvano, où as-tu vus que préciser All comme type de média n'est sémantiquement pas correct ? Je doute à croire que ceci ait-à voir avec la sémantique.

C'est possible, mais pas en l'état. En effet le layout est stylé via des images entières. Outre le fait que cette méthode est désuète elle empêche le responsive : les images vont se retrouver tronquées au resize de la fenêtre du navigateur.

Honnêtement, en considérant le travail d'adaptation à réaliser sur un template aussi ancien, perso je repartirai de zéro...
Modifié par Olivier C (29 Feb 2016 - 20:36)