Pautas de diseño Web para iPhone

Pautas de diseño Web para iPhone

 

Como se ve tu página web en un iPhone? Necesitas hacer zoom? Es incómoda la navegación? Te cuesta acertar en los botones o escribir en los campos?

Estas son algunas de las dificultades en usar páginas web no adaptadas en el iPhone y otros dispositivos móviles. En Gestudio estamos especializados en adaptar páginas web a todo tipo de dispositivos, por eso, hemos escrito esta guia para ponertelo un poco más facil.

 

 

Piensa en pequeño para hacer grande tu aplicacion

Debes tener muy en cuenta dejar espacios amplios, como média, el dedo de un usuario va a acaparar de 40 a 70 pixeles, por lo que a la hora de hacer el diseño, amplia los paddings en los elementos de navegación para permitir una interacción más sencilla.

Afortunadamente existen métodos muy sencillos para usar hojas de estilo epecificas para este tipo de dispositivos con un simple tag en tu cabecera HTML:

<!--[if !IE]>-->
<link type="text/css" rel="stylesheet" media="only screen and (max-device-width: 480px)" href="iOs.css">
<!--<![endif]-->

Esta hoja de estilo será unicamente interpretada por iPhone y iPod touch, ni si quiera el iPad lo usará.

 

 

Estableciendo el ZOOM

El Safari de los dispositivos iOs tiene un zoom inteligente que se encarga de adaptar la página web que vemos a nuestra pantalla, además, nos permite hace zoom con los dedos en las zonas de texto o imágenes que deseemos.

Para darle más agilidad al tema, Apple ha incorporado una serie de META tags reconocidos que alteran este comportamiento para que el webmaster controle como se muestra su web en estos dispositivos.

Para poner la anchura total a la anchura del dispositivo:

<meta name = "viewport" content = "width = device-width">

Para indicar la escala inicial 1:1 sin importar el ancho total:

<meta name = "viewport" content = "initial-scale = 1.0"> 

Para cambiar la escala inicial a 2:3 y no permitir cambiarla:

<meta name = "viewport" content = "initial-scale = 2.3, user-scalable = no"> 

Adapta este parametro de tal forma que muestres la mayor cantidad de elementos en la pantalla, pero no te olvides del texto, debe ser legible desde el momento de la carga inicial sin hacer falta ningún zoom.

 

 

Ocultando la barra de navegación

Os abreis fijado que muchas webs, por ejemplo Twitter, oculta la barra de navegación para que no reste espacio.

Incluir este pequeño cacho de código Javascript y la barra desarparecerá nada más terminar de cargar la web.

<script>
window.scrollTo(0, 1);
</script>

 

 

El truco de la horientación de pantalla

El iPhone soporta la visualización en modo vertical y apaisado, esto nos propone un nuevo reto, ya que los inicialmente 320pixeles de ancho se nos quedan cortísimos, a su vez, el contenido adicional vertical ya no entrará en la pantalla.

Para poder enfrentarnos a esto desde CSS te proponemos lo siquiente:

Código en tu CSS:

 body[orient="portrait"] { property: value; } body[orient="landscape"] { property: value; } 

El siguiente Javascript lo puedes incluir en tu HEAM HTML para cambiar la propiedad CSS al vuelo.

<script type="text/javascript">// <![CDATA[
            window.scrollTo(0, 1);
            var updateLayout = function() {
                if (window.innerWidth != currentWidth) {
                    currentWidth = window.innerWidth;
                    var orient = (currentWidth == 320) ? "portrait" : "landscape";
                    document.body.setAttribute("orient", orient);
                    window.scrollTo(0, 1);
                }
            };

            iPhone.DomLoad(updateLayout);
            setInterval(updateLayout, 500);

// ]]></script>

Comparte este artículo