3.8 needs a slick About page

[matt]

The about.php in 3.8-RC1 is still the 3.7 one, we need to update the page to highlight our new headline features -- dashboard, theme browser, 2014, and the general admin redesign.

[melchoyce]

I took a stab at designing a first draft for the 3.8 about page: ​https://cloudup.com/cdeiaPfdB4w

Larger version attached.

[jcastaneda]

Nicely done Mel considering that does look like quite a bit of information to take in. :)

[lancewillett]

Twenty Fourteen about page copy.

(Title)
Sleek New Magazine Theme

(Body)
Our new default theme lets you create a responsive magazine website with a sleek, modern design.

Feature your favorite homepage content in either a grid or a slider. Use the three widget areas to customize your website, and change your content's layout with a full width page template and a contributor page to show of your authors.

Creating a magazine website with WordPress has never been easier.

(Screenshots to come. Trying out both a device-layout with tablet, phone, and laptop and a more traditional chrome-less homepage example.)

[lancewillett]

Screenshot of Twenty Fourteen in action, on various devices -- props iamtakashi

[lancewillett]

Normal Twenty Fourteen screenshot without devices -- props iamtakashi

[lessbloat]

Dash about page copy:

(Title)
A more streamlined dashboard

(Body)
See site content, your recent activity, and site stats at a glance.

Quick Draft for when inspiration strikes
Get your thoughts down quickly before your fickle muse disappears.

Consolidated news
Keep up with WordPress news and the top blogs and posts.

Choose your focus
Fully customize your dashboard experience under Screen Options. Re-order sections to put what’s most important to you, front and center.

(props to Krista Stevens for some help with the copy)

[lessbloat]

dash.png is a full screen (PNG optimized) retina shot with mock info. Feel free to just show a portion of it.

[matveb]

Themes draft:

(Title)
New theme experience

(Body)
A sleeker, faster, and more visual organization of your themes that is responsive.

(Browsing)
Enjoy a focused experience with theme screenshots at the center. Quickly search through your themes or add new ones.

(Dive into the details)
Expand a theme to see more information and preview it. Use the arrow navigation to quickly swift through your themes.

(Updates)
Identify immediately when there's a theme update available.

[melchoyce]

Started filling in content into the wireframe. The text there for MP6 isn't finalized yet, just wanted to see how it would fit. I can put together a high-fidelity mockup later tonight.

matveb / lessbloat / lancewillett, let me know if the layout of your respective sections work okay for you.

[lancewillett]

@melchoyce Looking good! Can you change the following to remove second "sleek" word please?

Replying to lancewillett:

Twenty Fourteen about page copy.

Our new default theme lets you create a responsive magazine website with a sleek, modern design.

Our new default theme lets you create a responsive magazine website with an elegant, modern design.

[melchoyce]

Replying to lancewillett:

@melchoyce Looking good! Can you change the following to remove second "sleek" word please?

Sure, will fix.

[shaunandrews]

To really hammer in the responsive aspect, maybe each section could include a different device by the main screenshot showing an alternate view at the various screen sizes. For example, put a Nexus 7 next to the theme screenshot with the grid view.

[melchoyce]

Skipped the high-fidelity mockup and decided to go straight to code. 26387.diff​ is my first draft of the About page. It includes the text from matveb / lancewillett / lessbloat, but is currently missing images.

shaunandrews: I like your idea of pushing responsive. Let's do it.

For the very first image on the page, the full-width image underneath "Introducing a new, modern admin design", I was thinking it could be fun to do something fun like the top image on ​http://vip.wordpress.com/, or have some sort of animation featuring different color schemes.

[melchoyce]

lancewillett: Do you have a copy of the twenty fourteen + devices image with a transparent background, by any chance?

[melchoyce]

Updated with a progress shot and patch of what I have so far. Still very much a work in progress. ryelle is going to build a color scheme previewer into the page tomorrow while iammattthomas and I continue to work on screenshots and style tweaks.

[celloexpressions]

It seems odd that we don't mention the name of our new default theme. "Twenty Fourteen: A Sleek New Magazine Theme"?

We should keep in mind that for a lot of users, this page will be the first time they see the new admin design. If they don't know about MP6/the new design, it might be a jarring experience (think about the first time you saw MP6). We should ensure that we ease users into it by removing all recollections of the old design.

