Desde la salida del Retina Display, se duplicó la densidad de pixeles que utilizábamos para diseñar y construir sitios webs para iPhone. Aunque si seguías utilizando los acostumbrados 480x320px de las pantallas anteriores, se nota bastante el pixel en estos nuevos teléfonos. Pero si trabajas para la nueva resolución de 960x640px, ¿qué haces con los modelos anteriores?
Suele ser común el pensamiento que 1 pixel en CSS es 1 pixel en la pantalla del dispositivo. Cuando entramos al nuevo mundo de la alta definición un pixel en CSS termina siendo múltiples en la pantalla. Un ejemplo es si defino un zoom de 2x, entonces 1 pixel de CSS termina siendo 2×2 cuadrados de pixel en el dispositivo. Y eso es lo que está sucediendo desde el iPhone 4.
Entonces, la pregunta es sencilla: ¿Cómo trabajamos con Retina sin dejar de lado las resoluciones anteriores?
La respuesta viene de la mano del potente Mobile Safari y su capacidad de responder mediante CSS3 media queries. Podemos detectar si el dispositivo duplica la densidad del pixel, y si es así modificar el estilo reemplazando las imágenes por una de doble resolución:
<link rel="stylesheet" type="text/css" href="css/normal.css"> <link rel="stylesheet" type="text/css" href="css/retina.css" media="only screen and (-webkit-min-device-pixel-ratio: 2)" >
El secreto está en que definas las imágenes que querrás se vean de mejor calidad en un iPhone 4+ mediante background-image de CSS, por ejemplo:
normal.css
#logo {
background-image: url('images/logo.png');
background-size: 100px 100px;
background-repeat: no-repeat;
}
retina.css
#logo {
background-image: url('images/logo_hi.png');
}
Te recomiendo apreciar el ejemplo desde tu teléfono móvil, para que realmente veas los resultados:
Como el navegador va a leer sí o sí normal.css, y por gracia del media="only screen and (-webkit-min-device-pixel-ratio: 2) sólo los dispositivos que tengan duplicados su resolución leerán retina.css y sobreescribirán los estilos definidos en esta hoja de estilos por sobre la anterior. La idea es que sólo definas las propiedades que cambien, no es necesario que reescribas todo el código.
Mediante JS
Otra manera es hacerlo mediante JavaScript, la cual encuentro innecesaria pero de todas maneras dejo la opción:
<script type="text/javascript">
if (window.devicePixelRatio >= 2) {
document.write("<link href='css/retina.css' rel='stylesheet' type='text/css' media='screen' />");
} else {
document.write("<link href='normal.css' rel='stylesheet' type='text/css' media='screen' />");
</script>
Links:
]]>Poner en práctica este tema me ha costado mucho tiempo de documentarme, de pruebas y errores. Si te vas a aventurar en este medio, creo importante que tengas claro algunos puntos y otros que se los transparentes al cliente, todo para evitar posteriores decepciones:
Estudia cada dispositivo, sus fortalezas y limitaciones
Desde que salió el iPhone, se abrió una nueva manera de tratar sitios web para móviles. Se pensaba que con el marcado WML y estilos básicos bastaban, pero Apple demostró que se puede hacer mucho más y mejor en tan poco espacio. Google ofrece mucho con su navegador basado en Webkit, Opera soporta XHTML en su Opera Mini. Es importante que sepas cómo y qué te ofrece cada dispositivo, y eso se lo traspasas a tu cliente.
Trata de hacer versiones para iPhone, smartphones y los que sobran
Básicamente iPhone es el que tiene mayores diferencias en la manera de tratar el código fuente, así que es mejor hacer una versión del sitio sólo para este dispositivo. Agrupa los smartphones (Blackberry, Nokia) y crea una versión con buen HTML y estilos sobrios; cuida que el HTML sea sencillo para el resto de los browsers más limitados (Palm, Windows Mobile). Para detectarlos, te recomiendo un sencillo pero útil script en PHP que hace el trabajo por tí.
Ten cuidado con Blackberry (y Nokia)
He tenido grandes decepciones con las versiones del browser de Blackberry y Nokia: suelen comportarse diferente entre modelos inmediatos, y esas diferencias son sustanciales. Lamentablemente, te recomiendo que uses HTML 4 y CSS1 para asegurarte con todos los modelos de estas marcas.
Deja el comportamiento para el servidor
Si debes validar campos de formularios, déjaselo al servidor y no al browser. Al contrario de iPhone, muchos teléfonos traen Javascript deshabilitados por defecto. No esperes que el usuario los haya habilitado manualmente; si puedes, evítalo.
No confies en los simuladores
Una lástima, pero te recomiendo que le agregues a tu lista de amigos, el modelo y versión de teléfono celular que tiene cada uno para que te ayuden a probar tus desarrollos. Sólo así tendrás certeza del correcto funcionamiento que esperan tú y tu cliente.
Ten mucha, pero mucha paciencia
Si crees que por ser sitios menores te será fácil, te decepcionarás: son muchas más las variables que debes tener presente, y probablemente el esfuerzo será mayor. Planifica muy bien con tu cliente lo que él espera ver e interactuar mediante un móvil, aterrízalo con las limitaciones que encuentres y lleguen a un acuerdo razonable para ambos.
Links:
]]>
Lo bueno es que iPhone usa Safari como browser (hasta ahora, único). Estoy muy acostumbrado con su uso y manejo, así que conozco bien sus potenciales. Para ser específico, el motor de iPhone es el WebKit 419.3, (el que correspondería al de Safari 2 para plataformas Mac OS X). Es posible crear sitios que sólo sean vistos por este Safari, tal como una hoja de estilos media="handheld" es leída sólo por dispositivos móviles; ya iPhone no lo interpreta, utiliza por defecto la hoja de estilos principales (sea media="all" ó media="screen").
Entonces ¿cómo lo hace?
Para crear estilos sólo para iPhone, podemos linkear una hoja de estilos externa pero con un cambio en el atributo media:
<link href="estilos_iphone.css" rel="stylesheet" media="only screen and (max-device-width: 480px)" />
Este cambio en media es propio de CSS3, una de las ventajas de Safari. Dice precisamente que para anchos de pantalla de hasta 480px (que es el ancho máximo del iPhone en apaisado) utilice tal hoja de estilos. Ahora, para los otros anchos (computadores personales):
<link href="estilos_iphone.css" rel="stylesheet" media="only screen and (min-device-width: 481px)" />
Nuevamente, esto sólo funcionará en Safari 2+ para Mac OS X ó Windows; para que se comporte debidamente en todos los browsers, recomiento primero linkear la hoja de estilos general como siempre lo han hecho (media="screen"), y a continuación la del iPhone con el media="only screen and (max-device-width: 480px)" que ya mostré.
La otra manera (que utilizaré en los ejemplos, los que podrás notar diferencia si los ves con un iPhone, claro) ya la había mencionado en un artículo anterior, y se usan juntos del mismo estilo:
@media screen {
// estilos para todos los browsers
}
@media screen and (max-device-width: 480px) {
// estilos sólo para iPhone
}
También puedes detectar si el sitio se está leyendo desde el iPhone y redireccionarlo a otra página mediante PHP (que fue lo q usé para CSSLab), como por ejemplo:
if (stristr($_SERVER['HTTP_USER_AGENT'], ‘iPhone’)) {
// redirecciona
}
Otro punto a tener en cuenta es la etiqueta <meta> y el valor viewport. Con él podemos manejar varias propiedades al momento de cargar la página en sus iPhone. Sus valores son:
- width: controla el ancho el cual la página se mostrará en primera instancia. Cuando cargas una página, Safari la adapta para el el 100% del alto y del ancho para que quepa dentro de la primera vista. Si el ancho de tu sitio es de 800px, pero quieres que al momento de cargar la página se desplieguen los primeros 400px, lo defines mediante este valor.
- height: similar al anterior, la página se cargará mostrando el alto que determinemos en primera instancia, aunque éste sea mayor.
- user-scalable: determina si el usuario puede o no hacer zoom (in-out) a la página. El valor por defecto es ‘yes’.
<meta name="viewport" content="width=300, user-scalable=no" />
Otro punto es la capacidad de esconder la barra de URL que tiene Safari, y desplegar la página sin ella. A través de Javascript podemos hacer ese desplazamiento apenas la página cargue, de la siguiente manera:
setTimeout(function(){
window.scrollTo(0, 1);
});
Esto funciona sólo si el alto de la página es mayor al de la ventana al momento de cargarse.
Otro punto a considerar es la capacidad de interactuar con elementos propios de iPhone a través de simple HTML y enlaces, por ejemplo:
- Para hacer una llamada telefónica a través de un link:
<a href="tel:6666666">Hacer llamado</a>
- Para enviar un e-mail:
<a href="mailto:usuario@dominio.com">Envia un e-mail</a>
- Para buscar un lugar en Google Maps:
<a href="http://maps.google.com/maps?q=santiago+chile">Santiago, Chile</a>
El ultimo punto que mencionaré en este artículo, es el poder de Safari cuando hablamos de estilos. Principalmente, cuando queremos aplicar estilos para elementos de formulario. WebKit tiene propiedades propias que podemos finalmente utilizar sin vergüenza: radio, opacidad y sombras, entre otros:
Finalmente, algunos aspectos técnicos sobre Safari y la plataforma misma iPhone.
Aspectos técnicos:
- HTML 4.01
- XHTML 1.0
- CSS 2.1 y algo de CSS 3
- Javascript 1.4
- Manipulación del DOM
- Ajax
Sobre dimensiones:
- el ancho de la pantalla es de 320px.
Sobre imágenes:
- Soporte para GIF animados (aunque no deben pasar de 2mb), JPG, PNG y TIFF (hasta 8mb).
Sobre medios:
- Soporte para PDF y Quicktime.
- No soporta Java ó películas Flash.
Sobre Javascript:
- Limitado a 5 segundos, 10mb y máximo 8 documentos al mismo tiempo.
- Algunos eventos no son soportados: mouseover, mouseout, onmouseenter, onmouseleave, onmousemove, onSelect, onresize y onScroll.
- No permite cortar/copiar/pegar, drag&drop y selecccionar texto/elementos.
Sobre estilos:
- Safari para iPhone no reconoce los media types print y handheld.
- Soporta estilos propios de WebKit.
- No soporta pseudoclass :hover.
- Las tipografías soportadas son American Typewriter, Arial, Arial Rounded MT Bold, Courier, Courier New, Georgia, Helvetica, Helvetica Neue, Marker Felt, Times New Roman, Trebuchet MS, Verdana y Zapfino.
Sobre HTML:
- No soporta subida de archivos <input type="file" /> (se deshabilita).
- Enlaces pueden ser directos para números telefónicos, emails y mapas de Google.
- No soporta tooltips, aunque muestra el contenido del atributo title="" si mantienes presionado el enlace.
Algunas buenas prácticas a considerar:
- Siempre separar HTML y CSS
- Usar HTML bien estructurado y válido
- Escalar y optimizar imágenes apropiadamente, no a través de estilos o atributos HTML.
- Evitar uso de <frameset>.
- Utilizar columnas para mejor manejo de zoom (evitar ancho completo).
Links:
]]>Tamaños de pantallas:
Aquí comienzan los problemas. Claro, nada es perfecto. La mayoría de las pantallas son verticales; las menos apaisadas, y menos aún las que puedes escoger entre ellas. El tamaño más común hoy en dia corresponden a 176 x 208px. Algunos más antigos tienden al cuadrado (128 x 128px y 120 x 144px). PDA’s usualmente usan VGA (480 x 640px). Otros tamaños comunes son de 200 x 640px y 320 x 640px.
Peso de imágenes:
La mayoría de los móviles no soportan millones de colores, como las pantallas. así que usar GIF en 32 colores, bien manejados, será suficiente. Simplificar al máximo los tonos utilizados será importante, ya que la pequeña pantalla y las condiciones en que el sitio será visto (en oscuro, a contraluz, caminando, acostado, etc.) no serán las mismas que en un computador, donde lo que se pretende es tener la mejor orientación posible del monitor.
Browsers:
Opera lleva la delantera. Sus browsers v7 han destacado por su simplicidad, y se presentan con gran cobertura en sus diferentes soportes: Symbian, Windows CE. Además, tiene buen soporte y renderizado de CSS 2.
Adaptando tu sitio:
Tan fácil como crear una nueva hoja de estilos. Aquí, deberás simplificar el contenido, mostrando sólo lo importante y esencial que quieres que el usuario vea. Nada de parafernalia. Importante es darle la propiedad al HTML que pertenezca a esta nueva hoja de estilo. A continuación:
Screen: para desktops
<link rel=”stylesheet” type=”text/css” href=”pantalla.css” media=”screen” />
HandHelds: para celulares, PDA´s, etc
<link rel=”stylesheet” type=”text/css” href=”moviles.css” media=”handheld” />
display: none; es lo que usarás para ocultar div, p o lo que sea necesario. Mejor dicho, no necesario. Por ejemplo:
#super_imagen {
display: none;
}
No necesitamos que una imagen gigante se van en nuestro celular. No lo queremos tampoco.
width: 240px; será necesario formatear el ancho al deseado. max-width: 208px; también es importante, ya que permite que la columna o el contenedor no se pase de ese ancho.
body {
max-width: 208px;
}
Probándolo:
No necesitas utilizar un celular para ello. Opera trae una opción llamada Small Screen, donde te permite visualizar tu sitio con el media="handheld". Muy útil.