#responsive
-
-
The Guide To #Responsive_Design In 2023 and Beyond - Ahmad Shadeed
▻http://ishadeed.com/article/responsive-designResponsive 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).
-
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-functionsQuand 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-unitsVous avez repéré quoi en particulier ?
#integration #integrationWeb #ui #HTML #responsive #variables
-
SCREEN SIZE MAP » Compare viewport sizes
▻https://screensizemap.comComparateur de tailles d’écran avec filtrage par "popularité" : une aide pour déterminer les breakpoints
-
A Web Developer’s Browser | Responsively App
▻https://responsively.appUn 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 -
«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. […] »
-
-
ça fait tellement d’année qu’on attend ça…
#CSS #intégration #web #responsive
-
-
artf/grapesjs : Free and Open source Web Builder Framework. Next generation tool for building templates without coding
▻https://github.com/artf/grapesjsUn 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.
#template #maquette #interface #blocs #HTML #CSS #responsive
ping @drbouvierleduc @smellup-
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.
-
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)
-
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
-
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)
-
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).
-
-
Responsive Data Tables | CSS-Tricks
▻https://css-tricks.com/responsive-data-tablesUne astuce en CSS pour rendre les tableaux HTML de données responsives (spoiler : utilise des ::before)
ping @tofulm :) -
Responsive Images : comprendre srcset et sizes - Alsacreations
▻https://www.alsacreations.com/article/lire/1621-responsive-images-srcset.htmlImages 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
-
Techniques for Data Visualization on both Mobile & Desktop, by Nadieh Bremer | Visual Cinnamon
▻https://www.visualcinnamon.comFrom doing nothing all the way to creating a different chart for mobile and desktop. I’ll share and explain these and many more examples
-
Time-saving #CSS techniques to create #responsive #images
▻https://medium.freecodecamp.org/time-saving-css-techniques-to-create-responsive-images-ebb1e84fTo 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.-
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
-
-
Test Your Website at Different Mobile Screen Resolutions
▻http://responsivechecker.net/responsiveUn testeur de rendu « responsive » spécialement bien fourni en modèles de terminaux
-
Web #design Tricks To Fuel Your Business Growth
▻https://hackernoon.com/web-design-tricks-to-fuel-your-business-growth-22bfad5902ee?source=rss--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 (...)
-
Responsive Components: a Solution to the Container Queries Problem — Philip Walton
▻https://philipwalton.com/articles/responsive-components-a-solution-to-the-container-queries-problemThis 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.
-
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).
-
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 :
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…
-
-
Qu’elle classe ce code css ;-)
Responsive Elements - Semantic
▻https://semantic-ui.com/examples/responsive.htmlBon 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.
-
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-childest très long à compiler et trouver, c’est méga complexe comme sélecteur..segments_vertical .segments__segment:first-childest beaucoup plus rapide -
+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.
-
Il y a #Grillade de #KNACSS aussi : ►https://knacss.com/grillade
Je commence a l’utiliser à la place de celle de #SemanticUI -
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.
-
-
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?";
}
} -
Avec Mosquito, on vient de livrer le site de la Fondation Custodia :
▻https://www.fondationcustodia.frComme d’habitude, c’est du #SPIP, #HTML5 #responsive et tout ça…
Parmi les points à voir en particulier…
– Un menu hamburger tout mignon.
– 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 :– 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-12Pour 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-imagesOn trouvera même quelques habillages automatiques de formes irrégulières, toujours avec ce même plugin, et le raccourci
<img|shape>:
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 :
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 :
– 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 !). :-))
-
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 :
et une fois l’image chargée :
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;
} -
-
Merci pour cette astuce du fond d’image en dégradé CSS.
-
J’ai essayé de naviguer au clavier et impossible de dérouler le hamburger :(
-
@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);
}); -
-
-
-
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-cssgrid-template-columns: repeat(auto-fit, minmax(100px, 1fr));Titre un peu racoleur mais tout de même intéressant.
#grid
-
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
-
-
XRespond – Virtual Device Lab
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.
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.
via ▻https://www.smashingmagazine.com/2017/09/xrespond-building-responsive-websites-simpler
#responsive #outil #test
-
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
-
#Fluid #Responsive #Typography With #CSS Poly Fluid Sizing
▻https://www.smashingmagazine.com/2017/05/fluid-responsive-typography-css-poly-fluid-sizingFluid 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.
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:
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!-
-
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 ». :) -
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 :
Note pour plus tard : penser à mieux écouter les cours de math...
-
-
Accessibility in a Responsive World
▻https://www.filamentgroup.com/lab/accessibility-funka.html
#slides_a11y_RWD_clevermarks -
RÖCSSTI : le micro-framework CSS qui a la patate !
►https://rocssti.netUn 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 KnacssLes lignes directrices : ▻https://rocssti.net/guideline-rocssti-css
Le code complet commenté : ▻https://rocssti.net/code-css-commentaires-rocssti
