Prepara tu web para el iPhone X
El iPhone X está a la vuelta de la esquina, y para aprovechar al máximo sus prestaciones es necesario realizar algunas mejoras para que nuestra web se vea correctamente en este nuevo dispositivo. En este artículo os ofrecemos algunos consejos para conseguirlo.
Características del dispositivo
Dimensiones de la pantalla
Pese a que el iPhone X ha traído consigo muchas novedades, la que más nos interesa en este artículo es su nueva pantalla AMOLED, conocida como ‘Super Retina display’.
Las dimensiones de la pantalla, nos ofrecen una relación de aspecto de 19.5:9 en un total de 5.56 pulgadas, bajo una resolución de 1125px por 2436px (~458 ppi). Si lo comparamos con otros dispositivos, disponemos de un 30% más de superficie disponible respecto a un iPhone 8, y un 5% menos que en el caso de un iPhone 8 Plus.
El ‘Notch’
De toda la superficie disponible en la pantalla, debemos tener en cuenta el corte o ‘Notch’ que encontramos en la parte superior, el cual ha provocado que más de un diseñador se llevara las manos a la cabeza. Este corte hace que una parte del contenido quede oculto si no se añade un margen que lo empuje hacia abajo. Por ello, se han pensado diferentes soluciones con las que disimular el ‘Notch’:
Aun así, Apple ha dejado muy claro que no es partidaria de ocultar la ‘forma original’ del dispositivo, así que la opción de la derecha de momento no es aceptada por los de Cupertino:
Don’t mask or call special attention to key display features. Don’t attempt to hide the device’s rounded corners, sensor housing, or indicator for accessing the Home screen by placing black bars at the top and bottom of the screen. Don’t use visual adornments like brackets, bezels, shapes, or instructional text to call special attention to these areas either.
Eliminación del botón ‘Home’
La eliminación del botón ‘Home’ ha llevado a que todas las acciones realizadas con dicho botón se deban realizar ahora con gestos táctiles. Por ejemplo, para cerrar una aplicación, Apple ha situado una ‘barra’ en la parte inferior del dispositivo que se sobrepone al contenido que queda justo por detrás:
Preparando nuestra web
Debido a las características que hemos comentado anteriormente, es necesario realizar algunas modificaciones en vuestro proyecto para conseguir que se visualice correctamente en el dispositivo. Estos son algunos de los factores a tener en cuenta:
Elegir utilizar toda la pantalla o escalar el contenido
Por defecto, cualquier web que se visualice en un iPhone X mantendrá dos márgenes a derecha e izquierda con el objetivo que el ‘Notch’ del dispositivo no tape el contenido:
En el caso que queramos eliminar estos márgenes y aprovechar toda la pantalla, necesitaremos añadir la siguiente etiqueta <meta> en el <head> de nuestro documento HTML:
<meta name="viewport" content="initial-scale=1, viewport-fit=cover">
Con esta modificación, conseguiremos una experiencia más inmersiva ya que aprovechamos la totalidad del espacio disponible. Aun así, deberemos tener en cuenta que con esta práctica parte del contenido puede quedar oculto debajo del ‘Notch’.
Respetar las ‘áreas seguras’
Si elegimos utilizar todo el espacio disponible en la pantalla, será necesario añadir márgenes en aquellos elementos de nuestra web que no queremos que queden ocultos bajo el ‘Notch’. Para ello, Safari en iOS 11 incluye 4 variables de CSS predefinidas con las que podemos controlar los márgenes de las denominadas ‘áreas seguras’. Nos servirá utilizando la nueva función constant() de CSS:
.content {
padding-left: constant(safe-area-inset-left);
padding-right: constant(safe-area-inset-right);
padding-top: constant(safe-area-inset-top);
padding-bottom: constant(safe-area-inset-bottom);
}
safe-area-inset-left para separar el contenido del 'Notch'.Definir el color del body
En el caso de no utilizar el modo ‘cover’, también tenemos la opción de modificar el color de fondo del body de nuestro documento HTML para que se adapte a la temática de nuestro contenido:
body {
background-color: #BDBDBD;
}
Evitar solapar la barra de cierre con cualquier otro elemento
Es necesario revisar que ningún elemento con el que se pueda interactuar quede bajo la barra que se utiliza para el cierre de las aplicaciones. Para solucionarlo, podemos añadir un padding-bottom con el que separar el contenido del elemento:
Exportar assets @ 3x
Debido a la alta resolución de la pantalla del iPhone, será necesario exportar aquellos recursos rasterizados (imágenes PNG, JPG…) a 3x (el triple de la resolución original) para que se vean completamente nítidos:
Aprovechar el ‘Notch’ con creatividad
Si tienes una mente creativa, puedes hacer como @0therPlanet e intentar aprovechar el ‘Notch’ para integrarlo completamente en tu proyecto. Aún no sabemos como actuará Apple ante estas prácticas (sobretodo en el desarrollo de aplicaciones nativas) pero pueden ayudarnos a dar un toque diferenciador a vuestro site:
Otros recursos
- Podéis probar como quedaría vuestra web en el iPhone X utilizando el Simulador de dispositivos de Xcode 9: https://developer.apple.com/iphone/
- Apple ha añadido el iPhone X a su UI Kit, así que podrás diseñar las pantallas de tu proyecto antes de realizar cualquier modificación https://developer.apple.com/ios/human-interface-guidelines/overview/iphone-x/
- En la web de WebKit podéis encontrar una entrada muy interesante sobre el diseño y la adaptación de aplicaciones web para el iPhone X https://webkit.org/blog/7929/designing-websites-for-iphone-x/
- Os dejamos un CodePen que realizamos en homenaje al décimo aniversario del iPhone https://codepen.io/alexmasnou/pen/MvBMpw
