Add new Enterprise content and design

[tellyworth]

This design is still in progress, not yet final.

(updated with newer design)

[bengreeley]

Final design:

[bengreeley]

I've put an initial version of the new Enterprise website together. You'll need to preview from the WordPress editor to experience it, but I'll include some screenshots. I'd recommend opening the page in the editor and clicking 'preview' to get the full experience. Overall using Gutenberg worked really well, but I do have some questions and things I'd like to double-check regarding the design.

@ryelle @StevenDufresne Apologies if these questions are explained elsewhere, but I wanted to make sure I understood the intended way to work with the parent theme when tweaks are needed:

• Is there a class already created to implement the external URL arrows? See screenshot:

• The header using the cover block works fine, but it lacks control over the width of the paragraph on the right. Do you think a different block would work better as a header that would be able to feature an image on the left with text on the right?
• I think the desktop looks good but mobile isn't as wonderful of an experience due to needing to finetune some padding in mobile mode. Can either of you think of ways we can finetune mobile or whether it's needed? Padding is the biggest issue I'm seeing.
• The 'Try WordPress' text on mobile on the bottom of the screen is too large. If I want to make this smaller on mobile, should I create custom CSS in the theme?

@panchovm I'm curious if you have thoughts about how the design looks.

• Logos: The current Enterprise site the logos individually and stacked on mobile, creating a strange experience. I'd like to avoid that on the new site, so I created them as a single image since we don’t link from them. Is this acceptable, or should we attempt to stack them on mobile? Dealing with a bunch of logos with that at various breakpoints can be a pain so I was wondering what you think.

URL: https://wordpress.org/enterprise-2/ (open in editor and preview)
Screenshots:

[ryelle]

Is there a class already created to implement the external URL arrows?

You can use that character directly, ↗

Do you think a different block would work better as a header that would be able to feature an image on the left with text on the right?

Maybe Media & Text? I’m not sure, without playing with GB myself.

Can either of you think of ways we can finetune mobile or whether it’s needed? Padding is the biggest issue I’m seeing.

This has been a common problem… Using the “Large” preset for left & right padding should respond pretty closely to what's expected (with some ongoing work there, still - see WordPress/wporg-showcase-2022#62).

The ‘Try WordPress’ text on mobile on the bottom of the screen is too large. If I want to make this smaller on mobile, should I create custom CSS in the theme?

Try using the “CTA Heading” font size, it will scale down on mobile automatically. Some of the font size presets (and spacing presets) already scale by default - you can see the list of values here.

[jasmussen]

Is wporg-main-2022 the best repository to create issues for designs going forward?

[ryelle]

Is wporg-main-2022 the best repository to create issues for designs going forward?

If it's for any of the "main" sections (About, Downloads, Enterprise) then yes definitely. Showcase, Themes, Documentation, the Developer Blog, and the Developer site have their own repos. The parent theme repo is a good place for anything that affects multiple sites (like the brush stroke, or other patterns planned to be reused).

Other sites' repos will be made when development is started there.

That said, it's very easy to transfer issues from one GH repo to another, so don't worry too much about putting something in the "wrong" place.

[bengreeley]

Thank you for the direction @ryelle , it looks much better on mobile now after making some of those tweaks.

@panchovm This is ready for design review. Would you be able to take a look this week and let me know your thoughts on my above questions?

@thetinyl While the new 'Enterprise' landing page is using mostly the same content as the current site, I was wondering if somebody would be able to review the content and make any necessary content updates. If anything is difficult to update, just let me know what needs to be changed, and I'd be happy to do so.

For both Francisco and Lauren, to edit the page, you'd go to https://wordpress.org/enterprise-2/ and edit the page in WordPress. You won't be able to see the new design changes until you click the 'preview' button. Feel free to modify any content or design if it makes it more efficient to make updates. Thank you in advance for taking a look.

[fcoveram]

The page looks good, I noticed just a few inconsistencies in text styles and spacings. But open to following developed styles.

Hero section and styles

The section has a small top padding. A 180px space makes it look like the design.

Paragraph in the right side needs to have the following:

• Have the Paragraph (small) style applied. That is 14px for font size and 24px as line height
• Align text in the center
• Width value is bigger than the mockup. I played with the margins in the inspector and 80px on both sides would make it look more narrow.

