New Design

[larz0]

Feel free to review @MarcelGerber @le717.

Ignore blog.html. That's just an early wp blog template I'm working on.

[Mark-Simulacrum]

The menu bar seems to have an incorrect font for the text.

[le717]

@Mark-Simulacrum Can you explain that a bit? The menu bar is using Source Sans Pro, just like the rest of the site, just in a different weight.

[Mark-Simulacrum]

@larz0 knows better than I, but to me the menu bar looks better without the special font of 400 15px / 50px 'Source Sans Pro' applied.

[Mark-Simulacrum]

In the code for retrieving starter issues and features, it adds the amount of comments on that issue. Is there a reason for this? Seems unnecessary to me.

[le717]

@larz0 Here's what I'm seeing, not including the few comments I already left.

• There are now two different stylesheets for the site: style.css and brackets.io.css, but the former is only applied on the blog page. Could it be possible to merge the two files and add a large comment divider saying something like "This is for the blog page."
• On the topic of the blog, I assume there is someone else who will come behind you and write some JavaScript to populate that page based on the WordPress JSON feed?
• The comment submit button looks out of place compared to the other cool buttons.
• Maybe this is just personal preference, but CSS rules that have only one property are often all written on one line (.selector { property: value; }). Doing so reduces whitespace, and in turn file and download size.
• Again, possibly personal preference, but what do you think about making external links (AKA, all those not on the brackets.io domain, including blog.brackets.io) open using _blank?
• The avatars at the top of the Contribute page. I like it, it's really nice. However, since it is using -webkit-filter, the effect is lost in non-Webkit browser and everything is in color. However, I thought the color added to the page. It's kinda... blah in grayscale.

Overall, I really like it! :+1:

[Mark-Simulacrum]

The Javascript code on the contribute page fetches 7 starter features, but only 6 starter issues. Should this be changed within this PR, or should I open my own PR to fix that design oddity?

[le717]

@Mark-Simulacrum

I don't see a reason for using a playlist here.

Why not? It allows you to watch many videos showing Brackets in action. AFAIK, Brackets does not have a current "this is it!" feature/overview video.

In the code for retrieving starter issues and features, it adds the amount of comments on that issue. Is there a reason for this? Seems unnecessary to me.

I agree, that's a bit TMI. It doesn't really add anything to the listings. It's just a few lines that can be taken out if desired.

The Javascript code on the contribute page fetches 7 starter features, but only 6 starter issues.

@larz0 can make the starter issues load 7 items. It's very simple to change &per_page=6 to &per_page=7. :wink:

[Mark-Simulacrum]

@le717

Why not? It allows you to watch many videos showing Brackets in action. AFAIK, Brackets does not have a current "this is it!" feature/overview video.

When using a playlist, the user may think that all of those videos pertain to the selected topic: which is not the case. A minor thing, though.

I agree, that's a bit TMI. It doesn't really add anything to the listings. It's just a few lines that can be taken out if desired.

Would opening a PR targeting master be the best way to resolve that?

The Javascript code on the contribute page fetches 7 starter features, but only 6 starter issues.

@larz0 can make the startwe issues load 7 items. It's very simple to change &per_page=6 to &per_page=7. :wink:

Great to hear!

[larz0]

@Mark-Simulacrum the comments on the issue and feature cards are only there to show the levels of activity.

[Mark-Simulacrum]

@larz0 I see, although it still seems superfluous, since the user can easily retrieve this by clicking on the card. Perhaps a better alternative would be to ask for the most recent update. What do you think?

[larz0]

@Mark-Simulacrum your concern is legitimate, I've thought about it as well and that's why I put them at the end of the card. I think it's useful to see which issues or features are being neglected (0 comments) and which ones are more active (controversial? important?).

[Mark-Simulacrum]

@larz0 I see your point. I'll think about this, not sure what the best solution is.

[larz0]

@le717

• Ignore style.css. It'll be gone once I'm done with the wordpress theme.
• Yes
• I'm still working on that page.
• You're right, I think the CSS can be improved. I'd love to clean it up and minify it when I get the chance :+1:
• I haven't used "_blank" because pretty much all the links are Brackets related even thought it's external but yes we'll need to use "_blank" for the ones that are "off-topic". I think our target users generally know how to open links in new tabs anyway.
• I'd call it a progressive enhancement (most of our users use chrome or safari anyway). The avatars are in grayscale to make the page less loud.

[larz0]

@Mark-Simulacrum @le717 thanks for feedback guys :+1:

[njx]

Looking good. Some small comments:

• I'm not fond of the screenshot - it's a little too hard to tell what's going on in the right split view (especially if you're not already familiar with Brackets and inline editors). I don't think it's that important to show split view in this screenshot - although it's a key recent addition, it's more or less an expected feature, so for new users, I would rather emphasize the unique features of Brackets with clarity.
• It seems like the menu items at the top aren't baseline-aligned with the Brackets logo type (they're a couple pixels higher).
• The body text seems just a tad too small/light to be easy to read (on retina).
• The right-alignment of the columns in the footer looks odd to me - seems unbalanced. (I don't mind the right-alignment of the text at the very bottom, but the columns themselves being right-aligned seems odd - it almost looks like there's just a missing column at the beginning.)

