↵

AMA: Brad Frost, Web Designer

7 years ago from Brad Frost, Brad Frost Web

  • Brad FrostBrad Frost, 7 years ago

    Hmmm, interesting. It's hard to comment on your specific scenario, but from a broader perspective I'd say it's why I gravitate towards relative units like ems and rems over fixed pixel units.

    When I first started designing mobile web experiences in 2010, I quickly learned that a pixel is not a pixel is not a pixel. Mobile Safari would render something wildly different than Android 2.1 (yes that far back) which would render something way different than Blackberry 6.0 (yes really that far back). When I switched from px to em-based units, those differences normalized.

    So my advice would be to explore using relative units to see if that helps your situation. And remember, do websites need to look the same in every browser? Click here to find out.

    4 points
    • Nathaniel PeralesNathaniel Perales, 7 years ago

      I completely agree that websites don't need to look the same in every browser! Also, love relative units.

      2 points
    • Mattan IngramMattan Ingram, 7 years ago

      As far as I know this isn't as much of an issue anymore: https://benfrain.com/just-use-pixels/

      I think you have to manually change browser settings to recreate the old undesired text behavior when set in px. Every app that I look at that is set in pixels resizes just fine with user zoom settings across multiple devices and browsers.

      However ems and rems do give you benefits otherwise that still make them useful.

      2 points
      • Brad FrostBrad Frost, 7 years ago

        Thanks for this; glad to hear some of those issues have smoothed out. At this stage in the game, I'm so used to ems and rems that it would be a big mental shift to go back to pixels haha.

        Related: I thought this recent article on ems and rems was good.

        0 points
      • Weston Thayer, 7 years ago

        The comments in that article bring up that there's a user setting to scale only the text. For the history, read: https://mindtheshift.wordpress.com/2015/04/02/r-i-p-rem-viva-css-reference-pixel/

        Respecting a legacy setting just because it exists is dogmatic though. The accessibility scenario is simple. People with low vision need:

        • Things to be bigger (at a minimum, text)
        • No horizontal scrolling (it's very hard to read quickly while panning back and forth)

        Normal browser zoom + responsive design meet those requirements without issue. There's no need to support the large text settings as well.

        0 points