Toward a Responsive Page

August 10, 2025

This page launches me — at last! — toward learning 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.

Backstory

I began to think about responsive design as I was moving my web hosting over onto Neocities servers last November, 2024.

My first thought was to revisit floating divs, the prevailing technique when I last looked into page layout, some years ago.

But then I did some reading. The notion of flex layout stood out to me. I bought a horribly outdated book on the subject. Then I threw it away and purchased the Murach book, sixth edition.

Understanding came slowly. When it arrived, I could see that flex would not satisfy requirements because it addresses either horizontal layout or vertical, but not both at the same time.

Instead, the CSS grid layout scheme proved useful, because it is designed for layout in both dimensions.

Meanwhile my awareness expanded also into so-called semantic layout and accessibility for non-seeing visitors: write the page in such a way that it makes the most sense when read from top to bottom, as if by an audible screen reading browser.

This posed a real challenge, first to visualize, then to imagine how to retain the prerogative to present it differently visually.

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 area of this page.

The Road Ahead

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.