Making WordPress.org

Opened 6 years ago

Closed 6 years ago

Last modified 6 years ago

#3673 closed task (blessed) (fixed)

Improve WordPress download page

Reported by: obenland's profile obenland Owned by: obenland's profile obenland
Milestone: Priority: normal
Component: General Keywords:
Cc:

Description (last modified by obenland)

Let's take @mapk's design and @melchoyce's updates to it, and come up with a more useful downloads page for WordPress.

Background:
โ€‹https://make.wordpress.org/meta/2016/02/29/get-wordpress-improving-the-path-to-wordpress/
โ€‹https://make.wordpress.org/meta/2016/03/23/get-wordpress-mockups/

Mark's original mockups:
โ€‹https://cloudup.com/cqnVMWCehkK

Current iteration:
โ€‹https://test.wordpress.org/get/

Attachments (6)

Get v3.pngโ€‹ (1.0 MB) - added by obenland 6 years ago.
Get v3 Fancy.pngโ€‹ (1.2 MB) - added by obenland 6 years ago.
dotorg-get-3.sketchโ€‹ (479.0 KB) - added by obenland 6 years ago.
Web-color-black-transparent-267x75.pngโ€‹ (8.9 KB) - added by chanthaboune 6 years ago.
SiteGround Logo
bluehost.svgโ€‹ (1.5 KB) - added by chanthaboune 6 years ago.
Bluehost Logo
dh-logo-70px.pngโ€‹ (9.0 KB) - added by chanthaboune 6 years ago.
DreamHost Logo

Change History (80)

#1 @obenland
6 years ago

  • Description modified (diff)

@obenland
6 years ago

#2 @obenland
6 years ago

@melchoyce's updates:
โ€‹https://wp.invisionapp.com/share/4DKKAVCFTYV

I also attached them to this ticket for posterity.

#3 @obenland
6 years ago

We should discuss these suggestions and decide on which elements we want to go with. Maybe during one of the upcoming meta chats @tellyworth?

#4 @obenland
6 years ago

In 7322:

Main: Resurrect Get page template.

Removed in [6116] to not interfere with front page work, it will now serve as the foundation for the new Get WordPress design.

See #3673.

#5 @obenland
6 years ago

Current iteration is available at โ€‹https://test.wordpress.org/get/

Design, URL, template name, pretty much everything, is subject to change of course.

#6 @obenland
6 years ago

  • Description modified (diff)

#7 @mapk
6 years ago

Current iteration is available at โ€‹https://test.wordpress.org/get/

It's lookin' good, @obenland!

I think some of the vertical rhythm needs adjusting here. Most, or all, of these red boxes should be approximately the same height.

https://cldup.com/QhYg6fsz2u.png

#8 @obenland
6 years ago

In 7324:

Main: Vertical rhythm for Get & About page headers

Brings page headers for Get and About pages in line with the Plugin Directory header.

Props mapk.
See #3673.

#9 @obenland
6 years ago

In 7325:

Main: Improve vertical rhythm on Get page

Props mapk.
See #3673.

#10 @obenland
6 years ago

We should start making decisions soon on which direction we should go design-wise.

By default, .entry-content has a max-width, so if we could avoid having a special case here for a full-width gray background, I'd like that. I like the continuation of the shapes design-pattern for the hosting part, but find it a bit much in the Guides section.

Guides is also something that might make for a good v2, as we don't really have those guides available yet, afaik.

#11 @obenland
6 years ago

In 7327:

Main: Improved responsive styles for Get

See #3673.

#12 follow-up: @tellyworth
6 years ago

Some notes:

  • Use the software that powers over 30% of the web. - is there a better noun than "software" that works here?
  • Priceless, and also free - needs explanation. The words "open source" don't appear on this page.
  • Having the Requirements column in a smaller font looks slightly off to me. Possibly because it has 2 paragraphs and so looks otherwise similar to the left col beside it.
  • Discover other ways to get WordPress seems redundant since the page it links to has primary content that is very similar to this section. If it said something about open source and linked directly to โ€‹https://wordpress.org/download/source/ or better I'd be happier.
  • The Bluehost and WordPress.com typefaces feel unbalanced. I know they can't really balance because of text size differences but it looks like a mistake because the colours and fonts are similar.
  • Should the hosting logos and names be linked?
  • The App Store button has a grey border around it (part of the image) that makes it look fuzzy or pixellated by comparison to the Google Play button.

#13 @obenland
6 years ago

In 7331:

