There are 42 contents with this tag:
📢 The 3rd Edition of EVERY LAYOUT is now available!
We were blown away reading all the kind words you gave us for testimonials; have some logical properties as a thank you!
every-layout.devN
Don't have this masterpiece yet? Get it now, it will prevent headaches when creating CSS layouts!
The layout of my #Eleventy project https://pack11ty.dev/ uses it to get a responsive layout without any media query.
Year 2022: the year of Container Queries
Also 2022: most people still don't understand srcset-w/sizes
How will they mix? They currently can't, as @SaraSoueidan explained: https://www.sarasoueidan.com/blog/component-level-art-direction-with-container-queries-and-picture/
Any other resource on the topic?
I started updating my photography site with new Media Queries and CSS environment variables to make sure Surface Duo owners enjoy it even more! 🎉
Other foldable devices will come if it makes sense.
You have a Surface Duo? Feedback is welcome! 🙏
Looks like @archdigestindia could improve #WebPerf for their readers and reduce bandwidth invoices…
564.5px widesizes says the image is full width414 % bigger
I'm happy to announce that @mavaddat will now help maintain and improve jekyll-cloudinary, my plugin to use #Cloudinary for responsive images in sites built with #Jekyll: https://nhoizey.github.io/jekyll-cloudinary/
eleventy-plugin-images-responsiver, my #Eleventy plugin for responsive images, is now available in a much faster v1.9.0! 🏎
My own site build is for example 30 % faster. 😍
This migration from basicHTML to LinkeDOM in images-responsiver looks good! 😍
I have yet to find if this behavior with HTML entities is an issue.
A Bashful Button Worth 8 Million Dollars
6 years ago I reported a bug about 100vh being larger than the viewport height in Safari. It was "intentional" according to webkit/Safari team, and other browsers followed… 🤦♂️
Responsive SVGs - container vs media queries
Maarten shows here (only in Chrome Canary for now) how Container Queries will allow us to have responsive SVG images inline in the HTML.
4329 is a long discussion about how people are really, really, REALLY unhappy how on mobile the viewport units don't represent the size of the viewport — @fantasai https://github.com/w3c/csswg-drafts/issues/4329#issuecomment-814281379
😅
6 years later, this is still my most read article…
I bet I can find 10 different ways people handle responsive images in Markdown, for example in #Eleventy projects… I'm part of the problem. 😅
Shouldn't we try to first list requirements, and then maybe find a single solution for everyone, if possible?
Eleventy: Building an Image Gallery with CSS Grid and PhotoSwipe
Mark is using my Images Responsiver plugin for Eleventy with Netlify Large Media and PhotoSwipe to build an image gallery, and it's really great!
A new nice responsive layout trick built upon Heydon Pickering's Flexbox Holy Albatross.
So there it is, 5 different variations of fully accessible, CSS only mobile menu.
I mixed this awesome #Netlify proxy for #Cloudinary trick from @philhawksworth and @tkadlec with #Eleventy and my responsive images plugin, and the result is great! 😍
Each step of eleventy-plugin-images-responsiver tutorial is both a README and a small Eleventy site with the plugin and progressively improving configuration and usage… 😎
⚠️ People using my #Eleventy plugin for responsive images should be aware that its Git(Hub) repository has moved into the new images-responsiver monorepo.
There's nothing to do if it has been installed from npm, though.
as the device landscape continues to converge, the categorizations will continue to blur. And as you introduce more interactivity and complex features to your site, the singular approach starts to break down.
Designing Adaptive Components, Beyond Responsive Breakpoints
A great talk from Stéphanie about responsible use of responsive components:
Would you play @esviji on your TV/console if d-pad/gamepad were supported?
I should "adapt to input" as @grigs told us on @alistapart: https://alistapart.com/article/adapting-to-input/
Play and tell me: https://play.esviji.com/
How JPEG XL Compares to Other Image Codecs
With many competing image formats available, it's not always easy to know which one(s) we have to use to provide both the best performance and visual quality to Web users.
Responsive web design turns ten
I remember being really excited when I read Ethan's Responsive Web Design article on A List Apart and saw the final responsive result.
images-responsiveris a simple solution for most responsive images needs
Is it catchy enough? 😁
Here's my latest pet project, trying to help people struggling with responsive images: https://nhoizey.github.io/images-responsiver/
If you use #Eleventy, there's also a plugin: https://github.com/nhoizey/eleventy-plugin-images-responsiver
Documentation is still a little rough around the edges, but should be enough at least for people already knowing npm and JS.
The Flexbox Holy Albatross Reincarnated
when you have three items, you’ll be happy with the three-abreast layout and accepting of the single-column configuration. But you might like to avoid the intermediary part where you get a pair of elements on one line followed by a longer element underneath.
great news: there are two on-the-horizion web platform features that are trying to make no-jank, fixed-aspect-ratio, fluid-width images a natural part of the web platform.
I generally avoid terms like “mobile”, “tablet”, and “desktop” in my work. It’s not that they’re bad; it’s because they’re broad. In my experience, terms like these confuse more than they clarify.
Optimiser la performance des images responsives
J'ai eu l'honneur de présenter une petite conférence lors du meetup WebPerf de mars 2018, sur un sujet qui me passionne, puisqu'il combine deux de mes marottes en Web front : la performance et les images en Responsive Web Design. Je vous invite à découvrir mes slides et la vidéo.
Cloudinary fait la promotion de mon plugin Jekyll
Je vous en avais parlé lors de ma migration vers Jekyll 3, je me suis lancé dans le développement d'un plugin Jekyll pour utiliser le service Cloudinary pour mes images responsives.
Voulez-vous une conférence sur les images responsive à ConFoo ?
J'ai proposé pour la première fois un sujet à la conférence canadienne ConFoo de février 2016. Le sujet correspond bien évidemment à une de mes passions du moment, l'optimisation de la taille des images en Responsive Web Design.
Mettez à jour votre Picturefill !
Si vous êtes un peu à jour dans vos développements responsives, vous avez adopté le dernier standard pour les images —srcset, sizes et éventuellement picture— et bien entendu l'excellent polyfill Picturefill qui apporte cette révolution à tous les navigateurs qui n'en disposent pas encore nativement. Si vous n'utilisez pas encore la version 2.3.1, la dernière stable à cet instant, dépêchez-vous de faire la mise à jour !
esviji v2 sera complètement responsive
Voilà plus d'un an que je travaille sur une nouvelle version de mon jeu esviji développé en technologies Web, et plus particulièrement en SVG. Avant la sortie prochaine de cette v2 sur tous vos écrans, voici déjà un petit teasing de son interface devenue complètement responsive.
Viewport height is taller than the visible part of the document in some mobile browsers
When trying to use a 100vh CSS value to build a new interface for a game that would use the full viewport, I discovered that this full height value meant the bottom of the game interface was partialy hidden behind the browser buttons bar or below the "fold" of some mobile browsers.
Suggestions de sujets et orateurs pour Paris Web 2015
Si vous étiez à Paris Web cette année, vous avez dû remplir l'« enquête de satisfaction » comme tout le monde… Quoi ? Pas encore ? Alors allez-y maintenant ! On vous y invitera notamment à suggérer des sujets et orateurs pour la prochaine édition, celle des 10 ans. Voilà ce que j'ai proposé.
Après avoir eu des retours plutôt nombreux et positifs suite à ma conférence à Paris Web 2013, j'ai retroussé mes manches pour proposer une version plus rédactionnelle, en essayant de retranscrire tout ce que j'ai dit mais pas mis dans mes slides, et même plus. Et j'ai la chance d'avoir vu ce très long article publié sur 24 Jours de Web, « le calendrier de l'avent des gens qui font le web d'après ».
There have already been some explorations on responsive SVG images a while back, but when Joe Harrison posted a responsive icon concept on Dribbble and even a working version on a dedicated website, a few people thought this was so wrong they had to make their own version. I must admit I'm one of them… 😉
Ma conférence à Paris Web 2013
Après y avoir assisté plusieurs années en tant qu'auditeur, j'ai eu la joie — le privilège — d'être sélectionné parmi les orateurs de l'édition 2013. Sélectionné qui plus est avec un sujet plutôt pointu, sur une bonne pratique que tout le monde devrait appliquer depuis plus de 10 ans, mais qui est très largement sous estimée.
L'avenir du Web se prépare aujourd'hui
Dans le billet hebdomadaire de WDFriday, Matthieu Bué lance un appel à la mobilisation pour contribuer à l’élaboration de solutions pour « gérer la multiplication des devices ». Ce billet contient une incitation très pertinente à participer aux community groups du W3C, mais se trompe à mon avis de catalyseur.
OK, on le sait tous, « there is no page fold », mais savoir où est ce non fold peut être carrément utile, alors heureusement qu'il y a des outils qui permettent de visualiser simplement ce que donne un site sur les résolutions les plus courantes.
See all tags.
Jason Grigsby
Maarten Van Hoof
Mark Llobrera
Nils Binder
Xiao Zhuo Jia
Matt Anderson
Stéphanie Walter
Jon Sneyers
Ethan Marcotte
Heydon Pickering
Eric Portis