Make WordPress Core

Opened 10 years ago

Closed 10 years ago

Last modified 10 years ago

#34663 closed task (blessed) (fixed)

4.4 About Page

Reported by: wonderboymusic's profile wonderboymusic Owned by: ocean90's profile ocean90
Milestone: 4.4 Priority: normal
Severity: normal Version: 4.4
Component: Help/About Keywords: has-patch
Focuses: Cc:

Description

Tracking ticket.

Attachments (21)

34663.diff (10.3 KB) - added by DrewAPicture 10 years ago.
34663.2.diff (9.9 KB) - added by DrewAPicture 10 years ago.
34663.3.diff (15.5 KB) - added by ryelle 10 years ago.
34663.4.diff (15.5 KB) - added by DrewAPicture 10 years ago.
34663.5.diff (15.6 KB) - added by melchoyce 10 years ago.
34663.6.diff (16.0 KB) - added by wonderboymusic 10 years ago.
34663.7.diff (15.3 KB) - added by DrewAPicture 10 years ago.
34663.8.diff (15.3 KB) - added by ocean90 10 years ago.
Fixes quotes for term meta docs links
34663.9.diff (18.4 KB) - added by ocean90 10 years ago.
34663.10.diff (4.6 KB) - added by DrewAPicture 10 years ago.
34663.patch (1.4 KB) - added by ocean90 10 years ago.
34663.11.diff (654 bytes) - added by wonderboymusic 10 years ago.
34663.12.diff (1.7 KB) - added by wonderboymusic 10 years ago.
34663.13.diff (2.0 KB) - added by ocean90 10 years ago.
34663.14.diff (15.6 KB) - added by perezlabs 10 years ago.
34663.15.diff (3.8 KB) - added by joemcgill 10 years ago.
Add srcset and sizes to images
34663.16.diff (3.8 KB) - added by joemcgill 10 years ago.
34663.17.diff (1.9 KB) - added by wonderboymusic 10 years ago.
34663.images.patch (6.9 KB) - added by ocean90 10 years ago.
34663.18.diff (3.1 KB) - added by melchoyce 10 years ago.
34663.19.diff (3.6 KB) - added by melchoyce 10 years ago.

Download all attachments as: .zip

Change History (74)

This ticket was mentioned in Slack in #core by wonderboymusic. View the logs.


10 years ago

@DrewAPicture
10 years ago

#2 @DrewAPicture
10 years ago

  • Keywords has-patch added

34663.diff adds the untranslated strings in a patch.

#3 @joemcgill
10 years ago

@DrewAPicture srcset selection based on the "strength of your connection" is not a feature that any browsers have implemented yet, AFAIK. Maybe something like:

Sites now intelligently provide images in multiple resolutions based on screen size and display density. You don’t need to do anything to your content to enable responsive images; the only difference your visitors might notice would be faster page loads and a better experience across devices!

#4 @DrewAPicture
10 years ago

Props thus far: DrewAPicture, markjaquith, helen, nacin, liljimmi, mordauk, melchoyce, ryelle

Last edited 10 years ago by samuelsidler (previous) (diff)

@ryelle
10 years ago

#5 @ryelle
10 years ago

design implemented in 34663.3.diff -- still waiting on some media. The twentysixteen & "responsive images" images need to be optimized & uploaded to w.org; the cloudup gallery for "More third-party embeds" is also a placeholder, to be replaced with another new embed example (I think melchoyce is working on that?).

#6 @helen
10 years ago

  • I don't think we should keep that array of under the hood features to be printed out later, let's just move it back into HTML since it's not being randomized anymore.
  • Force the two separate REST API paragraphs to each be in a column. Having one line of the second one in the first column is awkward.
  • There are at least 2 too many exclamation points. Both sentences in "WordPress embeds" end that way.
  • Title casing is inconsistent. Which way do we go?
  • May be better to specify that that interacting with those new objects is more predictable/intuitive *in code*. For a user skimming the page, if your eye catches on comments/networks being more intuitive, that's a false statement.
  • Responsive images paragraph doesn't feel right to me. Multiple images aren't provided based on screen/device, a different one is chosen from multiple. The semicolon is weird in that it's not clear that the two halves of the sentence relate in terms of differences noticed, perhaps better just as an , and. I also think it's worth noting that you will also reap those benefits as you visit all those other WordPress sites around the web, rather than "so why are you telling me this if I'm not going to notice anything".
  • This was noted to me already, but Cloudup is not camelcased.
  • I know the Cloudup embed is meant to be temporary, but I think generally I would be wary of appearing to promote an Automattic thing more prominently than others. It's certainly not the intent nor is that a blocker, just want to keep that in mind as we choose an actual embed.

@melchoyce
10 years ago

#7 @melchoyce
10 years ago

Adjusted some of the title case inconsistencies and tweaked some of the Twenty Sixteen css in 34663.5.diff.

