New Site Theme

By Shamus
on Apr 21, 2017
Filed under:
Random

I am no longer the sole regular contributor to this site, so I really ought to discuss things with my blogging roommates before I make any sweeping changes. But I didn’t. I guess I figured it was easier to ask forgiveness than permission.

Changing the site theme is always controversial. I don’t think I’ve ever made a change that didn’t get at least some push-back. But this is a big one, and I expect we’ll have a bit of a shake-out period.

For those of you reading this site from the future, this is what the site looked like yesterday, and this is what it looked like after the switch.

Important changes…

  1. We’re down to a single-column layout. On one hand, I’ve always hated the clutter of the second column and the way it eats up screen space with stuff you rarely need. On the other hand: When you need that stuff you really need it. The upside is that the mobile and desktop versions of the site will be very similar.

    My plan here is to kill the sidebar, move its contents elsewhere, and see if people have trouble finding them.

    EDIT: This seems to be working out.

  2. Serif font. Over the past few weeks I’ve been posting Batman stuff where I talk about Ra’s Al Ghul while also writing about Borderlands Pre-Sequel where you rescue an AI. It really bugged me that I couldn’t tell the difference between AI and Al with the sans-serif font we’ve been using. So we’ll try serifs for a bit.

    EDIT: The people have spoken. The people apparently REALLY hate serif fonts. Not one person jumped in to defend the poor little serifs. So now I’m experimenting with sans

  3. Wider main column. I like how nice this looks, but making the column wider means making the images wider, which also makes them taller, which means the images really devour a lot of screen space. We’ll see how people react to that. Anything is better than the early days of this site when I was using 320×200 images and a 600 pixel column width. There’s pretty much no way to fix that except to manually edit those hundreds of posts by hand.

    This also means the comments section will be wider, which means I have more room to make the nesting clear. There’s still no way to make the nesting deeper without crawling down into the guts of WordPress, but at least it will be visually more comprehensible.

    EDIT: I’m getting conflicting and confusing reports. Some love it. Some dislike it. Some say it works well in mobile and others have to scroll and zoom.

  4. Rotating background. The background image will change daily. There’s a different image for every day of the month.

    EDIT: We’re obviously going to need more time to see how well this works.

  5. The cluttered list of stuff at the top is now a carousel.

    One of the problems I’ve faced is that there is a lot of content on this site. Shit, I think a lot of multi-writer commercial sites would have trouble keeping up with my output in terms of wordsAlthough I guess if we include stuff like “repeating press release as news” then they’ve got me beat. Still, I write a lot of words for one guy. And that’s before you take into account that Rutskarn is also giving us over 1k words a week.. I’ve got traffic coming from YouTube, Twitter, TV Tropes, and the Escapist. All of those folks arrive looking for something different. I need to make it so they can find what they want, while also letting them know there’s a lot of other stuff here.

    EDIT: It still needs visual tweaking, but this seems to accomplish what I was hoping.

  6. No search box. I really hate the WordPress search box. The automated formatting tools in WordPress are a little too eager to “help” you. When you tell it to create the search box, it wraps it in extra <div> tags that don’t have any class or id info so you can’t control them directly.

    This means the search box is always out of line with other content, and trying to put it where it belongs means making global changes to related tags and then UN-doing those changes on a case-by-case basis. And then somewhere along the line one of those overrides doesn’t take because it’s overrided elsewhere, or there’s a browser inconsistency, or I just get lost ten levels deep in some tenth-generation inheritance and I start thinking there are better ways I could be spending my life.

    Worse, the built-in WordPress search function SUCKS. Whenever I need to find an old post, I always go to Google rather than using my own search box.
    EDIT: The search box is back. So is the twitter feed.

So anyway.

Welcome to the new theme. I’m sure you’ll let me know if something doesn’t work.

Enjoyed this post? Please share!

Footnotes:

[1] Although I guess if we include stuff like “repeating press release as news” then they’ve got me beat. Still, I write a lot of words for one guy. And that’s before you take into account that Rutskarn is also giving us over 1k words a week.


A Hundred!2020209Many comments. 169, if you're a stickler

From the Archives:

