Theme Proposal

By Shamus Posted Tuesday Sep 7, 2021

Filed under: Notices 88 comments

Last week I mentioned that I was planning on updating the site theme. Specifically I said, “I’d 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.

If you read this site on mobile, then it ought to look something like this:

(In case it isn’t obvious, the blue here is supposed to represent an image.)

The site is set to use all of the available width. You can’t see the background.

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:

The red on either side represents the background image.

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. 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.”

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:

@media screen and (max-width : 1280px) {
    //Stuff goes here.
}

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.

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.

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.

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.

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 written in 2004. But what we have now seems to work well enough that I don’t get any complaints about it.

The Problem we’re Trying to Solve

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 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.

(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.)

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:

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.

This is a pretty common design. Kotaku uses it for their feature articles, but not their smaller news articles.

Rock, Paper, Shotgun does it a little bit, 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.

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.

Discuss.

 

Footnotes:

[1] This is the file that contains the incantations for a particular layout.



From The Archives:
 

88 thoughts on “Theme Proposal

  1. Matt` says:

    Even just as a static image without dreadful popout animations, I think I prefer images to stay in the column

    One concern that comes to mind: full screen-width images would also be full screen-height (assuming they’re screenshots, and that we’re using the same aspect ratio as you are), but my browser has more horizontal toolbars and navigation stuff than it does vertical ones, so that will make the image too tall to see all of – I’d have to scroll just to see the bottom of the image.

    And even if it were fitted to the letterboxed height of the available browser viewport, that would mean there being just one precise location to scroll to that puts the whole image on screen – I’d prefer to have a bit of room on either side for imprecise scrolling and context from a bit of surrounding article, rather than have the whole screen occupied by the image as I go past it.

    That and I guess it just runs against my idiosyncratic and inarticulate aesthetic sense of logic and elegance, to have the background sidebars apply to some things and not others. Which is of course entirely personal, and not a requirement for anyone else, but true nonetheless

  2. Johannes says:

    Sounds great, do it!

  3. Eichengard says:

    I only read the site on mobile browsers, so as long as the images don’t suddenly force me to side scroll it’s not going to matter. (I think I wouldn’t like the look proposed, but I might just be being novophobic.)

    If you are fiddling with the theme and guts of the site, though, one quality of life improvement for me on mobile would be code to make the footnotes appear to the left of the link if they are going to fall off (or be constrained by) the right hand side of the screen. I suspect this is one of those requests that is ABSURDLY difficult to fulfill, though, so no great shakes if it’s not possible. (Currently, footnotes at the extreme right of the page result in either a) a very skinny, very long footnote or b) a very skinny, very long footnote that nonetheless “breaks out” of the column and forces me to scroll sideways. Neither behavior is ideal.)

    1. parkenf says:

      Seconded. I get this whenever I read your site on a mobile or a narrow window. The footnotes need to work back from the right margin up to a minimum width

      1. Echo Tango says:

        I’d thought this was just a bug with how footnotes are handled on Firefox.

        1. parkenf says:

          Nope, chrome too

    2. Jeff says:

      Just adding a comment to make this more prominent. That footnotes thing really needs to be fixed.

    3. Kincajou says:

      Oh yeah, fixing the footnote thing would be nice too!

    4. Misamoto says:

      Hear, hear!

    5. Taellosse says:

      I concur!

      I think, according to parliamentary rules, since we have heard no objections, the motion carries.

      1. Lino says:

        Since when do parliamentary rules apply to a dictatorship :D

  4. Henson says:

    I think it depends. I’ve experimented with the larger images for this website in Paint, and it can have a stronger impact…but it’s a little irritating if the image takes up the entire screen, vertically. My guess is it makes the most sense when trying to illustrate a point, rather than just breaking up space or making a joke.

    I’d say, try it out, see how it feels.

  5. Mephane says:

    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:

    https://www.shamusyoung.com/twentysidedtale/images/theme2021_proposed.jpg

    That’s exactly what I was already thinking about when I expressed my dislike for the idea. :)

    Your Kotaku example shows exactly why I don’t like it. For example, on the screen I am currently reading this, that “American Multiple Industries” logo now takes up almost the entire screen, just for these three words and the star. It’s not just way more scrolling to read the article, it also looks like it is made for people who need giant text to read. To add insult to injury, if right after such a big image there is a sub header (e.g. August 1982: “When you score…you score!”), it now looks as if that is the start of a new article with a header image and caption because the image is so big and disruptive to the flow of the article.

    It also looks worse aesthetically in my view. The neatly defined content column is not just very practical for many reasons (some of which you mentioned), but it looks good, clean, organized.

    Then there is one more aspect to it: the effect at different browser widths. On a 16:9 display, you might get the effect I described above, i.e. an image taking up the entire screen while you scroll past it, even if that image would never warrant that much screen real estate. But then think about ultra/wide screens. Like, at 32:9, the same scaling would cause the same image to be higher than the browser window, so you need to scroll through the image itself and can’t even view the entire thing all at once.

    Yes, there are ways to deal with that, too, at the precise cost you are trying to avoid: multiple variations of the layout for different screen sizes and aspect ratios.

    Leave the content column clean as it is. Embed pictures in larger resolution downscaled to the width of the column, and surround them with a hyperlink to itself so that you can open them in a new tab with a middle click or ctrl-click (or replacing same tab if you left-click like a savage).

    Maybe, if you want, you could reserve it as an option only for select images where it would be specifically beneficial to break out of the column width, for example if you want to illustrate just how wide something is, that could be used for comedic effect, or if the image has text must remain readable but would be too small if the picture is downsized to the width of the column.

    1. Tuck says:

      I agree with Mephane. The Kotaku wide images are really off-putting on my 1440p 32″ screen.

    2. RamblePak64 says:

      Yeah, my perspective is the same as it was prior. You meant exactly what I thought you meant, and I do not believe it looks good on a desktop.

      I think perhaps there’s an additional question to ask: even if there are those who would prefer the image be full-width, does the current incarnation offend them as much as those who would hate for the image to be full-width? You can’t please everyone, but you can minimize the number feeling inconvenienced.

      Of course, I also believe “if it ain’t broke, don’t fix it”, and I keep thinking of this as “the new theme” so it doesn’t feel old to me yet. It seems perfectly fine.

    3. Echo Tango says:

      That American Multiple Industries logo is so big that I need to back up to read it properly. (Doesn’t help that it’s actually a bit blurry.)

    4. Syal says:

      I didn’t mind the Kotaku version, but immediately noticed Kotaku’s empty space is a borderless white nothing that looks ugly. The dark videogame border here (currently space invaders, nobly protecting our fair article) provides a much nicer color contrast between what’s the article and what isn’t, and I think making the pictures stick into that “treeline” could mess with the flow much more than making them stick into Kotaku’s unsettling white abyss.

    5. Dreadjaws says:

      This right here. What Shamus is proposing is exactly what I imagined and precisely what I don’t like to see. I already don’t like it there, and I would like it even less here where the background isn’t homogeneous like it’s in that Kotaku article. This is why I proposed he did a test run when he mentioned it. It feels disruptive, aeasthetically unpleasing and disorganized.

      I’m sure Shamus had reasons to propose it, and perhaps it being ubiquitous might be one of them, but honestly there’s a lot of stuff websites have changed that I consider to be for the worse and why I’ve stopped visiting those places. Here’s another change I hope Shamus never implements: infinite scrolling. It’s cumbersome, a memory hog, it screws up searching, it reverts to the start when you open an article and go back and there will be a point where my PC just outright refuses to load any more content. I prefer the older posts to be available in different pages, thanks.

      I hate infinite scrolling with a passion. Please, Shamus, never implement it.

    6. Steve C says:

      Ditto what Mephane and Dreadjaws wrote.

  6. Fizban says:

    I’m fine with the idea of images being a little wider, but not all the way across the screen. Some percentage wider than the text portion seems like it should work, whether it’s actually a percentage or not.

    1. Philadelphus says:

      Yeah, this, for the reasons listed above—if it’s a 1920×1080 resolution image, then expanding it fully to the sides on my 16:9 display will make it take up the whole window. I’d suggest making it some fixed amount (in absolute pixels) wider than the 1280 pix of the column; say, for example, 1400 pix. Then the picture sticks out 60 pix on each side (drawing attention to itself), without increasing in vertical height enough to take over the entire screen no matter if you’re using some 21:9 resolution or whatever. The exact extra width could be adjusted to find something that looks good.

      Alternatively, I wonder if you could do something where you click on an image and it smoothly expands in place to some larger size (pushing text down the page), then click it again to smoothly shrink back to normal (within the column). I’ve played with CSS a bit before but not recently so I don’t know if that’s possible with pure CSS or not, but it seems like a neat way to get a bigger picture if the reader wants. Otherwise the suggestion of larger images hyperlinked from the images in the text is a classic for a reason.

      Edit: note that I’m not against making such changes, by the way, I certainly know how fun it can be to adjust site layout and theme. Just trying to offer my opinion as to what I think would look good.

      1. Echo Tango says:

        I’m pretty sure you’d need JS for that, even if it’s just to hold a single flag for each image, if you’ve en-biggened it or not. (And then it adds an en-biggened class to the image, so the CSS can resize it.)

        1. Richard says:

          No, it can be done in pure CSS – although it’s often done in JS.

          You use a checkbox, clicking ticks/unticks the checkbox and the CSS selects values based on the state of the checkbox.

          I’ve had to do this kind of CSS shenanigans for several “offline” pages, as Chrome (and presumably everything else) will not run JS embedded in a page loaded from local storage (presumably due to some security context limitations).

  7. Awetugiw says:

    I must admit that the idea of having the images use the entire screen width does not seem great to me. Maybe it’s something you get used to after a while, but my first impression is that the transition from text to image and back becomes weird.

    Having the images somewhat wider than the text but not (necessarily) as wide as the screen looks a lot better to me. I do think this would require some sort of maker in the background of how far the images can go. Effectively, I think it is fine to have images outside the normal text margins, but it feels weird to have them outside of the “page”.

    My preferences might be affected by the fact that I read a lot of articles in PDF format, so I’m very used to there being a page which takes up part of the screen, and then one or more columns of text using up part of that page.

  8. Benjamin Paul Hilton says:

    I honestly miss the background changing every six months or so. It was always nice to see new images and themes.

    1. Lino says:

      But it does change! At least on desktop it does. Or at least it did the last time I checked, which was last month, if memory serves…

      1. Benjamin Paul Hilton says:

        Maybe I just haven’t seen it lol. These days most of my twenty sided consumption is done on break at work. So I’m always on my phone.

        1. Richard says:

          You don’t see the background at all on a phone, so I guess on that platform it never changes.

          Does it load the background though? It shouldn’t, but it probably does.

  9. Lino says:

    I think images reaching beyond the text column works best with a white background (such as all of the examples you’ve listed above). That way you get an emphasis on the image itself. If Kotaku were to have all their long-form article images limited by the text column, they would feel squished in, and it would draw your eye to all that dead space around the text.

    This works well for sites like theirs, but if you do that with a non-plain background, the image will cover part of the background image, and it would look like it’s a bug (because people would subconsciously assume that since the background isn’t plain, they should be able to see it the whole time. You can see this effect in old-school leaflets and Medieval books – they have drawings in the margins, and the in-text images stay in line with the text).

    So given the fact that all of your backgrounds are vibrant, colourful images, I think it would be a problem if the article images bled out of the text column the way Kotaku’s images do.

    I think the current background images are an asset – it makes your site stand out amongst the cookie-cutter, corporate-friendly sea of white. You shouldn’t cover them up.

    But then again, that’s just my two cents – I’m not a graphic designer :)

    1. Henson says:

      But the text column already covers part of the background image. The images going past the text column isn’t going to change that.

      1. Lino says:

        Yes, but it covers a fixed proportion of the background image. There’s a very clear delineation between text column and background image. Having images bleed out would break that clear delineation, and would look messy.

  10. BlueHorus says:

    Whole post is on the front page, boss ;-)

    I don’t really have an opinion on the theme, TBH. It works fine as is, sounds like it’d work fine in the new format too. I only ever visit this site using my desktop, though.

    Whichever works for you, I guess.

  11. kincajou says:

    Yup, that’s pretty much what i’d immagined when i read your thoughts last time and i’m still against it.
    Mostly the reasons have been explained by those above me significantly eloquently. I only feel the need to add one thing:

    Less is more.

    As part of my job i have to regularly create posters/presentations/design of various things. It seems to me that people tend to forget that blank space isn’t “noise” but rather brething room for your eyes. The more you eat into empty space, the more you’re effectively filling your screen with information to be parsed and taken in.
    This is very important when you work on technical subjects or have a *lot* of text that needs not only to be taken in, but taken in and understood.

    High density information communication (via text or video) can be exhausting to take in, and quite tiring. This tends to make the information transfer less pleasant and make the reader/viewer quite tired, and as Ursula Le Guin wrote in the wizard of earthsea “go to bed; tired is stupid”

    From the numbers you presented to us, your blog is shifting towards longer texts, not shorter articles, this means that your audience needs to be given the brain space to thing and incorporate your words as they read, blank space is more important for you than it is for something like kotaku or RPS where their articles are essentially short form (also sad info, i actually skip down to the RPS comments sections without reading the articles most of the time).

    What i’m saying is, it seems to me that for you blank space (and breaks, introduced by images as you already do) is an important part. So i would be weary of labelling it as “noise” (especially in terms of content/noise ratio) and i would be even more worried bout thinking that eating into blank space is necessarily a gain in “efficiency” …. that blank space does have a function that you will be eating into and i’m not sure the “gain” would be worthwhile at all.

    As it is your blog, you do you, but reader beware… whenever you are communicating, information density isn’t always (it actually very rarely is, and then we enter into the beautiful world of data representation) best when it is maximised.

    Less is more
    (which considering the length of my comment, is quite ironic)

  12. kincajou says:

    If you are considering changes though, could one humbly suggest moving the “reply” button in comments to the center of the comment box (or to the right?) on a smartphone i keep on clicking on it when scrolling and it is infuriating

    1. Philadelphus says:

      +1 to this. Or something so that it doesn’t trigger the instant my thumb brushes against it in passing while scrolling.

    2. Lino says:

      YES! PLEASE! It’s so annoying!!! Also, I’d love it if we had email notifications to comments (it would certainly lengthen the life of discussions). But even if you don’t do that, PLEASE move the reply button!

      1. Eichengard says:

        Yes please! This gets me too.

    3. PowerGrout says:

      +1 from me too
      honestly, why can’t my device better determine the difference between inputs is the bigger problem but we fix what we can eh?

  13. Daimbert says:

    While I’d get used to it, I think the issue on this site is that the text would be inside the gray text part that separates the article from the background, while the images would extend out into the background and past that limit. That would make it feel like the images aren’t part of the article, which would be a bit disconcerting, and is something that I feel is the case with the Kotaku examples.

  14. Duoae says:

    I actually really like the site design as it is. The only thing i really would like is if the images were hi-res but scaled into their current sizes. That way, viewing the image on it’s own will result in displaying the larger image for the user but not impact text scrolling or whatnot…

    [Edit] seems that this isn’t an issue any more. I didn’t need to try it for a long time but the last time i tried looking at a screenshot it was very small…

    Personally, I’ve really taken to reading most web pages in half of a screen, with the browser locked to one side of the other, the amount of useless dead space (as you correctly identified) just means there’s no point in having anything other than a video in full screen any longer…. not to mention site being focused on mobile devices anyway.

  15. John says:

    I haven’t commented before now because I don’t have strong opinions about web design. The current design is more or less fine on all of the devices that I regularly use to view the site. But if this is something that interests you, I say go for it. If something doesn’t work, I’m sure you can fix it. And even if you can’t, you can always just revert to the old layout.

  16. Maryam says:

    I’m not a frequent commenter here, but I do read the site regularly, and I think this plan would be a worse design than the current one (which is just fine). It feels like you’re a little too hung up on using all the available space when it’s just unnecessary and even detrimental to do so.

    1) I don’t want to have to do more scrolling to get past images which will be taller. This would have the feeling of worsening the signal-to-noise ratio rather than improving it.

    2) I wouldn’t even be able to see the image all in one go because my short and wide browser canvas isn’t the same aspect ratio as a full screen (which is the aspect ratio your images tend to have, since they’re usually screenshots).

    3) The images already convey the necessary visual aid to your text at their current size. They don’t need to be in full-sized glory to do that. If on the rare occasion that you do really want to make a point with a full-sized image, you could make them clickable (I think you occasionally used to do this?) to pop out in a new tab or a fancy pop-over.

    1. Echo Tango says:

      I’m guessing Shamus’ new styling wouldn’t make the images bigger than your browser window, since having to scroll around to view them would be horrible. (And max-width: 100% is very easy to write. :)

  17. Asdasd says:

    Theme Proposal sounds like one of the lesser-known Bullfrog games.

  18. Menderbug says:

    FWIW, only the first two images in the Kotaku article actually go full width at 1440p. Most of the others only break a little beyond the text width. And I find those full-width images really annoying to look at. I thought the current look of the images is perfectly fine, but you could maybe scale them up by 20% or so if you want to make use of more space on the sides (the images further down in the Kotaku article that do this don’t take me out of the reading experience as much). Going full width just seems a bit excessive on large resolutions.

  19. bobbert says:

    If you are making a survey, mark me down as full-against.

  20. Marvin says:

    I wouldn’t mind the change, but I think the additional expansion of images makes less sense to me on this website than it does in the Kotaku example. The text is already twice as wide here as on the Kotaku page, and the figures here are already as wide as those in the Kotaku example. Also, all but one of the figures on the Kotaku page leaves a sizeable margin, and the one that does (the one captioned with “The American Multiple Industries logo reconstructed with vectors”) looks way too large to me. While there is some debate on whether it is reasonable to have margins that we do not expect anyone to write in (which is, allegedly, their original purpose), margins are the default on most presentations of long-form texts, so your readers will likely expect at least a bit of margin space. At the very least, I’d consider figures needlessly wider than the text poor typographical style.

  21. Sniped Nerd says:

    For images with an aspect ratio greater than 16:9 I think it would make sense for them to go off the sides, since it wouldn’t need to introduce any more horizontal scrolling than normal. Not sure how it would look aesthetically since, unlike the Kotaku example, the background of the text is different than the background outside the text. It might appear buggy to new eyes.

    But I think I would personally really like the ability to left click on the image to toggle displaying it up to full screen.

    For a minority of the images I want to see all the details (I say a minority because mostly the lower resolution is completely fine for understanding the point). Right now, in order to have the image go full screen so I can do that, I have to move the cursor to the image, right click the image, click on the option for opening the image in a new tab, check that the generated tab is neighboring the current tab which, since I default to browsing full screen, means moving the mouse to the top, hit ctrl tab to switch to the new tab, then hit ctrl w to close that tab. Meanwhile the left click doesn’t do anything. With the left click method, I would have to move the mouse to the image, left click, move the cursor out of the way, then left click again to close it. Neither method is easy to accidentally trigger (unlike, say, a rollover type deal), or involves doing something too terribly obscure (like having to know a keyboard command).

    I think the main drawback would be the time it takes you to implement that and having to send and execute whatever extra javascript or css is needed to implement it.

  22. Jeremiah says:

    This is what I assumed you meant you first mentioned it and I like the idea. It still might be good to put some sort limits on it, because at some point (I don’t know what that point is) you’re not gaining anything by having the image being as large as possible. Like maybe to preserve the ratio suddenly the picture is taller than the available vertical space or something, or just really close to it. I imagine in most cases there’s no need to have the image actually be as large as the monitor.

  23. Husr says:

    This is exactly what I thought you meant last time, and I’m still against it. Those Kotaku examples linked look terrible, and I have second everyone’s concerns about layout composition needing that balance and looking like a glitch. I was honestly bewildered as to why you were proposing it last time, but this post has given some rationale.

    That said, keep in mind that eye tracking does apply to images, even if less so than text. Especially enormous full size images that we have to scroll past or position just right to sit on the screen.

    The site looks good as it is, visually, though I’d definitely second the annoyingly oversensitive mobile comments. It’s almost impossible to scroll down without bringing up the reply window every time, which is really irritating.

    Not that that matter much. Of you do nothing I’ll be happy, no issues. Just wanted to make sure to mention the issues I have with this in the hopes that it deters you from doing it.

  24. Fluffy boy says:

    99% of the time I read the blog on my phone so O don’t think I have very meaningful feedback to give on the desktop site. But for what it’s worth, I’m not a big fan of the desktop layout because I think everything looks too cramped and the font size is too large, making everything look a little too claustrophobic

  25. MelTorefas says:

    This is what I assumed you meant, and it sounds fine. I can imagine it being used to good effect, so I say go for it.

  26. Paul Spooner says:

    Typo: “means to can see” seems like it should be “means you can see”

  27. Mr. Wolf says:

    The red on either side represents the background image.

    I’m not the only one who sees brown, right?

    1. kincajou says:

      oooh boy this is going to open a can of worms… but for me i’d call that colour burgundy. between brown and red

  28. Shamus says:

    Based on the feedback so far, I think I’ve been talked out of this change.

    Fixing the footnotes problem requires Javascript or something. As far as I can tell, you can’t do it with standard CSS. I’m open to suggestions.

    Moving the reply button to the center is being considered. (Is this a handedness issue? I hold my phone with my left and scroll with my right, so I’ve never hit the reply by accident. Or maybe this is a problem for people that use their device one-handed? I don’t use mobiles very often so I’m not aware of all the headaches that people run into.)

    1. kincajou says:

      It probably is a handedness issue, you know? i hadn’t thought of that. For reference I’m left handed, phone is held in the right and scrolling happens with my left fingers.

      This summer i passed to single hand scrolling for q month or so (strain on my left hand) and so my right thumb was doing all the work, never triggered the reply button

    2. Dev Null says:

      I see you’ve already mostly discarded the idea. I would have been interested to see it before judging it, though probably the only thing worse than going to a lot of trouble to fix something that’s not broken would be going to a lot of trouble to _break_ something that wasn’t broken. Tried the linked Kotaku article and I have to say it looks _terrible_, but mostly because the text column is too narrow, not because the images are too wide. It looks like they just developed for mobile and everyone else can go hang. My guess is that you’d want to limit how far the images bumped out from the text, to prevent the contrast from getting too large.

      1. Paul Spooner says:

        I was just messing around with the live CSS editor, and managed to get a horrendously formatted result. It’s not as easy as just scaling the images up. However the text alignment is done doesn’t get updated, so half of it is stamped over the enlarged images and the other half is covered up by the images lower down. What a mess.

      2. Dev Null says:

        In fact, the Kotaku site looks so bad on my main screen that I feel compelled to share…

        https://photos.app.goo.gl/tmVCHpqmAHjXkJfA8

    3. Eichengard says:

      I use my phone one handed, held in the left and scrolled with the left thumb. I hit the reply button about one in every five times I read the comments as a result.

      1. Lino says:

        Yup, me too. Even though my new phone has a bigger display than what I’m used to, I still default to holding it in my left hand, and navigating with my left thumb.

      2. Philadelphus says:

        Same (despite being right-handed).

        Actually, this sounds like it could make an interesting discussion question: “Are you right- or left-handed; which hand do you primarily hold your phone in; and how do you scroll through long pages (with the same thumb, or the other hand)?”

    4. Steve C says:

      A mobile device category you may not have considered are the ones without touchscreens. For example I sometimes read the site on my TV. Which navigates using the remote rather than a mouse or touchscreen.

    5. Asdasd says:

      Well, if nothing else, I appreciate that you took an atypical route with this. Most sites introduce their redesign after it’s been made, solicit feedback, then ignore it.

    6. Shufflecat says:

      As long as we’re talking about the design of the site, is there a reason the comments section uses a weird non-standard version of BBCode tagging syntax?

      It always throws me when I want to do something like a quote or italics or whatever, because this is the only site I’ve ever seen on the web that uses the (arrows, darts; whatever they’re called, apparently they won’t display even when empty) symbols instead of brackets. Not only is it a muscle memory jammer, it’s also takes more key presses. And that’s without getting into the tags themselves using non-standard phrasing half the time, so not only is it less efficient to type, it also has me scrolling alllllllllllllll the way down to the very bottom of the comments section just to re-read how to do a quote tag or an embedded URL tag every single time.

      Note: this may end up being a duplicate comment. Because apparently while the site doesn’t recognize an example of BBCode embedded URL syntax as BBCode, it does think it’s an example of spam, maybe?

      1. Shamus says:

        The “arrows” are actually the default on the web. When you use BBcode [b], it gets replaced with a <b> before being displayed to the user. It’s not that this site uses a weird non-standard BBcode, it’s that BBcode is its own thing. What I’m using is the WordPress default.

        I couldn’t use BBcode without resorting to a plugin. That would be fine, but then I’d depend on someone maintaining that plugin. If it was abandoned, then all BBcode comments would break.

        So I dunno. I agree that our current system isn’t very user-friendly, but I’m not sure about the best / safest way to fix it.

        1. Misamoto says:

          I think these days Markdown is the golden standard for this stuff https://en.m.wikipedia.org/wiki/Markdown

          It’s used by Slack, Discord, GitHub and a number of other popular places. While I bet it would require a plugin as well, I’m fairly certain it would be supported forever, and if not – a new one would rise immediately

          1. Chad+Miller says:

            Another thing about Markdown is that it’s explicitly defined as a series of transformations to HTML. I don’t know enough about WordPress to know if or how this would work, but if there’s some way to accept Markdown in comments when they’re submitted but then store it as HTML, that should at least prevent this “old comments stop working if the plugin breaks” problem.

    7. Tyrael says:

      Too bad. I didn’t read all the comments so I don’t know if I am the only one but I think it’s a great idea. I don’t see any reason why images shouldn’t cover most of my screen, as long as they still fit. I don’t want to have to poke my nose on my monitor or zoom in to make out details.

      But people are weird. So many of them deliberately watch videos not in full screen or watch horizontally filmed videos vertically on their phone.

  29. CloverMan-88 says:

    I dislike full-screen images for the same reason I’d hate a full-screen text column – it takes more mental effort to process bigger pictures. That’s the same reason I don’t sit too close to big tv’s. All I need is for the image to open in full screen view when I click it, in case I want to take a closer look.

  30. evilmrhenry says:

    Looking at the Kotaku example, the image width actually matches the content width here on my screen. I think their format is reasonable, but if you wanted to duplicate it here, you wouldn’t expand the images, you’d shrink the column width.

  31. rabs says:

    It seems weird to me that people don’t use windows on the desktop. The browser can be at their favorite size, everything is resized and wrapped accordingly. I’m still using a good old 4/3 screen, but sometimes I see people with wide screens using a vertical split. Or a relatively small rotated 16/9 screen, usually as secondary.

    For especially small and wide images, it would be nice if it uses as much space as possible. But watch out for vertical space as well, except if it’s a kind of image gallery instead of an illustration to aerate the text.
    Don’t see that often though, usually better have it fit the text with a link to the image file, so the browser can show it full screen with integrated features like zoom and everything.

    1. Jack of Spades says:

      FWIW, I use windows exclusively. I never run anything full-screen, because I’m never not multitasking at least to the extent of having both a chat client and another thing open. I’m extremely frustrated by sites that assume I must be willing to give them the full width of a 16:9 display and therefore waste as much space as possible when the whole purpose of the site is to present gobs of information in a spreadsheet-like format (looking at you, AWS).

    2. Philadelphus says:

      I probably would if I had enough screen real estate, but I only have a single 24″ 1080p monitor at the moment, and even splitting that into two vertically makes windows far too small for my taste.

      (Thankfully I’m moving internationally in less than two weeks and am planning to take the opportunity to upgrade to the large, high-resolution triple-monitor setup I’ve been daydreaming about for years.)

    3. evilmrhenry says:

      This has something to do with the way Windows (the OS) does something. When I was using Linux, back in the day, I didn’t full-screen everything, but before and after that I used Windows, and I full-screened everything. I’m not sure what the difference is, but it goes to show that this isn’t inherent to desktops.

  32. Chris says:

    I’m not too sure about it. You play videogames in full screen, so it would be 1920×1080. In other words, while scrolling down, screenshots would take up an entire screen. That sounds way too much. If you really hate the dead space left and right, make some double column text setup or something.

  33. Teltnuag says:

    I am indifferent to the images change, but I use both the desktop and mobile versions about equally, and one longstanding minor gripe I have had with both versions is that loading an article from the main page will not change the appearance at all. That is, it will move you off the main page and properly load the full article, but there is no way to tell that it has actually done so without scrolling down to see if there is now an entire article or just the preview and then another preview as is on the main page.

  34. Gautsu says:

    Mobile here. You do whatever you want to. If we are asking for things to fix, the replies continuously moving further right on mobile leads to long comment chains turning into a straight vertical line of characters. Also it’s hard to reply to specific comments; sometimes I attach to what I mean to, sometimes my comment just goes to the bottom and makes no sense due to where it then falls in the conversation

  35. Michael says:

    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.

    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

    This is wrongheaded. The CSS “px” unit is not even conceptually related to a pixel on the display device; it is defined by the standard as 1/96 of an inch. The mobile device isn’t lying to your browser about how many pixels it has; your CSS doesn’t know, care, or ask how many pixels you have.

    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.

    …that’s what you’re using, right now, when you define things in px. One centimeter is 37.8 px.

    1. (a different) Michael says:

      According to the W3C (W3.org), that’s true of print media, but not necessarily true of screen media.

      The px unit is the magic unit of CSS. It is not related to the current font and usually not related to physical centimeters or inches either. The px unit is defined to be small but visible, and such that a horizontal 1px wide line can be displayed with sharp edges (no anti-aliasing). What is sharp, small and visible depends on the device and the way it is used: do you hold it close to your eyes, like a mobile phone, at arms length, like a computer monitor, or somewhere in between, like an e-book reader? The px is thus not defined as a constant length, but as something that depends on the type of device and its typical use.

      link

      Another thing of note in the spec is that by default, a raster image is displayed where 1px == 1 pixel, so a 600×400 image is displayed as 600px wide. Also “in” and “cm” are valid css units, though they don’t have much use outside of print media.

  36. Jack of Spades says:

    Keep it as it is. I routinely use browser windows narrower than 1280 pixels, but even when I don’t a bit of undecorated gutter on the side of the screen doesn’t go amiss.

  37. Alecw says:

    I think the pop out image idea is worth a shot. for what it’s worth. But I have large screens.

    The mobile footnote issue I experience is much, much worse than what others are describing here and it’s so bad to be almost a dealbreaker for the site, except I like Shamus’ content so much.

    What happens to me is yes, I get the long skinny footnotes, but more importanty, once clicked I CANNOT GET RID OF THE FOOTNOTE – it stays on no matter what I do, covering a large chunk of the ensuing text. The ONLY way to clear them is fully closing the tab and renavigating to where I was on the article from the front page.
    Even going back and forward doesn’t get rid of it, the browser remembers I opened it and leaves it there. This often means I have to do a special dance of reading past a footnote for a few paragraphs, remembering to go back and read them and HOPING that it wasn’t a super long one that goes past the point I read to. It’s maddening.
    I use iOS and it’s happened ever since 2017 on three generations of iphone.

    1. Chad+Miller says:

      One workaround I’ve found is to click an image and the footnote goes away.

  38. Damiac says:

    Definitely don’t draw any inspiration from RPS or Kotaku!

    If your readers could tell you what they wanted they’d run a successful blog. Customer feedback on existing specifics is good but I don’t think you’re gonna get much useful guidance on a theoretical change, as you can see everyone has their own interpretation anyway.

    What I would suggest, even though I just told you to ignore suggestions from the peanut gallery, would be to sneak the change into a couple articles here and there, and see what happens.

    And if it goes badly enough, just remove it and say you’re rolling out “Twenty Sided Tales Classic”.

  39. Sleeping Dragon says:

    Just for some additional opinions. I have poor eyesight and I zoom the page in so that the width of the column basically matches the screen so as long as the images scale back to that and don’t actually force me to scroll the page sideways it shouldn’t change that much for me.

  40. Mr. Wolf says:

    While you’re in a “site maintenance” mood, please fix the “From the Archives” Chainmail Bikini link.

  41. Steve C says:

    You know Shamus, if you are in the mood for some back-end work on your website, you could do something with the forums. I know it is dead and gone at this point. However the already existing posts could be brought online. It would nice to be able to search or reference them even in a non-interactive way.

Thanks for joining the discussion. Be nice, don't post angry, and enjoy yourself. This is supposed to be fun. Your email address will not be published. Required fields are marked*

You can enclose spoilers in <strike> tags like so:
<strike>Darth Vader is Luke's father!</strike>

You can make things italics like this:
Can you imagine having Darth Vader as your <i>father</i>?

You can make things bold like this:
I'm <b>very</b> glad Darth Vader isn't my father.

You can make links like this:
I'm reading about <a href="http://en.wikipedia.org/wiki/Darth_Vader">Darth Vader</a> on Wikipedia!

You can quote someone like this:
Darth Vader said <blockquote>Luke, I am your father.</blockquote>

Leave a Reply to Eichengard Cancel reply

Your email address will not be published.