Minimal website responsiveness

Noted by on his Website.

My current approach to “responsiveness” is to increase the font sizes on screens. User interfaces should generally have smaller text while article bodies should prioritize readability and be larger. Default stylesheets are take a (literal) one-size-fits-all approach, trying to optimize for both. But I only use percentages for font sizes, to respect user preferences.

I also increase the default font size to make it easier to increase tap target sizes to Google’s recommended 48x48 px sizes, without overlapping other targets in a 56x56 px radius. A size of 108.75% was the minimum necessary to achieve my goals in all combinations of major browsers and their default stylesheets across operating systems. Since scrollbars and screen edges are often tap targets, I also set minimum margin sizes.

I reduce the font size to the default 100% and eliminate the extra margins on extremely narrow screens (think KaiOS devices and smartwatches) where the screen is too small to fit several touch-friendly elements. I do the same on print.

My rationale:

  • If you use a smart feature phone, then you navigate with a keypad. The interface does not need to be touch-friendly.

  • If you use a smartwatch (like the Apple Watch) it should auto enable reading mode for long-form text, so compromising a little on readability might be worth improving navigation.

  • If you want to read in a sidebar then you are likely reading the article alongside some other text. My page’s text should match most other content instead of “sticking out”.

  • If you print it out then font sizes are already optimized for readability rather than for user interfaces.


Webmen­tions

This site supports Webmentions, a backlink-based alternative to traditional comment forms.

Publish a response on your own website and share the link here to send me a webmention! Include a link to this page's canonical location for it to be accepted.

Webmentions received for this post will appear in the following list after I approve them. I sometimes send Webmentions to myself on behalf of linking sites that don't support them. Check the Wayback Machine if any links are broken.

Toggle Webmentions
Nothing here
This post does not have any approved Webmentions yet.

Feel free to contact me directly with feedback; here’s my contact info