Brand logos

• The section's top border color should be WP.org Charcoal 2 in Figma.

Use cases section

• Text style of "Enterprise use cases" should be Heading 3 to look smaller.
• Font family in category name (Media & Publishing, e-Commerce,...) should be Inter instead of EB Garamond, and 20px for font size.
• Paragraph style in category description should be Paragraph (small).
• Left image is not fixed at the bottom, and the crop is incorrect. I can share the correct version.
• The space on top side, right side, and between main paragraph and rows, is different than the mockup. It should be 80px in all cases to reach consistency.
• I noticed that each internal section has unnecessary gaps created by a mix of margins and paddings, like the following image.

Features section

The section needs to have a spacing of 80px in the following areas:

• All sides of the section: top, right, bottom, left.
• Between columns.

Resources links

• We do not need to use the unordered's list style. We can reuse the spacing style applied in footer's nav items

---

Questions

In general, two things came up to me while reviewing the desktop version:

1. Why are we using png images instead of svg? Especially for the logos and features icons.
2. Most sections have a left and right padding of 80px and an auto value for margins. This extra space makes it look narrow. Is this a rule we decided on for all pages? If so, the consistency makes sense, but copy tweaks might be needed.

I will split my comments on the mobile version since I have not shared any design.

[thetinyl]

Thanks for the tag @bengreeley! I reviewed the content and made a few tweaks to comply with the updated brand writing style guide, as well as for clarity. I noticed there is a bit of repetition across a couple of sections and did my best to adjust (without any major wordsmithing) to make it feel less so.

To quickly outline some of the updates:

• Adjusted language in the hero sub copy and "Enterprise use cases" sub copy
• Adjusted subheadings to be consistently sentence case
• Updated spellings for "e-commerce" and "open source" (adding/removing hyphens respectively)
• Added (PDF) mention to resource links— @panchovm wasn't sure if there's an existing iconography used for this, so feel free to replace with that if there is.

Overall, I think this page's content could use some TLC in the future. If we were open to doing a quicker follow-up content update, I think the "Enterprise use cases" section could be improved without too much effort:

I think there's more we could say here about why these particular sectors are using WordPress. In general, and from a branding perspective, it could be more benefit driven (and empowering).

[bengreeley]

Thank you for making updates to the content on the Enterprise page, @thetinyl ! I created an issue to ensure we don't lose track of your recommendations when somebody has time to make future content updates. #154

[fcoveram]

Coming back here to share the mobile version. Here is a small view of the mockup, but you can see its Figma version in this link.

[bengreeley]

@panchovm First of all, thank you so much for the feedback and pointing me in the direction of the mobile Figma. I was able to mostly achieve what you're looking for, but there are some caveats that I'll outline below that I'd like to get your opinion on. Since we are putting these landing pages together within the Gutenberg editor, there are certain limitations of what we can do on mobile that is different from the desktop version. I'd like to see what you think about possible alternatives that might simplify the implementation:

