New website - #10

/CC @dscho

I'll check the remaining stuff soon-ish (TM) :)

@XhmikosR This is awesome! Thank you for picking this up! This is actually a perfect example for me to look through on how to polish or finish up a site design. I have heard of Grunt (read: looked at the website) but have never actually used it- it looks like you're using it to minify the CSS and JS, correct?

Also, having looked through style.css, are there any "do's" and "don'ts" that you have for CSS design- things I should do or avoid in the future? I noticed you changed many of the IDs to classes. It looks like f8ebcb1 , the "Clean up CSS." commit is mostly converting to HEX values and re-organizing rules to reduce duplicated style definitions.

Hi, @BaconRanch. Everyone has their own rules when it comes to styles :)

I prefer color names and then hex colors. Clean-css takes cares of it anyway, converting those to the shortest ones.
I use one selector per line, no units for zero and generally I follow most (not all ofc) rules of csslint. We still need to add fallback colors for the rgba ones for older browsers though. I plan to add a grunt-csslint task later to automate the checking, read later on.

The IDs vs classes is a huge issue over the years, but the short idea is that since an ID is unique it beats the point to use it like #foo bar. And nowadays I doubt there's any countable difference for IDs vs classes. Sure, in theory IDs might be faster because they are unique but lot of things have changed over the years...

The most important thing I want to change is to make the layout responsive. And because I hate re-inventing the wheel I'll try Bootstrap 3.x along with its buttons. We can even use its jumbotron classes but all this is for later.

Another thing I wouldn't bother at this point is SVG images. While they are better looking, I'm not sure the time is right to use them yet.

As for Grunt, I use it for combining and minifying the assets, and for running a local server. There are many plugins which extend its functionality to great limits so one can basically use it for almost anything. And remember, node.js is cross platform so that's a huge pro, at least for me being a Windows user myself, but without limiting other users.

@dscho: do you really need to use the SVG images? I ask because atm the number of requests and the download size is 2x, one for each PNG and one for each SVG file. display: none just hides the element but it's still downloaded...

Oh, also the number of fonts used for just a single page is a little... too much :P

With all this, we have 19 requests even after I combined the assets. I feel like we should simplify typography and sort the issue with the images. This should save a lot of bytes and requests, 4 from the images and 3 from the fonts.

@XhmikosR I do not need SVG images. That was @BaconRanch's idea; I only suggested to have PNG images as a fall back.

Likewise, if we can streamline the use of fonts, I'd be totally happy.

I played again for half an hour with the styles, trying to get things to look nicely in my Android emulator, failing... maybe you could reduce the number of hard-coded values, in particular font sizes? My understanding is that HTML browsers actually do a pretty fine job if you let them, but if you specify everything in minute detail, they cannot adapt the look to, say, limited screen estate...

@dscho: the problem isn't the unit used for font and stuff here. I'll play with Bootstrap's grid tomorrow or so, and it should take care of the responsive design just fine. This is the only issue left in the TODO anyway :)

@XhmikosR thanks for taking care of that. It is actually the thing that bugged me most (more so than loading both .svg and .png, or having unpacked .css, really).

@XhmikosR In this commit: ae33aaf we got rid of references to the SVGs but kept the files in case resizing the PNGs was needed.

There are three actual fonts. Each has a variety of versions for browser compatibility. If you remove one, I would prefer that it would be Open Sans. I would think there would be a visually similar cross-platform replacement that all browsers should have.

@BaconRanch: the SVGs are used https://github.com/XhmikosR/msysgit.github.com/commit/55401aa003199784e79fdc81b4a65fb283ce01b0

As for the fonts I will experiment with them tomorrow along with removing the SVG from loading.
I have also fixed the gradient calls, will push it tomorrow too.

@XhmikosR Yes, I'm aware. I was just mentioning that in my PR we eventually decided to scrap SVGs. The commit I referenced was not included in this rebased branch.

Ok then I'll rebase the branch and remove it tomorrow.

