Web Stories v1.2-RC1

Documenting Web Stories ‘The WordPress Way‘ and sharing the UX tactics and strategies along the way…

This post will be updated frequently. Last Update: June 24th 2019

This is the beginning of our notes for some testing we are doing of early versions of AMP Stories. Specifically for the plugin for WordPress. We are working for the purpose of contributing to improving the exciting work being done. Some important UX work can make development work more concise and better informed thanks to usability testing and strategic UX tactics.

What is New with Web Stories for WordPress

There has been a great deal of progress with the WordPress plugin for Web Stories! As we bring Web Stories to people using the WordPress platform, here are some of the recent achievements:

• Taxonomies for Stories – yes we now have categories and tags for organizing and presenting our stories! Yay!!
• Delays and durations of animations is displaying as expected now too.
• We have landscape view for desktop baked right in! No longer do we need to do custom work to have the luxury of landscape views on desktop/laptop/large tablet screens.
• AMP Stories can now be used exclusively, without needing to also use AMP for the rest of the website. More on these details to come…
• We can drag blocks around on the admin without the drag handles now.
• Image sizing options include full image height for image layer “sizing” and displaying eliminating the use of the oversized full image, and thus saving bandwidth.
• Story pages can easily be duplicated.
• Improved the “Resolve Block” flow when block validation errors occur.
• Newly-added blank pages omit the initial Text block that was present when starting new stories.
• The editor has gone through some refinements of course too.
• Did you know Stories can be viewed in the Google organic search? Yes, absolutely!

I found a few UX friction issues and usability needs that we can improve this making the editing process less frustrating and am sharing them inside the GitHub project as I go along experimenting. This team is doing amazing work with this project both for WordPress and for the larger web!

Here is a sample story that I built so we could test out some of the issues – there are some problems with the desktop view of text layers and of image layers. You will see they do not display as expected on the desktop. If you view this story on your phone and on your desktop you will see some of the issues. Don’t worry, the teams will get those sorted out soon I’m sure. This is all about doing some usability testing!

Check out the experiment on both desktop and your phone to see the differences…

Web Stories v1.2-RC1 – Sample Story for Usability and User Experience – Take it for a ride…

If you are interested in using the PSD template I created for Web Stories editing in photoshop please contact me and I will share it with you.

It is useful to know the imagery is set up with an aspect ratio of 9×16 which is equivalent to the iphone 6+ screen size. Also the feature image is recommended to be created at 1200 x 1600 pixels. *I am testing graphics and videos as you will see. Next round of experiments and usability testing will involve video for sure.

As seen in GitHub with the details about 1.2 Release Candidate 1: To test Web Stories, you will need the latest version of the Gutenberg plugin installed (v5.8+ specifically), since the AMP Stories editor uses bleeding-edge features of WordPress’s block editor which are not yet in a WordPress core release. You can then install zip file by uploading it in the WordPress admin. Once active, enable the Web Stories feature from the AMP admin settings screen. Also, your theme may need to be AMP Compliant too – try the StudioPress themes and they now come with WPEngine hosting. Good things are happening with AMP, StudioPress, and WPEngine!

This post will be updated periodically. I’ll make some more stories as I love this immersive experience! And remember – it is important to own your own content on the web and never use someone else’s photography without permission. Unsplash is a great resource if you want to experiment with professional quality, freely usable image and do not have the bandwidth to create your own images.

Learn more about Web Stories: