Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

  1. #1
    Membre habitué
    Homme Profil pro
    retraité
    Inscrit en
    mars 2003
    Messages
    316
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Saône et Loire (Bourgogne)

    Informations professionnelles :
    Activité : retraité

    Informations forums :
    Inscription : mars 2003
    Messages : 316
    Points : 133
    Points
    133

    Par défaut Faut-il créer des pages spécifiques pour mobile

    Bonjour,

    j'ai un site http://timbres-de-france.com

    Sur un mobile c'est imbuvable.... et très difficile à adapter, enfin je pense

    Ma question serait-il judicieux de créer des pages spécifiques (avec un condensé de données) et comment rediriger les visiteurs sur ces pages

    Merci et bonne journée
    70 ans quelques dents en moins, mais toujours envie d'apprendre
    Le temps passe 72 ......

  2. #2
    Membre expérimenté

    Homme Profil pro
    développeur
    Inscrit en
    octobre 2013
    Messages
    1 298
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Oise (Picardie)

    Informations professionnelles :
    Activité : développeur

    Informations forums :
    Inscription : octobre 2013
    Messages : 1 298
    Points : 1 607
    Points
    1 607

    Par défaut

    Bonjour,

    En mobile normalement on utilise le mobile first qui consiste à penser le design sur mobile avant les autres devices. Dans ton c'est assez compliqué car le design à été pensé pour laptop. Tu peux en effet rediriger les personnes selon la taille du screen https://stackoverflow.com/questions/...browser-window avec une fonction javascript. Le plus propre serait de rendre le design responsive https://viseo.developpez.com/tutorie...onsive-design/ car en effet avec plusieurs pages cela rendra la maintenance compliqué.

  3. #3
    Rédacteur/Modérateur
    Avatar de jreaux62
    Homme Profil pro
    Webdesigner
    Inscrit en
    août 2008
    Messages
    15 054
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 52
    Localisation : France, Pas de Calais (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Arts - Culture

    Informations forums :
    Inscription : août 2008
    Messages : 15 054
    Points : 30 670
    Points
    30 670

    Par défaut

    Bonjour,

    comme dit précédemment (et préconisé par Google), il faut penser "mobile first".

    • C'est-à-dire écrire le code CSS "par défaut" pour les smartphone.
    • Ensuite, grâce aux media-queries, MODIFIER ce code pour les tablettes/desktop.


    Exemple :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    /* ------------- */
    /* SMARTPHONE (defaut) */
    .....
    /* ------------- */
    /* TABLET */
    @media screen and (min-width:768px) {
    .....
    }
    /* ------------- */
    /* DESKTOP*/
    @media screen and (min-width:1024px) {
    .....
    }
    Remarque : à TOI de définir les "break-point" (768px, 1024px,...) qui vont bien...

    @michel71
    Voici une mise en page "responsive" et "mobile first" (qui correspond à TON site) :

    "Si tu suis le chemin qui s'appelle « plus tard », tu arriveras à la place qui s'appelle « jamais »."
    François Camille Prévot (1910-1996), instituteur puis Directeur d'école et... mon grand-père.
    "Pose ta question, tu seras idiot une seconde. Ne la pose pas, tu seras idiot toute ta vie."
    Albert Einstein (1879-1955).
    Mes tutos DVP
    Gestion-Affichage de Nouvelles
    Affichage en tableau HTML
    Fonctions de redimensionnement d'images

  4. #4
    Membre habitué
    Homme Profil pro
    retraité
    Inscrit en
    mars 2003
    Messages
    316
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Saône et Loire (Bourgogne)

    Informations professionnelles :
    Activité : retraité

    Informations forums :
    Inscription : mars 2003
    Messages : 316
    Points : 133
    Points
    133

    Par défaut

    OK merci,

    je vais regarder ça, mais c'est pas gagner, le site à quelques années et a été "bidouillé" dans tous les sens
    pour adapter les ajouts.
    Je vais essayer de repartir de zéro

    Bonne journée
    70 ans quelques dents en moins, mais toujours envie d'apprendre
    Le temps passe 72 ......

  5. #5
    Membre habitué
    Homme Profil pro
    retraité
    Inscrit en
    mars 2003
    Messages
    316
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Saône et Loire (Bourgogne)

    Informations professionnelles :
    Activité : retraité

    Informations forums :
    Inscription : mars 2003
    Messages : 316
    Points : 133
    Points
    133

    Par défaut

    Bonsoir,

    Plus j'y réfléchi et moins je trouve de solution.
    Si je prends la page index http://www.timbres-de-france.com/index.php
    par exemple, c'est impossible de faire rentrer tout ça dans 375px ! donc ça veut dire que 80% de cette
    page sera zappée volontairement quel intérêt ?
    Pour un site avec des articles qui se suivent (comme les sites des journaux) je comprends mais là ?

    Je suis très dubitatif
    70 ans quelques dents en moins, mais toujours envie d'apprendre
    Le temps passe 72 ......

  6. #6
    Membre expert Avatar de CosmoKnacki
    Homme Profil pro
    Justicier interdimensionnel
    Inscrit en
    mars 2009
    Messages
    1 677
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Charente Maritime (Poitou Charente)

    Informations professionnelles :
    Activité : Justicier interdimensionnel

    Informations forums :
    Inscription : mars 2009
    Messages : 1 677
    Points : 3 492
    Points
    3 492

    Par défaut

    À cœur vaillant rien d'impossible. Juste une idée:

    Déjà tu peux placer tous les éléments du menu de gauche dans le hamburger et la barre de recherche vers la loupe (de même pour la recherche par année). Les infos du type nombre de visiteurs, nombre de pages, date de création, si ces informations te tiennent à cœur, rien ne t'empêche de les mettre en pied de page avec les informations légales et de contact. Tout ce qui ne concerne pas le contact actuellement dans le footer -> direction le menu hamburger (bien sûr il faudra le repenser en catégories principales, sous catégories, etc. pour ne pas qu'il fasse trois kilomètres de long).
    Le topo sur le bloqueur de pub, vire-le, de toute manière ça n'intéresse personne.

    Les anecdotes en début de pages, je me tâte: doit-on les laisser là ou juste se contenter de "Timbres de France: Tout savoir sur les timbres de France et la philatélie" et attaquer directement par l'image du timbre au hasard?

    Ensuite pour le reste, tu mets tous les timbres les uns en dessous de autres de manières à ce qu'ils occupent une bonne partie de la largeur de l'écran. Pour ne pas trop avoir à scroller, tu peux par exemple montrer un ou deux timbres par catégories (mise en vente anticipée 12/02, dernière émissions poste française, Monaco, St-Pierre-et-Miquelon... ) séparées par une barre horizontale et proposer une petite flèche pour les dérouler et voir les autres de la même catégorie.
    Brachygobius xanthozonus
    Ctenobrycon Gymnocorymbus

  7. #7
    Membre habitué
    Homme Profil pro
    retraité
    Inscrit en
    mars 2003
    Messages
    316
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Saône et Loire (Bourgogne)

    Informations professionnelles :
    Activité : retraité

    Informations forums :
    Inscription : mars 2003
    Messages : 316
    Points : 133
    Points
    133

    Par défaut

    Bon, comme préconiser par jreaux62, j'essaie de démarrer mon truc et je suis confronté à un premier problème

    il me semble que le max-width:1200px; n'est pas pris en compte sur mon PC portable (qui est en 1366*768)
    deuxièmement mes largeurs de colonnes gauche et droite semblent identiques et mes stats ne sont pas positionnées correctement

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
     {
      margin:0; padding:0; 
      box-sizing: border-box; /* pour maîtriser width et flex-basis */
    }
     
    #global {
      min-height: 100vh; /* toute la hauteur du viewport */
      display: -webkit-flex;
      display: flex;
      -webkit-flex-direction: column;
      flex-direction: column; /* affichage vertical */
    }
    #global > main {
      display: -webkit-flex;
      display: flex;
      flex: 1 1 auto;
    }
    #global > main > section {
      display: -webkit-flex;
      display: flex;
      flex: 1 1 auto;
    }
     
    #global > main > section > article {
      flex: 1 1 auto;
    }
    /* ---------------------------- */
    /* PHONE (MOBILE FIRST) */
      #global > main,
      #global > main > section {
        -webkit-flex-direction: column;
        flex-direction: column; /* affichage vertical */
      }
      #global > main > nav,
      #global > main > section > aside {
       width: auto;
      }
      #global > main > nav,
      #global > main > section {
        order: -1; /*  en premier */
      }
    /* TABLET - DESKTOP */
    @media (min-width: 768px) {
      #global > main,
      #global > main > section {
      -webkit-flex-direction: row;
      flex-direction: row;
      }
      #global > main > nav {
        width: 20%;
      }
      #global > main > section > aside {
        width: 25%;
      }
    }
    /* DESKTOP */
    @media (min-width: 1024px) {
      #global {
        max-width:1200px;
        margin:0 auto;
      }
      #global > nav {
       width: 15%;
      }
      #global > header > section > article {
        width: 45%;
      }
      #global > aside {
        width: 30%
      }
      #stat {
    	font-size: 0.8em;
    	color:#fff;
      }
    }
     
    /* ---------------------------- */
    /* Decoration */
    body {
      margin: 0;
      background:#999966; /* fond vieil or */
    }
    #global > header,
    #global > main > nav,
    #global > main > section > article,
    #global > main > section > aside,
    #global > footer {
      margin: 0;
      padding: 1em;
      border-radius:5px;
      box-shadow: 0px 2px 5px #999;
    }
    #global > main > section > article {
      background: #FFFFFF;
    }
     
    /*
    #global > header {
      background: orange;
    }
    #global > main > nav {
      background: yellow;
    }
    #global > main > section > aside {
      background: pink;
    }
    #global > footer {
      background: green;
    }
    */
    /* ---------------------------- */
    70 ans quelques dents en moins, mais toujours envie d'apprendre
    Le temps passe 72 ......

  8. #8
    Membre à l'essai Avatar de TrissMerigold
    Femme Profil pro
    Reconversion professionnelle DEV WEB
    Inscrit en
    janvier 2019
    Messages
    5
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Âge : 29
    Localisation : France, Seine et Marne (Île de France)

    Informations professionnelles :
    Activité : Reconversion professionnelle DEV WEB

    Informations forums :
    Inscription : janvier 2019
    Messages : 5
    Points : 10
    Points
    10

    Par défaut

    Bonsoir,

    Cela m'intéresse grandement car je suis en formation et je dois dire que je suis bloquée par les media queries.

    Le code du CSS margin:0; padding:0; doit-il être mis dans toutes les blocks ( id pour ma part) ou bien seulement dans le body ?

    Je n'ai pas de site en ligne donc je ne peux pas vous montrer mais tout simplement quelqu'un peut m'aiguiller sur comment écrire un bon code de media queries pour que ça marche sur tous les écrans ?

    Concrètement que faut-il mettre dans le HTML et dans le CSS pour que ça fonctionne ? Je suis bloquééééééééééééééééééée et ça fait des semaiiiinnnnnes lol

    Merci à vous !

    Bonne soirée

    Triss

  9. #9
    Rédacteur/Modérateur
    Avatar de jreaux62
    Homme Profil pro
    Webdesigner
    Inscrit en
    août 2008
    Messages
    15 054
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 52
    Localisation : France, Pas de Calais (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Arts - Culture

    Informations forums :
    Inscription : août 2008
    Messages : 15 054
    Points : 30 670
    Points
    30 670

    Par défaut

    Bonjour,


    Le minimum :
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
          <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" />
    ou
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
          <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=4.0, user-scalable=yes">

    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <!DOCTYPE HTML>
    <html lang="fr">
       <head>
          <title>...</title>
          <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" />
          <meta charset="utf-8" />
     
          <!-- Styles CSS -->
          <link type="text/css" media="screen" rel="stylesheet" href="style.css" />
       </head>
    ...
    style.css :
    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
     
    /* PHONE */
    ...
    /* TABLET */
    @media screen and (min-width:768px) {
        ...
    }
    /* DESKTOP
    @media screen and (min-width:1025px) {
        ...
    }
    "Si tu suis le chemin qui s'appelle « plus tard », tu arriveras à la place qui s'appelle « jamais »."
    François Camille Prévot (1910-1996), instituteur puis Directeur d'école et... mon grand-père.
    "Pose ta question, tu seras idiot une seconde. Ne la pose pas, tu seras idiot toute ta vie."
    Albert Einstein (1879-1955).
    Mes tutos DVP
    Gestion-Affichage de Nouvelles
    Affichage en tableau HTML
    Fonctions de redimensionnement d'images

  10. #10
    Membre à l'essai Avatar de TrissMerigold
    Femme Profil pro
    Reconversion professionnelle DEV WEB
    Inscrit en
    janvier 2019
    Messages
    5
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Âge : 29
    Localisation : France, Seine et Marne (Île de France)

    Informations professionnelles :
    Activité : Reconversion professionnelle DEV WEB

    Informations forums :
    Inscription : janvier 2019
    Messages : 5
    Points : 10
    Points
    10

    Par défaut

    Merci beaucoup de toutes ces informations Je vais tester tout cela demain

    Bonne nuit,

    Triss,

Discussions similaires

  1. [gwt]Conseil pour créer des pages dynamique
    Par cedrix57 dans le forum GWT et Vaadin
    Réponses: 3
    Dernier message: 20/08/2010, 09h45
  2. Comment créer des pages Web mobiles ASP.NET ?
    Par cyril dans le forum Développement Web avec .NET
    Réponses: 2
    Dernier message: 22/06/2010, 14h24
  3. Créer des fichiers log pour les pages web visitées hors ligne
    Par AprilD dans le forum Général JavaScript
    Réponses: 9
    Dernier message: 23/03/2008, 22h01
  4. Réponses: 16
    Dernier message: 16/11/2007, 16h23
  5. Cherche un outils pour créer des pages web
    Par jeha dans le forum Applications et environnements graphiques
    Réponses: 8
    Dernier message: 18/03/2007, 12h30

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo