Wednesday, April 24, 2019

order in the court

Historically my company had the inmates engineers running the joint, but as the company has matured, we added specialized product managers, UX, and now, dedicated designers.

Designers and UI engineers have to establish the boundaries for "pixel perfection" vs. what is expedient in the current code base, and with ideas such as making things as responsive as possible, even when there are varying designs for mobile vs desktop.

In one job (which of course was part of a hair-on-fire we need to get this out tonight rush) the desktop looked like this:

And the mobile might collapse that into two columns:

The astute might observer might notice some tweaking going on - especially in the order, assuming these were flexbox'd or otherwise allowed to flow/ wrap.... from a designers point of view, it's maximizing (or rather, minimizing) use of space, and also with an eye toward keeping matching icon colors apart. From an engineers point of view, it's a bit messy to have one code base that can do either...

Anyway, the short of it is, flex-box items can have an "order" CSS property that let me line up things in the most space efficient way. Now, my good engineer soul thinks that feels a bit awkward to have to apply to all items, but to get a little responsive mojo working it's pretty handy - there was already a parent class that was different in mobile mode (this part of the site is reactive though we are designing more and more in a responsive kind of way, so we could also use media queries) so just applying the order in the mobile case was easy.