Création d'un site responsive design

[webilyas]

bonjour,

j'avais créé pour mon client en 2013 un site non responsive et je le regrette vraiment de ne pas l'avoir adapté.

Je voudrais maintenant le rendre responsive design mais je n'ai aucune connaissance pour l'adapter.

Avez-vous une idée pour rendre le site facilement adaptable, et comment s'y prendre ?

Voici le site en question : camlicatemizlik.net

merci !

 

[MikeR]

Le plus simple serait d'utiliser un template responsive, l'adapter à tes besoins et de remplacer tes classes par celles du template.
Ce n'est pas forcément montrueux come travail.

 

[webilyas]

Le plus simple serait d'utiliser un template responsive

Le fichier CSS d'un template responsive ?

 

[HawkEye]

Vu le look du site, pour le passer en "responsive", il suffit de faire flotter quelques éléments

 

[Olargues]

Yes, assez facile à passer en responsive vu le site.

Etape 1 : décider quelles largeurs d'écran viser. Par exemple
1 : largeur d'écran de 960 pixels et plus
2 : largeur d'écran entre 960 et 524 pixels
3 : largeur d'écran de 524 pixels et moins
A titre indicatif, ça dépend du site. Perso, je mets ordi et tablette dans le même sac et une feuille de style pour mobile.

Etape 2 : ajouter un meta tag viewport

Etape 3 : créer une feuille de style css pour chaque catégorie d'écran décidée ci dessus ou travailler sur la feuille de style de base et la sauvegarder sous un autre nom
Pour donner un truc dans le genre :
<link rel="stylesheet" media="screen and (min-width: 960px)" href="stylesheet960.css" />
<link rel="stylesheet" media="screen and (min-width: 524px) and (max-width: 959px)" href="stylesheet524.css" />
<link rel="stylesheet" media="screen and (max-width: 523px)" href="stylesheet523.css" />

Et adapter chaque feuille de style à la largeur de l'écran.
Par exemple pour un bloc qu'on ne désire pas voir sur un smartphone on utilisera :
#nomdubloc { display: none; }

Chacun à sa technique, c'est assez facile à faire.