Breaking the Web - justinjackson.ca

https://justinjackson.ca

I enjoy Justin's writing. I like his elegantly-designed, simple blog theme. I like his use of the Google monospace font Roboto Mono.

But ...

(I'm "picking" on Justin's site because I like his site and content a lot.)

When viewing his site on a phone, he employs too much spacing in the margins. I don't understand why this is done. It creates an extremely narrow column of text. It looks odd.

In my opinion, his text could stretch a little closer to the sides, and the reading experience would be improved or at least not hampered. It would look better from an aesthetic standpoint.

He can get away with using a narrow column of text on the phone because he also uses a font size that is too small. The text is still readable, but I don't understand the thinking by many publishers to shrink the font size for small screens. I think that someone started this idea years ago, and most designers and publishers continue the practice.

It's great that these people have perfect eyesight, but they should test their sites on phones, even large phones, with users who are "older" and/or with users who need to wear glasses or contacts.

Justin's site could be improved on the phone by using wider text lines and a larger font size.

But what's obnoxious and destructive is the fact that he prevents users from double-tapping the screen or zooming to increase the font size. This practice creates a reader-hostile web.

I assumed that I could zoom to fill the screen, which would increase the font size. But nope. He prohibits what should be a basic user functionality. He interferes with MY web browsing experience.

The large margin spacing and the small font size on the phone could be overcome by allowing users to zoom into the page.

Prohibiting this behavior would be similar to a website preventing me from hitting Ctrl-plus or Ctrl-minus to increase or decrease the font size for a website that I'm viewing on desktop/laptop.

It's infuriating when websites use JavaScript to prevent copying text from a web page for excerpting elsewhere.

Anyway, regarding the disabling of zooming on a phone, Justin is not alone in doing this. Unfortunately, too many publishers use this hostile tactic.

Publishers do this because it keeps the font size the same size when a user views the site in landscape mode on the phone. But one reason why I view some sites in landscape mode is to get a larger font size.

Too may people design irritatingly.

In a meta tag on Justin's site, the "viewport" directive is all good except for the "maximum-scale" setting, which prevents pinching and zooming. For shame.

name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1

I mainly use the Safari web browser on my iPhone.

https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag

Excerpts with my emphasis added:

Mobile browsers handle orientation changes slightly differently. For example, Mobile Safari often just zooms the page when changing from portrait to landscape, instead of laying out the page as it would if originally loaded in landscape. If web developers want their scale settings to remain consistent when switching orientations on the iPhone, they must add a maximum-scale value to prevent this zooming, which has the sometimes-unwanted side effect of preventing users from zooming in:

If mobile browsers display a font size differently when the phone is held in landscape mode, then I can understand publishers and designers falling into the trap of wanting their sites to display similarly in all browsers. But this should be left up to the user. And besides, I thought CSS media queries were suppose to help.

It's easier to prevent zooming than it is to add more media query breaks that adjust the display for the many different screen sizes.

A site should not break if the font size increases in landscape mode. What's the harm here? And since Justin's site contains mainly text, which I like, then I don't see the need to worry bout font size changes.

This is not designing with empathy.

Justin could have kept his too-small font size and too much margin spacing on the phone while also allowing some of us to zoom into the site, and everybody would be happy, except for the publisher or designer who overthinks this.

#blogging - #theme - #web - #design - #moronism