Thinking on ways to solve a MEDIA SCROLLER

Thinking on ways to solve a MEDIA SCROLLER

Channel:
Chrome for Developers
Subscribers:
791,000
Published on ● Video Link: https://www.youtube.com/watch?v=jmLdZY_Lo1k


Duration: 14:36
9,390 views
523

In today’s GUI challenge, @Adam Argyle shares thinking on ways to create inline scrolling experiences for the web that are minimal, responsive, accessible and work across browsers and platforms (like TVs!).

Chapters:
0:00 - Introduction
0:20 - Component demo
1:22 - Cross browser demos
4:05 - International layout
5:15 - Debug Tooling
6:56 - Prefers reduced data
8:47 - Prefers reduced motion
10:57 - Roving UX
12:45 - aspect-ratio
14:11 - Conclusion

Resources:
Read along → https://goo.gle/2SJY4km
Try a demo → https://goo.gle/33AzdkX
Get the source → https://goo.gle/3n4Sfcg
Follow Adam on Twitter → https://goo.gle/2RId4P1
More on roving-index from Rob Dodson → https://goo.gle/3tFkdNp
More on logical properties on web.dev → https://goo.gle/3uJOvQi
What's new in DevTools 91 → https://goo.gle/3eLof2N

Watch more GUI Challenges → https://goo.gle/GUIchallenges
Subscribe to Google Chrome Developers → http://goo.gl/LLLNvf

#GUIchallenges #CSS #ChromeDeveloper



Other Videos By Chrome for Developers


2021-05-18Chrome DevTools for designers | Session
2021-05-18Effective password management | Session
2021-05-18Future-proof web apps with Angular and TensorFlow.js | Session
2021-05-18The new responsive: Web design in a component-driven world | Session
2021-05-18Preparing for a more private web | Session
2021-05-18Page performance after load | Session
2021-05-185 tips for your PWA | Session
2021-05-18Excalidraw and Fugu: Improving core user journeys | Session
2021-05-18What's new for the web platform | Keynote
2021-05-13Tipps fuer die Suchmaschinenoptimierung von JavaScript Webseiten (German with English subtitles)
2021-05-12Thinking on ways to solve a MEDIA SCROLLER
2021-05-06What are PWAs (Spanish with English subtitles)
2021-04-29Practical intro to WebAssembly (Ukrainian with English subtitles)
2021-04-26Anti-tracking: What you need to know
2021-04-26How Core Web Vitals and Lighthouse saved Zalando's release
2021-04-26What's happening on the Web?
2021-04-26Advertising on a privacy-first web
2021-04-26How to make an impact with Core Web Vitals
2021-04-26Tackling third-party web performance at The Telegraph
2021-04-22Back/forward cache (Indonesian with English subtitles)
2021-04-21Thinking on ways to solve SPLIT TEXT


Tags:
GDS: Yes
ways to solve a media scroller
how to solve a media scroller
media scroller
media scroller tutorial
how to use media scroller
media strollers
gui challenges
css
developer
developers
chrome developers
google chrome developers
chrome developer
google chrome
chrome
chromium
chromium dev
google
google developers
Adam Argyle
web