Ongoing styles work: more mobile-friendly styles

[fu]

Hi!

Just a quick update, we've been adjusting the existing styles to make them more mobile friendly. None of this is live on the site yet, but the goal is to have sidebars, etc, go beneath the content on smaller screens, no matter how many columns there are on bigger screens (one, two, or three).

This should be the case for most of our styles, though not all -- some of the styles will require a bit more work than others and will come later.

Biggest changes:

• "one-column" mode on smaller screens, to avoid sidebars overlapping into your entry content
• navigation strip to become more flexible so it doesn't break the layout on smaller screens
• more reasonable appearance on initial load on mobile phones (using <meta name="viewport" content="width=device-width, initial-scale=1.0"/> if you're familiar with that)
• adding a link to jump to the modules below the entries, as per Mobility

Biggest non-change: * barring a few tweaks of whitespace here and there, the appearance on bigger screens and desktops should remain unchanged. I've tested this as thoroughly as I can for each style -- but with how many styles we have, I've only been able to test with the default module configurations (e.g., if the module is in the sidebar by default, I haven't also tested by rearranging the modules so it's in the footer or header).

We don't expect any big changes but once this goes live, we're definitely open for bug reports of unexpected breakage or awkwardness!

There's not been a lot of structural HTML changes (the only change in the HTML is the addition of the meta viewport tag, and the link to jump to modules), so if you have a custom stylesheet we don't expect anything to break. But posting this as an early heads-up of what's coming so it doesn't come as a shock when it does.

Comments

[baggyeyes]

All I ask is please do not disable zooming. Some sites do this, and it makes for difficult to read content.

Thank you. :)

[fu]

Definitely not! We've set initial-scale but not maximum-scale (it's the latter that prevents zooming :))

[baggyeyes]

Ah! I didn't think you would, but wanted to make sure. :)

[fu]

I am glad you did; easier to make sure earlier than have to correct it once people are having problems later so thanks!

[musyc]

Will there be an option to disable this on a user basis, frex in journal/account settings? I've been interested in coding my own layout to auto-adjust before, but that would be via my choice. I dislike it immensely when a site chooses for me that I'm going to get a 'mobile' version. (Not that I expect DW would make the mistake of having it be damn near impossible to get back to a desktop view watch me shake my fist at some websites, if I click desktop I want the ARTICLE I WAS JUST READING NOT THE FRONT PAGE ARGH. /digress)

[fu]

The

[fu]

The styling is pretty baked into the CSS -- but if you're using a custom style and not the default style sheet your layout won't be affected by the changes.

(And yeah I hate redirects to mobile they so rarely work right. It's all with media queries, no redirects. That I can promise you)

[musyc]

Okay, let me see if I've got this. (Which, with my lack of caffeine, I probably don't. XD ) Possibility A. If a user picks a layout from the wizard and leaves it exactly as is, then they'd get the mobile-shift thingummie. Possibility B. If a user installs a custom style through the theme layer designer whatsit, they get no mobile-shift thingummie.

What about C: A user picks a layout and edits the CSS or makes other changes solely in the customization wizard. Which would they get? Yes or no to mobile-shift? (That's how I've done mine for the most part - I'm using a base Librarian's Dream, but I've altered colors in the wizard and added a bunch of CSS in the custom box without going into the compiler.)

[fu]

A: Yup

B: Yup (assuming they're overriding Page::print_default_stylesheet)

C: Depends on if they've checked the "use layout default stylesheet" or not. In your case it sounds like you will be getting the mobile-shift.

if you wanted to override that, there's no quick toggle unfortunately, but you could override in your own CSS. (And in case you're wondering, here are the code changes for Librarian's Dream specifically (you can see the whole layer post-changes using the view link up top))

[musyc]

Well ... bugger. That sucks. (It's not you, Fu, it's me! Promise!)

Is there a simple thing like a display:none that I can just shove in there? I unticked the default stylesheet ticky just to see what happened and it went kablooie since I'm only making a few tweaks not putting in an entirely different cut/paste css layout. I mean, I'm willing to go so far as to hoover the Librarian's Dream S2 entirely and make my own custom layer in the compiler that looks EXACTLY THE SAME MWAHAHAHA >.> but a one-line "ignore this @media bit" would be so much easier.

[fu]

Hmmmmm. I think technically you could set the $*desktop_media_query variable to something tiny -- it's something like "media screen and (min-width: X)" right now. I don't have the exact variable name (and can't check easily on the phone at the moment) but it could be doable

(The option won't be exposed in the wizard UI because I was only using a global variable for convenience across styles, but that means you can set it manually in a theme/user layer which I think you know how to deal with)

[musyc]

Ah, okay, if that's something I could put into the CSS box in the wizard, that would be a decent workaround for me. I'd be satisfied with that for my purposes, I think. So I could set the min-width for like ... 6px? XD I mean, if I have to make a fully custom layer, yeah, I'm capable, and I'd do it if necessary, but something I can put into the little box if it's possible is just simpler on my brain.

I appreciate your patience!

[foxfirefey]

I think you'd have to set the setting in an S2 layer and then it would change the generated CSS so the media query would never realistically apply.

[mooshlovely]

I use an ipad and it switchs to a one column voew and I would prefer if it didn't, it feels cramped. Is there an override to stop this? People have asked about zooming in, what about zooming out

[kaminagi]

I have a question regarding the desktop layout. My current layout has two columns, the main entry column and a smaller column containing all my modules.

Since the conversion to the single column format, it has moved the second (small) column directly below the main entry column (as mentioned in the code push post). I'm finding that it looks awkward on the desktop (because the smaller column is very... uh, vertical?).

Looking at the layout options on the customization page, I noticed that it was horizontal options for the columns now. Would I be able to apply that to my current layout so that it simply makes the second column into a horizontal one containing all my modules instead of the current vertical on, without it effecting my layout too much?

(And if I do apply one of the horizontal options, is there no turning back? As in, I wouldn't be able to go back the awkward two column layout I currently have?)

Thank you.

[velveteenwolf]

I find it really doesn't work well on my mobile anymore. I used to be able to comfortable post from my phone, and now everything scrolls weird (sorry for that highly un-technical description).

Also, I'm not seeing the buttons for editing posts, etc? I'm not sure if I d checked for them on mobile before, but highly inconvenient if intended. Is there a way to disable the change? At least for me it seems to severely impact functionality.

[pocketmouse]

So is there a general override we can put in the custom CSS? Because as I said, currently my layout (which uses the default stylesheet) is unusable in one direction and I attractive in the other.

[filialucis]

Could we please get the option to turn this new thing off without having to delve into CSS? The desktop view was much better on my mobile phone; the mobile version is effectively too annoying to bother with. It squinches the contents of my posts into a column only a little more than half the width of my screen (held horizontally) and the navigation column hogs the rest even though I very rarely need it to be visible. Images are effectively unviewable because they don't get resized and end up partly hidden by the navigation column.

Really, this is horrible. Please give us the choice of using desktop view on our mobile devices -- and please do so in a way that those of us not familiar with CSS coding can make use of it!

[katieastrophe]

At not-5am this may be very obvious, but for the next six weeks most of my internet access time will be at 5am so I'm just gonna go ahead and ask. For those of us who DO want the magic mobile collapse thing, and currently have a custom style sheet in use, where might we find guidance on what to add to the CSS to make it work?

(I realise different layouts may have different CSS arguments - just guidance on where to find the argument I need will (hopefully) be useful enough!)

[fu]

Hmmm. I think your best bet would be to check out places like style_system!