Today, I got involved in a small project to redesign the landing page for a marketing outreach, and it gave me inspiration to talk about the general principles of adaptation for desktop screens (width > height) vs. mobile ( height > width).The examples I am going to show here use CSS3 flexbox, but nothing really cutting edge.

First, I laid out the desktop version. Again, this aspect ratio is wider than tall, so I used two equivalent-width flexbox DIVs.¹ Additionally, the right side column is vertically centered in its container DIV.² Easy, right?

Just to make it even better, I am using a centering on the entire display element to put it in the middle of the screen.³ Another trick used in this layout was a non-proportional cropping of the photo, because it's going into a column that's ~ 45% of the width of the screen. By cropping to ~ 5:8 aspect ratio, the picture is 62.5% as wide as it is tall, so it fits better in an essentially tall DIV.

If you try to do this layout on a mobile screen, it's a disaster because the columns are so narrow, and therefore become very tall to fit the text (right column) inside, and the input boxes are too small. What we do instead is a single-column layout and center everything. (Also, the original photo is used without cropping, so it has ~ 1:1 aspect ratio.

Now it looks great on a mobile phone as well. My marketing person is happy again. :-)

If you're a lay-person, just stop reading here and go tell your designer this is what you want. For those interested, this is pretty basic CSS3 as discussed in the notes below.