Antivirus offre spéciale - jusqu'à 60 % de réduction avec openElement !
Accueil Forum Accueil Forum >

openElement

> Tutoriaux utilisateurs
  Nouveaux messages Nouveaux messages Fil RSS  - [Tuto]Chouette, c'est responsive !
  FAQ FAQ  Rechercher dans le Forum   Inscription Inscription  Connexion Connexion

[Tuto]Chouette, c'est responsive !

 Répondre Répondre Page  123 35>
Auteur
Message
Larsene allez vers le bas
Admin Group
Admin Group
Avatar

Depuis le: 05 Mar 2012
Pays: France
Status: Inactif
Points: 5374
Options des messages Options des messages   Thanks (1) Thanks(1)   Citer Larsene Citer  RépondreRéponse Lien Direct à ce Post Sujet: [Tuto]Chouette, c'est responsive !
    Envoyé : 30 Mar 2015 à 15:44
Et voilà ! Un petit tutoriel sur une façon de travailler et des astuces pour rendre un site "responsive". Cette page est très simple, mais démontre bien l'intérêt de ce travail.

Le but est de montrer l'usage des panneaux d'éléments en mode "relative" (et l'intérêt de leur imbrication, ainsi que le travail avec des tailles variables (pourcentages et pixels).

On voit également comment modifier les éléments créés sous l'éditeur OE en utilisant des medias queries dans des blocs de code CSS, qui permettent l'ajustement en fonction du périphérique disponible.

Plus classique, on va également jouer avec les calques, les classes personnalisées, l'intérêt de renommer les ID des éléments, etc.



Apparences sur différents appareils :

    

Le résultat est visible ici : demo_owl

Le didacticiel en vidéo : ici !

Pour plus de confort, je vous redonne ci-dessous les scripts utilisés. Voir la vidéo pour le déroulé.

1- création du calque comportant le menu, et script comportant les media queries css
.barremenu{
background-color:rgba(27,37,58,0.8) !important;
width:100% !important;
position : fixed !important;
z-index:9999 !important;
}

@media screen and (max-width: 640px) {
.titrebarremenu{
font-size:20px !important 
}   
#WEBoutonMenu{
display:inline-block !important;
}
#WEMenuPrincipal{
display:none !important;
}
}

@media screen and (min-width: 640px) and (max-width: 1170px) {
.titrebarremenu{
font-size:24px !important;
}   
.menu{
margin-left:9% !important;
}
#WEBoutonMenu{
display:none !important;
}
  #WEMenuPrincipal{
display:inline-block !important;
}
}

@media screen and (min-width: 1170px) {
.titrebarremenu{
font-size:32px !important;
}   
.menu{
margin-left:20% !important;
}
#WEBoutonMenu{
display:none !important;
}
#WEMenuPrincipal{
display:inline-block !important;
}   
}


2 code CSS de la page :

.ombre{
-moz-box-shadow: 0px 0px 8px 0px #000000;
-webkit-box-shadow: 0px 0px 8px 0px #000000;
-o-box-shadow: 0px 0px 8px 0px #000000;
box-shadow: 0px 0px 8px 0px #000000;
filter:progid:DXImageTransform.Microsoft.Shadow(color=#000000, Direction=NaN, Strength=8);
}

@media screen and (max-width: 640px) {
    .grandpanneau{
    width:100% !important;
    clear:both !important;
  }   
  .content {
  width:100% !important;
  }
   .ombre{
  width:100% !important;
  margin: 5% 0% !important;
  }
  .titrepage{
  font-size:32px !important;
  }
  .backimage{
  height:300px !important;
  }
   
  #WENews {
  display:none !important;   
  }
}

@media screen and (min-width: 640px) and (max-width: 1170px) {
   .grandpanneau{
  width:80% !important;
    clear:both !important;
  }
  .content {
  width:100% !important;
  }
   .titrepage{
  font-size:48px !important;
  }
  #WENews {
  display:none !important;   
  }
}

@media screen and (min-width: 1170px) {
   .grandpanneau {
    display:block;
    width:90% !important;
    max-width:1350px !important;
  }
   .illustration{
   height:300px !important
   }
  #WENews {
      display:inline-block!important;
   }  
}


3- code HTML / header (sur page ou calque, peu importe)
<meta name="viewport" content="width=device-width,initial-scale=1" />


Et si ce tutoriel vous a plu et qu'il vous apporte de l'aide et des idées, n'hésitez pas à me faire un don, au regard du travail nécessaire pour le construire, le réaliser, le mettre en ligne, le commenter, etc !
Faire un don

[édition terminée (à priori)]



Edité par Larsene - 16 Avr 2015 à 21:28
Haut de la page
Bridet allez vers le bas
Senior Member
Senior Member
Avatar

Depuis le: 13 Dec 2013
Pays: Condroz
Status: Inactif
Points: 4052
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer Bridet Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 30 Mar 2015 à 17:23
Larsène, vous a plût, non mais sérieux?

Où qu'il est le résultat?

Sinon, je bloque sur les tutos vidéo, car il est plus laborieux de les appliquer pas à pas mais il faut vivre avec son temps.

Mais je t'aime hein!

Haut de la page
Larsene allez vers le bas
Admin Group
Admin Group
Avatar

