Update, Tuesday (3/2) just after midnight: Okay, now I’m just playing with zooms. There’s a new row of buttons above every comic — toggle between sizes (only affects the mobile layout) and let me know what you think.
Also, open the main stylesheet CSS and refresh, to make sure you have the latest version of that! (It’s the “everything but the color scheme” CSS, and cached versions may be glitchy.)
Note: all the variants are in the Northern Lights theme, because “color scheme + page size pick-your-own combo platter” is too much to code for a first-run test. Switching to a different site theme will return you to the current default zoom.
Update, Sunday (2/28) early morning: Mobile layout is un-crashed, and configured with a new “automatically zoomed-out to 80%” feature!
Too small? Not small enough? Drop a comment. (I’ll make a new poll for this, too…at some point.)
Update, Saturday (2/27) afternoon: Tried to make a minor fix, seems like it crashed mobile altogether. Bear with us.
(For techy readers: Multiple browsers are flat-out ignoring all the styles under the “max-width: 640px” media query in the main layout CSS. Styles for the same media query in other sheets, like the Northern Lights theme CSS, are being loaded just fine. If you can spot what the difference is…please let me know.)
Also, the web host pushed a new caching “upgrade” the other day, which means the latest version of the sight may not always load. If you leave a comment and it doesn’t show up, or you visit the front page and it doesn’t have today’s strip, please report it here!
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.
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:
- N/A, I don't use mobile at all 40%, 36 votes36 votes 40%36 votes - 40% of all votes
- It’s harder to use, it defaults “zoomed-in” and I have to scroll, but it won’t actually let me zoom out—I’d rather use the desktop site* 13%, 12 votes12 votes 13%12 votes - 13% of all votes
- It's harder to use, it defaults "zoomed-in" for me on mobile. I have to scroll over to see the right half of the script* 11%, 10 votes10 votes 11%10 votes - 11% of all votes
- It's harder to use, I'd rather have the desktop site and just pinch-to-zoom a lot 8%, 7 votes7 votes 8%7 votes - 8% of all votes
- Wait, you guys weren't seeing the mobile layout before? 7%, 6 votes6 votes 7%6 votes - 7% of all votes
- It's easier to use, I'm sticking with it 7%, 6 votes6 votes 7%6 votes - 7% of all votes
- I like how mobile is showing up more than pinch-zoom, but I wish I was getting a scrollbar on the comic* 4%, 4 votes4 votes 4%4 votes - 4% of all votes
- Not sure yet because it's new, but I'll try getting used to it 3%, 3 votes3 votes 3%3 votes - 3% of all votes
- Wait, there was a change? (I am i* 3%, 3 votes3 votes 3%3 votes - 3% of all votes
- It's not actually harder to use...but I don't like change 🙁 2%, 2 votes2 votes 2%2 votes - 2% of all votes
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.
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
22 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.
Pushed a new version with a max-width set, let’s see if that helps.
(I have a laptop that’s the same width, but don’t browse the internet in full-screen windows…basically the only thing I use fullscreen for is art.)
The new version helped a lot. Thank you.
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.
Yeah, definitely losing the horizontal scrollbar!
Might take a bit for the site cache to cycle over to the new version, but once it does, you’ll have to see if it’s an improvement.
I hit the zoom change button at 50%, and that seems to bring it back to about where it was before. While messing with that, though, I noticed that there’s a gold text “Leif & Thorn” next to the banner image with the comic title, and that at 50% they’re next to each other while at higher zooms they overlap.
Also, it looks like the layout isn’t playing nice with having things side by side — it goes nav bar across the top, the sidebar (with theme choice) by itself (empty space to the right), then the blog post (since that’s this page’s content), then the quiz about the mobile layout (with the text of the question overlapping (top and bottom of each line of text overlaps), then the comments section.
Edit: whoops! This was supposed to be a response to you on my thread!
Ahhh, you’re stuck on a cached version of the main stylesheet (i.e. the “everything but the color scheme” stylesheet) from a couple days ago. That wonkiness is fixed in the latest version.
Here’s a direct link, open it and refresh, that should get you up-to-date:
https://leifandthorn.com/wp-content/themes/leifthorn/style.css?ver=5.6.2
That seems to have worked! Well, mostly—there’s still a couple instances of overlapping text (at 50% zoom, not sure about others) (iPhone Xr)
Thanks!
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.
Weird — it’s not nearly that dramatic on my device — but I fiddled with the width, trying to make the margins even on both sides. We’ll see if that helps.
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.
I’m thinking about making this a changeable option, but I want to keep tinkering with the layout first…see if I can keep the accessibility of the mobile layout, while recapturing some of the large-size convenience of the standard one.
Honestly, I hate it when websites set up a ‘mobile website’. They are all harder to use. Now that I have learned that this is Google’s fault, at least I know who to complain about.
I hate Google. They stuck.
Something I just realized, when reading comment replies on the mobile layout, they tend to get really squished. Like, to the point where you’re reading one word per line squished. The first thread on today’s comic is where I noticed it.
I noticed that in the original release, and pushed a new version that should be more zoomed-out (even on small devices). Give it a refresh or two, see if the layout updates?
On an iphone 6+ using the Safari browser. 80% zoom is just SLIGHTLY too large, and 70% is way too small. If there was a 75% option that would work better. (Honestly like 77% would probably be perfect but thats such an awkward number lol)
This might just be a problem on my end? I can pinch zoom to make the 80% snap to the perfect size, but if i refresh or open the page it reverts back to almost but not quite perfect.
I’m on an LG Velvet and I also would like 75%; I view the site in portrait mode. Pinch-zooming is awkward and I’d prefer not to have to do it all the time.
On a Google Pixel 3 mobile phone – 60% or 70% seems to work best for me! I definitely like those options more than the extremely zoomed in display I was getting yesterday.
Thanks for trying to design a comfortable read for all of us! Hopefully it’s not too hard to figure out something that works for most people. 🙂
Ok, time for my two cents – despite the fact that my iPhone 7 isn’t a +, for me the easiet/most comfortable way for me to read the comic is portrait, with the comic the width of the screen (partly because I almost always use my phone in portrait) and the main thing getting in the way of that is the fact that none of the zooms match my screen width (somewhere between 60% and 70%) so I just pick a size that has the comic oversized and pinch so that it’s as zoomed out as it will go, giving me the edge to edge comicy goodness I’m after.
Comment Footer