Skip to content
Fluid layout

All layouts are responsive, but some are more responsive than others

All layouts are responsive, but some are more responsive than others published on 11 Comments on All layouts are responsive, but some are more responsive than others

Update, Sunday (2/21) afternoon: Pushed a new version with a maximum width set on the desktop layout, and a “no cropping the comic with a horizontal scrollbar” set on the mobile layout. (Might take some time for the last update to cycle through the cache, so if you don’t see it yet, just wait.)

After a round of “we like indexing sites that adapt to multiple device sizes” prodding from Google, I did some tweaking to make the Leif & Thorn layout more responsive.

Out with the fixed-width central column! In with the fluid self-adjusting divs. Long may they reign.

Also: there was already a mobile layout, but now your phone should actually load the mobile layout.

Mobile layout

Which…may or may not actually be better for users, no matter what Google’s automated guidelines say.

So how’s it working for you? If specific features are giving people trouble, it’s pretty easy to finesse them into something more functional.

Comment on this post and/or vote in the poll to give feedback:

Leif & Thorn's mobile layout should now actually work on mobile! (Use your browser's "View Desktop Site" option, if available, to switch back.) How do you feel about it?
  • Add your answer

And yes, I did decide to upend the Leif & Thorn layout on the exact same weekend as I launched the But I’m A Cat Person: Master’s Edition Kickstarter.

Master's Edition logo

Because I’m a sucker for punishment, apparently.

(No, seriously, the campaign is off to a great start. While I finish shipping the latest round of Leif & Thorn paperbacks, don’t miss your chance to pick up Even More Books.)

Comment Header

11 Comments

I don’t use mobile site, so I can’t comment on that. The desktop view seems very horizontally stretched out at the moment (just edge-to-edge content, no empty space at far left and far right) and it’s giving me a bit of eyestrain.

I do have a large-ish monitor (1920×1080), so the strechedness is probably less noticeable on laptop screens.

I use mobile for webcomics whenever possible, for convenience. I use an iPhone Xr, and the website definitely worked better for me before the mobile page got implemented, with the exception of comments.

My screen was big enough that I could see detail even looking at the whole comic in portrait/vertical (regular) mode, and I didn’t mind zooming in when I needed to. Now I have to swipe, and it’s harder for me to go back and reread panels in case I misunderstood or want to reinterpret something (which I do often). Not a lot harder, just inconvenient. This is especially noticeable on full pages as opposed to strips, because you have to scroll back over to the left multiple times to follow the story instead of viewing panels left to right in one row.

With comments, it now automatically repositions the screen when I’m zoomed in enough that I can’t see the whole comment box and my cursor goes offscreen, but I end up zooming out to see the whole thing anyway because the jumping around is distracting.

I would just view the desktop version of the site on my phone but I can’t find a button to do that.

Also, I use the blue castle site theme and I’ve noticed that it takes longer to load in sometimes than others, or doesn’t load at all until I switch pages. Outside the scope of the question, but I thought it’d be okay since we’re addressing coding stuff.

I kind of went into a lot of detail, I hope that was helpful and didn’t sound like a lot of complaining, I’m really just trying to be specific!

As an example of the scroll issue, on today’s page I saw Leif working at the lodge before I was able to scroll over and read about Kale asking him vaccine questions. It’s not major, but it certainly interferes with the intended way of reading the page, and means that if a big reveal is in the bottom left corner, I would probably see it before anything on the right half of the page, especially the top right

I liked how the scrollbar worked for horizontal strips, but a good chunk of the archive isn’t that, huh…

Pushed a no-scrollbar version, let’s see how that works.

Just for reference, if you’re using mobile Safari, here’s how to load desktop layouts.

Right now Northern Lights is the “default” theme, so the pages will always load that first, before catching your browser’s individually-chosen theme setting. When I first set up themes, I tried to make it…not do that, but couldn’t get any of the suggested code to take. (Any web-designing readers who can sweep in here with a new idea are welcome.)

The new mobile layout makes it very difficult for me personally to read. Regular strips need to be scrolled horizontally, which my brain doesn’t like to process sometimes because I can’t see the whole picture at once. Sunday strip was even worse because I had to scroll horizontally AND vertically, which makes panel layout flow a nightmare. The Saturday sketch was also frustrating because I couldn’t see the whole thing at once. I would much rather pinch and zoom. However, the new layout does make it much easier to read transcripts and post comments (no more tiny post button!). If I can figure it out though I think O am going to set my phone to display the desktop version from now on.

Cleared my cache so I could see the latest version. Helps with Sunday comic reading, but the rest of the layout is… still weird.

(Reading on Firefox for iOS on a first gen iPhone SE, ftr – one of the smaller smartphones extant, iirc, so this may be an unusual case.)

Before the cache-clearing, the page layout for non-image stuff was full screen width, but the horizontal ComicAd between post and comments was wider than the page; post-cache-clearing. the ComicAd is now full screen width and the page layout (including the text of posts, comments, and even the header) are about 2/3rds of the screen wide.

Aw man, I missed the chance to see it with a horizontal scrollbar and defend the existence of such. Would it be possible for mobile layouts to have that swap-in-able like the color palettes? I like everything else about the mobile layout on my phone, it’s nice and certainly much easier to write comments on my phone, but I think I’d actually prefer having a scrollbar on the strips.

Leave a Reply

Your email address will not be published. Required fields are marked *

 

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Primary Sidebar