{"id":52818,"date":"2021-09-07T06:00:41","date_gmt":"2021-09-07T10:00:41","guid":{"rendered":"https:\/\/www.shamusyoung.com\/twentysidedtale\/?p=52818"},"modified":"2021-09-07T12:03:33","modified_gmt":"2021-09-07T16:03:33","slug":"theme-proposal","status":"publish","type":"post","link":"https:\/\/www.shamusyoung.com\/twentysidedtale\/?p=52818","title":{"rendered":"Theme Proposal"},"content":{"rendered":"

Last week I mentioned that I was planning on updating the site theme. Specifically I said<\/a>, “I\u2019d like the images to break out of the column and reach across the page.” Like all theme changes, the only feedback I got was negative. Nobody is ever excited about anything new, but lots of people are apprehensive. However, in this case I’m not sure I explained it properly. So let’s have a little conversation about maintainability, readability, and my ability.<\/p>\n

If you read this site on mobile, then it ought to look something like this:<\/p>\n

<\/p>\n

<\/p>\n

(In case it isn’t obvious, the blue here is supposed to represent an image.)<\/p>\n

The site is set to use all of the available width. You can’t see the background. <\/p>\n

If you’re on a typical desktop and you browse using the default full-screen window, then you’ll get the regular, non-mobile theme:<\/p>\n

<\/p>\n

The red on either side represents the background image. <\/p>\n

For those of you who aren’t into this stuff: My site doesn’t send you different themes based on your setup. The site delivers a single identical CSS fileThis is the file that contains the incantations for a particular layout.<\/span> to everyone, and your device works out which parts of the file it should use and which parts it should ignore. Specifically, the first 1,126 lines of the file are dedicated to describing the standard desktop layout. Then the last little section of the file says, “Hang on, ignore some of what I told you earlier and replace it with this other layout.” <\/p>\n

The trick is that the last section is set to only trigger if your device is behaving in a mobile-ish way. It does this by putting those formatting changes inside of this selector:<\/p>\n

@media screen and (max-width : 1280px) {\r\n    \/\/Stuff goes here.\r\n}<\/pre>\n
Now, this is a little weird to me. Apparently, mobile devices lie to their browsers about how many pixels they have. My phone and my monitor both display 1080p images, but my phone shows the mobile version of the site and my desktop shows the regular version.<\/p>\n
This makes some kind of sense. The two devices have the same number of pixels but if my tiny phone displayed the site using the same font and image sizes that my desktop does, then the text would be too tiny to read. Devices with tiny screens apparently tell the web browser they’re small, which creates a situation where the fonts will take up an enormous amount of space. The mobile then uses its pixels to make the letters extra-sharp, rather than using them to cram more text onto the screen.<\/p>\n
It seems like what we really need is a way to figure out how many centimeters of screen space we have to work with, but as far as I know physical screen size isn’t available to web browsers.<\/p>\n
The code above means you can see the mobile version of the site on your desktop. Just drag the window to make it narrower, and as soon as it goes below 1280 pixels wide it’ll instantly switch to the mobile version.<\/p>\n
This stuff can get pretty deep and I am by no means an expert. I’m not even sure if my site is behaving correctly according to the web standards of 2021. Like I said, this theme was developed in 2017, based on things I learned in 2011, from on specs probably<\/a> written in 2004. But what we have now seems to work well enough that I don’t get any complaints about it.<\/p>\n
The Problem we’re Trying to Solve<\/h3>\n
Desktop screens are pretty dang big these days. They’re big in terms of pixels, but they’re also big in terms of physical size and how much of your field of view they take up. The problem is that you can’t<\/strong> use all of that space. If I made the content full-screen width, then it would be incredibly hard to read on a large-ish screen like the 27 incher in front of me, or the 32 inch monster I was using before that. Your eyes would get to the end of a line, and then you’d have to track ALLLLL the way over to the left and try to find the start of the next line. Some people apparently don’t have any problem doing this, but I think for most people column width is a pretty important usability concern.<\/p>\n
(The other problem with naively embracing the full screen width is that it creates layout concerns that make it hard to future-proof the site. The setup I have now guarantees that I only have 2 layouts to worry about, and I don’t need to worry about an entire gradient of possible column widths.)<\/p>\n
So anyway. Back to the site changes. When I said that the images would “break out of the column”, I think some people assumed that I was talking about some dreadful animated pop-out \/ rollover effect. But no. All I’m talking about is this:<\/p>\n
<\/p>\n
The images just reach into the dead space that’s otherwise occupied by the background image. This reclaims some of that space. We can’t make the text full-screen width, but there’s no reason images can’t make use of that space. Although, images would also need to be taller to preserve their aspect ratio. So you’d have to do a little more scrolling. That’s a pain in the ass on mobile, but we’re only talking about the desktop layout here. Mobiles ought to be unaffected.<\/p>\n
This is a pretty common design. Kotaku uses it for their feature articles<\/a>, but not their smaller news articles<\/a>. <\/p>\n
Rock, Paper, Shotgun does it a little bit<\/a>, with the images sticking out from the column but not reaching across the screen. Then again, RPS uses a weirdly left-justified design that leaves the right side of my screen empty unless they fill that space with a mosaic of advertisements. The point being: Maybe I shouldn’t be looking to RPS for guidance on site design.<\/em><\/p>\n
I don’t know. On one hand, giving some of the background space to article images seems like a good way to improve the ol’ signal-to-noise ratio. On the other hand, making changes to the site theme is a nightmare that generates complaints and probably does very little to attract and retain readers. On the other OTHER hand, things are often worth doing, even if they don’t drive traffic or bring in money directly. Four years is a long time to go without updates and maybe we’re due.<\/p>\n
Discuss.<\/p>\n","protected":false},"excerpt":{"rendered":"
Last week I mentioned that I was planning on updating the site theme. Specifically I said, “I\u2019d like the images to break out of the column and reach across the page.” Like all theme changes, the only feedback I got was negative. Nobody is ever excited about anything new, but lots of people are apprehensive. […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[111],"tags":[],"class_list":["post-52818","post","type-post","status-publish","format-standard","hentry","category-notices"],"_links":{"self":[{"href":"https:\/\/www.shamusyoung.com\/twentysidedtale\/index.php?rest_route=\/wp\/v2\/posts\/52818","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.shamusyoung.com\/twentysidedtale\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.shamusyoung.com\/twentysidedtale\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.shamusyoung.com\/twentysidedtale\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.shamusyoung.com\/twentysidedtale\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=52818"}],"version-history":[{"count":8,"href":"https:\/\/www.shamusyoung.com\/twentysidedtale\/index.php?rest_route=\/wp\/v2\/posts\/52818\/revisions"}],"predecessor-version":[{"id":52826,"href":"https:\/\/www.shamusyoung.com\/twentysidedtale\/index.php?rest_route=\/wp\/v2\/posts\/52818\/revisions\/52826"}],"wp:attachment":[{"href":"https:\/\/www.shamusyoung.com\/twentysidedtale\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=52818"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.shamusyoung.com\/twentysidedtale\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=52818"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.shamusyoung.com\/twentysidedtale\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=52818"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}