Responsieve webpagina's ontwerpen voor de iPhone X

Minder dan 24 uur geleden onthulde Apple de iPhone X. Daarmee kwam een ​​kleine nieuwe balk die vrolijk in de onderste ring zit en die nostalgische gevoelens over de fysieke startknop oproept. (10 lange jaren, RIP! )

De zwarte inkeping bovenaan bevat enkele van de meest geavanceerde sensoren en geavanceerde infrarood + illuminatortechnologie - die allemaal worden gebruikt voor het inschakelen van Face ID.

iPhone X inkeping.

Dit zou ook betekenen dat we video's bekijken of games spelen, we zullen constant getuige zijn van de zwarte inkeping die zijn onroerend goed aan de top van het 1000 $ -apparaat bezet - hoewel dit in de loop van de tijd misschien gemakkelijk wordt voor het oog. Apple heeft veel veranderingen aangebracht in hardware, software en iOS-interacties om dit mogelijk te maken en Safari's weergave van websites is daar een van.

Webpagina renderen op iPhone X

Landschap

De iPhone X geeft in de liggende modus webpagina's weer met witte balken aan de zijkanten. De eigen website van Apple wordt weergegeven met deze witte balken, hoewel veel delen afzonderlijke achtergronden hebben.

De enige manier waarop u uw pagina indrukwekkender kunt maken, is door een geschikte achtergrondkleur in te stellen voor uw mobiele webpagina - een kleur die overeenkomt met het kleurenschema van uw merk / website werkt in de meeste gevallen.

lichaam {
background-color: # 676767;
}

Secties op dezelfde pagina met verschillende achtergrondkleuren, verlopen of patronen geven echter nog steeds de gekozen achtergrondkleur aan beide zijden weer.

Portret

Wanneer de telefoon in de staande stand wordt gehouden (wat het meest populaire gedrag is), zijn er aan beide kanten geen witte stroken omdat het kijkvenster langs alle randen loopt.

In de portretmodus straalt de iPhone X overal zijn scherm uit. Het is meeslepend en het kijkvenster loopt naadloos over de afgeronde hoeken aan alle 4 de zijden.

Ook nemen de status en URL / navigatiebalken de gedefinieerde achtergrondkleur van de webpagina in beslag.

Dit is vergelijkbaar met Chrome op Android, waarbij de metatag voor de themakleur wordt weergegeven om de primaire kleur van de webpagina overal in de statusbalk weer te geven.

De portretoriëntatie opent nieuw onroerend goed om merkkleuren te pushen en is een kleine stap in de richting van het overbruggen van de kloof tussen progressieve web-apps en native app. Aan de andere kant heeft het renderen van een landschapswebpagina op Safari een paar knopen en het zou interessant zijn om te zien hoe dit met de tijd evolueert.

Geoptimaliseerde iPhone X-pagina - https://thepeachstudio.com/iphone-x

Met nieuwe richtlijnen die rond de inkeping worden ontworpen, benadrukt Apple iOS-ontwikkelaars om de afgeronde hoeken van het apparaat niet te verbergen of zwarte vlekken rond de inkeping in hun apps toe te voegen.

Meer lezen voor iOS-ontwikkelaars: omgaan met de Home-indicator op iPhone X, hoe iOS-apps zich aanpassen aan de schermgrootte van de iPhone X en richtlijnen voor de menselijke interface voor iPhone X

/ co-auteur van Krishna Murari

Bedankt voor het doorlezen. Als je dit bericht nuttig vond, applaudisseer dan met de -knop en deel het via je kringen.

Peach Studio helpt bij het bouwen van functionele web en mobiele producten, met een laserscherpe focus op ontwerp en bruikbaarheid. Heb een idee? Neem contact op