Main: Update Google Play badge.

See #3673.

#14 in reply to: โ†‘ย 12 @obenland
6 years ago

Replying to tellyworth:

  • The Bluehost and WordPress.com typefaces feel unbalanced. I know they can't really balance because of text size differences but it looks like a mistake because the colours and fonts are similar.

Yeah, that is a bit unfortunate. The logos are exactly the same size, it's just the font that's different. Short of using a different wp.com logo, I'm not sure how to change that

  • The App Store button has a grey border around it (part of the image) that makes it look fuzzy or pixellated by comparison to the Google Play button.

It's the way โ€‹Apple's marketing guidelines ask us to use it. However it looks like Google updated theirs recently, โ€‹and now they both look equally bad.

#15 @obenland
6 years ago

In 7332:

Main: Add parallelogram to Get page.

Props melchoyce.
See #3673.

This ticket was mentioned in โ€‹Slack in #meta by obenland. โ€‹View the logs.


6 years ago

#17 @Clorith
6 years ago

Some thoughts I had when looking it over:

  • Will the hosts be rotating, and is WordPress.com being added as a featured host on .org?

If they are static, it further blurs the lines of .com vs .org if we add .com as a prominent host on the downloads page, potentially leading to more confusion?
I also suspect we'll see more complaints of the same kind we had when the hosting page was updated, maybe even more as this is a much more prominent location.

  • The requirements text needs to be refined (we recommend PHP 7.2, so the combined PHP/MySQL line won't work).
  • Should we have some more spacing or something between the hosts on mobile? the spacing between the "Visit <host>" link and the next host logo is the same, there's no natural separation between the two hosts then.
  • I also agree with @tellyworth that "Priceless, and also free" needs to be defined better somehow, considering more and more people are starting to realizing the concept of "If you don't pay for a product, you are the product".
  • The text under the sections are wide block links, I was surprised when I suddenly clicked a link when not scrolling on a tablet, as I touched the screen then changed my mind about scrolling further. Could we change these to be just the text as a link?

#18 @karmatosed
6 years ago

Overall this looks really great. I have a few bits of feedback.

Firstly, the background when on smaller screens seems a little weird, I for a moment thought I had a smudged screen.

The 'discover other ways to get WordPress' feels a little lost and close to the next section. If we mean it to be understated why is it in the top section?

I do wonder about the grid of having 2 / 1 at the top and then 1 / 1. It feels a little off to me but if the copy is fixed I am not sure of a better option. I do think it would be less jarring without reducing the font size on the requirements section.

The 'visit bluest/wp.com' and 'feel all recommended hosts' links feel very lost to me in text. Perhaps bringing in a different color or making these more prominent? Again the 'see all of our link totally gets lost for me'.

'Learn more about our mobile apps' also suffers from this. Perhaps we could solve this by not having such a small font? Keeping it the same as the body seems a good way forward here and aligns with the about us pages.

On smaller devices this page shines, which is so great. I would probably suggest scaling back the typography scale a little on smaller devices, those headers are huge! Also reducing some line heights and spacing would tighten it all up nicely.

Last edited 6 years ago by karmatosed (previous) (diff)

This ticket was mentioned in โ€‹Slack in #meta by obenland. โ€‹View the logs.


6 years ago

#20 @kjellr
6 years ago

This is looking great! I really like that we're moving the mobile app section to the top of the page on small screens. Great move. ๐Ÿ™Œ

A few minor suggestions:

I agree with @karmatosed that the 2/1 grid at the top seems a little odd on larger screens. Maybe we could place the Installation + Release Notifications items side by side, and slide the Requirements in below?

https://cldup.com/xP3FG_HWnI-3000x3000.png


Between 480px and 768px wide, the host blocks have no top margins. This makes the "Visit Bluehost" link appear closer to the WordPress.com logo than to the Bluehost content. We use 2rem top margins for these blocks on small screens, and I'd probably adapt those at this breakpoint too.

https://cldup.com/2KvfI5iN3s-3000x3000.png


... In fact, I'd recommend keeping that 2rem top margin on all breakpoints. ๐Ÿ™‚ I like that it gives the host blocks equal top/bottom spacing:

https://cldup.com/t5Q7S8P0tE.thumb.jpg


I think the parallelogram usage would be more successful if we removed the lighter one underneath. Since the lighter one is so light (yet also so similar in tone to the darker parallelogram), its presence makes the top parallelogram less distinct. If the darker parallelogram were alone against white, it'd be a bit more clear:

https://cldup.com/-mWI5y2KoY-2000x2000.png


Finally, I'm seeing some horizontal scroll overflow on all the browsers I tried (Safari 11.1, Chrome 67, Safari on iOS 11.4.1)

https://cldup.com/LHxIb7U1Ca.gif

#21 @obenland
6 years ago

In 7335:

Main: Tighten up Get page design.

  • Balanced columns in download section.
  • Consistent vertical margin in hosting section.
  • More distinct parallelogram in hosting section.
  • Avoid horizontal overflow on small screens.

Props kjellr, karmatosed.
See #3673.

#22 @kjellr
6 years ago

The updates look great! One other suggestion:

The big download button is sort of floating by itself:

https://cldup.com/CNHHuMdYHc-3000x3000.png

Since the text above conceptually leads into the button, I think it'd be reasonable to remove the 2rem of margin above the button and place it closer to the text. We could add that margin to the bottom of the button instead, so that whole text/button block centered vertically in the whitespace:

https://cldup.com/y5j54Co4z_-3000x3000.png

#23 follow-up: @chanthaboune
6 years ago

@Clorith Yes, the hosts listed there will be randomized from the complete list of recommended hosting options.

@obenland @tellyworth If I'm honest with myself, I really dislike using the vibrant polygons behind the Guides call outs.

#24 in reply to: โ†‘ย 23 ; follow-up: @obenland
6 years ago

Replying to chanthaboune:

Yes, the hosts listed there will be randomized from the complete list of recommended hosting options.

Will the WordPress.com blurb be part of the rotation? Do you know who I can get in touch with for logos and text blurb for the other two hosts?

If I'm honest with myself, I really dislike using the vibrant polygons behind the Guides call outs.

Those guides don't exist yet anyway, right? That's probably a bridge that can be crossed when we get there.

Last edited 6 years ago by obenland (previous) (diff)

This ticket was mentioned in โ€‹Slack in #meta by tellyworth. โ€‹View the logs.


6 years ago

#26 in reply to: โ†‘ย 24 ; follow-up: @chanthaboune
6 years ago

Replying to obenland:

Will the WordPress.com blurb be part of the rotation? Do you know who I can get in touch with for logos and text blurb for the other two hosts?

Yes, it's part of the rotation. I can reach out to the other hosts (SiteGround, Bluehost, DreamHost) and get updated info.

If I'm honest with myself, I really dislike using the vibrant polygons behind the Guides call outs.

Those guides don't exist yet anyway, right? That's probably a bridge that can be crossed when we get there.

Sure that works for me!

Last edited 6 years ago by obenland (previous) (diff)

#27 @obenland
6 years ago

In 7348:

Main: Filter Rosetta-dependent templates.

Makes sure templates that depend on $rosetta being available can't be selected if it's not.

See #3673.

#28 in reply to: โ†‘ย 26 @dryanpress
6 years ago

Replying to chanthaboune:

Replying to obenland:

Will the WordPress.com blurb be part of the rotation? Do you know who I can get in touch with for logos and text blurb for the other two hosts?

Yes, it's part of the rotation. I can reach out to the other hosts (SiteGround, Bluehost, DreamHost) and get updated info.

If I'm honest with myself, I really dislike using the vibrant polygons behind the Guides call outs.

Those guides don't exist yet anyway, right? That's probably a bridge that can be crossed when we get there.

Sure that works for me!

Hi all, Dave here from Bluehost. I've asked our head of marketing to evaluate the blurb and I can get the latest vector logo to you!

#29 @obenland
6 years ago

In 7357:

Main: Make releases page work with w.org

See #3673.

#30 @obenland
6 years ago

In 7360:

Main: Make child header work for any child page

...and not just for child pages of the About page.

See #3673.

#31 @obenland
6 years ago

In 7362:

Main: Add two more page templates for download

Also makes History page translatable.

See #3673.

#32 @obenland
6 years ago

In 7364:

Main: Enqueue nav script on all child pages

See #3673.

#33 @obenland
6 years ago

In 7366:

Main: Update version requiremnts.

Props presskopp.
See #3673.

#34 @obenland
6 years ago

In 7367:

Main: Update page templates to work as templates

Includes changes that makes the releases page template usable on child pages as well.

See #3673..

#35 @obenland
6 years ago

In 7368:

Main: Update parent page name

See #3673.

#36 @obenland
6 years ago

In 7369:

Main: Confine title check to pages.

Prevents PHP notices when called on 404 pages or in the admin.

See #3673.

#37 @obenland
6 years ago

@kjellr Would you mind taking another look at this? I ported over the child pages from the existing download page that we will need to link to, but the new design doesn't really offer an easy way to do that.

The existing download page with navigation: โ€‹https://wordpress.org/download/

The new download page: โ€‹https://test.wordpress.org/download/

The child pages are:

For the About page we solved it by adding a paragraph of links to all child pages half way down the page: โ€‹https://wordpress.org/about/

Any ideas here are greatly appreciated.

Last edited 6 years ago by obenland (previous) (diff)

#38 @francina
6 years ago

Hello!
Francesca for SiteGround. Here is the blurb.

Weโ€™re hosting experts, so you donโ€™t have to be. Get top-tier website performance and support regardless of your technical skill. Join millions of happy clients using our WordPress services featuring all the help you need at a price youโ€™ll love.

I'll send the logo to Josepha via email :)
Thanks!

#39 @obenland
6 years ago

In 7374:

Main: Itroduce download counter page template.

See #3673.

#40 @obenland
6 years ago

In 7375:

Main: PHPCS updates

See #3673.

#41 @kjellr
6 years ago

Would you mind taking another look at this? I ported over the child pages from the existing download page that we will need to link to, but the new design doesn't really offer an easy way to do that.

@obenland Here's a attempt at incorporating those links. This is pretty straightforward โ€”ย it borrows the text styles from the "Visit XXX" links in the host callout, and just adds a simple horizontal rule above them on desktop.

https://cldup.com/qSe8BuEY19-3000x3000.png

https://cldup.com/n-nWfNVSTh-2000x2000.png

#42 @obenland
6 years ago

@kjellr Thanks for spending time on this!

Do you think we could find a way to give them context and make them flow a little more with the page? I wonder if they should be given a bit more prominence too, maybe before the hosting section?

When I first looked at the screenshot I did not see the links and thought it was a before picture, only when I got to the mobile view I realized I should double-check :)

