Sedan 2014 har Google omstrukturerat sina appar och tjänster enligt sina egna Material Design principer. I går det tillkännagav på sin designblogga att en kommande version av sin Chrome-webbläsare (version 49.2) kommer att anta materialdesign som standardavgivning.
Kritiskt sett kommer den nya versionen av Chrome-dubbed Chrome MD att åsidosätta webbplatsdefinierad CSS i överensstämmelse med materialdesignspecifikationen; färger, typ och jämna bilder kommer att göras enligt Googles designsprog.
En pelare i tech giantens designstrategi i nästan två år har spridningen till Material Design visat sig framgångsrikt för Google i sina applikationer, och enligt Google kommer det att säkerställa en konsekvent och högkvalitativ kvalitet som innebär att designsystemet på innehåll som visas i sina webbläsare användarupplevelse för sina kunder:
Vi utvecklade Materialdesign för att ge våra kunder den bästa användarupplevelsen, och vi tror att de förtjänar den kvaliteten varje gång de använder en Google-produkt - Anjeet Singh, Asst. Direktör för marknadsföring, Google Design
Förutom att rebranding webben i sin egen bild kommer den primära effekten av denna uppdatering att bli en radikalt snabbare web.
Googles främsta oro är för en snabbare web, och genom att begränsa de variabler som webbläsaren är tvungen att göra, förväntar man sig att de första sidorna görs med i genomsnitt 17%.
Chrome MD gör webbsidor snabbare än vanlig HTML utan CSS. Detta beror på att även om inga stilar är definierade behöver webbläsare fortfarande undersöka möjliga stildefinitioner. Chrome MD hoppa helt enkelt över den här stegen efter sitt interna stylesystem.
Chrome MD markerar ett viktigt antagande av AMP (Accelerated Mobile Pages), vilket avsevärt minskar webbläsarens arbetsbelastning. Men majoriteten av prestationsvinsterna har hittats genom att begränsa stilalternativ.
Material Designens färgpalett är begränsad till 256 färger, och Chrome MD kommer inte att ge någon annan färg än de 256 hex-värdena.
Om designers anger ett hexvärde annat än en av de 256 godkända färgerna, översätter Chrome MD det automatiskt till sin närmaste materialdesignekvivalent. Till exempel kommer dessa två olika röda att göra som samma Material Designfärg:
p.material { color:#E53935; } /* renders correctly as #E53935 */p.notMaterial { color:#EF2A39; } /* renders incorrectly as #E53935 */
Samma princip gäller för RGB-värden, RGBA-värden kommer att översättas till närmaste materialdesignfärg baserat på den färg de lägger på.
Gradienter kommer inte att ge alls i Chrome MD. Den slutna beta-implementeringen (som gradienterna gör som deras genomsnittliga tonvärde) förväntas emellertid anpassas för att göra den lättaste nyansen som hittades i lutningen.
Samma färgrestriktioner gäller också för bilder: varje pixel i en bitmappsavbildning kommer att göras som en av Material Designs 256 definierade färger, ungefär som nuvarande .gif-teknik. SVG-färgvärden konverteras också automatiskt.
Google har gett ett undantag till bildregeln för fall som beskrivs som "färgkritiska", genom att piggy-backa inställningen -webkit-utseende :
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 den här lösningen fungerar bara med bitmappar och inbäddade SVG-filer, inline SVG kommer alltid att användas med materialdesignfärger.
Om du ersätter standardsystemfonter görs all text i Chrome MD med en enda inbäddad fontfamilj. På grund av språkstöd blir det inte Roboto som kan förväntas, men Noto .
Texten kommer också att göras i 1 av 2 toner: svart eller vit; tonen kommer automatiskt att väljas utifrån bakgrundsfärgen. Gradationer av tonen kommer att vara bestäms automatiskt : På mörka bakgrunder kommer H1-H6 att ge 100% opacitet, all annan text vid 70% opacitet På lätta bakgrunder H1-H6 kommer att ge 87% opacitet, all annan text kommer att ge 54% opacitet.
Chrome MD kommer också att genomdriva en styv typografisk skala för vikter, storlekar och linjens höjd:
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; }
Dessa stilar kommer inte att överdrivas, och det finns inte kursiv alternativ.
Kanske är det mest radikala beslutet det obligatoriska införandet av en enda uppmaning till handling. Detta definieras med id primära och kommer att bli gjord som en flytande åtgärdsknapp :
https://sv.odwebdesign.net/google-challenges-responsive-best-practice-with-resizer/"> Resizer App, de användbara brytpunkterna är: 360px, 480px, 600px, 720px, 840px, 960px, 1024px, 1280px, 1440px, 1600px.Varje designdefinierad brytpunkt som inte passar kommer att avrundas till nästa högsta brytpunkt. Till exempel:
@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 inverkan
Google har en lång och stolt historia om att lägga sin vilja på webbdesigners, från oanmälda uppdateringar till dess algoritm, till antagandet av AMP. Emellertid kommer imponerande materialdesign på webben sannolikt att ha störst effekt.
Naturligtvis påverkar dessa ändringar endast webbplatser som ses i Chrome, men med mer än 52% av den globala användningen av webbläsaren är det svårt att föreställa sig en webbplats som inte påverkas.
Vår primära oro är för kvaliteten på våra kunders erfarenhet. Och så rekommenderar vi att alla webbdesigners använder Best Practices för materialdesign för att säkerställa att de levererar en konsekvent upplevelse för sina kunder över alla enheter och plattformar - Anjeet Singh, Asst. Direktör för marknadsföring, Google Design
Förstklassigt är Chromes MD-uppdatering handlar om att leverera en snabbare och mer konsekvent webbupplevelse, men i verkligheten kommer det sannolikt att göra om hela webben som ett Google-projekt.
Den nuvarande versionen av Chrome är 49.0.2623.110, vilket tyder på att minst en mindre uppdatering kan förväntas innan Chrome MD rullar ut i full kraft. Men markerar idag den 1 april, den punkt som vi äntligen omfamnade den homogena webben?
Uppdatering: Ja, tack och lov var den här artikeln ett skämt från april.