Designe responsive websider til iPhone X

For mindre end 24 timer siden afslørede Apple iPhone X. Sammen med den kom en lille ny bar, der sidder lykkeligt i bundrammen, der påkalder nostalgiske følelser om den fysiske hjemmeknap. (10 lange år, RIP! )

Det sorte hak på toppen huser nogle af de mest sofistikerede sensorer og avanceret infrarød + belysningsteknologi - som alle bruges til at aktivere Face ID.

iPhone X hak.

Dette ville også betyde, at man ser videoer til at spille spil, vi vil konstant være vidne til det sorte hak, der besætter dens ejendom øverst på 1000 $ -enheden - men med tiden kan dette muligvis være let på øjet. Apples har foretaget mange ændringer på tværs af hardware, software og iOS-interaktioner for at imødekomme dette, og Safari's gengivelse af websteder er en af ​​dem.

Webpage gengivelse på iPhone X

Landskab

IPhone X gengiver i landskabstilstand websider med hvide bjælker på siderne. Apples eget websted gengives med disse hvide søjler, selvom mange sektioner har individuel farvet baggrund.

Den eneste måde du kan gøre din side mere imponerende på er ved at indstille en passende baggrundsfarve på din mobile webside - en farve, der er i overensstemmelse med farveskemaet for dit brand / website fungerer i de fleste tilfælde.

krop {
background-color: # 676767;
}

Imidlertid viser sektioner på den samme side med forskellige baggrundsfarver, gradueringer eller mønstre stadig den valgte kropsbaggrundsfarve på begge sider.

Portræt

Når telefonen holdes i stående retning (som er den mest populære opførsel), er der ingen hvide strimler på begge sider, da visningen løber gennem alle kanter.

I portrættilstand oser iPhone X sin skærm rundt. Det er fordybende, og udsigten løber problemfrit over de afrundede hjørner på alle 4 sider.

Status- og URL- / nav-bjælker optager også den definerede baggrundsfarve på websiden.

Dette ligner Chrome på Android, der gengiver temafarvet metatag for at tage websideets primære farve på tværs af statuslinjen.

Portrætorienteringen åbner nye ejendomme for at skubbe til mærkefarver og er et lille skridt hen imod at bygge bro over mellemrummet mellem progressive webapps og native app. På flipside har gengivelse af landskabssiden på Safari et par knob bundet til det og det ville være interessant at se, hvordan dette udvikler sig med tiden.

iPhone X-optimeret side - https://thepeachstudio.com/iphone-x

Med nye retningslinjer, der er designet omkring hak, understreger Apple iOS-udviklere til ikke at skjule enhedens afrundede hjørner eller tilføje sorte opdateringer omkring hakket i deres apps.

Udvidet læsning til iOS-enheder: Håndtering af Hjem-indikatoren på iPhone X, hvordan iOS-apps tilpasser sig iPhone Xs skærmstørrelse og retningslinjer for menneskelig grænseflade for iPhone X

/ medforfatter af Krishna Murari

Tak for at have læst igennem. Hvis du fandt dette indlæg nyttigt, bifalder du ved hjælp af knappen og deler det gennem dine cirkler.

Peach Studio hjælper med at opbygge funktionelle web og mobile produkter med laserskarpt fokus på design og brugervenlighed. Har du en idé? Kontakt