[Tuto]Chouette, c'est responsive ! |
Répondre | Page 123 35> |
Auteur |
Sujet Recherche Options des sujets
|
||
Larsene
Admin Group Depuis le: 05 Mar 2012 Pays: France Status: Inactif Points: 5388 |
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
2 code CSS de la page :
3- code HTML / header (sur page ou calque, peu importe)
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 ! [édition terminée (à priori)] Edité par Larsene - 16 Avr 2015 à 21:28 |
|||
Bridet
Senior Member Depuis le: 13 Dec 2013 Pays: Condroz Status: Inactif Points: 5049 |
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! |
|||
Larsene
Admin Group Depuis le: 05 Mar 2012 Pays: France Status: Inactif Points: 5388 |
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 |
|||
brolysan
Admin Group Depuis le: 14 Août 2009 Pays: France Status: Inactif Points: 10144 |
Envoyé : 30 Mar 2015 à 17:43 | ||
Courage Larsène, chouette ton initiative en tout cas!
|
|||
Maurice306
Senior Member Depuis le: 20 Avr 2008 Pays: France Status: Inactif Points: 2066 |
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 ! Je pense que le menu minimisé sur de petits écrans cache une partie des textes sur le coté gauche ? à vérifier,
|
|||
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 !!!
|
|||
Larsene
Admin Group Depuis le: 05 Mar 2012 Pays: France Status: Inactif Points: 5388 |
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 ...
|
|||
Maurice306
Senior Member Depuis le: 20 Avr 2008 Pays: France Status: Inactif Points: 2066 |
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"
|
|||
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 !!!
|
|||
Larsene
Admin Group Depuis le: 05 Mar 2012 Pays: France Status: Inactif Points: 5388 |
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) ? L'idée ici est bien de montrer l'intérêt du responsive - même pour Bridet - et sa facilité de mise en oeuvre, sans pour autant partir d'un modèle Edité par Larsene - 30 Mar 2015 à 22:25 |
|||
Maurice306
Senior Member Depuis le: 20 Avr 2008 Pays: France Status: Inactif Points: 2066 |
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
Pour le style de menu avec le panneau info c'est impec
|
|||
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 !!!
|
|||
brolysan
Admin Group Depuis le: 14 Août 2009 Pays: France Status: Inactif Points: 10144 |
Envoyé : 31 Mar 2015 à 09:55 | ||
super boulot Larsène. Et comme tout...
|
|||
Répondre | Page 123 35> |
Tweet
|
Aller au Forum | Permissions du forum Vous ne pouvez pas écrire un nouveau Sujet Vous ne pouvez pas répondre aux Sujets Vous ne pouvez pas effacer vos messages Vous ne pouvez pas éditer vos messages Vous ne pouvez pas créer des sondages Vous ne pouvez pas voter dans les sondages |