Make WordPress Core

Opened 10 years ago

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

Change History (103)

#1 @melchoyce
10 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 10 years ago by melchoyce (previous) (diff)

#2 @jcastaneda
10 years ago

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

#3 follow-up: @lancewillett
10 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
10 years ago

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

@lancewillett
10 years ago

Normal Twenty Fourteen screenshot without devices -- props iamtakashi

#4 @lessbloat
10 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
10 years ago

#5 @lessbloat
10 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
10 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
10 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
10 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
10 years ago

Replying to lancewillett:

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

Sure, will fix.

#10 @shaunandrews
10 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
10 years ago

#11 @melchoyce
10 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
10 years ago

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

@melchoyce
10 years ago

@melchoyce
10 years ago

#13 @melchoyce
10 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 10 years ago by melchoyce (previous) (diff)

#14 @celloexpressions
10 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
10 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
10 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
10 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
10 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
10 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
10 years ago

In 26720:

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

#21 @iammattthomas
10 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
10 years ago

Fix displaying version number

#22 @nacin
10 years ago

In 26723:

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

@ryelle
10 years ago

@siobhan
10 years ago

made a bunch of text changes and edits

#23 @siobhan
10 years ago

  • Cc siobhan added

#24 @markoheijnen
10 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
10 years ago

  • Cc siobhan added

@ryelle
10 years ago

#26 @ryelle
10 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
10 years ago

Refined the THX section a little

@melchoyce
10 years ago

#27 @melchoyce
10 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 10 years ago by melchoyce (previous) (diff)

#28 follow-up: @melchoyce
10 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
10 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
10 years ago

#26229 was marked as a duplicate.

#31 @melchoyce
10 years ago

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

@melchoyce
10 years ago

#32 @melchoyce
10 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
10 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
10 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 10 years ago by DrewAPicture (previous) (diff)

#35 @ryelle
10 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
10 years ago

In 26742:

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

#37 @markoheijnen
10 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
10 years ago

#38 @ryelle
10 years ago

Added autosave for color schemes (and removed RTL handing)

#39 @iammattthomas
10 years ago

In 26746:

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

#40 @iammattthomas
10 years ago

In 26750:

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

#41 @iammattthomas
10 years ago

In 26751:

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

#42 @iammattthomas
10 years ago

In 26754:

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

#43 @iammattthomas
10 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
10 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
10 years ago

In 26764:

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

See #26387, [26760].

#46 @iammattthomas
10 years ago

In 26768:

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

#47 @iammattthomas
10 years ago

In 26769:

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

#48 @iammattthomas
10 years ago

In 26775:

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

#49 @nacin
10 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
10 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
10 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
10 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
10 years ago

In 26789:

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

#54 @iammattthomas
10 years ago

In 26790:

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

#55 @iammattthomas
10 years ago

In 26791:

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

#56 @iammattthomas
10 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
10 years ago

In 26794:

Remove 3.7 about images. see #26387.

#58 @nacin
10 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
10 years ago

In 26798:

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

#60 @nacin
10 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
10 years ago

In 26801:

A couple of copy edits for the About page.

See #26387.

#62 @iammattthomas
10 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
10 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
10 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
10 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
10 years ago

  • Resolution fixed deleted
  • Status changed from closed to reopened

@nacin
10 years ago

Edits from me and Mark Jaquith.

@nacin
10 years ago

#67 @nacin
10 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
10 years ago

Shortened about-themes.png

#68 @helen
10 years ago

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

#69 @nacin
10 years ago

  • Keywords has-patch added

@nacin
10 years ago

#70 @nacin
10 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
10 years ago

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

@nacin
10 years ago

#71 @nacin
10 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
10 years ago

New overview screenshot with Home icon

@iammattthomas
10 years ago

New colors screenshot with Home icons

@iammattthomas
10 years ago

New themes screenshot with Home icon

Note: See TracTickets for help on using tickets.