iPhone X: linee guida Apple per il web design

Il lancio di iPhone X, il nuovo smartphone edge-to-edge di Apple, ha destato una certa preoccupazione fra i web designer e gli sviluppatori di interfacce. Tutto a causa della porzione superiore dello schermo, pensato per avvolgere una piccola barra hardware dove vengono ospitate le fotocamere, i sensori di FaceID e lo speaker di chiamata. In molti si sono quindi domandati, data la singolare disposizione del pannello OLED, in che modo possa avvenire il rendering di pagine web e applicazioni, soprattutto in modalità landscape.

Dubbi alimentati anche dai leak apparsi online nelle ultime settimane, pronti a svelare una poco gradevole barra bianca in concomitanza con gli angoli superiori del dispositivo, tale da inficiare l'omogeneità della propria progettazione. Buone notizie, tuttavia, provengono da Apple Park: la società di Cupertino ha infatti rilasciato delle linee guida, sottolineando la possibilità di personalizzare i propri design affinché non vi siano intoppi di visualizzazione sui 5.8 pollici di iPhone X.

Il documento in questione ("Designing Websites for iPhone X") è stato pubblicato dal team Apple di WebKit sul portale online dedicato al motore di rendering, per spiegare tutte le alternative di visualizzazione per iPhone X. In linea generale, due le regole a cui prestare maggiore attenzione: il rispetto delle cosiddette "Safe Areas" e dei comandi di massimizzazione e minimizzazione del padding.

Attenzione, però: non tutte le stringhe elencate da Apple sono disponibili nell'attuale versione di iOS 11, ma verranno abilitate con un futuro aggiornamento, probabilmente contestuale alla disponibilità dello smartphone.

Safe Areas

Data la presenza della barra superiore dedicata a Face ID e agli altri strumenti di iPhone X, un buon rendering in modalità landscape potrebbe risultare difficoltoso. Parte dei contenuti, quali testi o immagini, potrebbero risultare inaccessibili perché "nascosti" dalla stessa barra hardware, mentre il lato inferiore dello schermo edge-to-edge potrebbe apparire poco comodo per la digitazione touchscreen, soprattutto in caso fossero presenti icone e menu.

Apple ha quindi pensato all'introduzione delle "Safe Areas", ovvero una sorta di cornice attorno alla progettazione originaria, affinché le porzioni scomode vengano liberate con l'aggiunta di spazio vuoto, dello stesso colore dello sfondo della pagina web. Questa opzione è gestibile tramite "viewport-fit”, mentre il colore o la tipologia di sfondo è definita dal classico body o dalle impostazioni del proprio foglio di stile.

In modalità "auto", vieport inserisce automaticamente le aree di sicurezza nel proprio design, mentre con "cover" si ottiene il riempimento fullscreen.

Come è facile intuire, la scelta di "cover" porterà alcuni elementi della pagina a essere coperti dalla barra hardware, tuttavia è possibile specificare proprie safe areas con "constant()”. Questo supporta l'intera cornice di sicurezza: "safe-area-inset-left", "safe-area-inset-right", "safe-area-inset-top" e "safe-area-inset-bottom".

Margini e padding

La specificazione di proprie safe areas, tuttavia, potrebbe portare a una fastidiosa visualizzazione in modalità portrait: il testo e gli elementi grafici, in alcuni casi, risultano infatti allineati all'estremità destra o sinistra del display. Per risolvere anche questo problema, sono necessari "min()" e "max()". Questi permettono di definire dei valori di padding personali, in relazione alle aree di sicurezza e all'effetto che si vuole ottenere per ogni orientamento del display di iPhone X.

Sarà possibile provare sin da subito le novità con il simulatore di iPhone X presente in Xcode 9, impiegando il browser Safari.

Via WebKit