Make width a percentage instead of hard coded

[eah13]

This is obviously very subjective but relative width pages are more idiomatic. And I think they're easier to read YMMV :)

Before:

After:

[bcmoseley]

I agree. What do you think Kris and Bryn?

[brynhughes]

I like this, too. 

Bryn

On Sat, Aug 23, 2014 at 4:34 PM, Elliott Hauser [email protected]
wrote:

This is obviously very subjective but relative width pages are more idiomatic. And I think they're easier to read YMMV :)
###Before:

###After:

You can merge this Pull Request by running:
git pull https://github.com/eah13/openmusictheory width
Or you can view, comment on it, or merge it online at:
#56
-- Commit Summary --

• make width percentage
  -- File Changes --
  M _sass/_styles.scss (4)
  -- Patch Links --
  https://github.com/hybrid-pedagogy/openmusictheory/pull/56.patch
  https://github.com/hybrid-pedagogy/openmusictheory/pull/56.diff

  Reply to this email directly or view it on GitHub:
  Make width a percentage instead of hard coded #56

[kshaffer]

I prefer having a maximum width that adjust responsively for smaller windows (what this theme currently uses). Beyond a certain width, tracking lines becomes harder, and it is easier to lose your place reading. I think most cognitive typographers (I just made up that term, but there are such people) recommend 60–80 characters max for something meant for long-form reading. (This is already more than that.) And I know a lot of windows users with wide screens that open everything up in full screen. So I'd prefer keeping as is, if that's okay.

[eah13]

@kshaffer that goal makes sense. It seems like the using em units may be what we need here:

http://www.w3.org/WAI/GL/css2em.htm

In this way you can set the height of the text and the width of the page to ratios of each other as opposed to pixels, enabling the responsiveness you're looking for. Happy to hack in this direction if it's a change you'd accept - the percentage I submitted above was just a 1 minute stab at responsive :).

~680 pixels wide is going to be very very small on an increasing number of devices with very large horizontal widths (some phones are up to 2000+ pixels wide now). With em we don't need to know or care about pixels at all, just ratios. Yay!

[kshaffer]

I think the responsive design already takes mobile into account. My phone displays it just fine, regardless of pixels. Also, since we're planning en the development site) as we wait for Boundless, I don't think we have to worry too much. As long as it works for our students (and Boundless doesn't take too long to get fully functional—I'll meet with them tomorrow to get an update), I don't think we need to get too precise with theme tweaking. If things change with Boundless, we should definitely explore theme universality (especially as regards accessibility) in more detail.

Kris

Kris Shaffer, Ph.D.
Instructor of Music Theory
University of Colorado–Boulder
kris.shaffermusic.com
Twitter: @krisshaffer

On Mon, Aug 25, 2014 at 12:31 PM, Elliott Hauser [email protected]
wrote:

@kshaffer that goal makes sense. It seems like the using em units may be what we need here:
http://www.w3.org/WAI/GL/css2em.htm
In this way you can set the height of the text and the width of the page to ratios of each other as opposed to pixels, enabling the responsiveness you're looking for. Happy to hack in this direction if it's a change you'd accept - the percentage I submitted above was just a 1 minute stab at responsive :).

~680 pixels wide is going to be very very small on an increasing number of devices with very large horizontal widths (some phones are up to 2000+ pixels wide now). With em we don't need to know or care about pixels at all, just ratios. Yay!

Reply to this email directly or view it on GitHub:
#56 (comment)