Making DW more mobile-friendly
Dec. 28th, 2018 05:51 pmI've been trying out the Coexistence Alpha CSS patchset by
solarbird, and I am pleasantly surprised by how much better it made things look on my phone. The style I was using before looked similar to Coexistence Alpha on my laptop, but on mobile it was a mess. Coexistence Alpha is intended to get rid of horizontal scrolling (e.g., because of larger images or deep comment threads) and weird zoom issues on mobile. Compare a post on my journal with the site default skin on this dw_news post.
But 7iris, you might be saying, screw the people looking at my journal, I want to have a more mobile-friendly experience while looking at other people's journals. Or, if you're logged in, the posts you linked look exactly the same to me.
Fun fact: Logged-in users can override the style of any journal or entries they're looking at.
This means that if you apply Coexistence Alpha to your journal, DW can show you everyone's entries in that style. (And if my post and the
dw_news post look the same to you, you may have already turned on the option to see everything in either your style or one of the default site styles -- try looking at those posts when you're logged out.)
If you don't like the look of Coexistence Alpha, or you don't have a DW account (or don't want to log in on mobile), you can try the "light style". If the journal owner hasn't disabled the navbar at the top of the journal there should be a link that says Reload page in style: light Click that and it will give you a stripped down, more mobile-friendly version of the page, and if you click through to any entries or comments from that page, it will keep the light styling on. If you don't see the navbar, you can also add ?style=light to any journal or entry address to get the same effect, e.g., https://7iris.dreamwidth.org/26379.html?style=light. You can also choose to have DW show you all entries in a light style if you are logged in.
Light is a decent choice for mobile, but I do like Coexistence Alpha better overall. style=light won't rescale images, so you can still get horizontal scrolling annoyances if a post has a larger image, or if it has deep comment threads. Compare:
- A text-only post on my journal in Coexistence Alpha vs. ?style=light
- A post on my journal with a (SFW) image in Coexistence Alpha vs. ?style=light
- That
dw_news post (text only but deep comment threads) in ?style=light
If you haven't been thrilled with the mobile experience on Dreamwidth, and you spend a lot of time on mobile (or want your journal to be more mobile-friendly to others), I would urge you to try Coexistence Alpha out. It's not perfect, and there are still accessibility issues that this style does not resolve, but for me, it's better than the default options DW provides.
solarbird has provided very basic instructions on how to apply that style, but I'll put some more detailed instructions behind the cut, as well as a couple of notes on what you can tweak, and how to apply your preferred style (Coexistence Alpha or otherwise) to other people's journals or entries.
I'm not going to do screenshots, because mine may look totally different from yours, depending on what site skin you're using. If you're having trouble finding something, drop me a comment with what skin you're using (or what it looks like: red, purple, black, olive green, bare bones) and I'll cap it for you.
It's unclear to me whether you can apply this style while you're on a mobile device; some people in
solarbird's comments have had problems and had to do it on a desktop/laptop, other people did it successfully on mobile. It will definitely be easier on a desktop/laptop, so if you can, do it that way. Otherwise, good luck, I guess?
Step 1: Make sure you're logged into dreamwidth and go to dreamwidth.org. If you've already fiddled extensively with the CSS and style settings for your journal, (1) you probably don't need these instructions and (2) you may want to copy that extra CSS into a backup document and make some notes about the settings. I don't think there's a way to revert back to your old, custom style if you try this style out and decide you don't like it -- you'll have to restyle everything from scratch.
Step 2: Go to Organize >> Select Style. In the search box, search for "Neutral Good". Click the "Apply Theme" button on the "Neutral Good by
timeasmymeasure for Practicality" search result. (You don't want the version for Drifting.) If you see "Customize" instead of "Apply Theme", you already have the right style applied, so you can go on to Step 3. I've heard Coexistence Alpha will also work on Neutral Evil for Practicality, if you prefer a light-on-dark appearance, but haven't tested that myself.
Step 3: Click the "Customize" link on the "Neutral Good by
timeasmymeasure for Practicality" search result. Or find it under Organize >> Customize Style. Under the "Customize Your Theme" section, click on "Custom CSS". Leave the "Use layout's stylesheet(s)" ticky box checked.
Step 4: In another tab/window, go to the Coexistence Alpha post. Decide if you want the current beta version, or the bleeding edge alpha version. I'm using the beta version (v0.842 BETA 1); beta is a tiny bit more stable/tested, so if you don't have a strong preference, go with that. Click on the link to the version you want; the links go to .txt files with the custom CSS. Copy everything (ctrl-a, ctrl-c), then go back to your "Customize Your Theme" tab/window, and paste it in the text box next to "Use embedded CSS". Leave the "Custom stylesheet URL" box blank. Click the "Save Changes" button on the bottom.
Step 5: Decide where else you want to use this style. Go to Account Settings, then click the Display tab. There are a lot of options here, but what we care about are:
- Entry Page Default: Your Journal: make sure the ticky box is checked. This way you get the Coexistence Alpha style when you're looking at your own entries, and so will people who aren't logged in (or who have chosen to see entry pages in their original style).
- Icons Style: same thing, but for your icons page (did you know you can see a page with all of a user's icons?)
- Entry Pages: Shown to You: From the drop down menu, choose "My own style". Now when you click through to an entry page on someone else's journal (from a cut tag, from a post header, from someone else's link), you will see the entry page in your style (now more mobile-friendly), instead of in their style (which may or may not be a hot mess on mobile).
- Icon Pages: Shown to You: Pick "My own style" from the drop down menu to see other people's icon pages in your style. I leave this one as "Original style", because I don't look at those pages that often and I like to let people have their artistic freedom here.
- Journal Pages: Shown to You: Journal pages are what you see when you go directly to someone's journal: 7iris.dreamwidth.org (as opposed to individual entries). I leave this one as "Original style", too, just to see what a person's ~vision~ is, but you can also choose "My own style" to apply Coexistence Alpha to those pages as well.
- Navigation Strip: I don't find the Navigation Strip that helpful, so I uncheck the "journals in your Circle" and "journals not in your Circle" boxes so I don't see them; I do leave it checked for "your journal (and to nonusers viewing your journal)", because it makes it easier for people on mobile to load the light version or their own style if Coexistence Alpha doesn't work for them. But this is up to you.
- Comment Pages: Make sure "View comment pages in your own journal style" is checked.
After you've made your selections, click on "Save" at the bottom of the page.
That's it, you're done! Check out your new style by going to your Reading Page or your recent entries.
Step 6: Customization: However, if you want to, you can also make a few tweaks to the appearance of Coexistence Alpha, like the colors and the font.
solarbird_testbed shows the current alpha version of Coexistence Alpha, and you can see it looks a little different than my version does;
solarbird's main journal has significant color changes with the beta version, so you can get pretty creative if you don't like the black and white.
- Colors: Go back to Organize >> Customize Style. Under the "Customize Your Theme" section, click on Colors. You can enter the hexadecimal code directly if you know it, or you can click on the color you want to change and pick a new one from the palette pop-up. For example, I made my links and my entry title color pink to match my default icon, but didn't change the text color or the background color. Click "Save Changes" on the bottom of the screen and open your Recent Entries or Reading Page to see how it looks (or reload it if it's already open).
- Fonts: The default font for this style is "Trebuchet MS" (you can see that on the
solarbird_testbed page if you have that font installed on your computer or mobile device; otherwise, it defaults to Arial and then your browser's generic sans-serif font, so you may not see a difference between that page and my journal). If you don't like Trebuchet MS, you can change it by clicking on Fonts (under Organize >> Customize style). You can see 'Trebuchet MS' is listed as the first font under Preferred Journal Font, followed by Arial. You can delete 'Trebuchet MS' and either just leave Arial, or replace it with your preferred font (e.g., Verdana, Tahoma, Roboto, 'Noto Sans', 'Source Sans Pro', etc). Make sure your first choice is first, second choice second, and so on. I use 'Noto Sans', but I did not embed the font, so you'll only see that font if you have it installed on your computer, otherwise you'll see whichever is first available of Roboto, Arial, or your browser's default sans-serif font. (You can embed fonts if you want; scroll down to the bottom of the Font section.) I didn't change the default font on the module headings, journal title, entry titles, or comment titles, but you could give it a try if you wanted. Click "Save Changes" on the bottom of the screen and open your Recent Entries or Reading Page to see how it looks (or reload it if it's already open). - Text: My journal says "Older Entries" and "Newer Entries" instead of "Previous 20" and "Next 20". You can change the default text for things like that by clicking on Text (under Organize >> Customize Style). The longer and more complicated you make things like that, the worse it will look on mobile, and I don't know for sure that changing things under the Entry section will be respected by Coexistence Alpha (you can try it and find out!). Click "Save Changes" on the bottom of the screen and open your Recent Entries or Reading Page to see how it looks (or reload it if it's already open).
If you like style=light better than Coexistence Alpha, but want the same effect of overriding other user's styling on journal and entry pages, you can do that. Go to Step 5 above, and follow the instructions there, but instead of selecting "My own style" or "Original style", select "Light format" from the drop down menus.
Hope this was helpful, feel free to ask questions! I know just enough CSS to get myself into trouble and I've only tested this on Windows and Android, so I'm not guaranteeing any answers, but I'll do what I can.

no subject
Date: 2018-12-29 12:54 am (UTC)no subject
Date: 2018-12-29 03:56 am (UTC)no subject
Date: 2019-01-23 02:55 pm (UTC)no subject
Date: 2019-01-24 02:58 am (UTC)