Tuesday, 3 September, 2019 UTC
Summary
People love stories! Not only those told on TV or in children’s books. Some of the stories of the 21st century are told on Snapchat, Facebook and Instagram. Many are personal and users embrace their ephemeral nature. What’s a business to do, though? Most business leaders find it unproductive to create digital assets that don’t last and cannot be linked to and reshared over and over again.
Creating stories for Instagram or Facebook is only attractive to big businesses who have an army of social media content producers and employ PR and advertising agencies. They can ‘feed the beast’ with high frequency and produce a constant stream of visually attractive mobile-only content.
What is AMP?
AMP started in 2015, and it’s an acronym that stands for “Accelerated Mobile Pages”. After a lot of meandering and false starts it now has morphed into “AMP – a web component framework to easily create user-first web sites, stories, ads and emails”. In other words, an open-source initiative by Google and other organizations with the goal to optimise web content to load instantly in users’ mobile devices, and improve the user viewing experience. There is a lot of technology behind this goal, and you can read up about it on the AMP Project’s website.
WordPress partnered with Google early on. In 2017 several WordPress core committers started working for Google to build the AMP Plugin for WordPress. With this commitment to WordPress Google is supporting site owners using open-source software available in 100+ languages and powers over 34% of the internet. The AMP Plugin for WordPress allows site builders to adopt a user-first experience without leaving the ecosystem of WordPress. The adjustments to qualify as an AMP site are not small but the plugin helps WordPress theme builders and web consultants to level up their service offering.
You don’t have to use the AMP components in order to take advantage of AMP Stories that come with the AMP plugin.
What are Stories exactly?
For those of us not frequenting the mentioned social networks, Stories constitutes visually attractive portrait size content with multiple pages that viewers swipe through on their mobile phones. The content can include images, animation, video and text, if only minimal. For this article, I have put together three examples. If you are reading this on a mobile phone, you’ll have the intended user experience. For those of you reading on your desktop, it’s going to be slightly different.
The documentation of the AMP Project at amp.dev writes about Stories:
“AMP stories immerse your readers in fast-loading full-screen experiences. Easily create visual narratives, with engaging animations and tappable interactions. The AMP story format is free and part of the open web and are available for everyone to try on their websites. They can be shared and embedded across the web without being confined to a closed ecosystem or platform.”
If you landed on this article and are not necessarily a WordPress users, the site will provide you with some alternative tools and information on how best to publish AMP Stories.
Examples for Visual Storytelling
Following the success of Snapchat, Instagram and Facebook stories, a couple of years after Google first released AMP in 2015, AMP Stories have been embraced by large publishers, like the BBC, Washington Post, and National Geographic.
Here are two examples:
The photo story about the traffic famine in Yemen earned photographer Lorenzo Tugnoli from the Washington Post a Pulitzer Prize. Take a look at the full story here.
Or National Geographic’s Stonewall at 50 photo essay.
All these publishers have designated front-end developers to create AMP Stories for mobile and desktop consumption.
For further examples, visit this list of the latest AMP Stories.
Why care about AMP Stories?
In 2017, Neil Patel had a few thoughts on “why businesses can’t ignore Google AMP Stories. “Beyond loading at lightning fast speeds, AMP Stories can also be shared in the same way news articles are shared.” Patel explains. The most compelling reason why you should start using AMP and AMP Stories in particular, he says is this: “If you start using AMP protocols before your competitors, you’ll differentiate yourself as a frontrunner in your industry.”
Earlier this year, Google announced at its developers conference that they will create ‘dedicated placement’ in search results for AMP Stories, starting with the travel category. Kyle Wiggers from VentureBeat further wrote: “The dedicated placement — a carousel of visual covers from Stories that Google first demoed at AMP Conf in Tokyo earlier this year — will appear beneath the Search bar on mobile for queries like ‘Things to do in Tokyo’ and ‘The top 10 places to go in Tokyo Tapping on any of the covers will launch the corresponding AMP Story, which you’ll be able to navigate using swipe and scroll gestures. Swiping far enough to the left will open the next Story on the list.”
What if you could create stories like this, publish them on your own website and get additional search engine visibility at the same time?
The newest version of the AMP plugin for WordPress provides the capabilities to create AMP Stories on a WordPress site with the new block editor. The only additional requirement is the newest Gutenberg plugin version as the AMP plugin uses features that have not yet been added to the default editor in core. They will arrive with the WordPress 5.3 release that is scheduled for late autumn this year. Without any additional programming necessary, AMP Stories are now available to small businesses, bloggers and local publishers to woe their visitors and keep their attention.
Best practices for visual storytelling
The AMP team published a few best practices for visual storytelling that also apply to AMP Stories. Here are the top three:
- Don’t make just image slideshows, add content and context.
- Use quality assets shot in portrait format. This applies to both videos and photos. For the last five years, I have sniggered at people who would shoot portrait video, as it looks ridiculous on YouTube. I make an exception for AMP Stories on your website.
- Go beyond images. Use video. Make sure you don’t overload the network, though. It’s recommended to use 720p, which at a 3:4 aspect ratio is 720px width by 960px height.
For more recommendations on monetisation, indexing and promoting stories, check out the AMP Team’s article.
How to create your first AMP Story
In short:
- Log in to your site
- Install the Gutenberg plugin
- Install the AMP plugin
- Configure the APM plugin and enable Stories
- Stories > Create new
- Give it a title and add the pages for your story
- Hit Publish
Once the AMP Plugin is installed, you can access the settings under “General”.
Here is an example of the screen:
For the purpose of this post, we are only interested in using it for the Stories and not to AMPlify the rest of the website.
Uncheck “Website” in the “Experiences” section, and all the other sections will disappear from the screen. Don’t forget to click on the “Save Changes” button at the bottom of the screen.
Now you’ll see an additional menu item in your left navigation, labelled “Stories”. The plugin created a new Custom Post Type for the Stories.
The menu items will feel familiar with these options:
- “All Stories”:See and manage a list of all Stories
- “New”: Create a new Story
- “Categories”: anage the categories for your Stories
- “Tags”: Manage the tags for your Stories
Before you click on “New”, make sure you have installed the latest version of the Gutenberg plugin (6.1.1 at the time of writing).
Prepare the Story to be told
The story we will create in this tutorial is using a set of street photographs I took while walking in Merida, Mexico earlier this year.
Not every story needs a storyboard, but it helps to have a plan. Especially at the beginning of your storybuilding journey, separating the concerns will make it easier to focus on the building part of it, once all the other decisions are out of the way. Here is my preparation process:
- I resized the photos to make them web-ready and also changed their file names from IMG_3425.jpg to a more descriptive one like “Calle-59-Walking-in Merida-MX-by-Birgit-Pauli-Haack.jpg”.
- Then I uploaded all images to the “Media Library” and added titles and alt texts.
- I also created a plain text file with the titles of the photos and decided on the order.
Text File:
ArchPeople aiming for the “Pasaje Revolucions“, the pathway between the cathedral and the adjacent buildings. It is covered with a white roof. The space housed the exhibition by “Fragmentos by Patricia Baez” arranged by the Museum Fernando Garcia Ponce.Calle 59The street is empty with a car approaching from the distance. On the right, the branches of a tree spill into street, giving the total lifeless picture an idea of virility and growth.ConnectingParque de la MejoradaThe plaza near the Museum of Yucatan Folk Art provides free Wifi and power for merchants and their stands. There are plenty of power outlets in the wall around the stage. They can also be used to charge the phone while catching up with friends and family.
We will see if this text is adequate or maybe too long for the story panes and might need to be shortened.
Stories > Add New
When ready, access the WordPress dashboard and select “Add New” from the “Stories” menu and a blank page opens up.
Let’s talk a bit about the screen. It’s way more populated than your ordinary edit post screen.
At the top, the “Add Title” is familiar. That’s the title of the Story that shows up in the Archive pages, embeds and in the URL.
Then from left to right you’ll see an outline or list of elements section.
Then you have the Story’s first page in view, inviting you to “Write text…” Underneath you see in light grey the page navigation. As we are on the first page, there is only one. Before you get to the sidebar, there are two more round buttons: the blue plus sign lets you add another page, either from a blank page or from a template. The round button with the three stripes and an arrow helps you with the order of the page. When active you can drag & drop the pages and reorder of their sequence.
Add content to your AMP Story
So let’s add some content. I already added the title: “Walking in Merida, Mexico”.
Lesson 1: Background media
In this 30-second video, you learn how to add to a story’s page. Use the focal point tool in the sidebar to bring the right composition into the frame and add a background colour with opacity, to fit the other design.
Lesson 2: Add text
In this video, you see how to add a new page to the story, add text to it and rotate that text, add a background to the text and change its opacity.
Lesson 3: Add more text and find a pattern
We started a pattern: First the image with a dark background, its title and some description text on top of it. The next page is the image in the original colours, and only its title. We repeat that for the following two photos.
The video shows how to add a background image, add a background colour and opacity to it.
Then place on text block on it and format the text with a light colour.
Then we add another Text block to add the title of the image in a headline.
The headline is placed on a light background with a light opacity and dark letters on it.
Lesson 4: Automatically fit text to container
The last page contains another image as the background and by giving it a gray background colour we made the background light enough to place dark text on it. We add a headline, a text box with three links and a button.
In that video, we also see how the feature “Automatically fit text to container” works and how to use the various handles. It needs a bit getting used to, so give yourself some time to master it. It took me a couple of attempts to get it right.
Lesson 5: Make the Story work on your desktop in landscape
The last video ended showing the view of the whole story, optimised for mobile viewing.
Everything is in portrait format, and when viewed on the desktop the page panels focus only in the middle section. The early examples from the Washington Post or the San Francisco Chronicle felt different on desktop as the pages would cover the full screen. In the first version of the AMP Stories feature, a landscape view for desktops is not yet integrated.
Weston Ruter, developer with the AMP Plugin for WordPress, shared a small plugin with me to try out a landscape version for my stories. You would need to download the zip from GitHub and upload it to your plugin section on your website and activate it.
Then you go to the document settings of your story and add a “landscape” tag to your story. Now when you preview your story on your desktop, you’ll see the page extended over the full window edge to edge and provide a superior user experience for your visitors coming to you page from their desktops.
Lesson 6: How to fix the text for landscape view
At first when I tried it in landscape, I noticed that the text is cut off and way too big on the picture.
When I created the last page with the links to “Art Museums in Merida, Mexico”, I used the feature. Now I needed to make sure that we use it also on the other text boxes. After I fixed it for the “Arch” page, it looked much better.
Let’s fix the text for “Calle 59” and “Connecting” as well.
In this video we go back to our text pages and apply the setting “Automatically fit text to container” to the text. With the blue handle dots we are able to adjust the length and the width of the container.
Embed your Stories in posts and pages
You can add stories to any other post by embedding them. The use case could be that you create an in-depth look into a theory or a process at your company or a production process in your plant. As an intro you create an AMP Story with the salient points for the mobile viewers and passers-by. Those interested in the details and depth of it will read your article or white paper and might even part with their email address to get even more insights in your expertise.
If you take your story’s URL and add it to a page, WordPress will automatically create an embed version of it and displays it with the featured image and the author by default.
You can see the example used in this tutorial live on my personal website.
Some use cases for AMP Stories
- Make a photo/video series of a production process
- 10 Things to Do on a Rainy Day in Naples, and make every page a link page to attractions around Southwest Florida
- Take pictures (best work Candids) at your business social event and introduce your team members on your website
- Show off the best of your photos from your last trip
- Tell the transformation stories of your beneficiaries in your apprenticeship program
- Share events impressions with your donors.
Presentations and Talks
- Gutenberg Times hosted the AMP plugin lead developer, Weston Ruter, the lead of the CMS devRel team, Alberto Media, the AMP Stories lead developer Pascal Birchler and Cathy Bosco, designer and AMP Stories advocate on the Live Q&A on YouTube.
- Alberto Medina presented at the AMP Conf in Tokyo and talked at the end of it about bringing AMP Stories to WordPress.
- AMP Stories: Visual Stories for the Web (Google I/O’19)
Plugins for WordPress
- AMP Plugin for WordPress
- Gutenberg Plugin
- AMP Story Supports Landscape (Weston Ruter’s GitHub Gist)
The post How small businesses can use AMP Stories on WordPress appeared first on Heart Internet Blog - Focusing on all aspects of the web.