Dear Designers, I’m sorry. Love, Your Dev
Dear Designers,
I’m sorry.
I’m sorry that the responsive website I’ve just built based on your design is not pixel-perfect. I’m sorry that I used rem and percentage units instead of pixels. I know you set each level of heading with a font-size and line-height in very specific, and intentional, pixels. I know that one image was supposed to be 450px tall and as wide as the screen, and those icons are supposed to be 24px wide, but never taller than 26.25874px.
You’re Great. Your Design is Great. You’re Both Beautiful Flowers.
And dammit, I’ll be the first to admit, it all looks absolutely flawless in your Sketch file and PNGs, at screen widths of 1440px and 320px. But do you know what happens when someone isn’t viewing the site at either of those widths (which is more often than not)? Fucking mayhem. It’s awful. Nothing fits. Nothing scales. It’s just gross, and that makes me feel worse.
I’m Just Trying To Do My Job
As a developer who really appreciates good design, I aim to make something that is truly representative of the beautiful piece of art you’ve just handed off to me (in the form of a Sketch file). I don’t want to manhandle your creation until it’s unrecognizable to you, the creator. But sometimes, certain aspects of that can’t be avoided; and, in those cases, I want you to know, I am sorry. Also, please try to be less damn [pixel-]sensitive about it.
And Then We Meet…
When we have a design review of dev’s current status, I appreciate that you recognize (without “Inspecting”) that the p’s aren’t exactly 14px on mobile. Can I fix that? Yes. But will it make for a better experience across the board? Not so much. Because what do you mean by that? Do you want me to only change the font-size of p elements to 14px at 320px and lower? Or should I change it at the more common 480px (if that’s even the right width at this point in time)? What about at 768px? WTF do I do there? Have you seen it at 768px? It’s a god damned nightmare!
Oh, but wait, it’s not so bad, because I, the developer, used rem, percentage, and viewport size units instead of pixels. Does this mean your teensy-weensy mobile screen size (320px) design has p elements that aren’t exactly 14px in size? Yes. But, they fit, and scale based on screen size, and require much less code overall (therefore less load time, maintenance, etc.).
It’s Not You, It’s Your Tools
Don’t get me wrong. I’m not blaming you, or shaming you, and certainly not trying to get off easy here (honestly, if I were trying that, I wouldn’t write about it). I spend a hefty amount of time trying to get just the right measurements to scale properly and still accurately represent your design to most anyone (excluding designers). If I’m being honest, this is probably one of the things I spend the most time on (and, I’m fully aware, something I probably should not be spending virtually any time on, because I’m not a designer). However, it becomes especially time-hefty if I don’t have designs for anything other than “desktop” (1440px) and “mobile” (320px) width screens.
I understand that it’s really not your fault, you’ve been trained this way. You’re working in static environments. When you change the size of your Sketch window or even your screen, your design size doesn’t change, you just have to scroll around it. Maybe just try to remember, it doesn’t work the same for me. When the browser size changes, or when I change devices, everything changes. I could, of course, force it to do otherwise, but that’s kind of counterintuitive to modern standards, isn’t it? Isn’t it!?
Somebody Help Me Out Here
What I don’t understand, at this point in time, is why we don’t have some legit tools that are made to allow designers to design in a more fluid/responsive environment… Is that a thing yet? Because it really, really should be. If it is, and I just haven’t encountered it, anyone who happens to be reading this, please enlighten me. PLEASE!
Still, I’m Sorry. But Also, Just Maybe, You’re Welcome.
Overall, what I’m trying to say is, I’m sorry for forcing your design to be pixel-unperfect. I made it perfect to begin with, where all the different typography was set to the specific pixel size, but then I opened the window in my laptop when I was working at home and found the disaster that it creates. Which led me to work a couple more hours on making it responsive. Despite the knowledge that in our design review, you would point out, “Oh hey, for mobile, paragraphs have 14px font-size and 22px line-height; and headings have…”
Pixels Aren’t Perfect
Things are never pixel-perfect in real life, and as the web gets closer and closer to that, please try to understand, as designers, that while developers can work some serious magic, we’re not literal magicians, we have our limits, and we have our standards. But most importantly, we rarely use pixels as a direct element sizing mechanism.
Sincerely,
Your Developer