Depuis le: 05 Mar 2012
Pays: France
Status: Inactif
Points: 5374
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer Larsene Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 30 Mar 2015 à 17:42
Merci Bridet !

C'est en cours d'édition et d'upload.

Je pense qu'une vidéo permet de mieux se rendre compte d'un résultat, notamment quand il s'agit d'utiliser un certain nombre de panneaux d'éléments, les positionnements, etc.

L'idée n'est de toute façon de l'appliquer tel quel mais bien de voir comment on peut faire pour appliquer ces idées à ses propres créations !


Edité par Larsene - 30 Mar 2015 à 18:00
Haut de la page
brolysan allez vers le bas
Admin Group
Admin Group
Avatar

Depuis le: 14 Août 2009
Pays: France
Status: Actif
Points: 8408
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer brolysan Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 30 Mar 2015 à 17:43
Courage Larsène, chouette ton initiative en tout cas!
Haut de la page
Maurice306 allez vers le bas
Senior Member
Senior Member
Avatar

Depuis le: 20 Avr 2008
Pays: France
Status: Inactif
Points: 1991
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer Maurice306 Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 30 Mar 2015 à 18:00
Bonjour,

Comme ils disent CHOUETTE ! une remarque, tout de même il faut bien que je m'y mette ! Wink

Je pense que le menu minimisé sur de petits écrans cache une partie des textes sur le coté gauche ? à vérifier, Embarrassed
La vie est belle !!!....., elle est comme chacun se la fait. Ne soyez pas pressé, partez plus tôt, car il n'y a pas de personnes pressée elles ne sont qu'en retard !!!
Haut de la page
Larsene allez vers le bas
Admin Group
Admin Group
Avatar

Depuis le: 05 Mar 2012
Pays: France
Status: Inactif
Points: 5374
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer Larsene Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 30 Mar 2015 à 18:02
Le menu utilisé est bêtement celui de OE... il s'affiche donc en surimpression le temps de la selection de la destination, c'est tout ...
Haut de la page
Maurice306 allez vers le bas
Senior Member
Senior Member
Avatar

Depuis le: 20 Avr 2008
Pays: France
Status: Inactif
Points: 1991
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer Maurice306 Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 30 Mar 2015 à 21:33
OK, j'ai fais le test en réduisant au max et le menu rentre sur la gauche ce qui fait disparaître une partie comme j'ai fais ce type de menu avec un panneau info, en suivant le tuto de Brolysan et comme là l'affichage est corec ça a attiré mon attention. 

Autrement, c'est comme "d'AB" Thumbs Up Thumbs Up Thumbs Up 
La vie est belle !!!....., elle est comme chacun se la fait. Ne soyez pas pressé, partez plus tôt, car il n'y a pas de personnes pressée elles ne sont qu'en retard !!!
Haut de la page
Larsene allez vers le bas
Admin Group
Admin Group
Avatar

Depuis le: 05 Mar 2012
Pays: France
Status: Inactif
Points: 5374
Options des messages Options des messages   Thanks (1) Thanks(1)   Citer Larsene Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 30 Mar 2015 à 22:19
sur un périphérique mobile ? tablette ou smartphone ?? sinon, oui, sur PC, si tu réduit le navigateur à moins de 280px de large, le menu OE va bugger, car c'est sa taille fixe... (mais un smartphone avec un écran de moins de 280 de large ... il en reste bcp ?

Après il est souvent plus judicieux de faire un menu via un panneau d'élément ... d'ailleurs, le code d'affichage/masquage de ce menu ... qui l'a filé à brosylan (mode innocent)  ? Beer


L'idée ici est bien de montrer l'intérêt du responsive - même pour Bridet LOL - et sa facilité de mise en oeuvre, sans pour autant partir d'un modèle


Edité par Larsene - 30 Mar 2015 à 22:25
Haut de la page
Maurice306 allez vers le bas
Senior Member
Senior Member
Avatar

Depuis le: 20 Avr 2008
Pays: France
Status: Inactif
Points: 1991
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer Maurice306 Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 30 Mar 2015 à 23:53
Il est vrai que ça ouvre des portes ! de pouvoir créer ce type de pages dont certain éléments disparaissent au profit de l'important pour un mobile. Je vois déjà Bridet saliver de plaisir à refaire son site LOL

Pour le style de menu avec le panneau info c'est impec Thumbs Up
La vie est belle !!!....., elle est comme chacun se la fait. Ne soyez pas pressé, partez plus tôt, car il n'y a pas de personnes pressée elles ne sont qu'en retard !!!
Haut de la page
brolysan allez vers le bas
Admin Group
Admin Group
Avatar

Depuis le: 14 Août 2009
Pays: France
Status: Actif
Points: 8408
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer brolysan Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 31 Mar 2015 à 09:55
super boulot Larsène. Et comme tout...Beer
Haut de la page
 Répondre Répondre Page  123 35>
  Partagez ce sujet   

Aller au Forum Permissions du forum allez vers le bas

Forum Software by Web Wiz Forums® version 10.18
Copyright ©2001-2014 Web Wiz Ltd.

Cette page a été affichée en 0,063 secondes.
Réserver en ligne un taxi, vtc, navette