In that vein, we should drop or change the browser chrome on the first image (and maybe remove the iPhone, we have plenty of other responsive device pics below). OSX's window styling represents everything we moved away from in the new design: low-contrast/gray, gradient, glassy buttons, nibbled corners, and the big shadow on the whole thing. If we really want to show a browser window, Windows 8 fits a lot better, but showing it framelessly would be best, so that all of the visuals are consistent with the new admin design right at the start.

Also, I know they're still in-progress, but we should make sure that all of the screenshots are consistent in either showing or hiding the browser UI chrome. Currently they're mixed-and-matched.

[iammattthomas]

In 26718:

Committing a first pass at a new About page for 3.8. See #26387, props melchoyce.

[iamtakashi]

Replying to melchoyce:

lancewillett: Do you have a copy of the twenty fourteen + devices image with a transparent background, by any chance?

I've attached one with a transparent background: twentyfourteen.2.png.

[dimadin]

• We’re should be We’re
• "Now with more color" isn't i18n
• Image with color schemes is still on Cloudup

(last two are maybe left on purpose, thats why I didn't patch it)

Also note that practice was to leave unfinished strings on "About" unmarked for translation to avoid thing like ​this.

[atimmer]

The version in the "Thank you for updating to Wordpress 3.8!" string shouldn't be hardcoded.

See also [25927] which was needed for 3.7

[iammattthomas]

In 26719:

Updates to the About page:

• Better screenshots
• Align screenshots with the dividers between sections
• Increase body text size
• Add a mention of Twenty Fourteen by name
• i18nalize 'Now with more color'
• Replace ’ with ’

See #26387.

[iammattthomas]

In 26720:

Slight adjustment to centered headlines in About page. See #26387.

[iammattthomas]

In 26721:

Switch this header on the ABout page from title case to sentence case to match the style of all other headers on the page. See #26387.

[markoheijnen]

Fix displaying version number

[nacin]

In 26723:

Un-translate all of the about page strings so translators don't start working on incomplete copy. see #26387.

[siobhan]

made a bunch of text changes and edits

[markoheijnen]

In my patch I fixed the issue atimmer raised with the version numbering. I'm curious if displaying the version 3 times isn't a bit overkill

[ryelle]

26387.4.diff​ adds the color scheme picker to the about page. Just as a preview, this does not auto-save. Also removes the password meter CSS/JS.
I noticed a bug with color scheme preview & RTL- fixed in about.js, see #26455.

26387.6.diff​ merges in 26387.5.diff​'s text changes.

[siobhan]

Refined the THX section a little

[melchoyce]

Sorry siobhan, looks like we patched at about the same time.

26387.7.2.diff​ adds new images for the callout section at the top to 26387.6.diff​. Images also attached. It does not include 26387.7.diff​​.

[melchoyce]

Unless iammattthomas has some design tweaks to the images I posted, the only thing we're really missing now is text for the bottom three "under the hood" callouts. Does anyone want to take a stab at writing something for those?

[nacin]

Replying to melchoyce:

Unless iammattthomas has some design tweaks to the images I posted, the only thing we're really missing now is text for the bottom three "under the hood" callouts. Does anyone want to take a stab at writing something for those?

I think we need to figure out what they're actually going to be. I'll try to drum something up in IRC.

[nacin]

#26229 was marked as a duplicate.

[melchoyce]

Ignore 26387.7.2.diff​ — I'm making a new patch based on 26387.7.diff​.

[melchoyce]

26387.8.diff​ builds on top of 26387.7.diff​, adding new callout images(about-contrast.2.png​, about-modern-aesthetics.2.png​, and about-typography.png​).

"Under the hood" has been removed, per this IRC conversation: ​https://irclogs.wordpress.org/chanlog.php?channel=wordpress-dev&day=2013-12-06&sort=asc#m747139.

Additionally, I've changed some markup to be more specific. This should prevent any conflicts with plugins like bbPress (#26229).

[iammattthomas]

In 26737:

Updates to the About page:

• A live color scheme preview
• Replace the hard-coded version number
• Copy edits
• New screenshots
• Size adjustments to the header and WP badge
• Capitalize 'Open Sans'

See #26387, props markoheijnen, ryelle, siobhan, melchoyce.

[DrewAPicture]

I have some visual concerns with the current iteration of the About page. Beware, this may be an unpopular opinion.

1. I feel like we have gone a little bit overboard on the device screenshots here.

I count:

• 2 non-iPhones together
• 1 non-iPhone + a Chrome window
• 1 iPhone
• 3 iPhones together
• an iPad + an iPhone together
• a MacBook

Yikes. If I didn't think we already had too many devices, I'd say, where's the PC love?

2. Let's all change themes on our phones

I get that the new admin interface is super mobile friendly, but realistically, could we not just as effectively show off the UI with a simple desktop screenshot?

3. The page seems top-heavy with images. Maybe find a way to break that up just a bit. One line with five words, then boom! 4 images.

[ryelle]

Looks like the color scheme fallback image didn't get committed: about-color-schemes.png​ is displayed when someone doesn't have color schemes to pick from.

[iammattthomas]

In 26742:

Add missing about.color-schemes.png. See #26387.

[markoheijnen]

I do agree with Drew on that. I'm curious if we could change the image for "A new theme experience". I think if that is just a screenshot it would look a bit better. Then the images would be: mobile - screen - mobile - screen - mobile if you know what I mean.

[ryelle]

Added autosave for color schemes (and removed RTL handing)

[iammattthomas]

In 26746:

Adding autosave for color schemes and removing RTL handling. See #26387, props ryelle.

[iammattthomas]

In 26750:

Visual refinements to the About page and screenshots. See #26387.

[iammattthomas]

In 26751:

I believe we're consistent about capitalizing Open Source elsewhere. See #26387.

[iammattthomas]

In 26754:

On the About page: comprise > compromise, assuming that this is a typo. See #26387.

[iammattthomas]

In 26760:

Use non-breaking spaces before the last word in headlines to prevent widows when wrapping at responsive sizes. See #26387.

[iammattthomas]

In 26763:

Copy edits to the About page:

• Open Sans is Open Source, so it can't meet Open Source
• 'icons and graphics' is redundant
• Let's not overuse 'beautiful'
• Choose > pick so we don't use 'choose' twice in the same line

See #26387.

[nacin]

In 26764:

Use   instead of   as it's more familiar to translators.

See #26387, [26760].

[iammattthomas]

In 26768:

Making some adjustments to the hero screenshot image on the About page, see #26387.

[iammattthomas]

In 26769:

Nudging a few pixels that were out of place. See #26387.

[iammattthomas]

In 26775:

Updated about page screenshots with more colors, updated typography shot, simplified hero screenshot of desktop browser. See #26387.

[nacin]

In 26776:

Core updates for the new color schemes.

• Update about page, there's now 8.
• Display them four wide, not three, and ensure adequate spacing.
• Use a dedicated nonce.
• Push Light to the front in addition to Default.
• Use user-profile.js on about.php. A few extra things are initialized but they are harmless.

see #26468, #26387.

[nacin]

In 26777:

Freedoms/Credits: Allow for big first paragraphs, overridden by the font-size change in [26719]. Reduced slightly to prevent wrapping on freedoms.

see #26387.

[iammattthomas]

In 26779:

Fix a missing drop shadow on about-colors, make sure screenshot lines up with columns below in about-overview. See #26387.

[iammattthomas]

In 26787:

Updated About page screenshots; better image reduction with sharper text, hiding all browser chrome in device screenshots, correct the proportions of phone and tablet in Twenty Fourteen screenshot. See #26387.

[iammattthomas]

In 26789:

A few more adjustments to about page screenshots, with better sample content. See #26387

[iammattthomas]

In 26790:

Correcting the device proportions on the Twenty Fourteen screenshot; see #26387.

[iammattthomas]

In 26791:

Minor adjustments to the Twenty Fourteen screenshot on the About page. See #26387.

[iammattthomas]

In 26792:

Adjusting about-colors.png so it lines up on the grid with images above and below it. See #26387.

[nacin]

In 26794:

Remove 3.7 about images. see #26387.

[nacin]

In 26795:

About screen: Only show the pick-a-color section if there are 2 or more of the eight new color schemes available. And only show the eight core schemes.

This hides the section in develop.svn /src's directory (use /build for colors) and when a plugin is manipulating/unregistering colors. In both situations, which are rare, losing the section is fine.

This removes a fallback image as we were previously showing the section in these cases; the rest of the page shows off the design (and color opportunities) well enough on its own to avoid this confusing section.

see #26387.

[nacin]

In 26798:

Remove image referenced as removed in [26795]. see #26387.

[nacin]

In [26799]: About page: Don't load zxcvbn, which is a dependency of an unused piece of user-profile.js.

Normally I would split user-profile.js here, moving the admin-color-scheme-picker bits into a separate file. At this stage in the game, though, that's a lot of work for something that is temporary for 3.8. I'd rather keep it as one file for now, pending future JS cleanup/reorganization.

[DrewAPicture]

In 26801:

A couple of copy edits for the About page.

See #26387.

[iammattthomas]

In 26806:

A few updates to the About page

• Updated text on about-overview.png
• Changed about-typography, about-contrast, and about-modern-aesthetics from PNG24 to PNG8, saving 83 KB
• Reluctantly changed about-twentyfourteen from PNG to JPEG, because it saves a whopping 615 KB
• Tweak the headline size and styling of the about-twentyfourteen image to account for its lack of a transparent background.

See #26387.

[nacin]

Regarding file compression in [26806], I think we should serve these from WP.org (as we did in 3.6; 3.7 didn't have substantial images) and keep them out of the download package. That said, I'd want to save 615 KB for a user even in that case.

[iammattthomas]

It sounds like we're done with this one, so closing.

[nacin]

In progress:

• markjaquith and I are doing a copy-edit, as we've done previously.
• Offload images to the WP.org CDN.
• Re-enable strings for translation.

[nacin]

Edits from me and Mark Jaquith.

[nacin]

Here is a summary of changes of 26387.11.diff​ from me and markjaquith (not brief, but at least it's briefer than the 2.5-hour call).

Modern new design

• "the admin" is shorthand. Refactor to "the new WordPress dashboard". Our alternative, "administration area, doesn't sound as catchy here. Deliberately don't capitalize dashboard, that gives it too much weight on the page.
• "Open Sans is Open Source" is only a little better than "Open Sans meets Open Source." It is still fairly nonsensical and doesn't explain clearly what Open Sans is. So let's do that. Also, see the the freedoms page for canonical capitalization of open source.
• Kicks the contrast text up a few notches. "high contrast" is usually crapped on as being ugly. Let's make it clear it doesn't need to be.

Every device

• Let's not (glibly, accidentally) suggest someone owns every gadget under the sun.
• Killing blurry edges is a nice sell for vectors, but we already had retina UI. (This is why "High definition is here" was tweaked; we had "Retina Ready" on 3.5's about page.) What are the benefits to the user? Colors (don't need to mention that here) and performance. Let's discuss how loading Dashboard -> Home is 40% the size it was in 3.7! Huge speed improvements are a great win.

A new theme experience

• This section was mostly filler. We tried to punch it up, but it was covering mundane details or things what weren't really new in 3.8 (or even changed in 3.8). It needed to be reduced to what's important. It's a great new screen, so let's sell it as a better browsing experience and then let them try it out. Keep in mind only so many people have lots of themes installed. The installer refresh is going to be higher impact.
• Widgets. Since the themes section is really short, let's instead talk about "Refined theme management" and also talk about the widget changes. The responsive breakpoints and click-to-add are both solid little refinements that deserve a mention.
• (decision point) We can drop "Drag-drag-drag. Scroll-scroll-scroll." and nothing is lost, but we kind of liked it.
• (to do) We don't think widgets needs to be part of the screenshot, but the screenshot should be shrunk a bit. We were toying with just cropping the bottom 55 pixels, but if MT had other ideas, that's fine too. Some whitespace at the bottom of the text is good, though.

Twenty Fourteen

• We're not sure "Creating a magazine website with WordPress has never been easier" is the message we want to send. Twenty Fourteen is not the only magazine theme out there; we don't want to suggest the others all suck.
• "most intrepid" rather than "boldest". Intrepid is an excellent adjective that captures both design and new reaches in functionality. Also, in our opinion, Twenty Thirteen was bolder. Let's leave that adjective for Twenty Thirteen (we actually did use it on the about page) and give Twenty Fourteen its own platform to stand on.
• "compromise", not "compromise on".
• End with with what was originally the first sentence. It makes for a terrific closing line and also helps end the entire about page on a great note.

[iammattthomas]

Shortened about-themes.png

[helen]

+1 to 26387.11.diff​.

[nacin]

26387.12.diff​ requires two changes:

• On commit, svn delete src/wp-admin/images/about-*
• Once screenshots are settled (can occur up until release, if cleanup is necessary), the screenshots should shift to the CDN URLs.

[iammattthomas]

Resizing about-colors to 1050px wide, 2x its full-size display width of 525px.

[nacin]

In 26829:

Final text adjustments to the 3.8 About page. Also:

• Offload screenshots to WP.org, as we had done in 3.6.
• Offer strings for translation.

props markjaquith, nacin.
fixes #26387.

[iammattthomas]

New overview screenshot with Home icon

[iammattthomas]

New colors screenshot with Home icons

[iammattthomas]

New themes screenshot with Home icon