Opened 11 years ago
Closed 11 years ago
#26387 closed enhancement (fixed)
3.8 needs a slick About page
Reported by: |
|
Owned by: |
|
---|---|---|---|
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)
Change History (103)
#2
@
11 years ago
Nicely done Mel considering that does look like quite a bit of information to take in. :)
#3
follow-up:
↓ 8
@
11 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.)
#4
@
11 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)
#5
@
11 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
@
11 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
@
11 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:
↓ 9
@
11 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
@
11 years ago
Replying to lancewillett:
@melchoyce Looking good! Can you change the following to remove second "sleek" word please?
Sure, will fix.
#10
@
11 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.
#11
@
11 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:
↓ 16
@
11 years ago
lancewillett: Do you have a copy of the twenty fourteen + devices image with a transparent background, by any chance?
#13
@
11 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.
#14
@
11 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.
#16
in reply to:
↑ 12
@
11 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
@
11 years ago
We’re
should beWe’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
@
11 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
#24
@
11 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
#26
@
11 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.
#27
@
11 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.
#28
follow-up:
↓ 29
@
11 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
@
11 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.
#31
@
11 years ago
Ignore 26387.7.2.diff — I'm making a new patch based on 26387.7.diff.
#32
@
11 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).
#34
@
11 years ago
I have some visual concerns with the current iteration of the About page. Beware, this may be an unpopular opinion.
- 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?
- 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?
- 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.
#35
@
11 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.
#37
@
11 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.
#60
@
11 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.
#63
@
11 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
@
11 years ago
- Resolution set to fixed
- Status changed from new to closed
It sounds like we're done with this one, so closing.
#65
@
11 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.
#67
@
11 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.
#70
@
11 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.
I took a stab at designing a first draft for the 3.8 about page: https://cloudup.com/cdeiaPfdB4w
Larger version attached.