Siden 2014 har Google omstruktureret sine apps og tjenester efter eget Materiale Design principper. I går det annoncerede på sin design blog at en kommende udgivelse af sin Chrome-browser (version 49.2) vil vedtage Material Design som standardgengivelse.
Kritisk vil den nye version af Chrome-dubbed Chrome MD - tilsidesætte site-defineret CSS i henhold til specifikationen for Material Design; farver, type og lige billeder vil blive gengivet i overensstemmelse med Googles designsprog.
En søjle i tech giantens designstrategi i næsten to år, har spranget til Material Design vist sig at være vellykket for Google på tværs af dets apps, og ifølge Google vil indførelsen af designsystemet på indhold vist i sine browsere sikre en ensartet og høj kvalitet brugeroplevelse for sine kunder:
Vi udviklede Material Design for at give vores kunder den optimale brugeroplevelse, og vi tror, de fortjener den kvalitet, hver gang de bruger et Google-produkt - Anjeet Singh, Asst. Direktør for Marketing Production, Google Design
Ud over at genbrænde internettet i sit eget billede, vil den primære virkning af denne opdatering være et radikalt hurtigere web.
Googles primære bekymring er for en hurtigere web, og ved at begrænse de variabler, som browseren er tvunget til at gøre, forventer den at øge den oprindelige gengivelse af sider med i gennemsnit 17%.
Chrome MD gør websider hurtigere end almindelig HTML uden CSS. Dette skyldes, at selv når der ikke er defineret nogen stilarter, skal browsere stadig undersøge mulige stildefinitioner; Chrome MD springer simpelthen denne tringengivelse i overensstemmelse med dens interne stil system.
Chrome MD markerer en vigtig vedtagelse af AMP (Accelerated Mobile Pages), hvilket reducerer browserens arbejdsbyrde betydeligt. Men de fleste præstationsgevinster er fundet ved at begrænse stilindstillinger.
Material Design's farvepalette er begrænset til 256 farver, og Chrome MD giver ikke nogen anden farve end de 256 hex-værdier.
Hvor designere angiver en hex-værdi, der ikke er en af de 256 godkendte farver, oversætter Chrome MD det automatisk til sin nærmeste Material Design-tilsvarende. For eksempel vil disse to forskellige røde gøre som samme Materiale Design farve:
p.material { color:#E53935; } /* renders correctly as #E53935 */p.notMaterial { color:#EF2A39; } /* renders incorrectly as #E53935 */
Det samme princip gælder for RGB-værdier, RGBA-værdier oversættes til den nærmeste Material Design-farve baseret på den farve, de overlejrer.
Gradienter vil slet ikke komme i Chrome MD. Implementeringen af lukket beta (som gradienter giver som deres gennemsnitlige tonværdi) forventes imidlertid at blive tilpasset til at gøre den letteste farvetone fundet i gradienten.
De samme farvebegrænsninger gælder også for billeder: Hver pixel i et bitmapbillede vil blive gengivet som en af Material Design's 256 definerede farver - ligesom den aktuelle .gif-teknologi. SVG-farveværdier konverteres også automatisk.
Google har givet en undtagelse til billedreglen for sager, som den beskriver som "farvekritiske", ved at piggy- backe indstillingen -webkit-udseende :
img.default { -webkit-appearance:material; } /* the default Material Design rendering */img.trueColor { -webkit-appearance:none; } /* the true color as defined in the image file */
Men denne løsning vil kun fungere med bitmaps og indlejrede SVG-filer, inline SVG vil altid gengive ved hjælp af Material Design farver.
Hvis du erstatter standard system skrifttyper, vil al tekst i Chrome MD blive brugt ved hjælp af en enkelt indlejret skrifttype-familie. På grund af sprogstøtte vil det ikke være Roboto som det kan forventes, men Noto .
Tekst vil også gengives i 1 af 2 toner: sort eller hvid; tonen bliver automatisk valgt ud fra baggrundsfarven. Gradationer af tone vil være bestemt automatisk : På mørke baggrunde vil H1-H6 gøre ved 100% opacitet, al anden tekst ved 70% opacitet; På lette baggrunde H1-H6 vil give 87% opacitet, vil al anden tekst udgøre 54% opacitet.
Chrome MD vil også håndhæve en stiv typografisk skala til vægte, størrelser og liniehøjde:
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 stilarter vil ikke være over-ridable, og især er der ingen kursiv mulighed.
Måske er den mest radikale beslutning den obligatoriske inddragelse af en enkelt opfordring til handling. Dette er defineret med id primære og vil blive gengivet som en flydende handlingsknap :
https://da.odwebdesign.net/google-challenges-responsive-best-practice-with-resizer/"> Resizer App, de anvendelige breakpoints er: 360px, 480px, 600px, 720px, 840px, 960px, 1024px, 1280px, 1440px, 1600px.Et hvilket som helst designer-defineret breakpoint, der ikke passer, afrundes til næste højeste breakpoint. 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 indflydelse
Google har en lang og stolt historie om at indføre sin vilje på webdesignere fra uanmeldte opdateringer til sin algoritme til vedtagelsen af AMP. Imidlertid vil indførelse af Material Design på internettet sandsynligvis få størst effekt.
Disse ændringer påvirker naturligvis kun websteder, der ses i Chrome, men med mere end 52% af den globale browserbrug er det svært at forestille sig et websted, der ikke vil blive påvirket.
Vores primære bekymring er for kvaliteten af vores kunders oplevelse. Og derfor anbefaler vi, at alle webdesignere anvender Best Practices for Material Design for at sikre, at de leverer en konsekvent oplevelse for deres kunder på tværs af alle enheder og platforme - Anjeet Singh, Asst. Direktør for Marketing Production, Google Design
Det er tilsyneladende, at Chrome's MD-opdatering handler om at levere en hurtigere og mere ensartet weboplevelse, men i virkeligheden vil det sandsynligvis blive genstand for hele webben som et Google-projekt.
Den nuværende version af Chrome er 49.0.2623.110, hvilket tyder på, at mindst en mindre opdatering kan forventes, før Chrome MD ruller ud i fuld kraft. Men markerer vi i dag den 1. april det punkt, hvor vi endelig omfavnede det homogene web?
Opdatering: Ja, heldigvis var denne artikel en April Fools 'joke.