Contents tagged “responsive”

There are 53 contents with this tag:

  4. TIL @​media not (min-width: 60rem) { … } doesn't work in Safari, while it works in Chromium and Firefox.

    Safari requires a media type, like all.

    So here's the "right" syntax:
    @​media not all and (min-width: 60rem) { … }

  6. How do you deal with images that need to have a fluid width but fixed height?

    I tend to start from the lowest width/height ratio and increase, knowing larger images will have hidden parts above and below… 😔

    Anything better?

  7. Avatar for csswizardry
    Harry Roberts @csswizardry

    I accidentally moved my hero image onto Cloudinary (who I also adore!). But, a less-optimised image served from the same origin is always faster than a more-optimised image from a third party. Self-host your static assets! csswizardry.com/2019/05/self-host-your-static-assets/

    55 06:06 PM · Sep 29, 2022

    True!

    But most images are currently not or badly optimized. 😔

    They would benefit a lot from an image CDN: resize, compression, modern formats, etc.

  12. Avatar for layoutplusplus
    Every Layout @layoutplusplus

    📢 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

    236 03:36 PM · Jan 14, 2022

    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.

  22. 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?

  34. images-responsiver is 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.

  37. screenshot of It’s not about the device.

    Ethan Marcotte avatar Ethan Marcotte

    It’s not about the device.

    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.

  41. 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 !

  42. 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.

  45. Une ode à l'em

    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 ».

  46. Responsive Icons with SVG

    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… 😉

  48. 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.

  49. Where is the Fold?

    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.