#8 @wonderboymusic
10 years ago

34663.6.diff fixes the CSS for the Cloudup iframe. Incidentally, Cloudup is slow as dirt. I added caching, but overall, not a great experience (might just be slow wifi). Maybe try VideoPress?

#9 @DrewAPicture
10 years ago

34663.7.diff addresses feedback from @helen in comment:6 and brings in the CSS changes from 34663.6.diff.

@ocean90
10 years ago

Fixes quotes for term meta docs links

@ocean90
10 years ago

#10 @ocean90
10 years ago

34663.9.diff uses the plugin details modal for the REST API plugin link. Just an idea. :-)


I added caching, but overall, not a great experience (might just be slow wifi). Maybe try VideoPress?

Both embeds should be cached, I think we should use the transient API here. For the make/core embed we should also ping systems to add server-side caching.

#11 @DrewAPicture
10 years ago

In 35763:

First pass of the 4.4 about page. Adds strings (not yet translatable) and screen shots (not CDN).

Props wonderboymusic, markjaquith, helen, nacin, liljimmi, mordauk, melchoyce, ryelle, ocean90, DrewAPicture
See #34663.

#12 @DrewAPicture
10 years ago

In 35765:

About page: Fix some minor string errors and simplify URL-building for the plugin install link for capable users.

Props ocean90, DrewAPicture
See #34663.

#13 @DrewAPicture
10 years ago

In 35766:

About page: Add non-breaking spaces to "Reddit Comments" and "Speaker Deck" oEmbed provider names to prevent line wrapping between the words.

Props ocean90.
See #34663.

#14 @DrewAPicture
10 years ago

In 35768:

About page: Final string changes.

Props petya, ocean90, DrewAPicture
See #34663.

#15 @DrewAPicture
10 years ago

In 35769:

About page: Make strings translatable.

See #34663.

#16 @ocean90
10 years ago

The tagline is still the old one:

Thank you for updating! WordPress 4.4 makes it even easier to format your content and customize your site.

#17 @markjaquith
10 years ago

  • Version changed from 4.4 to trunk

Responsive images plus various speed refactoring (comments) could be summarized as "responsive".

REST API and WordPress post embeds could be summarized as "connected".

Thus, my first swing:

Thank you for updating! WordPress 4.4 makes your site more connected and responsive.

#18 @markjaquith
10 years ago

Got good feedback on Slack and in person.

#19 @markjaquith
10 years ago

In 35780:

About Page: Add the WordPress 4.4 tagline.

"Connected" because of REST API and cross-site embeds.
"Responsive" because of responsive images and under-the-hood tweaks.

See #34663.

#20 @markjaquith
10 years ago

In 35798:

About Page: Add the WordPress 4.4 tagline.

"Connected" because of REST API and cross-site embeds.
"Responsive" because of responsive images and under-the-hood tweaks.

See #34663 for the 4.4 branch.

#21 follow-up: @markjaquith
10 years ago

Any outstanding items or issues?

#22 in reply to: ↑ 21 @ocean90
10 years ago

Replying to markjaquith:

Any outstanding items or issues?

[35780]/[35798] for credits.php and freedoms.php. :-)

@ocean90
10 years ago

#23 @ocean90
10 years ago

In 35812:

About: Sync tagline from about page with credits and freedoms.

See #34663.

#24 @ocean90
10 years ago

In 35814:

About: Sync tagline from about page with credits and freedoms.

Merge of [35812] to the 4.4 branch.
See #34663.

#25 @melchoyce
10 years ago

In 35816:

About: Update image of the Twenty Sixteen red color scheme so it matches the updated scheme color.

See #34663.

This ticket was mentioned in Slack in #core by ocean90. View the logs.


10 years ago

@ocean90
10 years ago

#27 @ocean90
10 years ago

In 35823:

About Page: Add Cloudup embed and cache the embeds as site transients.

Props wonderboymusic.
See #34663.

#28 @ocean90
10 years ago

In 35824:

About Page: Add Cloudup embed and cache the embeds as site transients.

Merge of [35823] to the 4.4 branch.

Props wonderboymusic.
See #34663.

@perezlabs
10 years ago

#29 @perezlabs
10 years ago

I added a new patch based on the solution of @melchoyce but from the new repository "develop.svn.wordpress.org" that uses the new directory structure, perhaps it can be useful when making the final commit. Hope that helps!

@joemcgill
10 years ago

Add srcset and sizes to images

#30 @joemcgill
10 years ago

34663.15.diff adds responsive image support to the images on the about page. The URLs used in the src and srcset attributes need to be updated once these are moved over to the CDN, but everything else should remain the same.

#31 follow-up: @nacin
10 years ago

I don't love the idea of every about page hitting two make.wordpress.org URLs, which are full page loads, to then discover the oEmbed endpoint, which we'll then hit, to then load the iframe. The long tail of that is gonna make Barry mad.