• To answer your question about SVGs vs PNG files, there's currently a limitation that we can't upload SVG files from the WP admin due to security concerns. Do you see this as a blocker? It's possible we could add SVGs to the theme source code, but it's not ideal. We could create an issue to tackle this later on if you feel this is acceptable for now.
• The logo section doesn't match the designs 100%. I was having trouble getting each one to look right on both the desktop and mobile versions, but I think I got it to a happy medium. What are your thoughts? This is going to be a challenge to get 100% accurate between desktop and mobile. Alternatively, I can revert back to using a single image that doesn't stack, but scales down when on mobile (see earlier screenshot)
• Noting here I have a PR open to be able to select charcoal-1 as the header and footer menu colors (currently it's charcoal-2 by default. Add dark black header and footer variation wporg-mu-plugins#307
• I'm not going to be able to remove the illustration on mobile only, unfortunately. Hopefully scaling down and stacking makes sense, but if need be I could add some custom CSS to the theme to handle this.
• The vertical bars in the 'Extensibility / Security / Open source' sections can't be hidden on mobile if they are on desktop, so I left them off on desktop so both versions look ok. Let me know if that works for you.

Let me know if you have any other thoughts on how to achieve the designs purely through the editor. Thanks again.

[bengreeley]

@panchovm FYI I changed the background color to be charcoal-2 to match the existing pages (see this GitHub issue for the conversation). Let me know if you think it actually should be charcoal-1 and I can work to implement it as a color scheme. Also, if you have a chance this week, let me know your thoughts about what I wrote in the last comment. Thanks!

[tellyworth]

@adamwoodnz are you able to take a look and help sort out the logo issues?

[adamwoodnz]

I've added a second block of logos below the existing one, which uses a flex row layout instead of columns. I think this matches the desktop design, and the flat hierarchy of the markup means we could write some custom CSS for a grid layout on mobile to get the 2 columns like the design:

Desktop	Mobile

Grid layout:

Mobile design:

Let me know what you think.

Is it time to move this to a pattern now so that we can apply the finishing touches (like this CSS)?

[fcoveram]

Thanks for addressing my comments @bengreeley. Replying per point:

there's currently a limitation that we can't upload SVG files from the WP admin due to security concerns. Do you see this as a blocker?

Not at all. We might need to increase the image resolution, but I wonder how we’re addressing all images on the site to follow that rule.

The logo section doesn't match the designs 100%. I was having trouble getting each one to look right on both the desktop and mobile versions, but I think I got it to a happy medium. What are your thoughts?

I saw @adamwoodnz's solution, and it looks excellent.

Noting here I have a PR open to be able to select charcoal-1 as the header and footer menu colors (currently it's charcoal-2 by default.)

Thanks for opening ticket #307, I shared my thought there to continue with charcoal-2 as the color was a mistake in the mockup.

I'm not going to be able to remove the illustration on mobile only, unfortunately. Hopefully scaling down and stacking makes sense, but if need be I could add some custom CSS to the theme to handle this.

The other solution I was thinking of is replacing it with a horizontally-arranged version for mobile, but that might be undoable as well. The current implementation takes a significant portion of the screen, so I am drawn to hide the image.

Another solution might be redesigning that section to not rely on any image and possible layout breaks. What do you think?

The vertical bars in the 'Extensibility / Security / Open source' sections can't be hidden on mobile if they are on desktop, so I left them off on desktop so both versions look ok. Let me know if that works for you.

It works well as it is ✨

Thanks for the improvement. It looks great.

[fcoveram]

Some other thoughts where I would like your opinion for what is the best approach to tackle them.

General

Doble border

I noticed a double border on each feature's top side. This might be to solve the divider on mobile. If that is the case, it seems better to remove the border of all features completely. Showing a screenshot.

Heading style

The E-commerce heading looks bolder than the same section's other headings.

Mobile

Paragraph width

The description text in hero section looks narrow

Spacing in Features section

The features section have a left and right padding that sets the content off the grid. This makes the page to look broken.

[bengreeley]

Is it time to move this to a pattern now so that we can apply the finishing touches

@adamwoodnz Yes, if you have time to help wrap things up on this page, I'd appreciate it. As I see it, we'd need to do the following:

1. Create the pattern and CSS for the logos
2. Create logos and header in SVG format, add them to the theme since we can't upload (eventually, we should revisit this)
3. Change the logos and use the pattern on https://wordpress.org/enterprise-2/
4. Make any other tweaks that Francisco mentioned in his previous comment.

Let me know if you have any questions. This isn't a super-high priority, but it would be nice to have ready for next week.

Figma file

[ryelle]

Create logos and header in SVG format, add them to the theme since we can't upload (eventually, we should revisit this)

We have an active(ish) issue for that here: WordPress/wporg-mu-plugins#300 — In the meantime, we've been using pngs or webp with 90+ quality compression - depending on the size/quality tradeoff. For the logos, png will probably be fine, that's the approach used on the showcase section on the homepage.

[adamwoodnz]

OK I'll get a PR ready with a pattern for the page and any final custom CSS for the things mentioned above

[adamwoodnz]

PR is ready for review #157

[adamwoodnz]

I'm aware there are still some minor padding issues on some sections on mobile. I propose we get the initial code review done and merged, then we can apply the template to the test page and it'll be ready for a final design review.

[adamwoodnz]

@panchovm @javierarce code review is now complete on #157

We're looking to launch this next week, so any final design feedback would be appreciated please. See these screenshots #157 (comment)

cc @bengreeley