4.4 About Page

[wonderboymusic]

Tracking ticket.

[DrewAPicture]

34663.diff​ adds the untranslated strings in a patch.

[joemcgill]

@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!

[DrewAPicture]

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

[ryelle]

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?).

[helen]

• 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]

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

[wonderboymusic]

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?

[DrewAPicture]

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

[ocean90]

Fixes quotes for term meta docs links

[ocean90]

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.

[DrewAPicture]

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.

[DrewAPicture]

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.

[DrewAPicture]

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.

[DrewAPicture]

In 35768:

About page: Final string changes.

Props petya, ocean90, DrewAPicture
See #34663.

[DrewAPicture]

In 35769:

About page: Make strings translatable.

See #34663.

[ocean90]

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.

[markjaquith]

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.

[markjaquith]

Got good feedback on Slack and in person.

[markjaquith]

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.

[markjaquith]

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.

[markjaquith]

Any outstanding items or issues?

[ocean90]

Replying to markjaquith:

Any outstanding items or issues?

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

[ocean90]

In 35812:

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

See #34663.

[ocean90]

In 35814:

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

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

[melchoyce]

In 35816:

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

See #34663.

[ocean90]

In 35823:

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

Props wonderboymusic.
See #34663.

[ocean90]

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]

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]

Add srcset and sizes to images

[joemcgill]

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.

[nacin]

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?

[melchoyce]

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]

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

[wonderboymusic]

In 35825:

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

Props joemcgill.
See #34663.

[wonderboymusic]

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.

[wonderboymusic]

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.

[wonderboymusic]

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.

[nacin]

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.

[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/.

[butterflymedia]

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

[ocean90]

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.

[ocean90]

In 35832:

About Page: Use w.org CDN for images.

See #34663.

[ocean90]

In 35833:

About Page: Remove three superfluous parentheses.

Props jaspermdegroot.
See #34663.

[melchoyce]

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]

Fixed some lingering responsive issues in 34663.19.diff​

[wonderboymusic]

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.

[ocean90]

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.

[ocean90]

In 35839:

About Page: Add release video and update post embed.

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

[ocean90]

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.

[pento]

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.

[pento]

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