Siden 2014 har Google omformet sine apper og tjenester etter eget Material Design prinsipper. I går det annonserte på sin designblogg at en kommende utgave av Chrome-nettleseren (versjon 49.2) vil vedta Material Design som standardgengivelse.

Kritisk vil den nye versjonen av Chrome-dubbed Chrome MD- overstyre nettsteddefinert CSS i henhold til Maskindesignspesifikasjonen; farger, type og jevne bilder blir gjengitt i henhold til Googles designsprog.

En søyle for tech giantens designstrategi i nesten to år, har spranget til Material Design vist seg vellykket for Google på tvers av applikasjonene, og ifølge Google vil innføring av designsystemet på innhold som vises i nettleserne sikre en konsistent og høy kvalitet Brukeropplevelse for sine kunder:

Vi utviklet Material Design for å gi våre kunder den optimale brukeropplevelsen, og vi tror de fortjener kvaliteten når de bruker et Google-produkt - Anjeet Singh, Asst. Direktør for markedsføring, Google Design

I tillegg til å rebranding nettet i sitt eget bilde, vil den primære virkningen av denne oppdateringen være en radikalt raskere web.

Hastighet

Googles primære bekymring er for en raskere web, og ved å begrense variablene som nettleseren er tvunget til å gjengis, forventer den å øke den opprinnelige gjengivelsen av sider med i gjennomsnitt 17%.

Chrome MD gjør websider raskere enn vanlig HTML uten CSS. Dette skyldes at selv når ingen stiler er definert, må nettlesere fortsatt avstemme for mulige stildefinisjoner; Chrome MD hopper rett og slett denne trinngengivelsen i henhold til sitt interne stil system.

Chrome MD markerer en stor adopsjon av AMP (Accelerated Mobile Pages), noe som reduserer nettleserens arbeidsbelastning betydelig. Imidlertid har flertallet av ytelsesgevinster blitt funnet ved å begrense stilalternativer.

Farge

Material Design fargepalett er begrenset til 256 farger, og Chrome MD vil ikke gi noen annen farge enn de 256 hex-verdiene.

Når designere angir en annen hex-verdi enn en av de 256 godkjente fargene, oversetter Chrome MD den automatisk til sitt nærmeste Material Design-ekvivalent. For eksempel vil disse to forskjellige røde gjengis som samme Material Design farge:

p.material { color:#E53935; } /* renders correctly as #E53935 */p.notMaterial { color:#EF2A39; } /* renders incorrectly as #E53935 */

Det samme prinsippet gjelder RGB-verdier, RGBA-verdier blir oversatt til nærmeste Material Design-farge basert på fargen de overlegger.

Gradienter gir ikke noe i Chrome MD. Den gjennomførte beta-implementeringen (som gradienter gir som sin gjennomsnittlige tonalverdi) forventes imidlertid å være tilpasset for å gjengi den letteste fargen som finnes i gradienten.

Bilder

De samme fargebegrensningene gjelder også for bilder: Hver piksel i et bitmapbilde blir gjengitt som en av Material Design's 256 definerte farger, akkurat som gjeldende .gif-teknologi. SVG farger verdier vil også automatisk konverteres.

Google har gitt et unntak fra bilderegelen for saker som den beskriver som "fargekritisk", ved å piggy-backe inn -webkit-utseende innstillingen:

img.default { -webkit-appearance:material; } /* the default Material Design rendering */img.trueColor { -webkit-appearance:none; } /* the true color as defined in the image file */

Imidlertid vil denne løsningen bare fungere med bitmaps og innebygde SVG-filer, inline SVG vil alltid gjengis ved hjelp av Material Design farger.

typografi

Hvis du erstatter standard systemfonter, vil all tekst i Chrome MD gjengis ved hjelp av en enkelt innebygd skriftfamilie. På grunn av språkstøtte vil det ikke være Roboto som det kan forventes, men Noto .

Tekst vil også gjengi i 1 av 2 toner: svart eller hvit; Tonen blir automatisk valgt ut fra bakgrunnsfargen. Gradasjoner av tone vil være bestemt automatisk : På mørke bakgrunner vil H1-H6 gjengi 100% opacitet, all annen tekst med 70% opasitet; På lette bakgrunner H1-H6 vil gi 87% opacitet, vil all annen tekst gjengis ved 54% opasitet.

Chrome MD vil også håndheve en stiv typografisk skala for vekter, størrelser og linjehøyde:

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; }

Disse stilene vil ikke være over-ridbare, og spesielt, det er ikke kursiv alternativ.

Flytende handlingsknapper

Kanskje den mest radikale avgjørelsen er den obligatoriske inkluderingen av en enkelt, oppfordring til handling. Dette er definert med id primær og vil bli gjengitt som en flytende handlingsknapp :

https://no.odwebdesign.net/google-challenges-responsive-best-practice-with-resizer/">  Resizer  App, de bruikbare brytpunktene er: 360px, 480px, 600px, 720px, 840px, 960px, 1024px, 1280px, 1440px, 1600px. 

Eventuelt definert brytepunkt som ikke passer, blir avrundet til neste høyeste brytepunkt. For eksempel:

@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 */ }

Bred innflytelse

Google har en lang og stolt historie om å pålegge sin vilje på webdesignere, fra uanmeldte oppdateringer til sin algoritme, til vedtaket av AMP. Imidlertid vil imponerende Material Design på nettet sannsynligvis få størst effekt.

Selvfølgelig påvirker disse endringene bare nettsteder som vises i Chrome, men med mer enn 52% av den globale nettleseren, er det vanskelig å forestille seg et nettsted som ikke vil bli påvirket.

Vår primære bekymring er for kvaliteten på kundenes erfaring. Og derfor anbefaler vi at alle webdesignere benytter Best Practices for Material Design for å sikre at de leverer en konsistent opplevelse for sine kunder på tvers av alle enheter og plattformer - Anjeet Singh, Asst. Direktør for markedsføring, Google Design

Forsiktig Chrome's MD-oppdatering handler om å levere en raskere og mer konsistent nettopplevelse, men i virkeligheten er det sannsynlig å merke hele webben som et Google-prosjekt.

Den nåværende versjonen av Chrome er 49.0.2623.110, og det foreslås at minst en mindre oppdatering kan forventes før Chrome MD ruller ut i full kraft. Men markerer vi i dag 1. april det punktet hvor vi endelig omfavnet den homogene weben?

Oppdatering: Ja, heldigvis var denne artikkelen en April Fools 'spøk.