Tag Archives: html

AMP stories: Bringing visual storytelling to the open web

Posted by Rudy Galfi, Product Manager for AMP at Google

The AMP story format is a recently launched addition to the AMP Project that provides content publishers with a mobile-focused format for delivering news and information as visually rich, tap-through stories.

A visual-driven format for evolving news consumption on mobile

Some stories are best told with text while others are best expressed through images and videos. On mobile devices, users browse lots of articles, but engage with few in-depth. Images, videos and graphics help publishers to get their readers' attention as quickly as possible and keep them engaged through immersive and easily consumable visual information.

Recently, as with many new or experimental features within AMP, contributors from multiple companies — in this case, Google and a group of publishers — came together to work toward building a story-focused format in AMP. The collective desire was that this format offer new, creative and visually rich ways of storytelling specifically designed for mobile.

Minimize technical challenges and let creators focus on the storytelling

The mobile web is great for distributing and sharing content, but mastering performance can be tricky. Creating visual stories on the web with the fast and smooth performance that users have grown accustomed to in native apps can be challenging. Getting these key details right often poses prohibitively high startup costs, particularly for small publishers.

AMP stories are built on the technical infrastructure of AMP to provide a fast, beautiful experience on the mobile web. Just like any web page, a publisher hosts an AMP story HTML page on their site and can link to it from any other part of their site to drive discovery. And, as with all content in the AMP ecosystem, discovery platforms can employ techniques like pre-renderable pages, optimized video loading and caching to optimize delivery to the end user.

AMP stories aim to make the production of stories as easy as possible from a technical perspective. The format comes with preset but flexible layout templates, standardized UI controls, and components for sharing and adding follow-on content.

Yet, the design gives great editorial freedom to content creators to tell stories true to their brand. Publishers involved in the early development of the AMP stories format — CNN, Conde Nast, Hearst, Mashable, Meredith, Mic, Vox Media, and The Washington Post — have brought together their reporters, illustrators, designers, producers, and video editors to creatively use this format and experiment with novel ways to tell immersive stories for a diverse set of content categories.

Developer preview for AMP stories is starting today

Today AMP stories are available for everyone to try on their websites. As part of the AMP Project, the AMP story format is free and open for anyone to use. To get started, check out the tutorial and documentation. We are looking forward to feedback from content creators and technical contributors alike.

Also, starting today, you can see AMP stories on Google Search. To try it out, search for publisher names (like the ones mentioned above) within g.co/ampstories using your mobile browser. At a later point, Google plans to bring AMP stories to more products across Google, and expand the ways they appear in Google Search.

Expand your color palette with new tools for Material Design

Posted By: Rachel Been, Creative Lead, Material Design

The Material Design Guidelines are a living documentation of visual, interactive, and motion design guidance across platforms and devices.

Beyond guidance, Material Design is a also system that supports and strengthens communication and productivity with new tools and inspiration. With today's update, Material is introducing a new way to learn about color. The new color tool helps you create, share, and apply color palettes to a sample UI and through components in codepen. The tool also supports accessibility by evaluating the legibility of text for any color combination. Specific features include:





Create color schemes

Create color schemes that include darker and lighter variations of your primary and secondary colors.











Test accessibility

Check if text is accessible on different-colored backgrounds, as measured using the Web Content Accessibility Guidelines legibility standards.










Preview your UI in color

Preview the look of your color scheme across a range of Material Design Components, with editable HTML, CSS, or JavaScript in Codepen.




With these new tools to dabble with color schemes, you'll be able to give you users a richer experience, so we can't wait to see what you come up with. To get the latest news and engage with us directly, please follow us on our new Twitter account (@materialdesign) and visit https://material.io/.