Toward a Responsive Page

This page begins — at last! — teaching me how to lay out a responsive web page.

Responsive design means to adapt the page layout to differently-sized screens. Multiple columns can look good on a desktop or laptop monitor in landscape mode. The narrow, portrait mode of a smartphone probably looks better with a one-column presentation.

This version of the project launched on August 9, 2025. It marks perhaps my fourth or fifth swing at so-called fluid design.

I tried floated divs. I tried flex boxes. Nothing quite worked as hoped across the range of different devices.

Two techniques appear for the first time in this project: the grid, and the media query.

Oh my! The grid is serving very nicely. It gives each element of the page a definite place to display. I colored the grid spaces differently to reveal the layout.

Media query senses the size of the screen. It rearranges the grid to look like a stack of blocks on small screens such as smartphones. Above a certain screen size, it separates parts of the layout into two columns.

The visual presentation is intentionally garish. It will tone down and take on a more polished look as I learn more, up to the limit of my rather novice know-how.

Beginning last November and continuing into early August 2025 I added articles to the original page, oldest sorted to the bottom. It can still be viewed using the link in the upper-left are of this page.

Future work on this page will appear as new, separate articles, along with a scheme of links for navigating to them. This page will become just one more horse in the stable. A more generic home page will replace it.

As denizens of the digital world go, I am a desktop dinosaur. My interest in computing and the web predates the iPhone by twenty years. It means I park my butt before an old-timey computer to write pages like this. (Well, OK, not so old-timey: it is a Raspberry Pi 5 16Gb with a 1TB SSD and a 4K monitor, but still...)

Here is a friendly hint to the young people: learn to have fun sitting down, like I do nowadays, as your day also will come.