I think we should just commit the resulting oEmbed response directly onto the page.

Even better — should we use the wordpress.org/news announcement oEmbed, rather than a make/core explanatory page?

#32 follow-up: @melchoyce
10 years ago

Even better — should we use the wordpress.org/news announcement oEmbed, rather than a make/core explanatory page?

Can we do this? I wasn't sure if it would work, since the post won't be published until after the release goes live.

@joemcgill
10 years ago

#33 @joemcgill
10 years ago

34663.16.diff fixes a small typo in one of the srcset atts in 34553.15.diff.

#34 @wonderboymusic
10 years ago

In 35825:

About Page: use srcset for images, also known as Recursive Dogfooding.

Props joemcgill.
See #34663.

#35 @wonderboymusic
10 years ago

In 35826:

About Page: use the source of the Make/Core Embed response instead of discovering it (or reading from the cache) every time.

See #34663.

#36 @wonderboymusic
10 years ago

In 35827:

About Page: use srcset for images, also known as Recursive Dogfooding.

Merge of [35825] to the 4.4 branch.

Props joemcgill.
See #34663.

#37 @wonderboymusic
10 years ago

In 35828:

About Page: use the source of the Make/Core Embed response instead of discovering it (or reading from the cache) every time.

Merge of [35826] to the 4.4 branch.
See #34663.

#38 in reply to: ↑ 32 @nacin
10 years ago

Replying to melchoyce:

Can we do this? I wasn't sure if it would work, since the post won't be published until after the release goes live.

Yes. We'll know the URL. We can drop it in just before release (since it'll have the jazzer's name).


It looks like these images are fully optimized, yeah? In that case, @dd32 or @pento or me can move them to the .org CDN.

#39 follow-up: @melchoyce
10 years ago

It looks like these images are fully optimized, yeah?

They've been exported for web from Photoshop, but could probably go through another round of optimization through something like ImageOptim or https://tinypng.com/.

#40 in reply to: ↑ 39 @butterflymedia
10 years ago

Replying to melchoyce:

It looks like these images are fully optimized, yeah?

They've been exported for web from Photoshop, but could probably go through another round of optimization through something like ImageOptim or https://tinypng.com/.

I would recommend Kraken - https://kraken.io/web-interface

#41 in reply to: ↑ 31 @ocean90
10 years ago

Replying to nacin:

Even better — should we use the wordpress.org/news announcement oEmbed, rather than a make/core explanatory page?

+1. We should also try to get a featured image in so that both embeds have more or less the same height.

It looks like these images are fully optimized, yeah? In that case, @dd32 or @pento or me can move them to the .org CDN.

Working on this.

#42 @ocean90
10 years ago

In 35832:

About Page: Use w.org CDN for images.

See #34663.

#43 @ocean90
10 years ago

In 35833:

About Page: Remove three superfluous parentheses.

Props jaspermdegroot.
See #34663.

@melchoyce
10 years ago

#44 @melchoyce
10 years ago

Updated the embed sections to be rows rather than a section of columns and had @ryelle vertically center the text in 34663.18.diff.

@melchoyce
10 years ago

#45 @melchoyce
10 years ago

Fixed some lingering responsive issues in 34663.19.diff

#46 @wonderboymusic
10 years ago

In 35834:

About Page: use ReverbNation instead of Cloudup to avoid Ad Blocker cruff with tracking pixels. Adjust the layout accordingly, and improve the layout at smaller breakpoints.

Props melchoyce.
See #34663.

#47 @ocean90
10 years ago

In 35835:

About Page: Use w.org CDN, use ReverbNation instead of Cloudup, adjust the layout.

Merge of [35832], [35833], and [35834] to the 4.4 branch.

See #34663.

#48 @ocean90
10 years ago

In 35839:

About Page: Add release video and update post embed.

Props camikaos, siobhan, rosso99, wonderboymusic.
See #34663.

#49 @ocean90
10 years ago

  • Owner set to ocean90
  • Resolution set to fixed
  • Status changed from new to closed

In 35840:

About Page: Add release video and update post embed.

Merge of [35839] to the 4.4 branch.

Props camikaos, siobhan, rosso99, wonderboymusic.
Fixes #34663.

#50 @johnbillion
10 years ago

  • Version changed from trunk to 4.4

This ticket was mentioned in Slack in #core by pento. View the logs.


10 years ago

#52 @pento
10 years ago

In 35862:

About: Add a fallback -webkit-calc() to about.css

We forgot to run grunt precommit before [35834] was committed.

This change doesn't need to be backported to the 4.4 branch, as it only affects Chrome < 26, it's really just to clean up the behaviour of grunt precommit.

See #34663.

#53 @pento
10 years ago

To avoid needing [35862]-style commits in the future, I've added a new "run grunt precommit" step to the release checklist.

Note: See TracTickets for help on using tickets.