Building user-adaptive interfaces with preference media queries | Workshop

Building user-adaptive interfaces with preference media queries | Workshop

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


Duration: 44:43
5,693 views
194

In this Workshop, we are transforming and adapting a plain hypertext markup language (HTML) form with cascading style sheet (CSS) only, making it themeable, responsive, and animated. We use device-based media queries, user-based media queries, logical properties, and relative units to customize the interface to the context and preferences the user needs. As we customize, we use DevTools to inspect, emulate and verify that our design can adapt to as many users as possible.

Speaker: Adam Argyle

Watch more:
Web at Google I/O 2021 Playlist → https://goo.gle/io21-ChromeDevs
All Google I/O 2021 Workshops → https://goo.gle/io21-workshops
All Google I/O 2021 Sessions → https://goo.gle/io21-allsessions

Subscribe to Google Chrome Developers → https://goo.gle/ChromeDevs​


#GoogleIO #Web



product: Chrome - General, Chrome - Web - Chrome DevTools; event: Google I/O 2021; fullname: Adam Argyle; re_ty: Livestream;



Other Videos By Chrome for Developers


2021-05-26Progressively loading images - HTTP 203
2021-05-25New in Chrome 91: File System Access API improvements, Google IO, and more
2021-05-24[Bahasa Melayu] Chrome 91 - Fungsi-fungsi terbaru DevTools
2021-05-24Chrome 91 - What’s New in DevTools
2021-05-24Web runtime performance | Q&A
2021-05-24A whirlwind tour through Project Fugu APIs | Workshop
2021-05-24Privacy sandbox | Q&A
2021-05-24Building a web application with Angular and Firebase | Workshop
2021-05-21Web Vitals | Q&A
2021-05-21Progressive Web Applications and Fugu | Q&A
2021-05-21Building user-adaptive interfaces with preference media queries | Workshop
2021-05-19Chrome and Web | Q&A
2021-05-19List your Progressive Web App in Google Play | Session
2021-05-19Enable payments on your PWA with Play Billing using Digital Goods API | Session
2021-05-19Input matters for Chrome OS | Session
2021-05-19Optimize your Android games and apps to run on Chrome OS | Session
2021-05-19What's new in Chrome OS | Keynote
2021-05-19Top 8 web things to know from Google I/O 2021
2021-05-18Measure and debug performance with Google Analytics 4 and BigQuery | Session
2021-05-18From security as opt-in to security by default | Session
2021-05-18What's new in Web Vitals | Session


Tags:
purpose: Educate
type: Conference Talk (Full production)
pr_pr: Google I/O
Chrome Developer
Chrome Development
DevTools
HTML to CSS
device based media queries
user based media queries
user adaptive interfaces
#GoogleIO
Google I/O
Google IO
Google developer conference
Google announcement
Google conference. Google