@matt asked if I was interested in suggesting iterations on the WordPress.org site for him to consider, as a way to improve things on smaller devices. I’m absolutely interested and excited to help out!
To begin with, I did a video review of the experience. There were some areas exposed in the review that could use some improvements. I’ll be suggesting some solutions for them over on make.wordpress.org/design/.
The aim of this post is to summarise what I found in that video and break it down into manageable pieces. I did an entire run through clicking all links as I went. This post highlights the main hitches. Some are just galleries and others have videos attached. Each of the highlights below focuses on the problem areas, but the entire video is included at the end of context.
Front page
Note: I had tested a bit so didn’t see the call to download the app. This appears at the top when does.
#gallery-5 {
margin: auto;
}
#gallery-5 .gallery-item {
float: left;
margin-top: 10px;
text-align: center;
width: 33%;
}
#gallery-5 img {
border: 2px solid #cfcfcf;
}
#gallery-5 .gallery-caption {
margin-left: 0;
}
/* see gallery_shortcode() in wp-includes/media.php */
-
- Crowded header. Menu icon without context
-
- Images don’t have context to mobile users. For example showing plugins.
-
- Sub sections aren’t all the way across.
-
- Easy steps hidden.
-
- Those who use it small and hidden down hierarchy.
Menu
#gallery-6 {
margin: auto;
}
#gallery-6 .gallery-item {
float: left;
margin-top: 10px;
text-align: center;
width: 33%;
}
#gallery-6 img {
border: 2px solid #cfcfcf;
}
#gallery-6 .gallery-caption {
margin-left: 0;
}
/* see gallery_shortcode() in wp-includes/media.php */
-
- Hard to use. Ordering issues and showing Mobile is a little weird.
About page
#gallery-7 {
margin: auto;
}
#gallery-7 .gallery-item {
float: left;
margin-top: 10px;
text-align: center;
width: 33%;
}
#gallery-7 img {
border: 2px solid #cfcfcf;
}
#gallery-7 .gallery-caption {
margin-left: 0;
}
/* see gallery_shortcode() in wp-includes/media.php */
-
- Dense copy and long page
Mobile
#gallery-8 {
margin: auto;
}
#gallery-8 .gallery-item {
float: left;
margin-top: 10px;
text-align: center;
width: 33%;
}
#gallery-8 img {
border: 2px solid #cfcfcf;
}
#gallery-8 .gallery-caption {
margin-left: 0;
}
/* see gallery_shortcode() in wp-includes/media.php */
-
- Doesn’t recognise what device on. Feels like doesn’t know mobile.
-
- Long page length
Download
Note: having the download on mobile is a really confusing experience for users.
#gallery-9 {
margin: auto;
}
#gallery-9 .gallery-item {
float: left;
margin-top: 10px;
text-align: center;
width: 33%;
}
#gallery-9 img {
border: 2px solid #cfcfcf;
}
#gallery-9 .gallery-caption {
margin-left: 0;
}
/* see gallery_shortcode() in wp-includes/media.php */
-
- Encouragement to get app not very encouraging.
-
- Can click to download but doesn’t actually work.
-
- What happens on downloading.
Blog
Get involved
Hosting
#gallery-10 {
margin: auto;
}
#gallery-10 .gallery-item {
float: left;
margin-top: 10px;
text-align: center;
width: 33%;
}
#gallery-10 img {
border: 2px solid #cfcfcf;
}
#gallery-10 .gallery-caption {
margin-left: 0;
}
/* see gallery_shortcode() in wp-includes/media.php */
-
- Could have links and calls to things, hard to tell at a glance what does.
Ideas
#gallery-11 {
margin: auto;
}
#gallery-11 .gallery-item {
float: left;
margin-top: 10px;
text-align: center;
width: 33%;
}
#gallery-11 img {
border: 2px solid #cfcfcf;
}
#gallery-11 .gallery-caption {
margin-left: 0;
}
/* see gallery_shortcode() in wp-includes/media.php */
-
- Broken
Learn
#gallery-12 {
margin: auto;
}
#gallery-12 .gallery-item {
float: left;
margin-top: 10px;
text-align: center;
width: 33%;
}
#gallery-12 img {
border: 2px solid #cfcfcf;
}
#gallery-12 .gallery-caption {
margin-left: 0;
}
/* see gallery_shortcode() in wp-includes/media.php */
-
- Hard to glance and see the text on blue
Plugin directory
#gallery-13 {
margin: auto;
}
#gallery-13 .gallery-item {
float: left;
margin-top: 10px;
text-align: center;
width: 33%;
}
#gallery-13 img {
border: 2px solid #cfcfcf;
}
#gallery-13 .gallery-caption {
margin-left: 0;
}
/* see gallery_shortcode() in wp-includes/media.php */
-
- White screen on download
-
- Display issues on plugin’s own pages with menu
-
- Padding and interesting menu layout
-
- Padding and interesting menu layout
Theme directory
#gallery-14 {
margin: auto;
}
#gallery-14 .gallery-item {
float: left;
margin-top: 10px;
text-align: center;
width: 33%;
}
#gallery-14 img {
border: 2px solid #cfcfcf;
}
#gallery-14 .gallery-caption {
margin-left: 0;
}
/* see gallery_shortcode() in wp-includes/media.php */
-
- What happens on download
-
- Download button for themes shows
-
- Preview is broken
-
- Border shadow on search input
-
- Spacing issues (but one of best on mobile)
Support
#gallery-15 {
margin: auto;
}
#gallery-15 .gallery-item {
float: left;
margin-top: 10px;
text-align: center;
width: 33%;
}
#gallery-15 img {
border: 2px solid #cfcfcf;
}
#gallery-15 .gallery-caption {
margin-left: 0;
}
/* see gallery_shortcode() in wp-includes/media.php */
-
- Layout one of best mobile
-
- Login formatting
Users
#gallery-16 {
margin: auto;
}
#gallery-16 .gallery-item {
float: left;
margin-top: 10px;
text-align: center;
width: 33%;
}
#gallery-16 img {
border: 2px solid #cfcfcf;
}
#gallery-16 .gallery-caption {
margin-left: 0;
}
/* see gallery_shortcode() in wp-includes/media.php */
-
- Page loading
-
- Page broken
License
#gallery-17 {
margin: auto;
}
#gallery-17 .gallery-item {
float: left;
margin-top: 10px;
text-align: center;
width: 33%;
}
#gallery-17 img {
border: 2px solid #cfcfcf;
}
#gallery-17 .gallery-caption {
margin-left: 0;
}
/* see gallery_shortcode() in wp-includes/media.php */
-
- Hiding menu in page content footer
Privacy
#gallery-18 {
margin: auto;
}
#gallery-18 .gallery-item {
float: left;
margin-top: 10px;
text-align: center;
width: 33%;
}
#gallery-18 img {
border: 2px solid #cfcfcf;
}
#gallery-18 .gallery-caption {
margin-left: 0;
}
/* see gallery_shortcode() in wp-includes/media.php */
-
- Hiding menu in page content footer
Search
‘WordPress world’ sites
Note: to a user if it’s a link it’s part of the WordPress world. I explored a little of that world from a mobile view.
#gallery-19 {
margin: auto;
}
#gallery-19 .gallery-item {
float: left;
margin-top: 10px;
text-align: center;
width: 33%;
}
#gallery-19 img {
border: 2px solid #cfcfcf;
}
#gallery-19 .gallery-caption {
margin-left: 0;
}
/* see gallery_shortcode() in wp-includes/media.php */
-
- Full site still.
-
- Full site still.
-
- Hard to see what section is active.
-
- Code resources looks like not active at a glance.
-
- Styling issues.
-
- Search box input field issues.
-
- Menu looks broken.
-
- Primary menu naming issue.
-
- Input overlap.
-
- Hard to tell what belongs to which section.
-
- Menu hard to see where are or going.
-
- Full site still.
Entire video
For those wanting to watch the entire video (I removed my voice notes), here it is in lower quality for file size. For reference, the video contains a link that doesn’t work to wordpress.com that is fixed now.