↵

AMA: Brad Frost, Web Designer

7 years ago from Brad Frost, Brad Frost Web

  • zee welc, 7 years ago

    Padding and Retina: For some time i couldn't find the reason why some (but just very few) elements on my project appear slightly different on PC and Mac. Same browsers. Finally I fixed that by applying retina media query that divided at least my mac from rest. Could you explain maybe why it happens? I found it specially happens with padding.

    The scenario is like this, say I have padding-top:5px; on element. Same element would display good on one (PC/Mac) and will be few (but not neccesarily 5) pixels shifted on others..

    So padding and retina.. :) IDK, if that interests you I may do a PoC for this.

    2 points
    • 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