LDS.org Responsive Design Oddities

[lfalin]

I'm a big fan of responsive design, and I think the recent changes to lds.org are a big move in the right direction. I like the clean look and font choices.

One thing I don't like is how narrow the text becomes on any screen bigger than a tablet. Note how narrow the text is here when my browser is at full width on a standard laptop:

Screen Shot 2015-04-10 at 8.30.23 PM.png

lds.org in Chrome on Mac OS X 15 inch screen

(146.38 KiB) Not downloaded yet

Here is the width of the text when I reduce the browser window down to half the screen width:

Screen Shot 2015-04-10 at 8.30.53 PM.png

lds.org on Chrome on Mac OS X at half screen width

(126.8 KiB) Not downloaded yet

Oddly, considerably more text is visible at half the resolution that at full resolution. When I read articles using my laptop, I feel like I'm stuck with the large print edition.

Also, the right sidebar behaves oddly in the responsive design, rather than collapsing, or doing something else typically seen as "responsive", it gets wrapped down underneath the content:

Screen Shot 2015-04-10 at 8.31.46 PM.png

Right Sidebar

(83.58 KiB) Not downloaded yet

Perhaps these are design choices that people have chosen purposefully or perhaps they are unintended. But I wanted to point the behavior out, because it seems a bit odd to me personally.

I believe the research consensus is that 12 words per line is the ideal width for text (see http://webstyleguide.com/wsg3/7-page-de ... ength.html). On screens larger than tablet-size, lds.org articles appear to average 8 - 10 words per line.

[jdlessley]

We can discuss it in the forum but there is no certainty those with decision making authority will see your post. We recommend using the Feedback link found on the main LDS.org page.

[mevans]

I haven't compared lds.org on various devices, but I really don't like how narrow the text has become with the redesign. I posted about this here. I compared old and new and I believe the old also had a max width, but I didn't notice it as much because the font size was smaller so it fit more words.

I have a 27 inch monitor. I'd like to take advantage of it. I have a windowing operating system. I wish I could control how wide the text is by changing the window size, not by some CSS rules that limit what I can see.

I fact, I recently experienced a problem because of this restriction. I was studying online last week and tried to highlight a large passage. Because the text was so narrow, even with my huge monitor, I had to scroll the text while dragging to highlight because it wouldn't all fit on the screen. That causes its own problems because them sometimes I overshoot and the highlight mechanism sometimes gets messed up. It took me about 3 attempts to get the desired text highlighted. If I could have made my window wider to get it all on the screen, it would have been real easy.

I've submitted Feedback about this. I hope you do, too. I even started investigating once how to tweak the CSS, but a quick change didn't yield the results I wanted and I didn't have time to mess with it further.

[lfalin]

I also posted official feedback about this, hopefully this will be fixed eventually. In the meantime I made a custom stylesheet to fix some of the things that bothered me the most.

You can access the stylesheet on userstyles.org here: https://userstyles.org/styles/113144/ld ... yle-tweaks

The stylesheet makes the following changes:
- Puts the righthand sidebar back on the side instead of wrapping it to the bottom.
- Drastically shrinks the huge side margins
- Dims the background color slightly from the super-bright white to a more subtle off-white. (All that pure white hurts my eyes during extended reading)

If you're using Chrome, I recommend the Stylish extension, which will allow you to automatically install a custom style sheet from userstyles.org based on the URL. I'm sure there's something similar for Firefox as well.

Feedback and suggestions are welcome.
Lee

[mevans]

Thanks. I just installed it for my morning studies. I'm already excited that I can use some of my monitor's width!!

[mevans]

Here are some observations on the new stylesheet:

• I'm really happy I can get more text width on my screen when I study! Hooray!
• I'm uncertain about the righthand sidebar. To me it just looks like there's extra space on the right side with no purpose. Am I missing something?
• It doesn't play well with certain pages:
  • Notes: this page doesn't work at all.
  • Newsletter: there are display issues
  • Calendar: it works, but the calendar doesn't have wide margins so it effectively adds space to the right of the calendar.

I know I can enable/disable the CSS with Stylist, so no big deal for me; I can work around any issues. I'm just providing some feedback so that others are aware and so that you can experiment with any improvements if you elect to do so. I'm just happy it makes my use of lds.org better and I didn't have to go to much effort to get the benefit. A big thank you for sharing your work.