Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

New website theme #162

Merged
merged 4 commits into from
Jun 2, 2016
Merged

New website theme #162

merged 4 commits into from
Jun 2, 2016

Conversation

daviddeutsch
Copy link

@daviddeutsch daviddeutsch commented May 10, 2016

I read on the mailing list that you're looking to replace the current theme and I thought I could help out by reimplementing most of what is currently there in a clean bootstrap template.

Home Page (V2, V1):

Home

Community Page (V2, V1):

Community

Here is a list of changes in this PR:

Using a custom CSS Pipeline with a custom Bootstrap

If you're interested, I could also include the asset pipeline (which you can find in the repo over here) with the scss files that are easier to edit and keep track off than the original, monolithic custom css file.

I'm using a PostCSS Pipeline, implemented in Gulp, that makes use of Autoprefixer to ensure browser compatibility. The CSS can easily be minified, I just currently haven't done that for development purposes.

(Also not that I make Autoprefixer currenty target a pretty wide range of browsers, but I could use your specification to make a better selection that matches the audience.)

The single, canonical CSS file weighs less than the original full inclusion of bootstrap (which I've only included parts from) and uses a single request instead of four.

Customized, light theme

I opted for a lighter theme with some splashes of color and a bold font for the logo and header (Raleway).

Switching from col-md-* to col-sm-*

Which is the modern default to use. Tablet Portrait is a good lowest common denominator and anything else should have local overwrites. It also really improves the layout of the homepage in my opinion

Removing Bootstrap Glyphicons

The font it was only used in one occasion where it should be replaced by an inline svg (see below), but that page (donation page) is not used, making loading the icon font unnecessary.

Consolidating Font loading into a single call

This helps with page speed as it only caches a single call, locally. Plus I put the font for the logo in the brand area, so we need all fonts anyhow.


Things that I would propose to consider as additional fixes, perhaps later on:

Removing Haskell Icon-Font

Replacing it with inline SVG (see: https://github.com/blog/2112-delivering-octicons-with-svg for a good summary of why this is becoming the current best practice) - could do the same for the "Home" page logo

Spend more time fixing site on very small devices

I only invested a minimum amount of time, so it looks ok-ish now, but some things are still a little hard to navigate.


Let me know if you have any questions and/or suggestions!

· unified CSS file from daviddeutsch/hl-assets
· new unified CSS introduces new, lighter theme
· fixing h* cascade on most pages
· switching from col-md to modern default col-sm (except for where -md makes sense)
· switching to Raleway+SourceSansPro
· always including all fonts
· porting back a few standard bootstrap features
@gbaz
Copy link

gbaz commented May 11, 2016

Ok I have it up and running locally. A few thoughts.

I know its silly to have the haskell logo on the lh top on the frontpage, but it feels like its missing something without it.

The big Haskell logo and text are kerned a bit close -- maybe opening up the space there and reducing the font for "Haskell" a smidge would be nice.

The "open source community effort" thing with the blurry photo seems even more out of place than before -- perhaps we could drop the photo altogether and just keep the text (maybe white on some sort of colored background)? I also feel we don't need the "learn more" link there.

We really should pick more definite videos, but that's for another time..

On "features" the old behavior was quite nice -- note that you could mouseover anywhere and get a grey background + click anywhere to expand. Then clicking anywhere in the expanded section would collapse. Something like that would be nice again maybe? (I'm not a fan of how it now removes the "click to expand" text on expansion btw, as it makes things jump a bit...)

In the sponsors section we could reduce the font size maybe 2p across the board...

Also not sure about the navbar at the bottom as well as the top? Especially as its just on the homepage and not just every page.

Thanks again for working on this!

@daviddeutsch
Copy link
Author

Thanks for the feedback, @gbaz! I agree on most of your points - let me go through them one by one:

1. No double logo on the homepage

This one I would strongly argue for keeping this since it's one of the few things I truly changed about the layout. I think the homepage needs to be as clean and straightforward as possible and subtle things like that make a real difference. I'd say it probably just takes a little time to get used to the change.

2. Kerning on the Logo

Ah the logo… Let's say it would have been easier if there was a canonical logo with the font added to it. I can do kerning in the browser, but it'd be much easier to simply have it all in one vector file and include that. I'll probably do that anyhow (just convert it to svg in its entirety), once I have figured out how to convince Lucid to use my files. It's surprisingly… stubborn.

Not sure whether this is the right place to ask, but - Is doing a full, canonical logo on the table, by the way?

3. OS Community Effort

Yeah, I agree - it's kind of awkward. I wouldn't want to lose having a full-width picture there, however, it's a nice separator. Perhaps we can get rid of the community banner and instead beef up the "try it" section to use the same background as the sponsors section below?

4. Features

That's a small adjustment that I can add, yes. I also agree that losing the "click to expand" does more harm than good, which is why I left out that behavior. Perhaps I can slightly fade the text, though.

5. Sponsors

I didn't want to touch that section much since "sponsor" sections usually have carefully agreed upon terms ("I want my name to look like this and the font needs to be readable like this"). But it seems that this is no concern here, so I'll try making it a bit smaller.

6. Double Navigation

This is somewhat confusing in the current layout - on the homepage, the top navbar is hidden on mobile devices but the bottom one is not, on the sub-pages it's the other way around. That makes things inconsistent (headers quickly get annoying at even the slightest inconsistencies), so I already converted it to a standard navbar that condenses down to a "hamburger menu" button - and does so consistently across all pages.

So yeah, we can definitely get rid of the bottom menu in my opinion.

@gbaz
Copy link

gbaz commented May 11, 2016

2 -- "Is doing a full, canonical logo on the table" -- not sure what you mean here?

Btw to be clear I'm mainly talking about the homepage logo, not the one on all the pages -- it just runs awful close to the text to the right.

3 -- if I understand it, that makes sense. Its a way to have less plain white on the page, while omitting the lost space to a blurry picture :-)

5 -- we don't have any particular size agreement with the sponsors, so this should definitely be under our control.

1,4,6 all sound good to me.

@daviddeutsch
Copy link
Author

@gbaz

  1. Currently, haskell has no logo with a font, just the stylized lambda symbol. I was talking about whether it might make sense to fix that. I kinda like the symbol with the bold Raleway font next to it.

And yup, I understood you were only talking about the main logo, although I would try out how a small version of a "fully set in a vector image" logo looks in the top navigation.

  1. I don't think the picture was a bad idea per se, it just doesn't work at that point in the page. I think exchanging it with my proposed section will make a huge difference. I'll try it out later tonight and post a screenshot.
  2. Understood.

@daviddeutsch
Copy link
Author

Hey (@gbaz and others) - Just wanted to post a small update to let everybody know that I'll be working on those small adjustments this weekend (either today or the day after).

If anybody else has feedback that I could incorporate, that would be great to hear before the weekend so I can work on it in bulk. As I understand, time is pressing to a certain extent, so I'd like to finalize everything so that this PR move forward to be properly be considered for a merge as soon as possible.

@gbaz
Copy link

gbaz commented May 13, 2016

There's no urgent press, but if there's momentum now that's a good thing regardless!

@kosmikus
Copy link

Hi. Thank you very much!

I've only had a quick look at the screenshot. @gbaz, I think that @daviddeutsch is right and a double logo on the front page is not desirable. In the current theme, top menu items are all left-aligned, but in the new one, they seem to be on the right (whereas logo is on the left). So there's no visual break in moving from the front page to elsewhere in that the menu items would move.

I agree about the suboptimal kerning of the main logo. Yes, it would be nice to have a larger set of "standard" logo variations, also including text. But let's leave this for another time.

I also think that giving a colored background to the "Try it" section and dropping the photo is at least worth a try.

· improved styling on "click to expand" btns, making container clickable
· replacing Haskell font with svg logo
· removing "mobile" footer menu
· tweaking code example positioning
· removing "community" lead section
· rendering videos in (flexboxed) thumbnails, adding titles
@daviddeutsch
Copy link
Author

Did a few go-overs and fixed most of the points that @gbaz raised. I think the new "try it!" section came out pretty nicely and does a lot to shape the opening section.

I've replaced the screenshots in the original post.

And thanks for your feedback, @kosmikus - let me know what you think, especially about the experiment with the new "try it" section.

@gbaz
Copy link

gbaz commented May 15, 2016

Looks really nice. Spotted one issue when my browser is small enough to eat the gap between the two cols, but not so small as to force everything into one col:

screen shot 2016-05-14 at 8 18 16 pm

header url
br_ []
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Would it be better here to use margin here instead of a bunch of br tags?

@relrod
Copy link
Member

relrod commented May 15, 2016

One inline comment - not sure on the use of <br> tags, it feels a bit tacky to me, like it should be solved with CSS margins. In practice it might not be a huge deal.

Also for the code snippet at the top of the index page, thoughts on adding: border: 1px solid #ccc; around it? It already has a different background color, but the slight difference in background color feels slightly jarring to me without a border. Of course this is just silly bikeshedding.

Awesome work on this, thank you!

@daviddeutsch
Copy link
Author

daviddeutsch commented May 15, 2016

Thanks so much for the feedback!

@relrod I'm going to appeal to "authority" (well... of myself) by mentioning that I've been doing this for 9 years and... yeah, that's bike shedding 😁

<br>s instead of margins is a matter of taste to an extent. I prefer them because they are explicit (right in the markup), make layout decisions follow the vertical rhythm of the text and don't pollute the CSS with countless margin definitions. If you are interested, check out the asset repo (linked above) to see how little css (well, scss) I get away with.<br>s are a part of that and in my experience, that really helps maintainability. They also simplify responsive adjustments since you can do <br class="hidden-xs"> for margins that you don't want on mobile devices - the alternative are again countless @media definitions that are easy to lose track of and fizzle into chaos over time.

The code block is something I played with a lot. I preferred to solve it without a border to make it a little less prominent. With a border, that area seemed unbalanced. Another solution I tried was doing away with the background, too, but that seemed equally unbalanced.

@gbaz well spotted! As I wrote in my original post - I've not done a thorough responsive review so far. It looks even worse on smaller devices. Will fix this in the next polishing round.

@daviddeutsch
Copy link
Author

Actually, that brings up a question. The asset pipeline I put together in the other repo - wouldn't it make sense to include it right in here, the main repo?

· br toggles for smaller devices
· header logo - .img-responsive
· footer converted to use columns for layout
@daviddeutsch
Copy link
Author

Alright, made my polishing round. Results look like so:


Tablet landscape

Home

Tablet portrait

Home

Mobile landscape

Home

Mobile portrait

Home


@gbaz note how the logo now works and is scaled automatically.

Final Question remaining from my side is whether the gulp/postcss pipeline and asset source files should be included in the PR. Let me know!

Apart from that, I think this is now polished enough to be considered/voted/[whatever you do for an approval process] for a merge.

@gbaz
Copy link

gbaz commented May 16, 2016

seems to make sense to include them in the PR. I'll try to facilitate a discussion soon (I'm going to be rather busy the coming few days).

@daviddeutsch
Copy link
Author

@gbaz sure thing! Just let me know if I can help with the discussion in any way when you're back!

@gbaz
Copy link

gbaz commented May 27, 2016

@daviddeutsch
Copy link
Author

@gbaz Thanks! I've just subscribed to that mailing list, so I'll participate there and also sync over parts of the discussion into this PR for reference.

One reply was added before I joined the ML - about the video section. I agree that it's quite a bit imposing right now. Perhaps we could change it to a carousel that only has one or two video link(s) at a time?

@daviddeutsch
Copy link
Author

Since @gbaz has kindly offered to go ahead with the PR on the mailing list (unless a veto is thrown in), I've added a final commit that moves the asset source files into the repository.

I've also improved the contrast ratio on the pink links as proposed by Alexander Berntsen on the mailing list.

@relrod
Copy link
Member

relrod commented Jun 2, 2016

LGTM.

@relrod relrod merged commit be78baa into haskell-infra:master Jun 2, 2016
@daviddeutsch
Copy link
Author

@relrod Awesome to see this live - thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants