Make layout responsive (again, again?)

[ebruchez]

I see #19, but the layout is clearly not responsive now. The main Scala web site must be readable on a smartphone.

[heathermiller]

This complaint could be a bit more helpful. Currently you tell us what we must be doing, which is of course not very constructive. What browser are you using? What do you want to see?

At the time that I designed the Scala website, there were no responsive-first CSS frameworks and many aspects of the current layout wouldn't fit into any currently popular responsive CSS framework. The Scala website was a (large) contribution that I made on the side as a student. Given that we have no dedicated web/design person any large overhauls to the design/layout of the website is quite out of scope.

Although we would be happy to receive such a contribution!

[SethTisue]

@ebruchez I don't know very much about CSS or about responsive design, but... can you (or anyone else who happens to see this ticket) identify any modest changes we could make that would improve the situation?

[ebruchez]

Sorry @heathermiller not a criticism of your work, I thought this was an obvious one. Take Chrome dev tools and set it e.g. for an iPhone 6 Plus. You see this:

What I expect on a mobile phone is (at least for the news part but ideally for the whole site):

• single-column layout
• larger, readable font
• maybe: collapsible top menu (that seems to be the trend)

@SethTisue I can't look at this immediately so can't tell if it's easy or hard to just hack in a couple of CSS fixes to improve the experience.

[heathermiller]

It would require pretty significantly changing the layouts of all pages. One would have to rebase all pages on newer "responsive-first" CSS frameworks. Many aspects of the front and inner pages would have to change because they can't be easily translated to a 12-col "responsive" grid format. So the way we do the sidebars on inner pages, and the way we display blog entries etc on the front page would all have to change.

As this requires non-trivial changes to the layout across the entire website, and since we have no one who can invest time in this, I have to mark this as out-of-scope.

So this will have to fall into the realm of "big contributions" if we would like to see it done.

[ebruchez]

I think that a full modern layout would be best, and I agree that would be a relatively big contribution. It might be possible to graft something purely in CSS, as @SethTisue suggests. Hard to know for sure without trying. I suggest keeping this open as ultimately it will have to be addressed.

[soc]

@ebruchez I have been working on this recently. The upgrades to the CSS framework certainly helped a bit, and in addition one gets quite far with CSS's media queries. It's not published yet, but the e.g. the frontpage looks a bit more usable:

Compare

with

[ebruchez]

@soc Great! I realize that I check more and more stuff on mobile even though I spend most of my day in front of a 30" monitor and I suspect it might be the case of more and more people.

The other day I noticed that the home page is unusable on a phone: you can't even scroll to see the content that overflows.

[SethTisue]

I have been working on this recently

perhaps someone could look at the changes @soc made over at get-scala.org and see if any of it could be backported to this repo

[jarrodu]

@SethTisue It looks like @soc took his site down and removed its history. It maybe possible to salvage some of the changes from forks that other people made of the site before it was destroyed.

[dwijnand]

master...f8d0e37

[SethTisue]

interesting. but, locally:

% git show f8d0e37815747e93cd53e2a9eec69e8cdd6d6067
fatal: bad object f8d0e37815747e93cd53e2a9eec69e8cdd6d6067

not sure how I would get that commit onto my machine. (and, might GitHub garbage collect it from their servers? where did you get that SHA?)

[jarrodu]

I found a repo that is not to old. Maybe that helps. There may also be a more recent fork out there.

https://github.com/nightscape/scala-lang.git