Homepage redesign September 2017
review app link: https://homepage-redesign-september-2017.about.gitlab.com/
Merge request reports
Activity
@mattatrenet once we merge https://gitlab.com/gitlab-com/www-gitlab-com/merge_requests/7535, all of your commits will show up in this merge request. cc @joe.s @mitchellwright @erica @annabeldunstone @marcia
Edited by Luke Babb
@mattatrenet can we do @2x images for the 680x440 screenshot images to support retina displays?
-
@mattatrenet are you OK with me updating the copy or are you guys already working on that? I'm happy to do it!
@erica Let me break the homepage layers out into separate partials to minimize the chance of merge conflicts. After that you're welcome to make content edits.
@mattatrenet I'm not sure when this happened but the lifecycle icons now have a gray fill instead of white.
@luke Yes, there is some conflicting CSS in the SVG. It's fixed, just waiting for CI
@erica Go ahead and edit content.
@dbutcherdev yes, I'm working with @erica to finalize them right now. I will post them all as a comment for @joe.s to approve, and I can either push them to the branch or @mattatrenet can download the images directly from the comment.
1 %section.enterprise-edition 2 .container 3 .row.flex-row.text-center 4 .col-md-8.col-md-offset-2 5 %h3.sub-heading 6 Try 7 %a{href: "#"} GitLab Enterprise Edition That's a placeholder - I wasn't sure where to link it from content docs.
@erica ?
Edited by username-removed-1558057-
@joe.s should this link to https://about.gitlab.com/gitlab-ee/ or https://about.gitlab.com/free-trial/
changed this line in version 12 of the diff
@annabeldunstone Yes, still working on mobile display.
@jivanvl I was just going to comment the same thing. lol. Nice catch.
Rolling up results from comments on Layer Order:
AtreNet Proposal (now visible at https://homepage-redesign-september-2017.about.gitlab.com/ ):
- Hello Bar
- Hero/Workflow Tabs
- Open Core and Continuously Improved
- Try GitLab Enterprise CTA
- 10.0 Announcement
- Value Pillars
- Customers
- Resources
- Footer
Alternative 1 (LB+JS "should
#4, be after#5"):- Hello Bar
- Hero/Workflow Tabs
- Open Core and Continuously Improved
4*) 10.0 Announcement
5*) Try GitLab Enterprise CTA - Value Pillars
- Customers
- Resources
- Footer
* New Order
Alternative 2 (LB move
#4(10.0) above#3(Trial), but then move#3(Trial) below#5(Value) ):- Hello Bar
- Hero/Workflow Tabs
- Open Core and Continuously Improved
4*) Value Pillars
5*) 10.0 Announcement
6*) Try GitLab Enterprise CTA - Customers
- Resources
- Footer
* New Order
Please discuss and approve one of these, or pass this list back with the final approved order. We have to (in some cases) accommodate designs in adjacent layers, so changing the order is not 100% frictionless. We need to nail this down.
Considerations:
- The current order places the Free Trial offer high on the page, increasing the chances that it will be seen
- 10.0 Announcement is higher on the page with Alternative 1
- Users have to be "ready" to click a trial on a homepage, unless they already know your product fairly well. Alternative 2 give them a chance to read a bit more before encountering the free trial
Thanks
Edited by username-removed-1571409@jschatz1 @annabeldunstone @jivanvl let's focus the review on polishing the functionality and responsiveness. We can address style, visual, and code inconsistencies post launch in a second iteration. cc @mattatrenet
Edited by Luke Babb@dbutcherdev Alternative 1
- source/stylesheets/home.css.scss 0 → 100644
75 padding: 23px 42px 15px; 76 border-top: 2px solid $lt-border-color; 77 border-bottom: 2px solid $lt-border-color; 78 font-size: 20px; 79 font-weight: 300; 80 cursor: pointer; 81 82 &.is-active { 83 z-index: 2; 84 } 85 86 &:first-child { 87 border-left: 2px solid $lt-border-color; 88 } 89 90 - source/stylesheets/home.css.scss 0 → 100644
586 padding-bottom: 10px; 587 font-size: 18px; 588 text-transform: uppercase; 589 590 &::after { 591 $lt-width: 72px; 592 position: absolute; 593 bottom: 0; 594 left: 50%; 595 width: $lt-width; 596 height: 4px; 597 margin-left: -#{$lt-width / 2}; 598 content: ""; 599 } 600 601 @each $lt-child, $lt-color in (1: #fca326, 2: #f38327, 3: #ea6328 , 4: #e24329) { @joe.s @erica can you review and approve these screenshots?
@dbutcherdev @mattatrenet if approved these are sized and ready to go
1. Idea
2. Define
3. Plan
4. Create
5. Review
6. Release
7. Measure
@luke good to go.
added 1 commit
- 80cb7090 - remove feature descriptions and change event category link
added 16 commits
- 87565159 - Lifecycle diagram screenshots
- 4b18ea0f - Set min-height to avoid jumping
- fbe4efb1 - Scroll arrows for better discoverability on lifecycle nav
- 26afa5a0 - Fix mobile display of Splash content
- 77122ce6 - Keep carousel arrows in view as screen shrinks
- 791d5f2e - Move variable inside block where it is used
- 0eb06ecf - Better mobile display for Open Core
- 2e73496c - Merge branch 'homepage-redesign-september-2017' of…
- 6e5c4222 - Better mobile font size
- 94e03956 - Better mobile display of pillar values
- 666c408f - Fix value pillar svg icons
- 5730905b - Space between title and value props
- 9a96769a - BG color change and space between customers title and content
- 3496a463 - Reorder content per latest direction
- d63032d0 - Fix line width calculation
- 6c6690e8 - Better font size for quote on mobile
Toggle commit list@mattatrenet I realize we're in the eleventh hour here, but I would like to see this experience improved. Thinking about smaller display sizes (e.g. 13" macbook) I don't think this is a great experience, could we simple scale down the icons relevant to the browser width versus having an odd experience with the arrows? cc @dbutcherdev @joe.s
@joe.s @luke @erica @jschatz1 @annabeldunstone @jivanvl
Hi Everyone,
We have finished our development and QA:
https://homepage-redesign-september-2017.about.gitlab.com/
The page is ready for final review and launch.
Before you review the page, please do a hard refresh to ensure you have not cached any stale content or page components.
Please begin your review from the user’s perspective to ensure we catch anything that users would see or experience when using the site.
When reviewing page code, please prioritize any issues you may have as showstoppers, which must be dealt with prior to launch, or post launch fixes.
We plan to be available for addressing anything that needs attention prior to launch until 10:30 PM. Please conduct your reviews as soon as possible so we can react accordingly.
Thanks!
@mattatrenet also please make the lower boundary of the purple consistent so it doesn't vary per step. It is most distinctly different for review and measure but also slight variations for some of the other steps.
@mattatrenet /cc @erica the hello bar needs to be the 10.0 text.
Here are some tweaks that would be nice to address before launch, but not crucial:
- Change the lifecycle image to have a border of
#7e62d0 - As mentioned in https://gitlab.com/gitlab-com/www-gitlab-com/merge_requests/7545#note_41049390 can we have this be a fixed height (e.g. pick the tallest one)?
- Change button hover to
#e24329 - Align the resources CTAs so they are all along the same baseline
- The lifecycle screenshots are so small on mobile that I'd recommend dropping them and having text + button only.
- I would also recommend dropping the value pillar icons on mobile as well.
- I find the link in the Trial headline distracting and very odd that it's a different color, can we instead link "GitLab Enterprise Edition" that's in the sub-head?
- Change the lifecycle image to have a border of
@mattatrenet there is no hyperlink in the Open Core/Velocity section to: https://about.gitlab.com/2017/07/06/gitlab-top-30-highest-velocity-open-source/
Thanks @mattatrenet, if we can limit the arrows to mobile only that would be ideal.
@luke My push is failing, suggestions for troubleshooting? It just hangs like there's a network issue.
fetchis failing too.Edited by username-removed-1558057@mattatrenet I'm afraid that is beyond my Git expertise
@erica can you try making a trivial change?
@joe.s What do you want to use for button link text for Open Core link? "Learn more" ?
Nevermind, @dbutcherdev just informed me we should link the logo
Edited by username-removed-1558057@mattatrenet I was originally thinking to hyperlink the element(s) in the purple circle, such as the CNCF logo versus a CTA button
@joe.s we've got it. working from your comment.
@luke Updates deployed to change lifecycle nav display/behavior
@mattatrenet thanks, will review.
Can we swap out the current resources images to these ones:
@luke I'll swap those images
@mattatrenet improvement to the lifecycle nav looks good, much better. I don't love that interaction on mobile, but we can think through a solution in the next iteration.
added 2 commits
@dbutcherdev @mattatrenet did you see these notes: https://gitlab.com/gitlab-com/www-gitlab-com/merge_requests/7545#note_41067266?
@luke "Change the lifecycle image to have a border of
#7e62d0" Do you mean the border around the screenshot?@mattatrenet yes, sorry for the confusion.
@dbutcherdev there has been some feedback about needing more breathing room throughout the page. Overall everything feels somewhat tight and close together.
added 6 commits
- 779c8652 - Update accent button hover per feedback
- f5d262d0 - Make feature links aligned at bottom per feedback
- 283e83ed - Update lifecycle screenshot border color per feedback
- 12a70e3c - Hide lifecycle screenshot on mobile per feedback
- e66ee472 - Hide value pillar icons on mobile
- e66e4b53 - Move Enterprise Edition link per feedback
Toggle commit list@luke those commits ^ cover https://gitlab.com/gitlab-com/www-gitlab-com/merge_requests/7545#note_41067266?
@luke The updates are now deployed to https://homepage-redesign-september-2017.about.gitlab.com/
@mattatrenet still seeing the purple expand for review and measure relative to the others.
Edited by Joe Scheuermann@joe.s I'll take another look at the purple expand
@dbutcherdev I am fine with assessing the spacing post launch.
@mattatrenet can we tweak the lifecycle nav (whenever arrow and are being used) so that it doesn't scroll so far past the last step?
@mattatrenet I am seeing odd behavior in new windows in Safari (not seeing in Chrome). See animated gif showing purple space below lifecycle.
@mattatrenet also getting some weird shuffling of the resources (on smaller browser widths), and won't fit four across full-width in Safari:
@dbutcherdev I have not been able to reproduce the purple expanse @joes is experiencing either.
@mattatrenet I was originally thinking to hyperlink the element(s) in the purple circle, such as the CNCF logo versus a CTA button
@joe.s I would argue that the link on the CNCF logo is too hidden, I'm not sure anyone would try or expect to click there. Perhaps linking all or part of the
among the TOP 30 highest velocity open source projectstext would be more intuitive.@dbutcherdev I'm on Safari 10.1.2 (12603.3.8) on MacBook Pro. Am able to replicate in new private window.
would argue that the link on the CNCF logo is too hidden, I'm not sure anyone would try or expect to click there. Perhaps linking all or part of the
among the TOP 30 highest velocity open source projectstext would be more intuitive.@luke I had the same thought. I think hyperlinking the text (without underline) would be improvement.
@mattatrenet see change in comment above, also noticing the resources layout breaking on mobile in Firefox as well:
@joe.s If you shift-reload your Safari do you still see the big purple space?
@mattatrenet nope. gone now.
@dbutcherdev yes. ok.
@luke Deploy running now that should fix the Feature/Resources display in Safari and on small screens. The issues were a regression from making the links line up vertically.
@dbutcherdev you're seeing the update for 4-up and 2-up resources display. The display on small screens isn't deployed yet.
@mattatrenet small screens on Safari and Firefox look
@dbutcherdev yes, I think we are in good shape. @timzallmann happy Friday! (not quite Friday here yet.) If you can look for any deal breakers, otherwise I think we in good shape for the Friday launch, and have started to take notes for some additional polish for the next iteration. Also @mattatrenet will be doing some further code cleanup following launch.
@luke any additional points from your end?
@joe.s @dbutcherdev no additions, feeling pretty good.
@timzallmann Hi Tim, nice to have you here. We just cleared the fix list with two items deferred:
- Review and possibly adjust vertical spacing between some of the components
- Link modifications for the CNCF logo - possibly moving the link to nearby text or linking both the logo and the nearby text.
Neither was judged to be a showstopper.
@joe.s @luke, I'm going to let Matt go for the evening, and I'll start the zoom at 5:00 AM. Matt will take one last look at this thread before he pulls the plug.
Tim, if you see anything that absolutely cannot go live Joe has my number :-)
Looking forward to a successful launch...
David
I just went over the discussions that were opened and closed the ones that were already solved, will do now some intensive testing to see if we have any showstoppers. So far it looks good and a lot of improvement in the last hours. I would suggest simply creating issues out of those open actions + discussions on code that will be not addressed now, so we can then fix + merge them also in smaller iterations.
@dbutcherdev Thanks, I will let you know.
Also looking forward to having this released.
-
Bottom Links and Box above should align left + right
Edited by Tim Zallmann Hi @timzallmann I'm not seeing that on Windows 10 + Firefox.
What browser were you using when you took the screenshot above?
Thanks
@dbutcherdev I can see this on Chrome as well, see how the resources are all left-aligned relative to the quote container above? Rather than centered. You can see it with the faint blue lines in @timzallmann's screenshot above.
We can create an issue to fix this post launch.
Created #1652 (closed)
@luke regarding the images in https://gitlab.com/gitlab-com/www-gitlab-com/merge_requests/7545#note_41051544, I don't think Create and Review should have those ones.
In Create we show the Graphs tab which is a feature that needs UX/UI love :) Maybe the repository file tree is a good candidate? I don't have a strong opinion on this.
The Review however, should have a screenshot from a merge request and not the pipelines. If you could also capture the Code Quality, it would be great :)
Thanks for reviewing @axil! Could you give us an example of what you mean by capturing Code Quality?
-
Yes, for example see https://gitlab.com/gitlab-org/gitlab-ce/merge_requests/14320. It's this feature https://docs.gitlab.com/ee/user/project/merge_requests/code_quality_diff.html.
Created #1652 (closed)
- source/javascripts/home.js 0 → 100644
17 }, 18 setup: function() { 19 var self = this; 20 self._phases = $('.lifecycle-diagram-phase'); 21 self._body = $('body'); 22 self.setupNavigation(); 23 self.checkCarousel(); 24 self.checkHeights(); 25 $(document).on('mouseover', '.lifecycle-diagram-navigation li', self.onMouseover); 26 $(window).on('resize', function() { self.checkCarousel(); self.checkHeights(); }); 27 $(window).on('load', function() { self.checkHeights(); }); 28 }, 29 setupNavigation: function() { 30 var self = this 31 , $ul = $('<ul class="lifecycle-diagram-navigation"/>'); 32 ; -
I think this one got lost ... or the one above is too much
Edited by Tim Zallmann @timzallmann Are you referring to the extra semi-colon?
- source/javascripts/home.js 0 → 100644
87 self._phases.css( 'min-height', ''); 88 self._diagram.addClass('is-checking-height'); 89 self._phases.each(function() { 90 var this_height = $(this).height(); 91 if ( this_height > min_height ) { 92 min_height = this_height; 93 } 94 }); 95 self._diagram.removeClass('is-checking-height'); 96 self._phases.css('min-height', min_height + 'px'); 97 } 98 99 }; 100 $(LifecycleDiagram.init); 101 102 @timzallmann Can you clarify the issue? I'm not sure what you mean by "Line too much"
- Resolved by Tim Zallmann
So I tested it now on Chrome, IE 11, Edge, Firefox, iPhone 6 and also couldn't find any showstopper.
- The most annoying thing (I think that can be fixed in a minute) I found, are the nonclickable thumbnails + headlines at the bottom
- Please create issues out of the open comments and perhaps make one specific about CSS cleanup where @annabeldunstone can jump in. I totally get that this was under a very short timeline, but we should clean up a little bit more and it would be great to take the opportunity when we start to redo some parts of our homepage to start with a cleaner sheet. So by example making CSS classes more generic so that they are way more reused and less specific per page
- Last reply by Tim Zallmann
-
So I tested it now on Chrome, IE 11, Edge, Firefox, iPhone 6 and also couldn't find any showstopper.
- The most annoying thing (I think that can be fixed in a minute) I found, are the nonclickable thumbnails + headlines at the bottom
- Please create issues out of the open comments and perhaps make one specific about CSS cleanup where @annabeldunstone can jump in. I totally get that this was under a very short timeline, but we should clean up a little bit more and it would be great to take the opportunity when we start to redo some parts of our homepage to start with a cleaner sheet. So by example making CSS classes more generic so that they are way more reused and less specific per page
I think we are good to go.
mentioned in issue #1644 (closed)
The most annoying thing (I think that can be fixed in a minute) I found, are the nonclickable thumbnails + headlines at the bottom
@timzallmann I agree, my vote would be to do this on all browsers/devices rather than just mobile. It will be consistent with what we've done on https://about.gitlab.com/customers/ for example.
I will start to create issues out of the open comments after launch.
@mattatrenet if possible can we swap out the current image for this one: create-screenshot_2x
@mattatrenet it's about time to merge so I'll create a new issue to update the above image and one other.
added 1 commit
- ebc65f9d - Update ten-oh-announcement.html.haml to link to press release
assigned to @erica
@timzallmann so far I've created #1651 #1652 (closed) #1653 to address open comments/discussions on this MR.
- source/includes/home/value-pillars.html.haml 0 → 100644
1 %section.value-pillar-section 2 .container 3 %h2.main-heading.text-center The leading integrated product for the entire software development lifecycle. 4 5 .value-pillar-group 6 .value-pillar 7 .value-pillar-media 8 = partial "images/home/pillar-create.svg" 9 .value-pillar-body 10 %h3.pillar-title Focus on creating not integrating - source/includes/home/open-core.html.haml 0 → 100644
mentioned in commit c5ef679f
- source/images/home/bayer.svg 0 → 100755
1 <svg xmlns="http://www.w3.org/2000/svg" width="108.14" height="108.14" viewBox="0 0 108.14 108.14"><defs><style>.bayar-cls-1,.bayar-cls-2{fill:#aaafb9;stroke:#aaafb9}.bayar-cls-1{stroke-width:.91px}.bayar-cls-2{stroke-width:.54px}</style></defs><title>bayer</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><g id="B1"><path class="bayar-cls-1" d="M54.07.45a53.62 53.62 0 1 0 53.62 53.62A53.63 53.63 0 0 0 54.07.45zm0 101.15a47.53 47.53 0 1 1 47.53-47.53 47.52 47.52 0 0 1-47.53 47.53z"/><path class="bayar-cls-2" d="M59.17 46.73h4l-7.27 9.36v5h-3.43v-5l-7.27-9.36h4l4.95 6.66zm19.26 0v2.93H68.8v2.74H78v2.82h-9.2v2.93h9.63v3h-13V46.73zm-17.78 18v2.93H51v2.74h9.25v2.82H51v2.93h9.63v2.93h-13V64.73h13zm28.96-9.1h-2.74v5.48h-3.35V46.73h8.71a4.45 4.45 0 0 1 1.26 8.71l4.22 5.63h-4zm2.32-6h-5.06v3.12h5.06a1.59 1.59 0 0 0 1.56-1.56 1.62 1.62 0 0 0-1.56-1.53zM58.52 87.71a1.6 1.6 0 0 0-1.52-1.6h-5.9v3.16H57a1.62 1.62 0 0 0 1.52-1.56zm-10.84 9.86V83.22h9.59a4.44 4.44 0 0 1 1.64 8.56l4.3 5.78h-4l-4.11-5.47H51v5.48zm-1.49-36.5h-3.61L41.4 58.6h-8.11l-1.18 2.47h-3.57l7.15-14.35H39zm-8.82-10.92l-2.85 5.67h5.63zM63 42.81h-3.6l-1.18-2.47h-8.11l-1.18 2.47h-3.57l7.15-14.35h3.31zm-8.83-11l-2.85 5.67H57zM14.72 52.43h6.09A1.42 1.42 0 0 0 22.18 51a1.4 1.4 0 0 0-1.37-1.41h-6.09zm0 5.82h6.35a1.64 1.64 0 0 0 1.64-1.56 1.73 1.73 0 0 0-1.64-1.64h-6.35zm9.7-4.64a4.19 4.19 0 0 1 1.52 3.12 4.42 4.42 0 0 1-4.64 4.38h-9.89V46.73h9.82a4.19 4.19 0 0 1 3.2 6.89zM51 16.59h6.05a1.41 1.41 0 0 0 1.37-1.37 1.4 1.4 0 0 0-1.37-1.41H51zm0 5.78h6.35A1.64 1.64 0 0 0 59 20.81a1.73 1.73 0 0 0-1.64-1.64h-6.3v3.2zm9.67-4.6a4.19 4.19 0 0 1 1.52 3.12 4.42 4.42 0 0 1-4.64 4.38h-9.91V10.88h9.82a4.17 4.17 0 0 1 4.19 4.19 3.8 3.8 0 0 1-.96 2.7z"/></g></g></g></svg> mentioned in issue #1651
