Diseño de páginas web receptivas para el iPhone X

Hace menos de 24 horas, Apple presentó el iPhone X. Junto con él apareció una pequeña barra nueva que se encuentra feliz en el bisel inferior que invoca sentimientos nostálgicos sobre el botón de inicio físico. (10 largos años, RIP! )

La muesca negra en la parte superior alberga algunos de los sensores más sofisticados y la tecnología más avanzada de infrarrojos + iluminadores, todos los cuales se utilizan para habilitar Face ID.

iPhone X Notch.

Esto también significaría ver videos para jugar, vamos a presenciar constantemente la muesca negra que ocupa su propiedad en la parte superior del dispositivo de 1000 $, aunque con el tiempo, esto podría ser fácil de ver. Apple ha realizado muchos cambios en las interacciones de hardware, software e iOS para acomodar esto y la representación de sitios web de Safari es uno de esos.

Renderizado de página web en iPhone X

Paisaje

El iPhone X, en modo horizontal, muestra páginas web con barras blancas a los lados. El propio sitio web de Apple se representa con estas barras blancas, aunque muchas secciones tienen fondos de colores individuales.

La única forma en que puede hacer que su página sea más envolvente es establecer un color de fondo apropiado para su página web móvil, un color que se alinea con el esquema de color de su marca / sitio web que funciona en la mayoría de los casos.

cuerpo {
color de fondo: # 676767;
}

Sin embargo, las secciones en la misma página con diferentes colores de fondo, gradientes o patrones aún mostrarán el color de fondo del cuerpo elegido en ambos lados.

Retrato

Cuando el teléfono se mantiene en orientación vertical (que es el comportamiento más popular), no hay franjas blancas en ninguno de los lados, ya que la ventana gráfica atraviesa todos los bordes.

En el modo vertical, el iPhone X rezuma su pantalla por todas partes. Es inmersivo y la ventana gráfica se ejecuta sin problemas a través de las esquinas redondeadas en los 4 lados.

Además, el estado y las barras de URL / navegación toman el color de fondo definido de la página web.

Esto es similar a Chrome en Android que representa la metaetiqueta del color del tema para tomar el color primario de la página web en toda la barra de estado.

La orientación vertical abre nuevos espacios para impulsar los colores de la marca y es un pequeño paso para cerrar la brecha entre las aplicaciones web progresivas y las aplicaciones nativas. Por otro lado, la representación de la página web horizontal en Safari tiene algunos nudos vinculados y sería interesante ver cómo evoluciona esto con el tiempo.

Página optimizada de iPhone X: https://thepeachstudio.com/iphone-x

Con nuevas pautas diseñadas alrededor de Notch, Apple está enfatizando a los desarrolladores de iOS para que no oculten las esquinas redondeadas del dispositivo o agreguen parches negros alrededor de la muesca en sus aplicaciones.

Lectura extendida para desarrolladores de iOS: Manejo del indicador de inicio en iPhone X, cómo las aplicaciones de iOS se adaptan al tamaño de pantalla del iPhone X y las pautas de interfaz humana para iPhone X

/ coautor de Krishna Murari

Gracias por leerlo. Si encuentra útil esta publicación, aplauda con el botón y compártala a través de sus círculos.

Peach Studio ayuda a crear productos funcionales web y móviles, con un enfoque nítido en el diseño y la usabilidad. ¿Tengo una idea? Ponte en contacto