Dal 2014, Google ha ridisegnato le sue app e i suoi servizi in base alle proprie Design dei materiali i principi. Ieri ha annunciato sul suo blog di design che una prossima versione del suo browser Chrome (versione 49.2) adotterà Material Design come rendering predefinito.
Fondamentalmente, la nuova versione di Chrome MD doppiato da Chrome -sostituirà i CSS definiti dal sito in ossequio alle specifiche di Material Design; colori, tipo e persino immagini verranno renderizzati secondo il linguaggio di progettazione di Google.
Un pilastro della strategia di progettazione del colosso tecnologico per quasi due anni, il salto al Material Design si è rivelato efficace per Google in tutte le sue app e, secondo Google, l'imposizione del sistema di progettazione sui contenuti visualizzati nei suoi browser garantirà una qualità costante e di alta qualità esperienza utente per i suoi clienti:
Abbiamo sviluppato Material Design per offrire ai nostri clienti un'esperienza utente ottimale e crediamo che meritino tale qualità ogni volta che utilizzano un prodotto Google - Anjeet Singh, Asst. Direttore della produzione di marketing, Google Design
Oltre a rebranding del Web nella propria immagine, l'impatto principale di questo aggiornamento sarà un Web radicalmente più veloce.
La preoccupazione principale di Google è un Web più veloce e, limitando le variabili che il browser è costretto a eseguire, si prevede di aumentare il rendering iniziale delle pagine di una media del 17%.
Chrome MD esegue il rendering delle pagine Web più rapidamente del semplice HTML senza CSS. Questo perché anche quando non sono definiti stili, i browser devono ancora eseguire il polling per le possibili definizioni di stile; Chrome MD salta semplicemente questa fase di rendering in base al suo sistema di stile interno.
Chrome MD segna un'importante adozione di AMP (Accelerated Mobile Pages), riducendo significativamente il carico di lavoro del browser. Tuttavia, la maggior parte dei guadagni in termini di prestazioni è stata trovata limitando le opzioni di stile.
Tavolozza dei colori di Material Design è limitato a 256 colori e Chrome MD non renderà alcun colore diverso da quei 256 valori esadecimali.
Laddove i progettisti specificano un valore esadecimale diverso da uno dei 256 colori approvati, Chrome MD lo tradurrà automaticamente nell'equivalente del Materiale equivalente più vicino. Ad esempio, questi due rossi diversi renderanno lo stesso colore di Material Design:
p.material { color:#E53935; } /* renders correctly as #E53935 */p.notMaterial { color:#EF2A39; } /* renders incorrectly as #E53935 */
Lo stesso principio vale per i valori RGB, i valori RGBA verranno convertiti nel colore del disegno del materiale più vicino in base al colore che sovrappongono.
I gradienti non verranno visualizzati affatto in Chrome MD. Tuttavia, l'implementazione closed-beta (che i gradienti rendono come il loro valore tonale medio) dovrebbe essere adattata per rendere la sfumatura più leggera trovata nel gradiente.
Le stesse limitazioni di colore si applicano anche alle immagini: ogni pixel in un'immagine bitmap sarà reso come uno dei 256 colori definiti di Material Design, molto simile alla tecnologia corrente .gif. Anche i valori dei colori SVG verranno convertiti automaticamente.
Google ha fornito un'eccezione alla regola dell'immagine per i casi descritti come "critici dal punto di vista del colore", facendo da supporto all'impostazione dell'aspetto -webkit :
img.default { -webkit-appearance:material; } /* the default Material Design rendering */img.trueColor { -webkit-appearance:none; } /* the true color as defined in the image file */
Tuttavia questa soluzione funzionerà solo con bitmap e file SVG incorporati, SVG in linea eseguirà sempre il rendering utilizzando i colori di Material Design.
Sostituendo i font di sistema predefiniti, tutto il testo in Chrome MD eseguirà il rendering utilizzando un'unica famiglia di font incorporata. A causa del supporto linguistico, Roboto non sarà come ci si potrebbe aspettare, ma Noto .
Il testo verrà anche renderizzato in 1 di 2 toni: nero o bianco; il tono verrà automaticamente selezionato in base al colore di sfondo. Saranno gradazioni di tono determinato automaticamente : su sfondi scuri H1-H6 renderà al 100% l'opacità, tutto il resto del testo al 70% di opacità; su sfondi chiari H1-H6 renderà l'87% di opacità, tutti gli altri testi renderanno il 54% di opacità.
Chrome MD imporrà anche un rigido scala tipografica per pesi, dimensioni e altezza della linea:
h1 { font: light 45sp/48pt Noto; }h2 { font: regular 34sp/40pt Noto; }h3 { font: regular 24sp/32pt Noto; }h4 { font: regular 16sp/28pt Noto; }h5 { font: regular 15sp/24pt Noto; }h6 { font: medium 13sp/24pt Noto; }*, p { font: regular 14sp/20pt Noto; }strong, em { font: medium 14sp/20pt Noto; }
Questi stili non saranno eccessivi e, in particolare, non vi è alcuna opzione in corsivo.
Forse la decisione più radicale è l'inclusione obbligatoria di un singolo invito all'azione. Questo è definito con ID primario e sarà reso come a pulsante di azione fluttuante :
https://it.odwebdesign.net/google-challenges-responsive-best-practice-with-resizer/"> Resizer app, i breakpoint utilizzabili sono: 360px, 480px, 600px, 720px, 840px, 960px, 1024px, 1280px, 1440px, 1600px.Qualsiasi punto di interruzione definito dal designer che non si adatta verrà arrotondato al successivo punto di interruzione più alto. Per esempio:
@media only screen and (min-device-width:840px) { /* applies at 840px wide and above */ }@media only screen and (min-device-width:841px) { /* applies at 960px wide and above */ }Impatto ad ampio raggio
Google ha una lunga e orgogliosa storia di imporre la sua volontà sui web designer, dagli aggiornamenti non annunciati al suo algoritmo, all'adozione di AMP. Tuttavia, l'imposizione di Material Design sul web avrà probabilmente il maggiore impatto.
Naturalmente, queste modifiche interessano solo i siti web visualizzati in Chrome, tuttavia con oltre il 52% di utilizzo del browser globale, è difficile immaginare un sito che non sarà interessato.
La nostra principale preoccupazione è per la qualità dell'esperienza dei nostri clienti. Pertanto consigliamo a tutti i web designer di utilizzare le migliori pratiche di Material Design per garantire un'esperienza coerente per i loro clienti su tutti i dispositivi e le piattaforme: Anjeet Singh, Asst. Direttore della produzione di marketing, Google Design
Ovviamente l'aggiornamento MD di Chrome consiste nel fornire un'esperienza web più veloce e più coerente, ma in realtà è probabile che rebrand l'intero web come un progetto di Google.
La versione corrente di Chrome è 49.0.2623.110, il che suggerisce almeno un aggiornamento secondario prima che Chrome MD venga implementato in modo completo. Tuttavia oggi, 1 aprile, segna il punto in cui finalmente abbiamo abbracciato la rete omogenea?
Aggiornamento: Sì, per fortuna questo articolo era uno scherzo di April Fools.