Over the last few years I've been trying to increase the accessibility of my site. I have 25 years of web pages that I maintain so it was a lot of work to do all at once. I split it up into multiple phases:
- Phase one: I converted 85% of my pages to use a "responsive layout", which takes into account the reader's browser size. I converted pages that had a 600px width and were relatively easy to convert to a variable
pxbased layout. My focus was to write responsive CSS rules that smoothly varied the layout and font size based on browser width. I wrote my notes on how to do this. - Phase two: I tackled the 15% of pages that were more difficult to convert, because of their use of non-standard layout, or interactive diagrams, or iframes, or anything else that made it difficult. I wrote a blog post about this. I still used a
pxbased layout. - Phase three: I'm ready to switch from a
pxbased layout to arembased layout.
This is how I often make progress past "analysis paralysis": I break the problem down into smaller, simpler ones and then work on them one at a time.
Browsers default to 16px fonts typically. Most people don't change the default. But some do. Around 3%. My site had overridden the reader's preferred font size and then set the layout based on my font size.
I have the page layout link the font size and the paragraph width.
- For narrow browsers, below 550px, the paragraphs are the width of the browser, with a narrow margin. The font is 10px.
- For medium width browsers, the paragraphs gain some space, but the margins also gain some space. The font grows along with the paragraph.
- For wide browsers, above 1000px, the paragraphs are capped at 660px, and the rest goes to the margin. The font is capped at 20px.
I wanted to keep this variable font size but make it scale with the reader's preferred font size. Note that I'm not displaying at the browser font size, but instead scaling my variable font size (10px to 20px) based on the ratio of the browser font size to the default. If the reader has set the font size to be 20% larger than the default, then my font sizes will be 20% larger, so 10px becomes 12px and 20px becomes 24px. I made the layout match the font size change by changing the "breakpoint" sizes and the paragraph sizes to use rem units instead.
Since the browser defaults to 16px = 1rem, the simplest thing to do is to divide all px sizes by 16 to make them rem units. For example, the paragraph size of 660px becomes 660÷16 = 41.25rem. However, that doesn't handle all the corner cases.
Sizes inside diagrams, including font sizes and line widths, were already scaled to the diagram's size. And I made the diagram's size responsive to the browser size in phase two. So that means sizes inside diagrams should stay as px units.
Secondly, on some versions of Safari, @media queries work better with em sizes than with rem sizes. So I used em for those.
Third, I had picked sizes like 600px because it was a nice round number. Converting it to 34.375rem makes me wonder: does it really need to be 600px, or could it have been 35rem. This is similar to a problem with Metric vs English units. Why does Coca Cola have 12oz cans (355mL) but 2L bottles (67.6oz)? It's a "nice" number in one unit but not the other. I had previously used px so I picked sizes that were nice in that unit, but now that I'm using rem I may change the sizes slightly to be nice in that unit instead.
I first made this change on my main stylesheet that I share for all my pages, then went through hundreds of pages and made individual adjustments to them. Since my diagrams are generated in Javascript, I also had to adjust the code for some pages to work.
I tested this change by changing my browser's default font size and then browsing my pages. I think it works pretty well. If you see any layout issues, let me know!
Labels: design
Post a Comment