Make WordPress Core

Opened 9 years ago

Closed 9 years ago

#26387 closed enhancement (fixed)

3.8 needs a slick About page

Reported by: matt's profile matt Owned by: nacin's profile nacin
Milestone: 3.8 Priority: highest omg bbq
Severity: normal Version: 3.8
Component: Help/About Keywords: has-patch commit
Focuses: Cc:

Description

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.

Attachments (32)

3.8-about-v2.png (513.0 KB) - added by melchoyce 9 years ago.
twentyfourteen.png (583.3 KB) - added by lancewillett 9 years ago.
Screenshot of Twenty Fourteen in action, on various devices -- props iamtakashi
twentyfourteen-home.png (924.8 KB) - added by lancewillett 9 years ago.
Normal Twenty Fourteen screenshot without devices -- props iamtakashi
dash.png (286.9 KB) - added by lessbloat 9 years ago.
3.8-about-v3.png (990.3 KB) - added by melchoyce 9 years ago.
26387.diff (14.2 KB) - added by melchoyce 9 years ago.
progress.png (3.4 MB) - added by melchoyce 9 years ago.
26387.2.diff (14.4 KB) - added by melchoyce 9 years ago.
twentyfourteen.2.png (658.3 KB) - added by iamtakashi 9 years ago.
26387.3.diff (729 bytes) - added by markoheijnen 9 years ago.
Fix displaying version number
26387.4.diff (7.9 KB) - added by ryelle 9 years ago.
about-color-schemes.png (9.2 KB) - added by ryelle 9 years ago.
26387.5.diff (7.6 KB) - added by siobhan 9 years ago.
made a bunch of text changes and edits
26387.6.diff (14.8 KB) - added by ryelle 9 years ago.
26387.7.diff (14.8 KB) - added by siobhan 9 years ago.
Refined the THX section a little
26387.7.2.diff (15.2 KB) - added by melchoyce 9 years ago.
about-contrast.png (173.2 KB) - added by melchoyce 9 years ago.
about-typography.png (137.1 KB) - added by melchoyce 9 years ago.
about-modern-aesthetics.png (59.4 KB) - added by melchoyce 9 years ago.
26387.8.diff (16.9 KB) - added by melchoyce 9 years ago.
about-contrast.2.png (150.5 KB) - added by melchoyce 9 years ago.
about-modern-aesthetics.2.png (58.5 KB) - added by melchoyce 9 years ago.
26387.9.diff (2.3 KB) - added by ryelle 9 years ago.
26387.10.diff (6.0 KB) - added by nacin 9 years ago.
Edits from me and Mark Jaquith.
26387.11.diff (7.4 KB) - added by nacin 9 years ago.
about-themes.png (402.2 KB) - added by iammattthomas 9 years ago.
Shortened about-themes.png
26387.12.diff (8.2 KB) - added by nacin 9 years ago.
about-colors.png (176.1 KB) - added by iammattthomas 9 years ago.
Resizing about-colors to 1050px wide, 2x its full-size display width of 525px.
26387.13.diff (8.2 KB) - added by nacin 9 years ago.
overview.png (210.6 KB) - added by iammattthomas 9 years ago.
New overview screenshot with Home icon
colors.png (171.8 KB) - added by iammattthomas 9 years ago.
New colors screenshot with Home icons
themes.png (410.5 KB) - added by iammattthomas 9 years ago.
New themes screenshot with Home icon

Change History (103)

#1 @melchoyce
9 years ago

  • Cc melissachoyce@… added

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

Larger version attached.

Last edited 9 years ago by melchoyce (previous) (diff)

#2 @jcastaneda
9 years ago

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

#3 follow-up: @lancewillett
9 years ago

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
9 years ago

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

@lancewillett
9 years ago

Normal Twenty Fourteen screenshot without devices -- props iamtakashi

#4 @lessbloat
9 years ago

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
9 years ago

#5 @lessbloat
9 years ago

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

#6 @matveb
9 years ago

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.

#7 @melchoyce
9 years ago

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.

#8 in reply to: ↑ 3 ; follow-up: @lancewillett
9 years ago

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

#9 in reply to: ↑ 8 @melchoyce
9 years ago

Replying to lancewillett:

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

Sure, will fix.

#10 @shaunandrews
9 years ago

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
9 years ago

#11 @melchoyce
9 years ago

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.

#12 follow-up: @melchoyce
9 years ago

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

@melchoyce
9 years ago

@melchoyce
9 years ago

#13 @melchoyce
9 years ago

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.