#43 follow-up: @kjellr
6 years ago

Do you think we could find a way to give them context and make them flow a little more with the page? I wonder if they should be given a bit more prominence too, maybe before the hosting section?

What sort of context did you have in mind? A label/description or some sort?

In terms of prominence + placement, my thought was that these links on the whole seemed potentially less helpful to visitors of the page than the hosting section. That said, where will the "Discover other ways to WordPress" link point to? I noticed it's not working yet. If that link is meant to be a similar secondary/tertiary link, we could theoretically slot these links in alongside it.

Alternatively, I did explore a slightly more prominent version that might help address the easily-missable quality on desktop:

https://cldup.com/hXzgsYyT4z-3000x3000.png

#44 in reply to: โ†‘ย 43 @obenland
6 years ago

Replying to kjellr:

What sort of context did you have in mind? A label/description or some sort?

Yeah, I think โ€‹the About page is a great example for giving context to child page links. There they just feel like part of the content.

where will the "Discover other ways to WordPress" link point to?

I don't know :) It's part of @mapk's designs so I added it. He's been afk so I haven't had a chance to ask him yet.

Alternatively, I did explore a slightly more prominent version that might help address the easily-missable quality on desktop

Sorry for being difficult, but I think they still get kind of lost in the sea of footer links. Even with the parallelogram background, with it having the same background color as the footer.

