Seenthis
•
 
Identifiants personnels
  • [mot de passe oublié ?]

 
  • #r
  • #re
  • #rés
RSS: #responsive

#responsive

  • #responsives
  • #responsivedesign
  • #responsive_email
  • #responsive_designs
  • #responsive_images
  • #responsive_inspector
  • #responsive_webdesign
  • #responsive_web_design_rwd_
  • #responsive_web_design_process
  • #responsive-design
  • #responsive-web-design
  • #responsivewebdesign
  • #responsivephilosophy
0 | 25 | 50 | 75 | 100 | 125 | 150 | 175 | 200 | ... | 250
  • @b_b
    b_b @b_b PUBLIC DOMAIN 6/02/2023
    9
    @arno
    @gblin
    @rastapopoulos
    @ericw
    @cy_altern
    @7h36
    @alexcorp
    @monolecte
    @marcimat
    9

    The Guide To #Responsive_Design In 2023 and Beyond - Ahmad Shadeed
    ▻http://ishadeed.com/article/responsive-design

    https://ishadeed.com/assets/responsive-design/twitter-card.jpg

    Responsive design isn’t about #media_queries anymore.

    So, the web is responsive by default, unless we start getting creative in designing our layouts.

    Using modern CSS

    – The typography is responsive to the viewport width via clamp() function.
    – The spacing is responsive to the viewport width via clamp() function.
    – The hero section is responsive to its content via flexbox wrapping.
    – The cards grid is responsive to the available space with minmax(), no media queries.
    – The card component is responsive to its wrapper via size container queries and style container queries.
    – The margins and paddings are responsive to the websites language via logical properties.

    Using media queries

    – The site navigation is responsive to the viewport width.
    – The theming is responsive to the user preferences in their operating system.
    – The card hover effect is responsive to what the user is using (touch vs mouse).

    b_b @b_b PUBLIC DOMAIN
    Écrire un commentaire
  • @aurelie
    Aurélie @aurelie 2/01/2022
    1
    @jeanmarie
    1

    2022 s’annonce plutôt bien du côté du #CSS ! 🥳🥳🥳

    Quelqu’un a déjà testé les color-function() ?
    ▻https://www.bram.us/2021/12/27/css-in-2022/#the-hotlist--color-functions

    Quand ce sera bien opérationnel, ça me facilitera beaucoup les choses avec la personnalisation qu’on propose à nos clients.

    J’espère aussi que les #viewport units mettront fin aux soucis #Safari sur #smartphone ☺
    ▻https://www.bram.us/2021/12/27/css-in-2022/#the-hotlist--viewport-units

    Vous avez repéré quoi en particulier ?

    #integration #integrationWeb #ui #HTML #responsive #variables

    Aurélie @aurelie
    Écrire un commentaire
  • @cy_altern
    cy_altern @cy_altern CC BY-SA 24/05/2021
    2
    @tofulm
    @jeanmarie
    2

    SCREEN SIZE MAP » Compare viewport sizes
    ▻https://screensizemap.com

    Comparateur de tailles d’écran avec filtrage par "popularité" : une aide pour déterminer les breakpoints

    #responsive #breakpoint #taille_écran #web_dev

    cy_altern @cy_altern CC BY-SA
    Écrire un commentaire
  • @cy_altern
    cy_altern @cy_altern CC BY-SA 23/05/2021
    2
    @jeanmarie
    @tofulm
    2

    A Web Developer’s Browser | Responsively App
    ▻https://responsively.app

    Un logiciel (Windows / Linux /Mac) ou une extension pour navigateur (Firefox / Chrome / Edge) permettant de naviguer en affichant de façon synchrone les vues « responsive » de différentes tailles.
    Voir aussi :
    – le repo Github : ▻https://github.com/responsively-org/responsively-app
    – l’extension Firefox : ▻https://addons.mozilla.org/en-US/firefox/addon/responsively-helper

    #responsive #web_dev #à_tester

    cy_altern @cy_altern CC BY-SA
    Écrire un commentaire
  • @olange
    Olivier Lange @olange CC BY-SA 11/05/2021
    10
    @02myseenthis01
    @arno
    @jeanmarie
    @rastapopoulos
    @monolecte
    @7h36
    @tofulm
    @ze_dach
    @marcimat
    @cy_altern
    10

    «Next Gen CSS: @container» de Una Kravets, CSS Tricks, 11.05.2021
    ▻https://css-tricks.com/next-gen-css-container

    « […] You can think of these like a media query (@media), but instead of relying on the viewport to adjust styles, the parent container of the element you’re targeting can adjust those styles.

    Container queries will be the single biggest change in web styling since CSS3, altering our perspective of what “responsive design” means.

    No longer will the viewport and user agent be the only targets we have to create responsive layout and UI styles. With container queries, elements will be able to target their own parents and apply their own styles accordingly. This means that the same element that lives in the sidebar, body, or hero could look completely different based on its available size and dynamics. […] »

    #webdev #layout

    Olivier Lange @olange CC BY-SA
    • @arno
      ARNO* @arno ART LIBRE 11/05/2021

      Oh là là là là là là… !

      ARNO* @arno ART LIBRE
    • @rastapopoulos
      RastaPopoulos @rastapopoulos CC BY-NC 11/05/2021

      ça fait tellement d’année qu’on attend ça…

      #CSS #intégration #web #responsive

      RastaPopoulos @rastapopoulos CC BY-NC
    Écrire un commentaire
  • @rastapopoulos
    RastaPopoulos @rastapopoulos CC BY-NC 22/02/2021
    7
    @02myseenthis01
    @jeanmarie
    @monolecte
    @ericw
    @bouts
    @7h36
    @alexcorp
    7
    @drbouvierleduc @smellup

    artf/grapesjs : Free and Open source Web Builder Framework. Next generation tool for building templates without coding
    ▻https://github.com/artf/grapesjs

    Un framework de templating par interface, mais autonome, pas propre à un CMS (comme Gutemberg ou autre). Ça peut servir à faire un CMS complet. Mais ça pourrait servir à faire aussi juste un logiciel de maquettage rapide aussi, mais… qui produit du HTML/CSS responsive du coup. Comme Bootstrap Studio, sauf que c’est en web et libre là… (vraiment ça fait tout pareil que bootstrap studio quasiment).

    Peu aussi être inspirant pour les systèmes de blocs configurables, d’interface pour construire une page par blocs.

    GrapesJS is a free and open source Web Builder Framework which helps building HTML templates, faster and easily, to be delivered in sites, newsletters or mobile apps. Mainly, GrapesJS was designed to be used inside a CMS to speed up the creation of dynamic templates.

    https://camo.githubusercontent.com/5dfc304c04a6cc50240d2afb6288f79e1a15afa5c9a04ca65aeb344e18f39153/687474703a2f2f6772617065736a732e636f6d2f696d672f6772617065736a732d66726f6e742d706167652d6d2e6a7067#.jpg

    #template #maquette #interface #blocs #HTML #CSS #responsive
    ping @drbouvierleduc @smellup

    RastaPopoulos @rastapopoulos CC BY-NC
    • @alexcorp
      alexcorp @alexcorp CC BY-NC 23/02/2021

      Super outil, complètement personnalisable et qu’on peut utiliser pour plein de situations. On est en train de le mettre en place dans une appli web pour la partie éditoriale/marketing, comme ça on va contenter nos collègues qui sont habitués au confort de Wordpress (Gutemberg donc), qui est super bien foutu à ce niveau.

      alexcorp @alexcorp CC BY-NC
    • @rastapopoulos
      RastaPopoulos @rastapopoulos CC BY-NC 23/02/2021

      merci pour le retour :)

      bon ça reste que pour enregistrer du HTML directement… il me semble que dans son genre Gutemberg fait mieux (même si très lié à WP donc difficile d’utiliser ailleurs) : ça sérialise des paramètres, qu’eux mettent à plat avec leur format (des commentaires HTML avec du JSON) mais qu’on pourrait parfaitement décider d’enregistrer comme on veut + des styles CSS générés (avec un id unique pour chaque bloc). Et du coup ça peut possiblement générer autre chose que du HTML ou ça peut être personnaliser (si jamais pour un bloc ayant tel sens, on voudrait que ce soit pas « div » mais « section » ou « blockquote » un autre jour ou dans tel autre contexte qu’une page web).

      Enfin bon c’est très intéressant à creuser quand même. Ne serait-ce que pour faire du maquettage rapide (mais est-ce qu’il existe un vrai logiciel qui utilise déjà cette lib pour faire ça ? ou même pour éditer des pages en général tout court, que ce soit maquette ou vraie page… un frontpage moderne en webapp quoi)

      RastaPopoulos @rastapopoulos CC BY-NC
    • @alexcorp
      alexcorp @alexcorp CC BY-NC 23/02/2021

      Oui le souci de Gutemberg c’est qu’il faut sortir de wordpress. On a cherché plusieurs outils pour faire le même taf (sans tout redévelopper) et GrapesJS est ce qu’on a trouvé de mieux, même si c’est pas tout à fait ce pour quoi il est prévu à la base. On a adapté ça avec notre CSS custom et donc en quelques instants on peut construire une page assez librement tout en étant contraint par notre design system.

      Pour le maquettage pur sinon, il y a Penpot qui vient de sortir : ►https://penpot.app

      alexcorp @alexcorp CC BY-NC
    • @rastapopoulos
      RastaPopoulos @rastapopoulos CC BY-NC 23/02/2021

      oui déjà signalé ici :) ►https://seenthis.net/messages/900030

      Mais justement Penpot ne produit PAS du HTML CSS responsive mais des SVG, de l’image… Alors que c’est tout l’intérêt de maquetter directement en HTML, c’est de base responsive, mobile first, etc. (ce que fait Bootstrap Studio, mais dans un soft pas libre, et pas collaboratif, pas non plus versionnable avec git, etc)

      RastaPopoulos @rastapopoulos CC BY-NC
    • @alexcorp
      alexcorp @alexcorp CC BY-NC 23/02/2021

      Clairement oui, le but premier de GrapesJS c’est de pouvoir maquetter directement en HTML+CSS, après je l’ai pas utilisé dans cette optique et je sais pas ce que ça vaut par rapport à Bootstrap Studio (pas utilisé non plus).

      alexcorp @alexcorp CC BY-NC
    Écrire un commentaire
  • @cy_altern
    cy_altern @cy_altern CC BY-SA 3/09/2020
    6
    @tofulm
    @b_b
    @touti
    @monolecte
    @7h36
    @jeanmarie
    6
    @tofulm

    Responsive Data Tables | CSS-Tricks
    ▻https://css-tricks.com/responsive-data-tables

    Une astuce en CSS pour rendre les tableaux HTML de données responsives (spoiler : utilise des ::before)
    ping @tofulm :)

    #css3 #before #datatable #responsive

    cy_altern @cy_altern CC BY-SA
    Écrire un commentaire
  • @cy_altern
    cy_altern @cy_altern CC BY-SA 13/12/2019
    3
    @tofulm
    @jeanmarie
    @severo
    3

    Responsive Images : comprendre srcset et sizes - Alsacreations
    ▻https://www.alsacreations.com/article/lire/1621-responsive-images-srcset.html

    Images responsives : les attributs srcset et size de la balise <img> pour utilisation de multiples source et taille pour une image
    Voir aussi : ▻https://developer.mozilla.org/fr/docs/Apprendre/HTML/Comment/Ajouter_des_images_adaptatives_%C3%A0_une_page_web

    #srcset #size #img #image #responsive #adaptive_image #HTML5 #CSS

    cy_altern @cy_altern CC BY-SA
    Écrire un commentaire
  • @fil
    Fil @fil 17/04/2019
    3
    @reka
    @lluc
    @nightingale
    3

    Techniques for Data Visualization on both Mobile & Desktop, by Nadieh Bremer | Visual Cinnamon
    ▻https://www.visualcinnamon.com

    https://www.visualcinnamon.com//img/blog/2019/mobile-vs-desktop-dataviz/blog_feature.png

    From doing nothing all the way to creating a different chart for mobile and desktop. I’ll share and explain these and many more examples

    #tutorial #responsive #dataviz

    Fil @fil
    Écrire un commentaire
  • @b_b
    b_b @b_b PUBLIC DOMAIN 29/08/2018
    2
    @spip
    @rastapopoulos
    2

    Time-saving #CSS techniques to create #responsive #images
    ▻https://medium.freecodecamp.org/time-saving-css-techniques-to-create-responsive-images-ebb1e84f

    To Recap

    1) Use background-image if your image is not part of the page’s content.
    2) Use object-fit if you don’t care about IE.
    3) The padded container technique, used by Netflix, works everywhere.
    4) In most cases, just add height: auto; in your CSS.
    5) If you need fast load times, use srcset to load smaller images on mobile.

    b_b @b_b PUBLIC DOMAIN
    • @jeanmarie
      jeanmarie @jeanmarie CC BY-NC-SA 29/08/2018
      @arno

      Le #plugin #SPIP « Image responsive » d’@arno utilise la méthode Netflix si je ne m’abuse.
      A peu de chose près : les images ne sont pas en absolute, c’est le contenant <picture> qui a une hauteur à 0

      ►https://www.paris-beyrouth.org/Plugin-SPIP-Image-responsive

      jeanmarie @jeanmarie CC BY-NC-SA
    Écrire un commentaire
  • @cy_altern
    cy_altern @cy_altern CC BY-SA 21/08/2018

    Test Your Website at Different Mobile Screen Resolutions
    ▻http://responsivechecker.net/responsive

    Un testeur de rendu « responsive » spécialement bien fourni en modèles de terminaux

    #outil_web #responsive #testeur

    cy_altern @cy_altern CC BY-SA
    Écrire un commentaire
  • @hackernoon
    Hacker Noon @hackernoon CC BY-SA 23/05/2018

    Web #design Tricks To Fuel Your Business Growth
    ▻https://hackernoon.com/web-design-tricks-to-fuel-your-business-growth-22bfad5902ee?source=rss--

    https://cdn-images-1.medium.com/max/700/1*YbDOmMonlPE_yfpSROLKgw.jpeg

    Growing a business is not a piece of cake. It requires efforts right from the product creation to growth plans, developing marketing strategies and finally coming up with your website.A well-designed website itself is enough to create a commendable image of your brand/business/service in the mind of the visitors. In addition to that, a good website design will surely make visitors stay longer on your page whereas a bad website design will instantly turn them off.Web Design Tricks to Fuel Your Business GrowthTo begin with, nobody likes to spend time on a site that is slow, ineffective or has an unoriginal design. So, a responsive and interactive website design ranks high when it comes to determining if a brand can be trusted upon or not.Well, that is why it is so crucial to invest in (...)

    #web-design #responsive-design #ui #website-design

    Hacker Noon @hackernoon CC BY-SA
    Écrire un commentaire
  • @mist_
    Mist. GraphX @mist_ 12/03/2018

    Responsive Components: a Solution to the Container Queries Problem — Philip Walton
    ▻https://philipwalton.com/articles/responsive-components-a-solution-to-the-container-queries-problem

    This article describes a strategy for using modern web technologies to build responsive components: DOM elements that can update their style and layout in response to changes in the size of their container.

    #css#webdesign#container-queries#responsive

    Mist. GraphX @mist_
    • @rastapopoulos
      RastaPopoulos @rastapopoulos CC BY-NC 12/03/2018

      Mouais pas aussi cool que ce que je pensais à la base.

      Ça oblige à définir des breakpoints dans le JS en plus en doublon. Et ça oblige aussi à mettre dans le HTML lui-même les éléments qu’on veut observer pour leur rajouter des classes suivant les breakpoints. Du coup impossible de changer de thème sans changer le HTML (chose que l’on cherche à éviter au maximum).

      RastaPopoulos @rastapopoulos CC BY-NC
    • @mist_
      Mist. GraphX @mist_ 13/03/2018

      En fait c’est une version/vision du problème…

      ça fait quelques temps que je suis ce sujet et y’a pas mal de tendances, celle ci est un exemple… certainement que ça sent plus les habitudes de quelqu’un qui fait des applis mobiles et bosse avec React, du coup le html est plus marqué de toute façon…

      Dans les autres tendances et stratégies sur le meme sujet :

      Elements queries :

      ►https://elementqueries.com

      Le draft de la spec proposée :

      ▻https://tomhodgins.github.io/element-queries-spec/element-queries.html

      Un petit tour d’horizon du sujet et de la problématique :

      ▻https://www.sitepoint.com/responsive-css-patterns-without-media-queries

      Un polifyll, intérressant (regarder le src/resizeSensor.js) car a la différence de l’autre on utilise css

      ▻https://github.com/marcj/css-element-queries

      Après synchroniser le js et le css … c’est un peut pour ça que j’ai regardé pour l’insertion des variables dans scss.php, après ne pas y avoir touché depuis 5ans ^^ c’est carrément le but…

      Mist. GraphX @mist_
    Écrire un commentaire
  • @mist_
    Mist. GraphX @mist_ 11/02/2018
    1
    @spip
    1

    Qu’elle classe ce code css ;-)

    Responsive Elements - Semantic
    ▻https://semantic-ui.com/examples/responsive.html

    Bon semantic ui est bien connu, plus qu’il n’est utilisé certainement. Mais en retombant dans mes notes, sur cette page, je suis toujours séduis par l’approche de ce code css.

    Loin des BEM, et autres méthodes verbeuse et finalement lourdes à rédiger, la on est dans la simplicité, tout semble logique, lisible.

    Si on regarde bien comment c’est foutu, on se rends compte que la spécificité des classes est super ciblé, verrouillée, sans pour autant utiliser des classes verbeuse de Block__elm—pod.is-elem-state

    tout est dans ::not ou ~= , ^=

    un peut comme dans une boucle spip quand on enlève ce qu’on veut pas, pour récupérer ce que l’on veut ^^

    L’autre avantage de cette méthode est aussi d’économiser sur les css générées, j’ai fais quelques test et il y’a un gain significatif sur des composant tout bêtes comme des labels, ou icones.

    #css#méthodologies#web-design

    Mist. GraphX @mist_
    • @rastapopoulos
      RastaPopoulos @rastapopoulos CC BY-NC 11/02/2018

      Sauf que bem n’est pas fait par hasard comme ça, d’une ya la cohérence total avec vraiment 100% toujours la même manière d’écrire mais surtout c’est fait pour être le plus rapide possible à exécuter par les navigateurs.

      .ui.segments:not(.horizontal) > .segment:first-child est très long à compiler et trouver, c’est méga complexe comme sélecteur.

      .segments_vertical .segments__segment:first-child est beaucoup plus rapide

      RastaPopoulos @rastapopoulos CC BY-NC
    • @mist_
      Mist. GraphX @mist_ 11/02/2018

      +1 effectivement, la ça mérite des tests réels de temps de rendu navigateur, plutôt qu’une estimation de gain en kbytes transférés.

      Quand je vois le pross de mon vieux mac sur une page ou j’ai pas mal d’animations css3, ça peut vite aller dans le rouge suivant comment c’est rédigé. Donc le parcours du dom comme tu le souligne est forcément plus couteux avec des pseudo selector.

      Du coup, ça me donne envi de de réfléchir a un suite de test la dessus. En fait j’ai un petite lib qui est inspiré de bem_selectors, en fait ça gère le nomage des selecteurs, mais en fonction de plusieurs conventions … pour le moment SMACSS, OOCSS, BEM, et Rscss …

      Pour faire ce genre de test, ça peut être interressant, de prendre une page type, et de générer un rapport de perf entre les différentes méthodologies, vu qu’on peut switcher en changeant une map.

      Mist. GraphX @mist_
    • @jeanmarie
      jeanmarie @jeanmarie CC BY-NC-SA 11/02/2018

      Il y a #Grillade de #KNACSS aussi : ►https://knacss.com/grillade
      Je commence a l’utiliser à la place de celle de #SemanticUI

      #intégration #flexbox #grille #responsive

      jeanmarie @jeanmarie CC BY-NC-SA
    • @mist_
      Mist. GraphX @mist_ 11/02/2018

      En fait je n’utilise pas semantic ui, ;-) mais je lis le code de tout le monde, j’aime bien regarder surtout les approches différentes, ça sert toujours un jour, dans une certaine situation ^^.

      Au départ je lisais ceci ▻http://bradfrost.github.io/this-is-responsive/patterns.html#layout

      et cela ▻https://github.com/oddbird/accoutrement-layout

      dans le but de créer un composant/lib scss qui gère tout le layout de manière « générique »… comme on a un support qui commence a être correct de grid et flex, ça simplifie quand même bien le boulot.

      Mist. GraphX @mist_
    Écrire un commentaire
  • @arno
    ARNO* @arno ART LIBRE 8/02/2018
    5
    @rastapopoulos
    @mukt
    @b_b
    @gastlag
    @mist_
    5

    Des media queries pour savoir si l’usager en est réduit à viser grossièrement avec ses gros doigts boudinés, ou s’il peut piquer précisément comme une abeille :

    Using Media Queries For Responsive Design In 2018 — Smashing Magazine
    ▻https://www.smashingmagazine.com/2018/02/media-queries-responsive-design-2018

    @media (pointer:coarse) {
       .which-pointer::after {
           content: "You have a coarse pointer, are you on a touchscreen device?";    
       }
    }

    @media (pointer:fine) {
       .which-pointer::after {
           content: "You have a fine pointer, are you using a mouse or trackpad?";    
       }
    }
    ARNO* @arno ART LIBRE
    • @arno
      ARNO* @arno ART LIBRE 8/02/2018

      Et déterminer si l’utilisateur a le survol de la souris (hover) ou non (écran tactile) :

      @media (hover) {
         .can-i-hover::after {
             content: "You look like you can hover.";    
         }
      }

      @media  (hover:none) {
         .can-i-hover::after {
             content: "I don't think you can hover.";    
         }
      }
      ARNO* @arno ART LIBRE
    • @mukt
      mukt @mukt CC BY 8/02/2018

      #intégration #web #HTML #CSS #responsive

      mukt @mukt CC BY
    Écrire un commentaire
  • @arno
    ARNO* @arno ART LIBRE 17/01/2018
    7
    @spip
    @b_b
    @tofulm
    @realet
    @baroug
    @najort
    @denisb
    7

    Avec Mosquito, on vient de livrer le site de la Fondation Custodia :
    ▻https://www.fondationcustodia.fr

    Comme d’habitude, c’est du #SPIP, #HTML5 #responsive et tout ça…

    Parmi les points à voir en particulier…

    – Un menu hamburger tout mignon.

    https://i.imgur.com/bNcdyNm.jpg

    – Des #longforms pour la présentation des expositions :
    ▻https://www.fondationcustodia.fr/Georges-Michel

    – Dans ces longforms, on peut présenter des collections d’œuvres avec mon raccourci <ligne>, qui présente les images sur une ou plusieurs lignes, en adaptant la taille des images pour occuper la largeur de l’écran :

    https://i.imgur.com/o4jIdNN.jpg

    – Ou avec mon raccourci <slide>, qui présente les documents les uns à côté des autres sur une ligne.
    ▻https://www.fondationcustodia.fr/Les-portraits-en-miniature-12

    https://i.imgur.com/FLoLf2r.jpg

    Pour rappel, « ligne » et « slide », c’est dans mon #plugin « Insertion avancée d’images », documenté ici :
    ►http://www.paris-beyrouth.org/Plugin-SPIP-Insertion-avancee-d-images

    On trouvera même quelques habillages automatiques de formes irrégulières, toujours avec ce même plugin, et le raccourci <img|shape> :

    https://i.imgur.com/zGMFgeK.jpg

    C’est pas toujours évident à utiliser à bon escient, mais là ça donne un aspect « imprimé » particulièrement chic je trouve.

    – Dans les « formes longues », un problème usuel, c’est la navigation verticale « trop » longue, et donc l’utilisation d’une sorte de table des matières pour pouvoir naviguer rapidement. Mine de rien, c’est toujours assez problématique. Là j’ai développé une solution que je trouve bien sympathique, avec une table des matières en haut à gauche de l’écran, qui se plie/déplie, au fur et à mesure du scroll, et au survol, pour indiquer où on est et qui, évidemment, permet de naviguer au clic :

    https://i.imgur.com/g7h66dl.jpg

    Détail mignon : pour réaliser le graphisme de ce petit menu, il n’y a pas une seule image, c’est entièrement réalisé en CSS.

    – Il y a une maquette assez sympa pour la présentation des « Collections », avec des panneaux qui défilent horizontalement (et c’est responsive, la présentation change assez radicalement sur téléphone ou tablette) :
    ▻https://www.fondationcustodia.fr/les-portraits-en-miniature

    – Il y a aussi une présentation avec un « méga-zoom » sur les images, pour la présentation des œuvres des « Catalogues », mais comme le contenu n’est pas encore en ligne, alors je reposterai un message pour que tu ailles voir quand ce sera prêt.

    – Quand on clique sur la loupe de recherche, hop un grand pavé recouvre l’écran :

    https://i.imgur.com/FRMLXPy.jpg

    – Enfin, sur ce site, je me suis particulièrement astreint à ce que toutes les animations/interactions/transitions soient autant que possible réalisées sans Javascript. Du coup, on peut naviguer sur le site avec Javascript désactivé, avec un minimum de dégradations (essentiellement : des images responsive qui vont rester en basse définition). Mais le menu hamburger se déploie, avec ses sous-menus animés, comme si de rien n’était ; le système de « table des matières » des longforms fonctionne très bien, avec ses animations au survol, les sliders un peu partout fonctionnent de manière transparente… (et évidemment : des interactions « au doigt » moins riches sans Javascript).

    – Enfin la page d’accueil obtient un score de 100/100 sur mobile avec PageSpeed, et 97/100 sur ordinateur, c’est chouette.

    À l’intérieur du site, j’ai le plugin Saisies qui me fait chuter la moyenne sur quelques pages, en m’insérant violemment des appels à un fichier CSS et un fichier Javascript (ah, c’est vache !). :-))

    #shameless_autopromo

    ARNO* @arno ART LIBRE
    • @arno
      ARNO* @arno ART LIBRE 18/01/2018

      Un effet que j’aime bien sur ce site : j’ai mis des dégradés colorés sous les grandes images, pour avoir quelque chose qui s’affiche avant que les images soient chargées.

      Ce qui donne par exemple, avant chargement de l’image :

      https://i.imgur.com/mJWfFAo.jpg

      et une fois l’image chargée :

      https://i.imgur.com/nQoOoBB.jpg

      Ce que je réalise directement dans le squelette ainsi :

      #image_haut {
              background-color: [#(#LOGO_ARTICLE_RUBRIQUE|couleur_extraire)];
              background: linear-gradient(to bottom,
                      [#(#LOGO_ARTICLE_RUBRIQUE|image_proportions{16,9, focus}|couleur_extraire{10,1})] 0%,
                      [#(#LOGO_ARTICLE_RUBRIQUE|image_proportions{16,9, focus}|couleur_extraire{10,5})] 25%,
                      [#(#LOGO_ARTICLE_RUBRIQUE|image_proportions{16,9, focus}|couleur_extraire{10,10})] 50%,
                      [#(#LOGO_ARTICLE_RUBRIQUE|image_proportions{16,9, focus}|couleur_extraire{10,15})] 75%,
                      [#(#LOGO_ARTICLE_RUBRIQUE|image_proportions{16,9, focus}|couleur_extraire{10,19})] 100%
              );
      }
      #image_haut:before {
              position: absolute;
              top: 0;
              left: 0;
              width: 100%;
              height: 100%;
              content: " ";
              z-index: 1;
              background: linear-gradient(to right,
                      [#(#LOGO_ARTICLE_RUBRIQUE|image_proportions{16,9, focus}|couleur_extraire{1,10})] 0%,
                      [#(#LOGO_ARTICLE_RUBRIQUE|image_proportions{16,9, focus}|couleur_extraire{5,10})] 25%,
                      [#(#LOGO_ARTICLE_RUBRIQUE|image_proportions{16,9, focus}|couleur_extraire{10,10})] 50%,
                      [#(#LOGO_ARTICLE_RUBRIQUE|image_proportions{16,9, focus}|couleur_extraire{15,10})] 75%,
                      [#(#LOGO_ARTICLE_RUBRIQUE|image_proportions{16,9, focus}|couleur_extraire{19,10})] 100%
              );
               mix-blend-mode: soft-light;
      }
      ARNO* @arno ART LIBRE
    • @b_b
      b_b @b_b PUBLIC DOMAIN 18/01/2018

      Super astuce, merci :)

      b_b @b_b PUBLIC DOMAIN
    • @realet
      RealET @realet CC BY-SA 18/01/2018

      Merci pour cette astuce du fond d’image en dégradé CSS.

      RealET @realet CC BY-SA
    • @realet
      RealET @realet CC BY-SA 18/01/2018

      J’ai essayé de naviguer au clavier et impossible de dérouler le hamburger :(

      RealET @realet CC BY-SA
    • @arno
      ARNO* @arno ART LIBRE 19/01/2018
      @realet

      @realet Je viens de mettre en ligne une détection du focus en javascript, pour plier ou déplier le menu hamburger selon qu’on est sur un lien dans le menu ou en dehors.

      Je fais ceci :

              $("#menu_flottant a").on("focus", function() {
                      $("#afficher_menu").prop("checked", true);
              });
              $("body > *:not(#menu_flottant) a").on("focus", function() {
                      $("#afficher_menu").prop("checked", false);
              });
      ARNO* @arno ART LIBRE
    • @realet
      RealET @realet CC BY-SA 19/01/2018

      Bravo ! quelle réactivité !

      RealET @realet CC BY-SA
    • @jeanmarie
      jeanmarie @jeanmarie CC BY-NC-SA 4/04/2019

      #spip_recette

      jeanmarie @jeanmarie CC BY-NC-SA
    Écrire un commentaire
  • @b_b
    b_b @b_b PUBLIC DOMAIN 13/12/2017
    6
    @jeanmarie
    @tofulm
    @rastapopoulos
    @mukt
    @suske
    @gastlag
    6

    How to make your HTML responsive by adding a single line of #CSS
    ▻https://medium.freecodecamp.org/how-to-make-your-html-responsive-by-adding-a-single-line-of-css

    https://cdn-images-1.medium.com/max/1200/1*jCNANupl0ECRzF6cOLuWNw.gif

    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));

    Titre un peu racoleur mais tout de même intéressant.

    #grid

    • #HTML
    b_b @b_b PUBLIC DOMAIN
    • @rastapopoulos
      RastaPopoulos @rastapopoulos CC BY-NC 14/12/2017

      #intégration #web #html #responsive #css-grid

      RastaPopoulos @rastapopoulos CC BY-NC
    Écrire un commentaire
  • @b_b
    b_b @b_b PUBLIC DOMAIN 16/11/2017
    4
    @nicod_
    @rastapopoulos
    @jeanmarie
    @mukt
    4

    A Brief Overview On #Responsive #Navigation Patterns

    In this article, I want to look specifically at the issue of responsive navigation. We will first talk about information architecture, then the purpose of navigation, and finally we will look at three responsive navigation patterns that have served well over time.

    ▻https://www.smashingmagazine.com/2017/04/overview-responsive-navigation-patterns

    ▻https://bradfrost.github.io/this-is-responsive/patterns.html#navigation

    b_b @b_b PUBLIC DOMAIN
    • @rastapopoulos
      RastaPopoulos @rastapopoulos CC BY-NC 16/11/2017

      #ergonomie #conception #web #mobile #bonnes_pratiques

      RastaPopoulos @rastapopoulos CC BY-NC
    Écrire un commentaire
  • @nicod_
    nicod_ @nicod_ 7/10/2017
    3
    @rastapopoulos
    @tofulm
    @suske
    3

    ►https://mjml.io
    ►https://mjml.io
    #emailing #email #template #responsive #processor #markup #generator #framework

    nicod_ @nicod_
    Écrire un commentaire
  • @b_b
    b_b @b_b PUBLIC DOMAIN 7/09/2017
    1
    @kent1
    1

    XRespond – Virtual Device Lab

    ▻http://app.xrespond.com

    I came across Matt Kersley’s Responsive Web Design Testing Tool ▻http://mattkersley.com/responsive and was blown away. It cut my development time in half. Even though the app was quite basic, it quickly became indispensable, and I continued to use it for several years.

    https://www.smashingmagazine.com/wp-content/uploads/2017/08/mattkersley-large-opt.png

    It was very much to my surprise that I never saw this brilliant concept taken any further. This, combined with the lack of features, set me on a journey to create the open-source virtual device lab XRespond.

    https://www.smashingmagazine.com/wp-content/uploads/2017/08/xrespond-large-opt.png

    via ▻https://www.smashingmagazine.com/2017/09/xrespond-building-responsive-websites-simpler

    #responsive #outil #test

    b_b @b_b PUBLIC DOMAIN
    Écrire un commentaire
  • @mist_
    Mist. GraphX @mist_ 18/07/2017
    3
    @rastapopoulos
    @02myseenthis01
    @mukt
    3

    Effectivement, une fois lue ça coule de source… la majorité des utilisateurs mobile utilisant leur pouce pour naviguer, la plupart des menus mobiles sont donc mal placés. Plus la taille de l’écran est grande moins la zone d’utilisation couverte par les mouvements du pouce est importante. En prenant en compte les gauchers et droitiers, on isole donc une zone idéale ou les éléments sont accessibles dans la majorité des cas.

    ▻http://uxmovement.com/mobile/why-mobile-menus-belong-at-the-bottom-of-the-screen

    Mist. GraphX @mist_
    • @rastapopoulos
      RastaPopoulos @rastapopoulos CC BY-NC 18/07/2017

      #ux #interface #ergonomie #web #mobile #responsive

      RastaPopoulos @rastapopoulos CC BY-NC
    Écrire un commentaire
  • @b_b
    b_b @b_b PUBLIC DOMAIN 23/06/2017
    3
    @rastapopoulos
    @mukt
    @jeanmarie
    3

    #Fluid #Responsive #Typography With #CSS Poly Fluid Sizing
    ▻https://www.smashingmagazine.com/2017/05/fluid-responsive-typography-css-poly-fluid-sizing

    Fluid layouts have been a normal part of front-end development for years. The idea of fluid typography, however, is relatively new and has yet to be fully explored. Up until now, most developers’ idea of fluid typography is simply using Viewport units maybe with some minimum and maximum sizes.

    https://www.smashingmagazine.com/wp-content/uploads/2017/05/2-scatter-plot-font-size-opt.png

    That’s called a trendline. It’s a way to find an interpolated font-size value for any viewport width, based on the data provided.

    The are several methods for determining the slope and y-intercept. When multiple values are involved, a common method is the Least Squares fit:

    https://www.smashingmagazine.com/wp-content/uploads/2017/05/4-least-squares-fit-opt.png

    You can use the trendline equation like this:

    h1 {
     font-size: calc({slope}*100vw + {y-intercept}px);
    }

    Once you find your slope and y-intercept you just plug them in!

    b_b @b_b PUBLIC DOMAIN
    • @rastapopoulos
      RastaPopoulos @rastapopoulos CC BY-NC 23/06/2017
      @drbouvierleduc

      ▻https://fr.wikipedia.org/wiki/M%C3%A9thode_des_moindres_carr%C3%A9s

      #intégration #web #lisibilité #typographie
      cc @drbouvierleduc

      RastaPopoulos @rastapopoulos CC BY-NC
    • @rastapopoulos
      RastaPopoulos @rastapopoulos CC BY-NC 23/06/2017

      Ya des gens qui sont pétés du bulbe quand même. :D
      Et une preuve de plus que le métier d’intégrateurice n’a rien à envier en complexité aux devs « backend ». :)

      RastaPopoulos @rastapopoulos CC BY-NC
    • @jeanmarie
      jeanmarie @jeanmarie CC BY-NC-SA 3/01/2018

      Ouais, alors bon, faut quand même un petit niveau de math !

      J’ai calculé ma pente, mais le y-intercept, c’est autre chose... c’est quoi les Y et X avec une barre dessus dans cette formule :

      https://www.smashingmagazine.com/wp-content/uploads/2017/05/4-least-squares-fit-opt.png

      Note pour plus tard : penser à mieux écouter les cours de math...

      jeanmarie @jeanmarie CC BY-NC-SA
    Écrire un commentaire
  • @nhoizey
    Nicolas Hoizey @nhoizey CC BY-NC-SA 16/05/2017

    Accessibility in a Responsive World
    ▻https://www.filamentgroup.com/lab/accessibility-funka.html
    #slides_a11y_RWD_clevermarks

    Nicolas Hoizey @nhoizey CC BY-NC-SA
    • @rastapopoulos
      RastaPopoulos @rastapopoulos CC BY-NC 17/05/2017

      #accessibiltié #responsive #intégration #web #javascript #CSS #HTML

      RastaPopoulos @rastapopoulos CC BY-NC
    Écrire un commentaire
  • @cy_altern
    cy_altern @cy_altern CC BY-SA 8/04/2017

    RÖCSSTI : le micro-framework CSS qui a la patate !
    ►https://rocssti.net

    Un framework CSS minimaliste, simple, très léger et customisable à souhait. Conçu pour les sites responsive, avec en particulier une grille en em.
    Basé sur des conventions de nommage des classes (noms courts et explicites) + une méthode de rangement des éléments.
    Inclu des versions SASS et LESS, propose un générateur pour ceux qui n’utilisent pas de pré-processeur CSS.
    Basé sur le reset CSS de Tetue et recycle plusieurs éléments de Knacss

    Les lignes directrices : ▻https://rocssti.net/guideline-rocssti-css
    Le code complet commenté : ▻https://rocssti.net/code-css-commentaires-rocssti

    #rocssti #css #framework #responsive

    cy_altern @cy_altern CC BY-SA
    • @nicod_
      nicod_ @nicod_ 8/04/2017

      #classes #atomiques

      nicod_ @nicod_
    • @rastapopoulos
      RastaPopoulos @rastapopoulos CC BY-NC 8/04/2017

      #intégration #web #micro-framework

      RastaPopoulos @rastapopoulos CC BY-NC
    • @nicod_
      nicod_ @nicod_ 8/04/2017

      #humour_douteux

      nicod_ @nicod_
    Écrire un commentaire
  • @b_b
    b_b @b_b PUBLIC DOMAIN 11/02/2017
    16
    @spip
    @gastlag
    @rastapopoulos
    @kent1
    @tofulm
    @marcimat
    @typo
    @monolecte
    @7h36
    @whilelm
    @fadixu
    @baroug
    @nicod_
    @magik
    @ben
    @booz
    16

    Typographic Email

    This is a #responsive #email template that is optimized for readability. This is used in my project - EmailThis. I created it because I needed a simple, minimal yet beautiful email template that focusses specifically on readability.

    https://raw.githubusercontent.com/EmailThis/typographic-email/master/screenshot.png

    source : ▻https://github.com/EmailThis/typographic-email
    démo : ▻https://rawgit.com/EmailThis/typographic-email/master/dist/kitchen_sink.html

    À intégrer dans le plugin Newsletter de #SPIP ?

    b_b @b_b PUBLIC DOMAIN
    • @kent1
      kent1 @kent1 ART LIBRE 11/02/2017

      +1

      kent1 @kent1 ART LIBRE
    • @b_b
      b_b @b_b PUBLIC DOMAIN 24/02/2017

      Intégré dans la version 1.5.1 du plugin Newsletter cf : ▻https://zone.spip.org/trac/spip-zone/changeset/103048

      Voilà ce que ça donne :

      https://pic.infini.fr/f1Yl9aPZ.png

      #spip_blog

      b_b @b_b PUBLIC DOMAIN
    Écrire un commentaire
0 | 25 | 50 | 75 | 100 | 125 | 150 | 175 | 200 | ... | 250

Thèmes liés

  • #css
  • #web
  • #intégration
  • #responsive_web_design_rwd_
  • #spip
  • industryterm: web design
  • industryterm: web design rwd
  • #html
  • #html5
  • #javascript
  • technology: html
  • #css
  • #design
  • #responsive
  • #plugin
  • #jquery
  • #web_design
  • #shameless_autopromo
  • #rwd
  • #menu
  • #développement
  • #framework
  • #rwd
  • #interface
  • #navigation
  • #spip_blog
  • #web-design
  • #images
  • #webdesign
  • publishedmedium: smashing magazine
  • #démo
  • #longform
  • #image
  • #clevermarks
  • #template
  • #e-commerce
  • #mobile
  • #typographie
  • #email
  • #viewport