[marcelgerber]

The body text seems just a tad too small/light to be easy to read (on retina).

I totally agree. It's not too great on my 1366x768 15.6" LCD either. The contrast could be better as well, as grey-on-grey text isn't the best choice.

[le717]

@njx On the topic of the screenshot, it might be best to take #117 into account for updating it.

EDIT

The body text seems just a tad too small/light to be easy to read (on retina).

I'm inclined to agree.It is a bit hard to read on my 1333x768 laptop screen as well, especially on text-heavy pages.

[marcelgerber]

@larz0 Guess you can spot the issue (happens only in the German version of the page):

[larz0]

@njx @MarcelGerber @le717

• I can change the screenshot. Should we just show the inline color picker? I'd like to use a different theme as well so the colors match the website more.
• Hmm I'm actually trying to center the menu items vertically. If I make them line up with the baseline of "Brackets" then they won't be vertically centered with the header and I'd like the menu items to have a smaller font size.

• I can tweak the body font weight or color a bit more but I won't change the font size in order to have an optimal measure.
• The footer alignment is like that on purpose. At full size the footer content don't have enough text to fill up the columns. If you look at the page as a whole the sticky header's emphasis is on the left so making the footer align right makes the page would be more balanced. On a tablet size the 3 column footer actually spans across the page because there's enough text to fill the columns. I can add the social media link to the first column.

[njx]

@larz0

I can change the screenshot. Should we just show the inline color picker? I'd like to use a different theme as well so the colors match the website more.

Yeah, I think showing it in non-split-view would work. I'm a little torn about whether we should show the color picker or the inline CSS editor - the latter is more unique, but the former is visually more appealing.

Hmm I'm actually trying to center the menu items vertically. If I make them line up with the baseline of "Brackets" then they won't be vertically centered with the header and I'd like the menu items to have a smaller font size.

Yup, I figured that's what you were trying to do, but because the size difference is small (and the item it's being centered relative to doesn't have a strong visual boundary, like a search box - the icon is a little too far away), it doesn't really look centered, just misaligned, IMO. If the Brackets logo/text were larger, I think it would work better.

I can tweak the body font weight or color a bit more but I won't change the font size in order to have an optimal measure.

I think tweaking the weight would help.

[TomMalbran]

The new design looks nice. But I really like the current header blue background. Do you think that we could bring it back? It gives a lot of color to the web and makes it look warmer. Now is a bit cold with so much white and black.

One other minor thing. I noticed that you replaced the font property a lot, repeating the font-family. But the replaced font-family doesn't add the fallbacks. I think that is better to not use the font property to change the font size and weight and use the longer font-size and font-weight properties for that.

[larz0]

@njx I'll try the inline editor instead of the color picker. I've also pushed the logo up by 1px; seems a tad better.

@TomMalbran sorry that the current hero bg isn't your favorite, it's the style I'm going to go for right now but maybe we'll bring it back for v2. The sections below the hero are light blue and dark blue so it's not completely grayscale.

I'll add the font fallbacks in the font shorthand (nice catch). Once I have time I'll convert these to SASS or LESS so we can use variables.

[larz0]

@MarcelGerber where are you seeing:

Could you take a screenshot of the page to give me more context.

[marcelgerber]

It's "Setup A Dev Environment" on the English contribute page. Hope that helps.

[larz0]

@MarcelGerber I can't reproduce it. Do I need to switch to german? Screenshot?

[marcelgerber]

What I did:

1. Append ?lang=de to the URL (use ?lang=en afterwards to revert that change)
2. Resize browser window to half-screen

[larz0]

@MarcelGerber thanks. It should be fixed now :+1:

[TomMalbran]

Should we add waffle in the links?

Edit: It might be better to show the last 8 blog posts instead of 10.

Edit2: Shouldn't the image use the default theme and maybe no extra extensions?

[larz0]

• Sounds like a good idea. I'll ask the team to make sure.
• Yep I can do that.
• That's not the final v1 screenshot. I did that on purpose to test people's response. It's not set in stone.

[marcelgerber]

The OS Alert looks odd.

[larz0]

@MarcelGerber how do I see that alert?

[marcelgerber]

(In Chrome) Open DevTools, toggle the phone icon in the DevTools nav bar, then in the field "UA", input something like "Linux 10.04," (you have to enter that trailing comma!) and reload the page.

[larz0]

@TomMalbran looks like the recent blog posts count is being controlled by wordpress?

[larz0]

@MarcelGerber I've fixed the alert. Thanks.

[marcelgerber]

@larz0 See #120.

[marcelgerber]

The contributor avatars look a bit out of place on mobile. Guess we shouldn't show/load them while on mobile.

[larz0]

@MarcelGerber hmm let me think about that.