Oh! That reminds me- there is one other noteworthy commit I made in my fork that was not included in the pngsvg branch of the main msysgit.github.com repo and is therefore also not in your fork. I added a small "Portable Download" link below the blue "Download" button:
BaconRanch@149dda03fe93ddc53b33e3701ba41ea9e96afe77

And then the SVG removal we just discussed:
BaconRanch@ae33aaf5055ba25b1e88e521c46ed1f6cd153bee

Those two commits are the only valuable content you would need to consider integrating into your fork- they are dispersed among an attempt at making a responsive site design manually that we can throw away in favor of your Bootstrap solution.

Rebasing the commits referenced above may not even be worth it since the changes are so simple- you could write the changes and make commits of your own but it's up to you.

@BaconRanch: I skipped the portable link on purpose because it doesn't look good having an anchor link below the buttons.

I rebased the branch again, squashed some commits like the lightbox update since it's replaced by fancybox.

Next is to get rid of the 3 font families and try Bootstrap's grid system.

EDIT:

I went ahead and set up a gh-pages branch so that the results are public.

http://xhmikosr.github.io/msysgit.github.com/

Awesome! It looks pretty good even on Android, except on my phone (I think it has a real small width, so even the top logo gets chopped off to the right, and the screenshots and buttons and the last paragraph are all outside of the default view to the right...)

@dscho: I still haven't changed the grid system... It's harder than I thought it would be, but it's the only thing left in my TODO. I think the commits now make more sense after the last rebase and squash.

Note that with all this, we should already have better browser support especially for older IE like IE 8 and 9, than PR #8.

So basically the only issue left is the responsive design. Performance-wise I feel the site is good enough for a single page. See the report for more info http://gtmetrix.com/reports/xhmikosr.github.io/rYjlsOIC.

A better comparison between the master branch before and after my other PR and this branch so far can be seen here http://gtmetrix.com/compare/1fjdq2xt/ckm5G4fD/rYjlsOIC.

@XhmikosR The site is pretty good but I definitely noticed that, visually or artistically the site lost something significant when the fonts were removed. As a result of changing the h1 and h2 elements to the Open Sans font, the page looks a bit general-purpose and starts to have the feel of something like a free WordPress theme adapted for our specific use. On Firefox on Windows, I notice the Open Sans font seems to render at the specified h1 and h2 sizes with too much space between words, giving the block of text a horizontally stretched look.

Is there any way we could re-introduce the adelle font? Ideally, I would like to have all three fonts but I can live without Capsuula. I think taking the performance hit of adding adelle back in would leave the site looking excellent while still being mostly optimized.

The fonts we use also dictate a change in padding- the footer seems to have too much vertical padding now, for example- as well as the h1 and h2 elements in the details section. When we settle on the fonts to use, I would really like to make a pull request on your fork with some minor "fitting" of things into place.

@BaconRanch the rendering here looks fine. I also would like to register the suggestion that over-specifying (like the exact pixel sizes and the exact fonts) is what made the original approach break it for me...

The CSS styles I was mentioning are still listed in XhmikosR's version of the site, I was just suggesting that they be modified. I wasn't wanting to add any additional styles back in to the CSS.

Made more progress, still not ready yet...

BTW, we can add more links in the navbar. Also I don't think it makes sense to have the same stuff in the footer since the navbar is sticky. Any suggestions as to what to use in the footer?

@XhmikosR I just had a look at http://xhmikosr.github.io/msysgit.github.com/ on my Android phone and it looks awesome!

@BaconRanch one thing an honest-to-God graphic designer once hammered into me was that every stylistic aspect of a graphic design must have a non-artistic reason. For example, when choosing the font, you send a message about the content presented.

Now, I would never pretend to be a graphic designer, but just like the ice dance judges would probably do serious injury to themselves if they tried to perform the jumps on ice they rate in the ice dancers, I do have enough knowledge about graphic design to render at least a half-well-informed opinion. For example, if you choose a fancy font for your website, you tell everybody: look, this here project is fancy. If you're not a fancy person, you might to look elsewhere.

