fu: Close-up of Fu, bringing a scoop of water to her mouth (Default)
fu ([personal profile] fu) wrote in [site community profile] dw_styles2014-07-11 07:35 pm

Ongoing styles work: more mobile-friendly styles

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.

baggyeyes: Photo.1946 Ann. 4x5 Speed Graphic (1946 Anniversary 4x5 Speed Graphic)

[personal profile] baggyeyes 2014-07-11 06:22 pm (UTC)(link)
All I ask is please do not disable zooming. Some sites do this, and it makes for difficult to read content.

Thank you. :)
baggyeyes: Photo.1946 Ann. 4x5 Speed Graphic (1946 Anniversary 4x5 Speed Graphic)

[personal profile] baggyeyes 2014-07-13 01:05 am (UTC)(link)
Ah! I didn't think you would, but wanted to make sure. :)
musyc: Silver flute resting diagonally across sheet music (Default)

[personal profile] musyc 2014-07-11 10:57 pm (UTC)(link)
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)
musyc: Silver flute resting diagonally across sheet music (Default)

[personal profile] musyc 2014-07-12 01:51 am (UTC)(link)
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.)
musyc: Silver flute resting diagonally across sheet music (Default)

[personal profile] musyc 2014-07-12 04:50 pm (UTC)(link)
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.
musyc: Silver flute resting diagonally across sheet music (Default)

[personal profile] musyc 2014-07-13 02:34 am (UTC)(link)
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: A guy looking ridiculous by doing a fashionable posing with a mouse, slinging the cord over his shoulders. (geek)

[personal profile] foxfirefey 2014-07-13 02:36 am (UTC)(link)
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: (Default)

[personal profile] mooshlovely 2014-07-14 01:47 pm (UTC)(link)
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: (Marina Ismail)

[personal profile] kaminagi 2014-07-14 09:17 pm (UTC)(link)
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.
Edited 2014-07-14 21:17 (UTC)
velveteenwolf: (When You Need Me Too Much)

[personal profile] velveteenwolf 2014-07-15 11:18 pm (UTC)(link)
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: two massive wooden cogs (gears_wood)

[personal profile] pocketmouse 2014-07-16 09:46 pm (UTC)(link)
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: (Default)

[personal profile] filialucis 2014-07-22 09:47 am (UTC)(link)
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!
tajasel: Katie, with a purple wig on. (Default)

[personal profile] tajasel 2014-08-11 04:17 am (UTC)(link)
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!)