1 2

  1. Alex says:

    Not complaining, but reporting a possible bug (Firefox):

    Is it intentional that the carousel and the bar below it (ex-sidebar?) are alpha blended with the bg-image?

    It looks okay-ish for the carousel although I’m not sure how well that will play out with changing backgrounds, but horrible for the bar: dropdownboxes are not blended and really stand out.

    • Alex says:

      Also while posting the above I noticed that the “Post Comment” button is not high enough for the text. More padding between text and bottom of the button is needed. top-padding is ok, padding to the side okay-ish, could be more.

    • Alex says:

      There is more:

      – “Edit button” now steals the window. IIRC it opened a panel in the old version (sorry I do not know how to better phrase this. If it reproduces in your browser you will see the problem immediately. If not, well that’s going to be hard to fix anyway.

      – Embedded youtube-player is not centered

      – comment font is still sans-serif (intentional?)

      – This one is aesthetical, not a bug, but linebreaks in headlines now look really weird. E. g.: “Diecast #196: MST3K, Stories Untold, Game [linebreak] Jam” The “Jam” is very lonely in its line.

    • Wide And Nerdy ♤ says:

      Starting at the top.

      It would be good if the carousel aligned with the edges of the column and the inbetween content. I’m on a 1080p monitor, Google Chrome, current build. The carousel is substantially narrower than the column.

      I don’t think the ## Comments should be touching the edge of the column.

      The arrows on the edge of the carousel are easy to miss. I almost missed them and only caught them because I was going to complain about there being no link to the forums so I went back up to check just to be sure. If I was just here to browse, I would have missed them. Personally, I’d make them bigger, more opaque and with a noticeable shadow. You could still have them not full opacity till hover but I think it would help to still have them more opaque than the carousel tiles.

      Speaking of the forum. I don’t know how high a priority it is for you but if I were going to include key site navigational elements in the carousel, I’d make sure they’re always in view on page load without the need to scroll. Though I could understand if you’re randomizing and its more important to you for people to see your content than your forum.

      On the carousel, if you’re just going for a highlight on hover effect, you can use filter: brightness on hover. Seems to work in Chrome.

      img {
      filter: brightness(50%);
      }

      • Wide And Nerdy ♤ says:

        Note: filter doesn’t work in IE 9-11, there is a standalone filter property for earlier versions of IE. Don’t know if you track browsershare in your analytics. I wouldn’t be surprised if an even lower percentage of us on your site use IE than on the rest of the internet.

        But if you can use filter brightness, it does what you want without the potential issue of your background image bleeding through and muddying the carousel.

        EDIT: I just went back to fix something and saw the delete option. Nice. I’ve been wanting this.

        EDIT EDIT: I forgot to say anything nice about this. I like the update, especially the background image.

        I also like the general formatting of the text as someone who sometimes loses track of what line he is on. The line height, serif, and padding all help me with that.

      • Shamus says:

        I would LOVE to make those stupid arrows larger. They are deviously hard to format. I’m using a slideshow hacked together by someone from a different slideshow hacked together by someone else.

        I can’t tell if I’m terrible at CSS, or if CSS is terrible, but when you’ve got multiple CSS files all contributing to a document and you’ve got javascript changing the styles of elements on the fly, I have no idea how you’re supposed to know what the shit is going on.

        Those stupid little arrows are hilariously undersized. It took me half an hour to find the right element to make bigger, and even then I had to at the !important qualifier to make it stick. And making them a reasonable size makes the right one float off the edge of the carousel and I can’t figure out how to move it back without moving a bunch of other stuff.

        Thanks for the tip on the filter: attributes. Those are pretty cool.

        Forum moved to the front. I had to push World of Warcraft off to make it fit. You monster.

        • krellen says:

          When did multiple CSSes become a thing? When I learned designed, there was supposed to be only one.

          • Richard says:

            Cascading Style Sheets!

            All over your page and down your front, staining your trousers…

          • Shamus says:

            The main wordpress theme has a style sheet. (That I authored and maintain.)

            Then individual plugins add their own. (Like the edit comments plugin, so it can position the stuff it adds.)

            Then I import some Javascript to drive the Carousel, and it requires yet another CSS.

            And then I try to position something in MY CSS and it doesn’t work. Is my syntax wrong? Am I referencing the wrong element? Are my changes being overridden in some other CSS I’ve never seen? Did I make a typo? So then I have to check all of these possible mistakes over and over until I locate the error. Even trivial changes can eat five minutes.

            Sigh.

            • Will says:

              I have found Firefox’s developer tools to be excellent for debugging this sort of thing. Right-click on an element, pick “Inspect element” from the context menu, and you’ve got a panel with all the styles that apply to it with overridden or inactive ones stuck out. For example, I can tell you with about five seconds of scanning that the gravatar for your comment has currently active styling from the “avatar” class in style.css, “img” tag in bootstrap.css, global style from bootstrap.css, “comment-author” class from style.css, “div” tag from style.css, and a small handful of other active rules from more complicated selectors.

        • Cybron says:

          CSS is powerful but awkward, especially for new users. I’m pretty bad at it myself, but some people are real wizards with the stuff.

        • Alex says:

          “Forum moved to the front.”

          I have visited this site almost daily for a year or so without ever realizing there is a forum. I always assumed that button linked to the “Howto Forum” post (http://www.shamusyoung.com/twentysidedtale/?p=21365). Don’t know why I thought that.

          Along that line I suspect a new visitor will not know what is behind “Spoiler Warning”, especially not with the Mass Effect image. Maybe go with “Spoiler Warning Show”?

          “I had to push World of Warcraft off to make it fit. You monster.”

          I realize front page space is contested but I think “About the Author” belongs on the frontpage. Don’t know about other people but I always click that link if I go to a new blog. If it is there. Personally I would put DM of the Rings in a later position to make that possible. Also I suggest giving the three most recent longform projects the three leftmost slots in anti-chronological order (i. e. Batman has slot 0).

          Also adding later slots to the carousel is practically free so why not include the most recent (or all?) Rutskarn series and the GoT series?

  2. Ransom says:

    There doesn’t seem to be a mobile theme anymore. Is that intentional? Screenshot: http://i.imgur.com/GmFFJaw.jpg

    • Commenting here because it’s about mobile:
      On my phone, the additional width forces me to zoom out and make the text even smaller than before. Still readable, but not ideal. Also, I see the serif font on desktop, but not on my phone. I don’t know if there’s anything you can do about that.

      The desktop theme looks great, though!

      EDIT: I just refreshed the page on my phone and it looks different from before, so I guess changes are happening there….

      • Phill says:

        I was about to say the same thing: it is much less user friendly right now when reading on the phone because of the wider text columns meaning I have to zoom in less, making the text smaller and more of an effort to read.

    • Vukodlak says:

      Seconded. It’s now extremely difficult to read on mobile. And the wider column width makes it more difficult to read even when it’s on a larger screen.

  3. Peter Street says:

    1) Your mobile site seems to be very plain – is that intentional? I’m not complaining – it’s nice to be on a space-constrained device and have a view that is not cluttered and overflowed.

    2) It’s annoying that it’s a fixed non-flow width on desktop devices, which means I cannot re-size the window down to a quarter-screen-snap-in-windows-10 on a 1080p screen – it’s just slightly wider. It also doesn’t ‘flow’ in my usual half-width feedly screen. Minor points, but I would suggest not putting a minimum width on anything, and allowing people to resize smaller, if possible.

    Either way, the design looks good to me, so I’m not complaining :D I like the new font, and it feels ‘cleaner’ in layout.

    • Pete_Volmen says:

      Allowing lower widths would be fantastic. Not sure how much of work it would be though. If some elements of the site are expecting a certain minimum width the site might go weird on the smaller widths.

  4. Daemian Lucifer says:

    Gah!Its so wiiiiiide!!!

    EDIT:Edit function doesnt work properly.

    EDIT 2:I mean,it does edit your comment,but the cancel button doesnt work at all,and the save button freezes the edit tab,like nothing happened,even though the edits have been made.Also,the it doesnt pop up over the page like before,but rather opens a new page for the edit box.

  5. Daemian Lucifer says:

    Checking from my phone. It’s functional. Readability is good.

    Did you disable the pictures though, or is it some weird clash? Because that makes the blog barren.

    Comment box above comments … I’m not a fan of that. It means I have to scroll all the way back to respond after reading them. But having the name and mail bellow the comment box is a good change.

    EDIT: The edit box is even worse on the phone than on the computer. Waaaay too small. And with the same problems concerning buttons

  6. Trym V. O. Tegler says:

    The new theme looks good to me but I noticed a problem when I use the Archives feature. When I tell it to sort by categories everything works as it should, the site is nice and centered, but if I sort by date/ using the archives it gets a bit wonky.
    Instead of beeing nice and centered the site moves to the left in such a way that the edge of my screen cuts off about a third of the actual site.

    Imgur links:
    Archives: http://i.imgur.com/TWl8kY6.png
    Categories: http://i.imgur.com/l5BI1Dr.png

  7. Mephane says:

    Serif font. Over the past few weeks I’ve been posting Batman stuff where I talk about Ra’s Al Ghul while also writing about Borderlands Pre-Sequel where you rescue an AI. It really bugged me that I couldn’t tell the difference between AI and Al with the sans-serif font we’ve been using. So we’ll try serifs for a bit.

    Ugh. I hate serifs. I find them not only so utterly, it make the font look too thin, fragile.

    Also, while the comment text itself has no serifs, it looks as if it is bold (even though it may not be), but the comment input box uses serifs. Which is all a bit weird and inconsistent to boot.

    But seriously, please reconsider the use of serifs. As for your issue of distinguishing AI (artificial intelligence) and Al (the name), there are sans-serif fonts who have them different, for example:

    http://forum.high-logic.com/viewtopic.php?t=4004
    https://tex.stackexchange.com/questions/39543/is-there-a-sans-serif-font-that-appears-different-for-i-capital-i-and-l-small
    https://www.quora.com/Are-there-any-well-designed-sans-serif-fonts-with-good-contrast-between-capital-I-and-lowercase-L

    • Pete_Volmen says:

      Generally not a fan of serif fonts either (at least, for uses like here). There’s more and more good sans-serif fonts out there. Currently I’m mostly using PT sans. Immediately clear which letter was used. I’d say it handles I vs l better than the current font does, even.
      Honestly I find the text more difficult to parse now than I did before. It doesn’t help that (for example) the text under “Comment” goes from one weight to another to a different font (the latter of which I actually appreciate. Like going monospaced for code), which gives it a rather cluttered look. I might be seeing this wrong, but the blockquote example looks smaller in size than the others, too (for both description and actual example).
      The look of “Comment” is also quite close to the look of “you can enclose … like so:” . A bigger size for that would help, but then you’re taking up more space again.
      As so often with UI stuff there’s no solution that will satisfy everyone, however. Fortunately there’s ways to force a specific font in most browsers through one way or another.
      I must say the serif font is pretty though, even if it’s a bit more difficult to read for me personally.

    • Dustin says:

      Yeah, I’m not fond of serif fonts, either. I like the other changes, but the text is less readable for me now.

    • Echo Tango says:

      I’d like to chime in with the Hack font. It’s an open-source programmer’s font; It’s sans-serif, fixed-width, and all the 0oO LlIi| etc are all unique visually. Maybe people hate fixed-width, but I love this font. :)

  8. Daemian Lucifer says:

    For those of you reading this site from the future, this is what the site looked like yesterday, and this is what it looked like after the switch.

    And this is how it looks today.The background is simply gone.

    Also,a great time to check how the embeds work now.

    EDIT: The video embed in the comments works fine,but its weird.It centers the video in the comment,giving you a bunch of empty space around it.While the text is left aligned:

    http://imgur.com/a/iYQq3

  9. Daemian Lucifer says:

    No more Shamus tweets on the side?Awwww :( I liked reading those,and I dont use twitter,so having that on the side was a feature I enjoyed.

    • Ysen says:

      I also liked the tweet widget, for the same reason. I’m not a regular Twitter user but I like seeing Shamus’s tweets.

      • PeteTimesSix says:

        One more voice from the social-media avoidant chorus.

        There are dozens of us! Dozens!

        (Incidentaly, to add another minor complaint on the pile, is it just me or is there just a bit too much line spacing in the font?)

        • Ivellius says:

          Another here!

          Also, the whole “posts have serifs and comments don’t” bothers me.

          • Pete_Volmen says:

            Add one more to the group here.
            Say, since there’s so many of us, perhaps it would be fun to have a single platform where we could talk about stuff. I hear Facebook works for that?

            Edit: wow, the edit timer visibly counts down each second. It’s still updating while I’m typing this.
            Also I wish ctrl+enter would work for “Save”.

    • Bubble181 says:

      Thirded or fourthed or something.

    • Somniorum says:

      Normally disinclined to complain, but I, too, liked the tweets. Won’t kill me or anything if they don’t come back, but a bit unfortunate imo if they don’t.

    • Sleepyfoo says:

      I am also jumping on the “Aw, no twitter feed” bandwagon.

      In Addition, while the text is centered, on the Arkham post the images were left justified which put them very much out of alignment with the rest of the content.

    • ulrichomega says:

      I’ll toss my hat into the “Liked seeing Tweets” pool.

      But I also noticed that the widget maybe wasn’t working the best. A little late for a bug report, but whenever you responded to/quoted something it only ever showed your comments, not what you were responding to. This made following some stuff really hard.

    • Zak McKracken says:

      That and the Patreon link is gone. I used to click on that, consider joining the Patrons, then delaying it to another day. At the current speed, I’d probably have actually done it at some point… (yes, I know)

      I’d say that there should be some space for both in the header — that is: not a twitter box but a link to your profile page which is the more comfortable place to read your tweets anyway.

      Also, the mix of different fonts and line spacings in the comment-composing box is weird and does not look good. (e.g.: The “post comment” box has zero margin below the text)

  10. Zekiel says:

    Aaaaaah new font!!!
    Actually its a nice new font but change upsets me so….

    Does this mean I have to actually go to your Twitter account to read your tweets now?

    I think a lot of multi-writer commercial sites would have trouble keeping up with my output in terms of words.

    … and that is why I love this site. Thank you!

  11. MaxEd says:

    I have a small complaint. The headers of posts are too big relative to post’s text. So I zoom out to make headers smaller… And end up with post’s font too small to read.

    The new font is… Interesting. I’m not sure I like it, but I’m also not sure I hate it.

    Oh, and:

    * “Post Comment” button became too small and the text is aligned strangely inside it
    * “Check this if you aren’t a spammer” text is improperly aligned with the checkbox (the text is too high)

    Browser: Firefox 53

  12. Sougo says:

    Shamus, if you haven’t notice, the images for your DM of the Rings series are too big to fit in the webpage. It crop out a bit of the right hand side.

    (I’m using Firefox if that’s help)

  13. blue painted says:

    I like it – seems clearer to me.

  14. Daemian Lucifer says:

    Weird bug.I have no idea how this happened:

    http://imgur.com/a/k8PK4

    EDIT:And it continues.I see a 4 next to my comment now.Same even if I use a vpn.

    EDIT2:Great speed Shamoose.

  15. galacticplumber says:

    Well let’s start with a simple issue you may not have thought of. Wider columns for articles and comments has negative side effects too. Namely for people with visual problems where the simplest solution is to simply mess with browser’s zoom until you find something comfortable. This also has to balance with the resolution option you pick to see everything you put on your desktop easily while still having convenient space for everything, and any word enlarging you do across your browser. Namely you’re likely using general functions to find what is most comfortable.

    Now this brings me to the main point. When columns widen you either have to mess with the zoom so everything is on screen, which makes the text smaller, accept a closer zoom for readability, but have to scroll left and right to even see things that get cut off by the zoom, or mess with the whole combination of features to make this site comfy again, but likely screw up the feel of many other sites in the process and thus have to do so literally twice every time I come here. Basically what I’m saying is that feature forces me, and I imagine anyone else in the audience with visual problems, to pick between three different ratios of severity of annoyance to frequency of annoyance. I could still have something functional with the article by simply letting text fill screen and cut edges off the wider images. Not ideal, but it works. Not so much the comments which are all text, and EVEN WIDER. Goddammit, this thing took at least three or four times to write as usual as I had to stop and scroll left or right regularly.

    • AR+ says:

      Seconding the comments on the unwarranted sense of self-importance displayed by any site design that thinks it, and not the user, is entitled to dictate what width it’s supposed to be viewed at.

    • Daemian Lucifer says:

      As a nearly blind bat,I can say that the change in width did not affect me.But then,with the earlier layout I had the site zoomed in until the main column filled the screen,completely removing the sidebar from view.I merely had to rezoom.

      The only thing that it messed up for me is the comment box,which is now narrower than the comments around it,thus having a bunch of empty space to the right.

    • Pete_Volmen says:

      Oh man, this is a problem on so many sites (though this place always did well for me). There’s a solution though. In some browsers you can set font size and total size differently. For Firefox there’s NoSquint Plus, for example. Ctrl+scroll resizes like it normally would, Ctrl+Shift+scroll resizes font size only. I generally resize till I find a comfortable width, then resize the font to fit afterwards.

    • Zak McKracken says:

      My eyes are fine but I, too, prefer if I can arrange browser windows in whichever way I choose and their contents adapt to the window width.
      So while a standard column width is certainly fine, I’d prefer if it did adapt to the window width if the windof is slimmer than that. Actually, that behaviour used to be the norm (back in the late 90’s, the last time I used an HTML editor…), and I used to take advantage of it a lot, particularly on my phone. I’m not sure why so many sites don’t do this any more. There are much much worse offenders than this site, and some of those have a way higher budget. Has it become harder to do this with the CMSs of the last few years?

  16. Shamus says:

    * Fixed problem where certain comments would have a big red number beside them. (Because WordPress is OBSESSED with ordered lists and uses them for EVERYTHING, requiring tons of CSS to stop ordered lists from acting like ordered lists so they can be something else, and hoping you didn’t mess up any of the OTHER ordered lists in the process.)

    * Header menu now easier to read. Get rid of the white box.

    * The Diecast link in the Carousel now goes to the Diecast and not programming posts. (Classic copy & paste bug.)

    * Fixed problem where archive view would shove all the content about 100 pixels off the left edge of the screen.

    Those are quick fixes. They might not appear until the cache catches up. Other problems are still being investigated. Thanks for the feedback.

    • Shamus says:

      Also I really need to figure out why the edit comment plugin stopped working. This is annoying.

    • Shamus says:

      ALSO!

      The first letter of every post is supposed to be large, using the first-letter property. This works correctly in Chrome, but mysteriously fails in Firefox. I don’t really care about the feature itself, but I HATE when browsers mysteriously give different results like this. Really bugging me.

    • Shamus says:

      * Fixed problem where really old posts with large images (like DM of the Rings) were being improperly formatted.

      * Replaced old comment editing plugin with a new one. Old one couldn’t play nice with the new Javascript. The new one isn’t as sexy, but it gets the job done.

      • Zak McKracken says:

        I like the new editing plugin. Looks better to me (FF, W7) Only the initial window is much smaller than the comment I’m editing, and the font I’m typing the comment in is much smaller than the comment above it.

        That might become a problem when typing on a phone and trying to place the cursor or select a word.

      • Duneyrr says:

        This is still happening for me on Chrome (versions 57 and 58). They are getting cut off on the right.

        The element is set to 600px wide, but it looks like the ‘insetimage’ class is being hard set to 1024px wide in style.css (line 311) and is overwriting that

  17. Christopher Kerr says:

    I like how this looks on my phone in landscape, but things are super tiny in portrait

  18. SpaceSjut says:

    This: https://imgur.com/a/wcG9W
    [From the Archives falls out of the boxes AND has a scrollbar.]

  19. Parkhorse says:

    I usually make my “reading pane” half the screen, on a 1080p monitor. Being fixed-width means I have to zoom out slightly to actually read this way, now. Text used to wrap. Maybe it’s because your header image is oversized?

    the difference between AI and Al

    Maybe it’s the “zooming out slightly” I’ve done, but the difference is really tiny. Like, one tick on the upper half of the L. I can discern the difference if I’m looking for it, but at a glance? Not really.

    Also confirmed (on FF/W7): Edit pulls to a new page, instead of opening a frame. And then doesn’t automatically go back to the comments when you complete your edit. Not as good.

  20. Awetugiw says:

    The new site theme does seem to break slightly more when viewed with script blocker active than the old one. I suppose I should consider whitelisting this site.

  21. default_ex says:

    The difference between “I”, “l”, “1” and “|” in every single font out there has annoyed the crap out of me. Source Code was supposed to solve this problem but it’s still a problem, just not as much so. Google also has a font aimed specifically at this problem but yet again ignores that there are many ways we can write those characters without making them identical. I do it in my handwriting all the time, draw my “1”s with flare, my “l” with a gentle curve and “I” in the traditional manner and “|” just stands out on it’s own due to the type of writing it’s used in.

    • Nick-B says:

      Amusingly enough, the font doesn’t seem to apply to comments, so I have no idea which of the i or L those two are. 1 and | seem fine, since 1 always had that top flare and pipe is hardly used, but juts below a line anyway. I prefer an uppercase I (the letter after H), to have the flares on the left and right, and lower case always has a dot. Upper case L always has the right part flare, lower case is always a plain vertical line. It’s how I learned how to write it in school, by gum, it’s how I want it shown in fonts.

  22. AR+ says:

    NoScript is telling me that you have scripts running from ajax.googleapis.com now, which is annoying, since no third-party JS was needed before. This may be why the carousal isn’t working for me.

    The site doesn’t respond properly to horizontal scaling, but instead imposes a minimum width, so that if I OS+left or right, it doesn’t squeeze down, but instead makes me either zoom out or use the horizontal scrollbar to read everything.

    • Shamus says:

      Lots of people are complaining that the old site could be horizontally scaled, but this makes no sense to me. The old site was fixed to the same width: 1024 pixels. The content was locked at 800 wide, the sidebar was about 200.

      Are you saying you could make the window narrower and it would make the column of text fit? I don’t see how that’s possible. But if it IS possible, I don’t understand how it STOPPED being possible.

      I assume I’m misunderstanding the problem?

      • AR+ says:

        It’s only really a problem with the comments, so it’s possible that I’d just never happened to be running the browser in half-screen while reading comments on this site and never noticed, or forgot that it did. In any case, you changed themes so I tested it deliberately and it doesn’t scale down properly.

        To clarify, yes, I mean that the column of text doesn’t automatically fit to a smaller width. As for how, I don’t know, but every entry in the Motherfucking Website series manages to do it, and all but the first does it while still having a text column, like this site.

      • Daemian Lucifer says:

        I think I know whats the problem.The sidebar was a different column that could be pushed around when the window was being resized,and the main column was narrow enough that it would fit even in narrow windows.But now that theres only one column,it takes up all the space,and theres nothing to get pushed around if the window changes the size,creating the illusion that suddenly the text is fixed when it wasnt before.

      • Shamus says:

        Testing new comment editing plugin.

        EDIT: Seems to work.

        • Daemian Lucifer says:

          Huh,disappeared immediately.I wonder if Shamus sees it now that its deleted.If not,than thats great.

          And its deleted from the rss as well.Hmmm…Does that mean Ill no longer see the spam there?

          The new edit box is actually pretty good.Except for the shorter edit time.

          • Shamus says:

            Yep. The old plugin had to email me and ask me to delete a comment. This new one just pulls the trigger.

            That’s probably for the best, although now there’s the risk that someone will delete their comment after others have replied, which makes a hash of the nesting.

            We’ll see if it’s a problem.

            • Daemian Lucifer says:

              I just did a test and…Well,I guess you can say that its a problem.Both the comments got deleted,the one that I wanted to delete and the one that was its reply.

              Seeing how the response window is just 10 minutes,its merely an annoying nuisance,not a huge problem.But still,something to consider.

            • MichaelGC says:

              Ah, so no more using deleted comments to report tpyos, then; righto.

      • Zak McKracken says:

        The text in the main column did not reflow when reducing window width, but the new wider column has turned it into more of an issue.

        Especially on my phone, I have to read in landscape mode now, then it’s fairly small print, so long reads are hard for my old eyes. Tapping a link often requires me to zoom in first.
        It’d be nice if text would just re-flow when the window becomes narrower, as it used to in back in the day.
        Is there a way to set column size to “1024 or window width, whichever is smaller”? Or would a dynamic column mess up something else?

        I know dynamic column width used to be easy-peasy in the old HTML days but judging by how seldom it happens these days, I’m wondering if that’s no longer true.

  23. J Lakeo says:

    Right now the line width is ~100 characters, with top level comments being well over that. Isn’t that a bit too much? But nobody else is saying anything about this, so maybe I’m just wrong. Also, as someone else said, the window is just slightly too wide to fit half a screen on 1080p monitor, though for articles it cuts off just as the text does so nothing is lost there. Still a bit annoying.

    I liked the twitter box! I’m really sad to see it gone. :(

    I’m not sure what to think of the larger pictures. For something like let’s play posts they look nicer just for the extra detail. They are pretty big though when they aren’t needed.

  24. Eichengard says:

    Argh, I clicked “go to full site” on my phone and everything is tiny!

    There doesn’t seem to be a “to go mobile” option. It needs one. Please

  25. stomponator says:

    The DM of the Rings strips appear enlarged on my screen, wich results in the right side being cut off and them generally looking worse. Also, the links to the next and previous strips appear partially covered. (I am using Chrome)

    Apart from this the new layout ist looking great!

  26. Da Mage says:

    I tend to open this page on my laptop and then snap it to one side, with a video or something (often work stuff) snapped to the other side. On the old site, I could use the bar to position the content in the middle and it would fit nicely, but with this new column width I cannot do that, as the content is now wider than that half of the screen. Is it possible that when the page width is smaller that we can get this content column smaller.

    Also, I’m not a fan of Serif fonts, but that might just be me.

  27. Bloodsquirrel says:

    The new font is a little harder to read for me. I don’t know if the “A1” vs “AI” thing was really that big of an issue.

  28. Eichengard says:

    Thanks for the go to mobile button.

    However, when looking at highly nested comments on mobile, they get thinner and thinner until they display only a single word per line. Also, YouTube embeds at the top of entries display oddly on the main page (just a square bracketed link).

  29. lllVentuslll says:

    I’m finding the super wide margins on the text of the main post to be a bit distracting – It’s like the text is using up only 8/10ths of the possible space, you couldn’t half them for me could you? ;P but its probably just me

  30. silver Harloe says:

    Personally, I’d try to center the videos (as in the Life is Strange posts), and the images which are not expanded to full width (as in the Nan-o-War posts).

    I also personally hate the font (verdana ftw), but I’m sure I’ll get used it to quickly enough and whatever you like is most important.

  31. Hal says:

    I mean, I had no issues with the search box, and I used it pretty frequently. FWIW.

  32. ulrichomega says:

    Not a fan of the carousel. It maybe works for this specific purpose, but in general they’re seen as poor design because users don’t interact with them.

    http://shouldiuseacarousel.com/

  33. Nick-B says:

    Am I the only one that feels shamus is yelling his post titles at me? I very much dislike all caps, and having a font for the titles that is just slightly different sized upper-case letters doesn’t stop the “I AM TYPING IN ALL CAPS BECAUSE I AM MAD AT YOU” feeling from hitting me.

  34. Paul Spooner says:

    From my experiments in web design, I’ve found that 600 to 800 pixels fixed width works best (which is why people were more comfortable with the 800 px wide content). You’ve already got the 11 to 14 px font on lock, though I’d suggest a lighter color (I use #222 instead of perfect #000 black, as it’s a bit easier on the eyes). With that font and width combination, you can just barely read the text on a cell phone, and it’s not so far that the eye has trouble tracking the lines.
    It DOES tend to leave the page looking empty, especially without the sidebar, but that’s what zoom is for.

    Also, the DM of the Rings links apparently have manual line breaks in them, which doesn’t play well with the new slim navigation bar, as it crops the second line in half.

  35. Rory Porteous says:

    I feel like things would look a bit cleaner if the main column wasn’t centered in page, and was instead slightly further over to the left with the graphic taking up the space on the right. I’d also echo the comments by some about the font being not great and the text boxes (both in the main body and the comments) feel too wide. I really struggle to read longer lines of text, and I know that it can be particularly difficult for those with dyslexia to do so. At the moment it feels like reading a page that’s loaded into plain HTML.

    Definitely prefer the carousel at the top, although the transparent images make it look like the background has loaded over them on the left side. It would probably be beneficial to put a separate box behind the carousel to make it stand out a bit. I think the site could also use a better contents page since up until this update I could never find the Mass Effect critique without googling it.

    • Dev Null says:

      Part of the problem with reading wider lines of text (and, *shudder*, justified text) is that we unconsciously use the uneven ends of lines to keep our place in the text when we skip down a line. Read some research about it once, though for the life of me I couldn’t tell you where now. If the line is so wide that you can’t keep your focus on both edges at once, you can lose your place.

  36. Rosseloh says:

    Well, it’s your site, not mine, but here’s my thought:

    When reading things online, sans serif is king. Of all the changes you made, switching to serif is the only one that I dislike. And I dislike it a lot.

    And I guess I agree with an above comment that the padding on the post body is kinda weird. Too much whitespace.

    But again, it’s not my site.

    • Rosseloh says:

      I found something else while browsing an archived post – specifically, this one.

      Your H3 tags are, to my eye, too close to the edge. If that’s how you like it, cool. But it’s related to your “margin-left: -100px” in “.entry-text h3”. Personally I’d set it to -90px.

      (Goddamn modern browsers are nice. Live CSS editing in the dev console makes debugging this stuff so much easier.)

  37. Warclam says:

    Not fond of the new font, but it could just be that it’s different.

    Bigger problem: everything’s too big. The font size seems high and the spacing is wide. I’m finding myself actually leaning back from my screen to read it.

  38. Christopher says:

    I think it looks fine on the site. Earlier today the mobile version gave me a real plain version that all fit on the same screen, but looked terribly dry. Now I’m getting a zoomed-in view of the text that makes it readable, but only shows like 1/3 of the width of the article. Zooming out so the whole text is in frame isn’t an option because it’s unreadable at that point. Zooming halfway out and then scrolling like a madman technically works though.

    For the record, I’m using Chrome on an android phone.

  39. John says:

    I think the new site design is fine on the PC, but I really preferred the old design for reading on my phone. It’s a question of font size and line length. In the old design, I could read posts and comments quite easily whether I held my phone vertically or horizontally. I didn’t need to zoom in to make the text legible and I never needed to do any horizontal scrolling. With the new design, I have to hold my phone horizontally in order to read without zooming–which, admittedly, would be fine if that were the only issue–but the font is still so small that I’m seriously concerned about eye strain. To be fair, I have what I suspect is a fairly small phone for this day and age, with a 4.25″ screen. For all I know, most people’s phones are much larger. My wife’s certainly is.

  40. Pete_Volmen says:

    Absolutely love the backgrounds. They add whimsy, and (to my eyes) help a lot. I was really happy when you went to a darker background, since that meant I didn’t have to use a quick/ugly userstyle that basically put the whole site in light gray on black. Now they’re not only nicely dark enough, but they’re fun too. The main content is still dark on light, but the backgrounds are enough to relieve most of the strain.

    • Zak McKracken says:

      Agreed. Everyone’s focusing on the stuff that doesn’t work, and the background actually works nicely.

      Also, I don’t miss the sidebar! (except the “about” and patreon links missing, and the justified “Tweets by @shamusyoung” … but I suppose Shamus knows that already)

    • Taellosse says:

      I actually disagree – I was sorry to see the dark background appear a while back, and never got around to saying so before now. I think it’s just a little TOO dark for my taste, is all. Something more mid-tone-ey would be better, in my opinion.

  41. Redingold says:

    While we’re discussing the website, the biggest problem I’ve had with it recently is this: http://i.imgur.com/bqUnXMN.png

    Your website is really unpredictable for me. Sometimes it loads fine, sometimes it doesn’t, and I have to leave it for a while before it’ll load properly. This has been going on for at least a few weeks now.

    • Daemian Lucifer says:

      It does seem to have been sped up now that the new theme is in place.Maybe one of the old plugins was breaking something?

      We shall see if it lasts.

    • Zak McKracken says:

      I had that error once today, and that was the first time I’ve encountered it in a very long while. I assumed the site was down because of Shamus messing with stuff to get the search field where he wanted it.

  42. Josh says:

    And in other news, this is one of the five websites left with high-contrast text. Thank you for that.

  43. Narida says:

    The rule

    .col-xs-4 {
    font: 16px serif;
    }

    is overwriting the Lora font in the header/carousel.

  44. MadTinkerer says:

    How will I ever read any Twitter feeds without the sidebar?

    I don’t have a Twitter account and I’m not getting one. The only time I read Twitter is when a content creator has their feed embedded in the page. This is the only website left that I still read that had a Twitter feed embedded in the page!

    If you do not fix this, you are cutting me off from Twitter completely. This is clearly entirely your responsibility and not something I can fix by just typing “Twitter” into Google.

  45. Ivan says:

    Probably reported already, but the next and previous articles links are cropped horizontally if they roll over to two or more lines. The DM of the Rings articles are a good example.

  46. Duoae says:

    I was really liking the new (now old) background but now I’m really liking the new (new) background and site layout even more! Last time I “redesigned” my blog I made it much wider but still retained the sidebar out of habit more than anything. Maybe I’ll do a redesign and follow suit! :D

    Anyway, I like the new design. I also liked the old design but this is cooler.

  47. Ramsus says:

    My only comment is that I wish the right side of the screen wasn’t just completely black. It’s a little jarring and frequently makes me think for a split second that something is wrong with the page/my screen/my eyes/the fabric of reality.

  48. LapnLook says:

    I like it, it works really well on my desktop, but on mobile I have to zoom out every time I load the page, as by default it’s roughly 400% zoomed in to the top left corner

  49. baud001 says:

    I like the new fonts and background.
    But I’m missing the sidebar, mostly from habit, since I can’t remember what was there (except your twitter feed; I’m not on twitter, how am I going to read your 140-char prose?).

  50. Rather wide on my fire kindle.

    I click on it and rearranges but text gets smaller, otherwise its fine haven´t checked on my kindle B&W :)

  51. Galad says:

    On mobile, it’s too wide, fortunately when zoomed out, text is still readable. More importantly..

    WHERe is the twitter widget?? I don’t do the twitter thing but I’d still love to read your posts

  52. Shamus says:

    The Twitter feed is back. But now it’s stupidly overlapping other elements. I have the EXACT. SAME. CODE. on my staging site, and it looks fine. Identical files across the board. But I get different behaviors based on URL.

    I hate CSS so much. It’s madness.

  53. Merlin says:

    Oof, not liking the Verdana. It works well in small print, but the text on the site & comments is large enough that the uneven spacing between letters is distracting. It looks more like a smear of letters than a series of words.

    • Josh says:

      Yeah Verdana is not a typeface for large fonts. The previous serif font looked much better.

      • Zak McKracken says:

        Kind-of disagree.

        I like Verdana better, but it could be a good bit smaller — on my desktop, that is. Not on my phone. No idea what it would look like on a high-DPI desktop monitor.
        On my desktop, the font size in the comment composer is about right for me.

        • Daemian Lucifer says:

          Kind-of disagree.

          No need to be coy.Its been scientifically proven that people who dont like verdana are bereft of good taste.

          • Zak McKracken says:

            What I meant: I agree that the font could be smaller (on the dektop), but then it would look better than the previous serif font (which I just had another look at in another tab loaded when it was still in use) — so while it does not look very good, it’s not actually the font, rather the size.

            My tastes regarding fonts are not really based on mastery of typography, and therefore just that: taste.

            That article is interesting. I will note, though, that “points” is not the most useful measure for computer screens — most stuff is still done in “Pixels” — which of course is also not the most useful thing these days, though it used to be when all screen had similar pixel density, and the denser ones were viewed from shorter distance.

  54. BeardedDork says:

    I’ll defend the serifs, poor little guys

    • Alex says:

      Well I would have defended them too, had I known that Shamus was to be bullied into reversing his decision. I read the original post as “some people inevitably are going to complain but this is how this site is going to look” so it seemed not worth discussing anything other than bugs.

    • Sabrdance (MatthewH) says:

      Maybe its being an academic where everything I read is in Times New Roman, but I rather like serifs, too. I have no strong preferences, so long as the font chosen does clarify between Al and AI.

    • Philadelphus says:

      I like serifs too, but I wasn’t quick enough to catch the site while they were in use so I can’t actually claim to have an opinion on their (lack of) presence.

  55. Steve C says:

    The text around the reply box is really squished. Especially the “Post Comment” button.
    https://imgur.com/a/MPcpo

    Also it would be great if https worked.

  56. Dt3r says:

    The most important thing to me is that Spoiler Warning and Diecast are both easily accessible from the top. Overall I like the change.

  57. Parkhorse says:

    Yes! The text column width is no longer awkwardly excessive and horrible!

    This is perfect, LEAVE IT THAT WAY

    Edit time is now ten minutes instead of over half an hour? But at least it isn’t a new webpage!

  58. TehShrike says:

    Which serif font did you use? Serifs are fine for reading (I like them for body text), but picking a good one helps. Georgia is a good one to try. I’m also partial to

    font-family: Palatino, Palatino Linotype, Serif

    which gets you the Palantino font in a way that works across all operating systems.

    I read Twenty Sided posts in my feed reader every day in a serif font, and it works just fine for me ;-P

  59. Son of Valhalla says:

    Yeah, uh, the Twitter feed box is sort’ve cutoff and strange looking. You may want to widen it a little bit, so the full name Twitter is displayed.

    Other than that, it looks pretty cool. Except interchanging photos everyday might be a bother to the eyes.

    I know the Tweet box is supposed to drop down, but it’s cut off slightly before the drop down.

  60. Retsam says:

    I was going to comment that the search box looks oddly blocky compared to everything else, then I realized that’s probably the you were complaining about. You should be able to style if you select it via its parent element (which has an id “searchform”):

    #searchform div {
    margin-top: 4px;
    }

    This appears to fix the annoying offset that was mentioned above.

    And, yeah, speaking as a full-time web developer… CSS is a pain to organize. It needs to be organized like any other bit of code, but there’s a lot less consensus about the best way to do that.

    Minor, but I think the expanding twitter feed is a neat idea, but the un-expanded state looks wrong to me; it looks like it’s being cut-off (or like it’s a static image trying to load over dial-up internet), not like something that I’m supposed to mouse-over.

    Sidenote discovered while typing this: when I type a caret (`) symbol in the comment box, it’s out of place. Might be an issue on my end, but seems awfully coincidental that I’d just see it now.

  61. Jonathan says:

    The text is fuzzy. It reminds me of the default text that came on my Windows 7 work laptop. I had to change a ton of settings and fight with it for a couple of hours to get non-fuzzy text.

    If you keep the fuzzy text I will probably scale back my reading because it’s headache-inducing.

    Also, I have to zoom out twice (scroll wheel) to avoid having to scroll left & right to see all of this comment. I run left side taskbar (thank you!) and 1024×768 on a 19″ monitor. Smaller than most.

    I despise widescreen monitors.

    • Jonathan says:

      Is there a way to make the site output plaintext instead of the formatted text & fonts currently in use?
      Or to set up an override so that my browser will not use the site’s theme and fuzzfont?

  62. BenD says:

    On my phone, the site used to be readable. Now it is not. The body text is WAY too small. I can fix this in reading mode, but then I don’t get some of the visuals and alt-text gags.

    If you’re using a system to degrade for mobile, and there’s a setting for type size, I beg you to crank it up. Otherwise I’ll cope. :}

    Clarification: it used to be possible for me to read the entire column from left to right all the way across the body of the text without shoving my screen around like a caveperson. Now if I want the text to be big enough to read, I have to slide the screen back-and-forth all the time.

    • BenD says:

      I see the mobile degredation has been tweaked! It is much better. Sometimes the page gets sort of stuck where I can only see the middle – for example, right now as I type this, I can’t scroll all the way left or right. Strangely, the screen does follow the cursor, so actually typing the comment is working pretty well.

      Edit: I see now that it’s the comments only that have this issue. Well, comments and footnotes in the text. These items do not resize to screen width the way everything else seems to; they may resize, but not the same way, and wind up being too wide for the screen. Meanwhile the screen is convinced there’s only as much site as the width of the main column so won’t scroll sideways or shrink. Or something like that.

  63. Blue_Pie_Ninja says:

    Is it just me, or does the text inside the buttons for things like ‘Post Comment’ and ‘Select Category’ look like it is too low for the button? btw I am using Chrome on a Chromebook, not sure which version though.

  64. NoneCallMeTim says:

    So I have come in after seeing a lot of the changes.

    -Quite like the background altering on a daily basis.
    -Surprised to see your patreon link go. That seems quite important for someone who makes a living from it. How about putting a link in the author description at the end of the post?
    -I think the carousel at the top needs the images changed with some kind of description about what they are about – for new people.

    Overall, the bits I care about: the content is pretty readable.

    EDIT: just seen that the time for editing is not about 10 mins. It was 30 minutes. Is that a deliberate change?

1 2

Leave a Reply

Comments are moderated and may not be posted immediately. Required fields are marked *

*
*

Thanks for joining the discussion. Be nice, don't post angry, and enjoy yourself. This is supposed to be fun.

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>