Mobile styles redux

[fu]

We've read your comments about journals being more difficult to read on tablets and landscape on phones, and we're working on fixing this. It's taking some time because we want to make sure we don't break anything else again in the process but here's what we plan to do:

1) adjust the default size for the switch from one-column to multiple-columns, so that it happens at 3x the width of your sidebar. Right now it's approximately 2x. That should avoid issues where the sidebar overwhelms the content completely on narrow screens

2) this means that medium-sized screens (think most tablets) will go back to the multiple column layouts -- where necessary, we'll work on reducing large whitespace around the edge of the page on medium screens

3) expose the breakpoint size in the wizard, so that you won't have to mess around with layers or implement custom css for your settings

Note: if you've set the undocumented $*desktop_media_query property, that's going to stop working when we do this, but the replacement options in the wizard will have the same effect and will be easier to set.



I'll make another entry with links to the appropriate tab in the wizard once things are ready, for your convenience. Thank you for being so patient!

Comments

[musyc]

Fu, something broke overnight and now I can't doubletap to zoom on my tablet. Ipod Touch is one columning, and I can tapzoom there (but WOW narrow, I'll have a screenshot uploaded shortly.). Site scheme pages will tapzoom on both. I checked a bunch of other sites just to be sure I didn't flip some weird setting, but no. It's happening in landscape and portrait, and it's broken on every read or recent page I look at site-wide.

Secondly, will we be able to set that breakpoint to zero go away stop that? So that it never ever happens? PLEASEPLEASEPLEASE?

Screenshots and weirdnesses:

http://img.photobucket.com/albums/v507/LdyMusyc/random/bugsquishing/Screenshot_2014-07-15-10-03-59.png - Samsung Galaxy Tab 2, Android 4.0.4, Firefox.

I can't figure out why my navbar has that whitespace padding on either side. I'm not seeing it on other journals so I think it's in the layout, but I'm not sure. The padding is on desktop version as well. And now that I've tested, it's happening in Ciel also, so it's deliberately in the Librarian's Dream code. I never noticed before so I don't know if that's a result of the changes made recently or if I really just didn't notice (always a possibility), so I would like to get a CSS override to correct that.

http://img.photobucket.com/albums/v507/LdyMusyc/random/bugsquishing/photo.png
iPod Touch, and ... stuff. Firefox, I know that much. Very old, I don't update it unless dragged kicking and screaming because I generally just use it as a digital Walkman. XD

It is narrow narrow narrow. Terrifyingly narrow.

[fu]

Ahhhhhh the thing on "As I said on tumblr" is stretching the page

[musyc]

Eeep, to clarify, the ipod screenshot is from Safari. Wrong browser, there. But no matter. I think the very narrow narrowness can be disregarded. Currently glancing at my dwircle shows first page is fine but skip20 had the problem posts. There's a couple of journals with cross-post links that are breaking out of the entry container, and a comm's poll is breaking out as well, so that's a minor annoyance, but I think the narrowness was a function of my experimenting with tapzoom. It autoflipped to the single-column #primary, then a tapzoom pulled in to the entry container, then another zipped it way way out as seen in the screenshot. So I'm guessing that last zoom tried to account for the broken-out link and/or poll and went way too far? o.O

[fu]

Not sure yet what's going on! Ping me if it's not fixed after I post my next entry here? We're working on fixing some systemic things and that might just be a symptom of one of those.

[onifukuchou]

The whitespace on the nav bar is a function of the page margins, it looks like - did where the nav strip prints get moved inside a div?