I wish I could be more helpful here, but I'm at a loss too.

#45 @obenland
6 years ago

In 7379:

Main: Randomize which hosts to show on Get page

We'll enable additional hosts as they submit their assets.

See #3673.

#46 @obenland
6 years ago

In 7382:

Main: Add host on Get page.

See #3673.

#47 @obenland
6 years ago

In 7383:

Main: Re-introduce link to tar.gz package.

See #3673.

#48 @obenland
6 years ago

In 7384:

Main: Bring download button closer to intro text

Props kjellr.
See #3673.

#49 @kjellr
6 years ago

I think the About page is a great example for giving context to child page links. There they just feel like part of the content.

Yeah, I see. If we were to borrow that treatment, perhaps something like this makes sense?

https://cldup.com/2m2eZr-5I8-3000x3000.png

Walking into this fresh, I'll note that it seems weird to work out sub-navigation on a page by page basis like this. Ideally we can establish a pattern that'll be consistent across all these pages (both in terms of treatment and placement).


where will the "Discover other ways to WordPress" link point to?

I don't know :) It's part of @mapk's designs so I added it. He's been afk so I haven't had a chance to ask him yet.

No worries. When Mark's back he can fill us in regarding that link. He may have some good feedback on these child links in general. ๐Ÿ™‚

