28 ms·

The problem sadly isn't even mobile-first vs. desktop, but rather designers who still haven't figured out that the web is dynamic content that should be allowed

The problem sadly isn't even mobile-first vs. desktop, but rather designers who still haven't figured out that the web is dynamic content that should be allowed to flow according to the user's display device size and shape. It's not and never has been a static medium like paper. It's not limited to a specific size and shape like paper, and should not be treated as if it were. Web "designers" should not be trying to force the content into any specific size or pixel resolution, as there's just too many different resolutions of screens and width vs. height layouts of those screens to ever be able to cover them all appropriately without adapting to the idea that the content must be able to flow accordingly. It also severely harms accessibility for folks with vision issues who might scale up their fonts to compensate if doing so causes the content to break in horrible ways that make it unreadable.

ReactiveJelly 3y ago
The designers probably know that, but it costs money to design for 2 platforms. So they pick the 2 biggest platforms for non-hackers... Android and iOS...
- blooalien 3y ago
  You're not designing for two (or more) platforms at all. You're designing for one platform. The Web. It's built on some pretty well defined standards that a ton of folks seem hellbent on breaking to force the web into a shape that it simply isn't.
  - BlueTemplar 3y ago
    They didn't mean platform in this way. But in the sense that small touchscreens are fundamentally different than big monitors + mouse & keyboard. That's why anything that is not the simplest website should use two different interfaces. (Also, apps don't belong in browsers.)
- albedoa 3y ago
  > So they pick the 2 biggest platforms for non-hackers... Android and iOS... I can't imagine you are talking about the same thing here. (Or if you are, then you are making OP's point.)
klysm 3y ago
It's easy to say stuff like this, but go try and implement it. It's really hard.
- threatofrain 3y ago
  Some designers can use Figma's equivalent of grid and flexbox and some can't. What's hard is implementing all the shades of gray between two pixel-perfect designs because the designer didn't do this basic work.
- blooalien 3y ago
  Yeah, it's not really "easy to say stuff like this" because everyone who thinks they know better than actual real honest-to-goodness web designers will instantly want to argue with you to the bitter end why their fantasy web design has to be 100% "pixel perfect" layout exactly as they envision it on every single device or browser ever invented. It's a huge part of why I'm no longer a web designer. More of my time was wasted fixing literal one pixel differences in layout between browsers (and browser versions) than almost any other part of the process.
  - spookthesunset 3y ago
    I haven't encountered a "pixel perfect" designer for at least 15 years now, if not more. Virtually every single UX designer I've worked with provides flexible designs that scale with screen size.
    - butlike 3y ago
      Good. I've finally gotten over my nightmares where I'm chopping photoshop designs and literally using <img src=""> to add a rounded edge on a <td>
      - waterhouse 3y ago
        This is the most awesome approach for rounded corners: https://ridiculousfish.com/blog/posts/roundy.html https://ridiculousfish.com/blog/posts/roundy.html
leptons 3y ago
>It's not and never has been a static medium like paper. It's not limited to a specific size and shape like paper, and should not be treated as if it were. I often get "print first" page layouts, created from dynamic data that can have varying amounts of content. These pages also have to work in mobile and desktop browsers and look good on all of them. I don't find it to be that difficult. Sure it takes a little longer, but it's what the job requires. Media queries make it all possible, as well as a little bit of javascript.
mattacular 3y ago
Designing good UI for such a varied platform as "the web frontend" is incredibly challenging. They might be at 300px wide, they might be at 1920px wide, they might have a mouse, or they might be using all touch. Or both. Or neither.
stevebmark 3y ago
Absolutely not. All books printed have text that is roughly the same line width for a reason. Reading width should always be constrained.
camillomiller 3y ago
I work with agencies coming from print and oh boy, don’t get me started. At the same time it’s a freaking mess even for someone who’s been doing this for a long time. My go to strategy is now to address concerns as much as possible by being involved in the design phase, as I have a design background, then implement and ship and then always have a “tell me everything that’s broken in obscure viewports only 1% of people use” and fix those live with CSS patches and viewport specific media queries during review phase or even live.

ReactiveJelly 3y ago

The designers probably know that, but it costs money to design for 2 platforms. So they pick the 2 biggest platforms for non-hackers... Android and iOS...

blooalien 3y ago
You're not designing for two (or more) platforms at all. You're designing for one platform. The Web. It's built on some pretty well defined standards that a ton of folks seem hellbent on breaking to force the web into a shape that it simply isn't.
- BlueTemplar 3y ago
  They didn't mean platform in this way. But in the sense that small touchscreens are fundamentally different than big monitors + mouse & keyboard. That's why anything that is not the simplest website should use two different interfaces. (Also, apps don't belong in browsers.)
albedoa 3y ago
> So they pick the 2 biggest platforms for non-hackers... Android and iOS... I can't imagine you are talking about the same thing here. (Or if you are, then you are making OP's point.)

klysm 3y ago

It's easy to say stuff like this, but go try and implement it. It's really hard.

threatofrain 3y ago
Some designers can use Figma's equivalent of grid and flexbox and some can't. What's hard is implementing all the shades of gray between two pixel-perfect designs because the designer didn't do this basic work.
blooalien 3y ago
Yeah, it's not really "easy to say stuff like this" because everyone who thinks they know better than actual real honest-to-goodness web designers will instantly want to argue with you to the bitter end why their fantasy web design has to be 100% "pixel perfect" layout exactly as they envision it on every single device or browser ever invented. It's a huge part of why I'm no longer a web designer. More of my time was wasted fixing literal one pixel differences in layout between browsers (and browser versions) than almost any other part of the process.
- spookthesunset 3y ago
  I haven't encountered a "pixel perfect" designer for at least 15 years now, if not more. Virtually every single UX designer I've worked with provides flexible designs that scale with screen size.
  - butlike 3y ago
    Good. I've finally gotten over my nightmares where I'm chopping photoshop designs and literally using <img src=""> to add a rounded edge on a <td>
    - waterhouse 3y ago
      This is the most awesome approach for rounded corners: https://ridiculousfish.com/blog/posts/roundy.html https://ridiculousfish.com/blog/posts/roundy.html

leptons 3y ago

>It's not and never has been a static medium like paper. It's not limited to a specific size and shape like paper, and should not be treated as if it were. I often get "print first" page layouts, created from dynamic data that can have varying amounts of content. These pages also have to work in mobile and desktop browsers and look good on all of them. I don't find it to be that difficult. Sure it takes a little longer, but it's what the job requires. Media queries make it all possible, as well as a little bit of javascript.

mattacular 3y ago

Designing good UI for such a varied platform as "the web frontend" is incredibly challenging. They might be at 300px wide, they might be at 1920px wide, they might have a mouse, or they might be using all touch. Or both. Or neither.

stevebmark 3y ago

Absolutely not. All books printed have text that is roughly the same line width for a reason. Reading width should always be constrained.

camillomiller 3y ago

I work with agencies coming from print and oh boy, don’t get me started. At the same time it’s a freaking mess even for someone who’s been doing this for a long time. My go to strategy is now to address concerns as much as possible by being involved in the design phase, as I have a design background, then implement and ship and then always have a “tell me everything that’s broken in obscure viewports only 1% of people use” and fix those live with CSS patches and viewport specific media queries during review phase or even live.