New Design Issues

[daviddeutsch]

I thought I'd open a ticket where we collect leftovers from the discussion around PR #162.

• the contrast ratio in the "on white" code example is too low - it's 2.1, currently and should be at least 4.5 (suggested by @Cynede on twitter)
• there may be further accessibility concerns as mentioned in the discussion on the mailing list
• the video section could be improved, perhaps by converting it into a "highlight one video" carousel (suggested by Francesco Ariis on the mailing list
• there is a standing PR (This site is, like, so 2015. #159) to reconsider having a date range in the footer - I, kind of on auto pilot, simply went with what is usually done and increased the range. Perhaps this needs further thought
• combining/minifying all Javascript assets, possibly pulling them from bower as well
• fallback colors for the two "with background image" sections

[daviddeutsch]

I would also like to have a discussion on the templating engine used. Even aside from the fact that I'm a recent beginner in Haskell, it's extremely hard for "frontend minded" people like myself to iterate in lucid. Something like a mustache derivative (there seem to be… quite a few) or Heist would cut development time by an order of magnitude for me (really, no kidding).

If somebody could make that a PR, that would be an enormous help.

[anfelor]

Only as a user of haskell.org, not a developer:
Generally I like the new look, but I would like to point out, that the Haskell logo now looks a bit misplaced.

I think, that is due to two changes:

1. The new font is bolder and bigger than the old one and the strokes thicker; even thicker than those of the logo itself. That makes the logo look small, maybe even peaky
2. With the old background gone, the nice transition went too: Notice how the logo seems to blend in the background. Although this is not necessarily a good thing, it supported the logo visually.

I would suggest adapting the logo to the new design. What do you think?

[daviddeutsch]

@anfelor - thank you for the kind words!

One of the ideas I had for the very top section was to have the logo occupy an entire row, yet only about 1/3 of the width (it's currently 1/2) and move the "Declarative, statically typed code" in a new line below. I think it was planned to have more examples anyhow, so giving that section more space seems like a good idea - after all, it's about showing off the core value of Haskell - beautiful code. That should be something special.

As for your overall assessment of the logo - Yes, the new font is bolder than the lines of the logo symbol itself, but I don't think it takes away from it. I would actually fear the opposite to happen with a narrower font - that it looks kind of tacked-on. I'll give it a try and maybe post results here.

Your second point seems to be counter-intuitive for me - wouldn't fading into the background be the same issue as the one you raised in your first point? In general, visual elements 'needing support' is a huge pet peeve of mine, so I'm a little touchy on the subject - in my opinion, particularly things like logos should absolutely stand on their own.

---

Finally, note that the logo was already being discussed in the PR.

I think it's a problem that there is no canonical "symbol plus text" and that just naturally rears its head in any situation like this one. Obviously I'd be happy to work on this some more and design that canonical logo, but I would first need to know whether that is actually even on the table at all. Not sure who even has the authority to decide this.

[anfelor]

@daviddeutsch: I think it is good, that you chose to use a bolder font. I just wanted to mention, that the logo is still as before, while the things around it changed.

You surely know about optical illusions and that a color looks different on black than on white. That is part of what I meant with supporting visually: The background color is an integral part of the logo, because on black light elements are in front, while on white dark elements are in the front.

For example the > before the lambda sign in the first version is blending into the background and therefore less important than the lambda sign, but in the second version on white the > suddenly is highlighted as it is darker than the rest of the logo.

(Also the colors of the logo were sorted from dark purple to the white "Haskell" text, which is not the case anymore as the "Haskell" text is dark grey now.)

Coming to think about it, you might be right about the logo being thick enough, but then again it has the same high as the text (sorry, if I am not able to explain it too well, the logo simple looks small somehow).

Unfortunately my knowledge of graphic design isn't that good, so I am sorry if that all sounds a bit obfuscating.

[gbaz]

I agree on moving to more genuine template engine.

Something I've been thinking about are pages like https://www.haskell.org/documentation

They look sorta.. bleh and like a pile of likes (but well, they are a pile of links). I'm not sure what to do here (note that this is not a new issue since the redesign, it just occurs to me that it would be nice to take the opportunity to do something here). Maybe a 2-col layout?

[daviddeutsch]

@anfelor Perhaps when I have put up a few alternative designs with varying thickness, we will be able to assess where to go with this. I hope I didn't come across as overly dismissive before - I do think it is something we must explore in depth before making a decision, so hearing a different viewpoint helps me a lot in finding angles that I didn't consider before.

@gbaz I'm glad to hear switching to a different template engine is on the table.

As for your comment on the documentation page - I very much agree. I don't think a 2-col layout would improve much, though… actually, I think that would make things worse. Put bluntly: it being a link dump isn't helped by making the link dump two columns 😉

I think what the documentation page needs is two things - first, editing, including adding language beyond the pure headers to introduce each section ("here is the books section, they can be helpful if you are looking for a broad introduction, here are tutorials on specific themes that will make it easier to approach a particular subject..."). This will also make it clear that some sections are in competition with eachother (books and admittedly long tutorials being one example) and really do need explanation.

Second, pretty much no link tells me anything about itself before I click it! A short description - and/or even better, a screenshot of what will await me so I can scan over the options without having to click each link, would go a long, long way to not only make the page more interesting to look at, but also be actually helpful instead of just being a straight list.

I feel that is often a problem with resources around Haskell - while I appreciate that a big part of its philosophy is to not hide complexity from its users and particularly beginner learners, that is often twisted into making accessibility downright brutal. Just throwing a long list of resources at somebodies feet is not… technically unhelpful. There is just a lot the page could do taking an interested user by the hand and help walking the first one or two steps. It's usually not depriving a user of too much insight and discovery walking with them for a few steps.

[gbaz]

Good points on the doc page. @OldManMike made comments along the same lines. I'm ok to generate and edit some text, though additional suggestions would be great to get things started. I find that generating text works better though if there's some idea of the space its expected to fill and role to play. So here's a proposal -- if you or someone else comes up with a suggested layout for what sorts of text will go where so that it looks nice and clear, I will try to help figure out what actual text to go there :-)

[gbaz]

Btw, @daviddeutsch , it would be nice to get some uniformity among other pages that borrow style ideas from haskell.org, for example the hackage matrix builder (https://github.com/hvr/hackage-matrix-builder). @hvr and others who work on it aren't really frontend people and he told me that the generated haskell.org styles confused him and he didn't know how to strip out the "slim" information to just get the header right. If you could make a small PR to just tweak their existing styles to bring them inline with what you've done here for the header, that would be helpful (and serve as some boilerplate that could be copied to similar projects as well).

[daviddeutsch]

Sorry about the delay everybody.

@anfelor I've put together three variations of the logo:

Haven't made my mind up fully yet, but… I think both the slim and medium version (actually Bold and Ultra-Bold) lack character compared to Heavy - they look like regular text next to a ideogram. The heavy one has that character, it looks like a choice. I'm very tempted, though, to prefer middle one - it looks like it makes more sense. But in the context of the site, going back and forth, looking at it again after a while, I find it just looks too bland. Like yet another headline on the site and not a logo.

Anyhow, my two cents - let me hear your thoughts.

@gbaz I have been toying with a few ideas for page layouts but didn't have enough time to go into detail yet.

As for the other pages - I think they could actually take the rendered CSS from here and simply adopt the markup. I only skimmed the contents but I don't think there is styling beyond the current scope that is missing. I'm convinced using standard markup like on haskell.org or bootstrap (as in "the css framework") components in general instead of custom-built constructs will be the thing that actually enables a common look-and-feel.

In general, I have a feeling like the elephant in the room is figuring out a more global vector for all this (I think you also mentioned the ghc page on a different occasion). Perhaps it would be a good idea to link up somewhere (chat or voice/video) where we can go into detail and make sure we're on the same page, because I continue to have the hunch that I simply don't have a good enough overview on all of this (I barely understand the general decision-making process). I'd hate to steer this into a direction where it just fizzles out into something arbitrary because I'm lacking an understanding of the bigger picture.

Finally, I think I had an idea on how to smoothly switch to a different templating engine. As I mentioned earlier, that's really the one thing that keeps me from being productive and you signalled it's on the table. So actually, it could be rather simple - With a "give me html and I'll fill in the dynamic content" engine (like handlebars where you just define the values for a static html template with minimal business logic), I'd just have to copy (and clean up) the output of the current engine, reuse that and that's pretty much it. I just might need a little hand-holding and some scrutiny in the code review. If you'd be up for that (or know somebody who could help out), I would very strongly suggest to go that path.

[daviddeutsch]

Still waiting for a reply here. @gbaz ? Anybody?

[jwiegley]

This is purely personal, but I like the middle one; however, the heaviest one is good too.

[gbaz]

Sorry, not sure what exactly you want feedback from me on :-) I'm down with switching template engines as I already mentioned. On logo stuff -- medium or heavy both look good,

For big stuff (mainly regarding specifics of wording and content) we should make sure we have some broader discussions -- for smaller stuff (and certainly just technical stuff like how to do templating) I think most people are just happy with whatever the people taking it in hand are keen on doing.

Are there other concrete things that you'd like to float and you want me to respond to that I'm missing here?

[hvr]

I'm torn between the middle and heavy one as well; is there a size inbetween possible?