#50 @SergeyBiryukov
6 years ago

@obenland Could we use a consistent URL for the Hosting page?

  • In front-page.php it links to the main site:
    esc_url( 'https://wordpress.org/hosting/' )
    
  • In page-about-requirements.php and page-get.php the link is relative and shows a 404 error on Rosetta sites (e.g. โ€‹https://ru.wordpress.org/hosting/):
    esc_url( home_url( '/hosting/' ) )
    

It should either have a centralized URL or be a translatable page, not a mix of both :)

#51 @obenland
6 years ago

In 7389:

Main: Always link to main Hosting page.

For as long as there is no page template for Rosetta sites for it, let's make sure these links lead to the intended location.

Props SergeyBiryukov.
See #3673.

@chanthaboune
6 years ago

Bluehost Logo

This ticket was mentioned in โ€‹Slack in #meta by chanthaboune. โ€‹View the logs.


6 years ago

@chanthaboune
6 years ago

DreamHost Logo

#53 @obenland
6 years ago

In 7391:

Main: Add links to child pages from Get page.

Props kjellr.
See #3673.

#54 @obenland
6 years ago

In 7392:

Main: Update host logos.

Props chanthaboune.
See #3673.

#55 @chanthaboune
6 years ago

I have editorial-approved copy for the hosts!

Bluehost has turned passion for WordPress into the fastest, simplest managed platform for your websites. Recommended by WordPress since 2005, each WordPress package offers a free domain, free SSL, and 24/7 support.

SiteGround offers top-tier website performance and support regardless of your technical skill. Join millions of happy clients using their WordPress services to get the help you need at prices you love.

Privacy-focused and dedicated to the Open Web, DreamHost provides some of the most powerful and secure managed WordPress environments in the world.

#56 @obenland
6 years ago

In 7394:

Main: Update host descriptions.

Props chanthaboune.
See #3673.

#57 @obenland
6 years ago

In 7400:

Main: Surprise! Get is now Download.

See #3673.

#58 @obenland
6 years ago

In 7401:

Main: Add page templates and compiled styles.

See #3673.

#59 @obenland
6 years ago

In 7403:

Main: Show hashes on their own line.

See #3673.

#60 @obenland
6 years ago

In 7405:

WPorg: Make lists in general flow better w/ text

See #3673.

#61 @obenland
6 years ago

In 7406:

WPorg: Hide download link on download pages

See #3673.

#62 @obenland
6 years ago

In 7408:

Main: Trailingslashit to avoid a redirect

See #3673.

#63 @obenland
6 years ago

  • Resolution set to fixed
  • Status changed from assigned to closed

In 7409:

Main: Remove unused widget and page templates

These are now handled by the page-download* templates.

Fixes #3673.

#64 @obenland
6 years ago

In 7410:

Main: Serve localized packages on Rosetta.

Props ocean90.
See #3673.

#65 @obenland
6 years ago

In 7411:

Main: Uncouple background width from word count

Makes sure the download count doesn't bump against container borders.

Props presskopp, jcastaneda.
See #3673.

#66 @obenland
6 years ago

In 7412:

Main: Display requirements like the other blurbs

Props mapk.
See #3673.

#67 @obenland
6 years ago

In 7413:

Main: capital_H_dangit();

Props brettface.
See #3673.

#68 @obenland
6 years ago

In 7418:

Main: Use localized titles for download pages

Props fierevere.
See โ€‹https://wordpress.slack.com/archives/C02QB8GMM/p1531247470000469
See #3673.

#69 @obenland
6 years ago

In 7421:

Main: Update page template name

Reflects hierarchical use of the page template.

See #3673.

#70 @obenland
6 years ago

In 7422:

Main: Add 'Download' to parent page titles.

Allows it to be translated when displayed on child pages.

See #3673.

#71 @obenland
6 years ago

In 7423:

Main: Remove back-compat code

No longer needed after launch of Get pages.

See #3673.

#72 @obenland
6 years ago

In 7429:

Main: Use optimized app store icons

Resizes them to the size needed.

See #3673.

#73 @obenland
6 years ago

In 7432:

Main: Use minified scripts.

See #3673.

#74 @obenland
6 years ago

In 7435:

Main: Keep jQuery on stats pages as well

Props clorith.
See #3673.

Note: See TracTickets for help on using tickets.