(this is Momiji, I just have nav strips on on this account and I'm not on my usual set-up for quick-switching)

[kate_nepveu]

That sounds very cool, thank you!

[kaminagi]

Um, hello. I put a comment here, but I haven't received any response.

I know the layout changes were to benefit mobile devices, but I'm wondering if the changes were supposed to affect the desktop displays?

My layout currently is a two column modified version of Transmogrified. On my desktop display (and my cell phone), the side column (with all the modules) is designed as a long vertical column, that now displays (in its verticalness) right below the main entry column (in the described in your post of degrading from 2 or 3 columns into 1).

Is there a way to fix it? I've noticed when I previewed unmodified Transmogrified layouts, it seems to still have 2 columns? I don't really want to change anything in case it ends up being worse.

Thank you.

[failaga]

As a note: I've had modules triggering in Tabula Rasa layouts on my desktop computer on occasion, sometimes breaking the layout in the process and forcing the sidebar to jump down and be underneath the posts. Something needs its sensitivity eased a little, I suspect!

(Good luck wrangling it!)

[musyc]

It's been over a week without any update. Could we *please* get an official public answer as to whether we'll be able to opt-out of mobile views or to set our breakpoint to prevent the mobile from ever triggering? I still can't double-tap to zoom on my tablet and my layout is juuuust fucked enough that I've mostly given up on looking at it on anything other than a desktop. I want to know the status on the mobile code so I can decide whether to start working on a custom S2 that'll get rid of it.

[fu]

Sorry it's taking so long! We do plan on having the breakpoint be settable via the customization wizard. I don't have a time yet for when, but I'll follow up with the person who's making that happen.

[musyc]

That's not answering my question(s). Will we be able to opt-out entirely? Or will we be able to set the breakpoint to a level so low that it never triggers, if we aren't allowed to have an opt-out? Telling me that I *can* set a breakpoint isn't useful information if I don't know what the minimum threshold for that will be.

[fu]

I'm sorry for not being explicit earlier. You'll be able to set the breakpoint to any value, and if you set it to 0em, then that should mean that you'll never be placed into one-column mobile view.

[musyc]

Okay, that's a little reassuring, thank you. I'm trying to follow the various issues posted to github but being that my coding ability stops at 'throw some css on it', it's difficult. (Which makes me doubly disappointed that this was thrown out without a beta/feedback round. I know comparisons to LJ are Not On, but seriously this is the profile and/or comment page redesign all over again. Come into my house, rearrange all my furniture, and then glue it down so I can't put it back? I actually feel betrayed that users didn't even get a chance to talk about this beforehand.)

I know you're very busy and there's a lot of tweaks y'all are still working on, like the medium/large screen thingie, (and I'm hoping(?) this breakpoint thing will make my layout behave properly as "Every device is large screen LARGE ALL THE TIME MWAHAHAHA THERE IS NO MOBILE ONLY LARGE" -- and give me my ZOOM back *sob*) but it's very frustrating to have to sit here and twiddle while staring at a visually broken layout because whatever I do is probably going to be undone (Like, my navstrip anti-mobile tweak may very well be useless because it might get re-mobiled at any moment.) but I won't know about it until it's too late.

Phone landscape display

[ewen]

Fiddling, a lot, with this, it feels like there's something that is forcing a lot of right margin (or padding) onto the page on mobile devices since this change went live -- or arbitrarily constraining the main content display width to be extremely narrow. I never did figure out exactly which was happening, or which specific element was causing it if it is padding. Even in one column mode, with the margins set to 0px, I was still getting nearly as much "white" space at the right as I was getting content in landscape mode on my phone, until I started hard coding the content width. Which resulted in a pretty narrow text rendering column and only a handful of words per line :-(

It never used to be like this, so from my point of view this is an annoying regression in mobile functionality. Sure I used to have to double-tap to zoom in on mobile (to avoid the margins taking up space -- I've now figured out to hide them), but it was otherwise reasonably laid out.

By optimising for the three cases that I cared about (landscape on my phone, landscape and portrait on my tablet, and wider windows on my browser), with specific widths for specific devices, I've managed to get back to something that's at least not worse than it was last month. Although (a) I do have to double tap to zoom on each page load because the default view seems wrong, and (b) portrait on my phone is hopelessly tiny now, but mostly I don't use that so I gave that up as a lost cause.

Custom CSS below in case it's of any help to anyone (1024 is my tablet's width; 1136 is my phone's width in landscape orientation).

Ewen

@media screen and (max-width: 1024px) {
  #container, #footer, #body-footer {
    margin-left: 0px;
    margin-right: 0px;
  }
  entry-content {
    font-size: 12pt;
  }
}

@media screen and (max-width: 1136px) {
  #container, #footer, #body-footer {
    margin-left: 0px;
    margin-right: 0px;
    width: 1100px;
  }
  .entry-content {
    font-size: 14pt;
  }
  #module-jump-link     { display: none; }
  .module-section-two   { display: none; }
  .module-section-three { display: none; }
  #statistics           { display: none; }
}

[pocketmouse]

Can we get an update, possibly somewhere more visible than this? I spent ages looking for an update in the original news post, or in the original styles post. I didn't think that an update would be made in a new post and not amended anywhere else, so I didn't even find this until today, after getting no reply to my support request for a week, not even a link to this post.

[fu]

Good point, will have a code push and an accompanying news post soon.

[pocketmouse]

Thank you!