Création d'un site responsive design

Discussion dans 'Demandes d'avis et de conseils sur vos sites' créé par webilyas, 8 Octobre 2015.

  1. webilyas
    webilyas WRInaute discret
    Inscrit:
    9 Mai 2006
    Messages:
    105
    J'aime reçus:
    0
    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 !
     
  2. MikeR
    MikeR WRInaute passionné
    Inscrit:
    9 Janvier 2010
    Messages:
    1 416
    J'aime reçus:
    0
    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.
     
  3. webilyas
    webilyas WRInaute discret
    Inscrit:
    9 Mai 2006
    Messages:
    105
    J'aime reçus:
    0
    Le fichier CSS d'un template responsive ?
     
  4. HawkEye
    HawkEye WRInaute accro
    Inscrit:
    23 Février 2004
    Messages:
    13 932
    J'aime reçus:
    4
    Vu le look du site, pour le passer en "responsive", il suffit de faire flotter quelques éléments ;)
     
  5. Olargues
    Olargues WRInaute passionné
    Inscrit:
    10 Août 2003
    Messages:
    1 155
    J'aime reçus:
    0
    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.
     
Chargement...
Similar Threads - Création responsive design Forum Date
Création site sur wix et responsive web design Développement d'un site Web ou d'une appli mobile 9 Mars 2013
Création d'une version mobile supplémentaire plutôt qu'une version responsive unique Référencement Google 26 Mai 2017
Création d'une rubrique communiqués sur mon site Développement d'un site Web ou d'une appli mobile 19 Août 2020
Xenforo est-il un outil de création de forum adapté aux petites structures Demandes d'avis et de conseils sur vos sites 20 Avril 2020
Création de catégories et SEO ? Débuter en référencement 19 Avril 2020
Création d'un nouveau site dans un site déjà existant Débuter en référencement 16 Avril 2020
Création d'une vue Google Analytics sans sous-répertoires Google Analytics 5 Mars 2020
Création d'entonnoirs de conversion depuis les différentes campagnes d'acquisition Google Analytics 5 Février 2020
Création de sous domaine utile ? Noms de domaine et référencement 23 Janvier 2020
Création URL de redirection pour Référencement google my business Débuter en référencement 7 Décembre 2019