Last edited 9 years ago by melchoyce (previous) (diff)

#14 @celloexpressions
9 years ago

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.

#15 @iammattthomas
9 years ago

In 26718:

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

#16 in reply to: ↑ 12 @iamtakashi
9 years ago

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.

#17 @dimadin
9 years ago

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

#18 @atimmer
9 years ago

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

#19 @iammattthomas
9 years ago

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.

#20 @iammattthomas
9 years ago

In 26720:

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

#21 @iammattthomas
9 years ago

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
9 years ago

Fix displaying version number

#22 @nacin
9 years ago

In 26723:

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

@ryelle
9 years ago

@siobhan
9 years ago

made a bunch of text changes and edits

#23 @siobhan
9 years ago

  • Cc siobhan added

#24 @markoheijnen
9 years ago

  • Cc siobhan removed

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

#25 @markoheijnen
9 years ago

  • Cc siobhan added

@ryelle
9 years ago

#26 @ryelle
9 years ago

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
9 years ago

Refined the THX section a little

@melchoyce
9 years ago

#27 @melchoyce
9 years ago

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​.

Last edited 9 years ago by melchoyce (previous) (diff)

#28 follow-up: @melchoyce
9 years ago

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?

#29 in reply to: ↑ 28 @nacin
9 years ago

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.

#30 @nacin
9 years ago

#26229 was marked as a duplicate.

#31 @melchoyce
9 years ago

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

@melchoyce
9 years ago

#32 @melchoyce
9 years ago

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

#33 @iammattthomas
9 years ago

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.

#34 @DrewAPicture
9 years ago

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?

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

  1. 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.
Last edited 9 years ago by DrewAPicture (previous) (diff)

#35 @ryelle
9 years ago

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.

#36 @iammattthomas
9 years ago

In 26742:

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

#37 @markoheijnen
9 years ago

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
9 years ago

#38 @ryelle
9 years ago

Added autosave for color schemes (and removed RTL handing)

#39 @iammattthomas
9 years ago

In 26746:

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

#40 @iammattthomas
9 years ago

In 26750:

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

#41 @iammattthomas
9 years ago

In 26751:

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

#42 @iammattthomas
9 years ago

In 26754:

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

#43 @iammattthomas
9 years ago

In 26760:

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

#44 @iammattthomas
9 years ago

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.

#45 @nacin
9 years ago

In 26764:

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

See #26387, [26760].

#46 @iammattthomas
9 years ago

In 26768:

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

#47 @iammattthomas
9 years ago

In 26769:

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

#48 @iammattthomas
9 years ago

In 26775:

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

#49 @nacin
9 years ago

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.

#50 @nacin
9 years ago

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.

#51 @iammattthomas
9 years ago

In 26779:

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

#52 @iammattthomas
9 years ago

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.

#53 @iammattthomas
9 years ago

In 26789:

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

#54 @iammattthomas
9 years ago

In 26790:

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

#55 @iammattthomas
9 years ago

In 26791:

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

#56 @iammattthomas
9 years ago

In 26792:

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

#57 @nacin
9 years ago

In 26794:

Remove 3.7 about images. see #26387.

#58 @nacin
9 years ago

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.

#59 @nacin
9 years ago

In 26798:

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

#60 @nacin
9 years ago

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.

#61 @DrewAPicture
9 years ago

In 26801:

A couple of copy edits for the About page.

See #26387.

#62 @iammattthomas
9 years ago

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.

#63 @nacin
9 years ago

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.

#64 @iammattthomas
9 years ago

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

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

#65 @nacin
9 years ago

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.

#66 @nacin
9 years ago

  • Resolution fixed deleted
  • Status changed from closed to reopened

@nacin
9 years ago

Edits from me and Mark Jaquith.

@nacin
9 years ago

#67 @nacin
9 years ago

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
9 years ago

Shortened about-themes.png

#68 @helen
9 years ago

  • Keywords commit added
Last edited 9 years ago by helen (previous) (diff)

#69 @nacin
9 years ago

  • Keywords has-patch added

@nacin
9 years ago

#70 @nacin
9 years ago

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
9 years ago

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

@nacin
9 years ago

#71 @nacin
9 years ago

  • Owner set to nacin
  • Resolution set to fixed
  • Status changed from reopened to closed

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
9 years ago

New overview screenshot with Home icon

@iammattthomas
9 years ago

New colors screenshot with Home icons

@iammattthomas
9 years ago

New themes screenshot with Home icon

Note: See TracTickets for help on using tickets.