+++
title = "fully responsive web design"
summary = "my pipe dream is to redesign my website to be fully responsive -- not across mere pixel widths, but by aspect ratio and overall size"
date = 2018-04-22T10:42:00-05:00
updated = 2024-11-11T05:58:10-06:00
source = "https://mastodon.social/@trwnh/99903847448978099"
+++

my pipe dream is to redesign my website to be fully responsive -- not across mere pixel widths, but by aspect ratio and overall size.

does anyone consider what their website looks like when it's fullscreened across one of those samsung 3840x1080 monitors? probably not, and why would you?

but i do

---

## refinement

let's say the base case is when the aspect ratio is square

you can set width-based breakpoints as usual, but logically extend your approach to multiple different media query sets

- one height-based breakpoint for when there is less than some minimum required height? ("too small" mode)
- one for when there is less than a square aspect ratio (landscape mode)
- one for everything beyond that (portrait mode)

so you might have for example assuming liberal use of breakpoints:

- min-width 320, min-height 320
- min-width 400, min-height 320
- min-width 400, min-height 400
- min-width 480, min-height 320
- min-width 480, min-height 480
- min-width 600, min-height 320
- min-width 600, min-height 600
- min-width 800
- min-width 960
- min-width 1150
- min-width 1320
- min-width 1560
- ...

notice we stopped taking height into account past a certain point, because we are assuming the page content is flowing vertically and will overflow the viewport in the vertical direction. if we were designing a site that flowed horizontally then we would continue in the height axis (and perhaps cap off the width queries at some point instead).

for more extreme widths it becomes more interesting to consider those horizontal flows although it should be recognized that this is niche.