In that light, I'd like to suggest that the matter-of-fact, ubiquituous Arial/Helvetica/Sans is actually what we want to use, even if it is does not look as cool as Capsuula or Adelle. Or perhaps because it does not.

Hmm?

Still need to clean up the font sizes so that they scale nicely on all devices. And finally, apart from

BTW, we can add more links in the navbar. Also I don't think it makes sense to have the same stuff in the footer since the navbar is sticky. Any suggestions as to what to use in the footer?

I need to find another way for the hover image effect but this will be the last thing to do.

So any feedback about navbar and footer links?

@XhmikosR You could get rid of the footer altogether. I remember adding it in towards the end because it made sense but the page looked fine without it.

@dscho Well I do think that using the Adelle font does actually make the site, and project, more familiar- the "git for windows" is instantly recognizable when in the git project's font, and I think that does extend into non-artistic territory. For anyone who may think there could be multiple different ports of git on windows, it says "this one is the real deal"- and it is! How many Windows devs wanting to use git actually use something other than this software? It may not be as humble as Arial and the like, but I think the project does deserve to take a bit of pride in itself. The use of the authentic font seemed to make good sense in multiple ways at the time I added it. I understand that we removed it for optimization reasons though.

Now, I completely agree with your point on the Capsuula font. It was completely artistic and was used to "fancy it up." Thank you for the words of wisdom by the way!

@BaconRanch OK but I do like the idea of having a footer. Not sure what to put there though... Maybe something like git-scm.com?

As for the fonts, we can change it later if you people prefer it. I just wanted to simplify things in order to get things going first.

@dscho: so what should I do with this? I might have some time this week to finish the branch.

@XhmikosR sorry, I was under the impression that you wanted to work on mobile browsing and on responsiveness... Are you happy with both?

FWIW this is how things look in my Android emulator...

Oops. I should have tried to look at your current state (I used http://xhmikosr.github.io/msysgit.github.com/ for the screenshot above).

Now it looks like this:

But further down, it looks like this:

and if I scroll to the right, it even looks like this:

Is this fixable?

Well I'm not completely satisfied with it. But I asked about what to put in the navbar and footer.

I will try to finish it so that the pr is merged and any improvements can be made later if needed.

Oh, sorry, I did not realize that you waited for my feedback on the navigation bar and footer. Personally, I care more about the overall visual impression... I could live without a footer and navigation bar...

@dscho: everything is fixable but I guess it depends on the time one has to spend on an issue :)
I still believe we should have a footer; maybe like what git-scm.com has.

Anyway, I'll try to wrap the branch up in the next days.

@dscho: sorry for not looking into this, I was busy with other stuff and forgot about it :/

I commented on some of your patches, where should I look into if I want to work on this to finish it? Perhaps I could have push rights to this repository only so that our changes don't conflict?

@XhmikosR no problem. I am on it. Pull request #11, when merged, will close this one, too.

Anyway since I have no push rights I won't bother. Note that this branch is already obsolete by now.

@XhmikosR I sense that you are a bit disgruntled. Please don't be (and if you are, then please reconsider given the time I allowed for others to take things into more competent hands than mine).

@XhmikosR @BaconRanch By the way, I got quite a few flattering remarks on the new web design. Good job!

@dscho: I'm not disgruntled per se. But I have made other changes which I didn't have time to push to my branch. And you making yet another PR yielded in a conflict mess which I had no time to resolve. So I have to ditch my changes, which is certainly not amusing.

That's all. Git and PRs are nice and all but I would have done it better. Like I said, that branch was already obsolete.

@dscho I haven't looked at the site for a little while and, coming back to it, I think it looks great. I can totally let go of the whole font thing now and in the end, I'm glad I contributed. Thank you for the opportunity!

Dunno if anyone noticed the images, but removing the CSS property width: 100% causes them to scale correctly (at least on the desktop) without looking stretched. There may be rationale for keeping that property for other devices / sizes though.

Anyway thanks again everyone!

Ah- never mind about the scaling- the property is set to make the images resize responsively.