usabilidad-pantalla-tablet-movil

Diseño web: Usabilidad de la navegación en Tablet y Movil

La navegación en movil y tablet puede seguir los mismos patrones que las webs desktop?
Hasta que punto una web puede ser responsive y adaptarse a todos los dispositivos solo por CSS?
Cuando hablamos de pequeñas webs, no lo dudo. Ahora para un .com lo más probable es que habra que cargar una plantilla especifica para movil.

Usabilidad de la navegación en Tablet y Movil

Usabilidad de la navegación en Tablet y Movil

Estudio de LukeW

Crear una web para movil

Crear una web para movíl

Discriminación CSS

@media screen and (max-width:320px) {
.sidebar { display: none }
}
@media screen and (min-width:1920px) {
body { font-size: 15px }
}

Evitar imagenes para reducir peticiones.

Ejemplo, usar codigo ASCII :
★ Para un estrella llena de rating (★) and ☆ para una estrella vacia (☆)

Crear un enlace hacia un numero de telefono

<a href=”tel:+18005550199″>1-800-555-0199</a>

Viewport Meta Tag

viewport meta tag para que el tamaño de la web se adapte al tamaño del dispositivo:
<meta name=”viewport” content=”width=device-width, initial-scale=1″ />

CSS especial para pantallazas grandes

<link rel=”stylesheet” type=”text/css” href=”style.css” media=”screen, handheld” />
<link rel=”stylesheet” type=”text/css” href=”enhanced.css” media=”screen  and (min-width: 40.5em)” />
<!–[if (lt IE 9)&(!IEMobile)]>
<link rel=”stylesheet” type=”text/css” href=”enhanced.css” />
<![endif]–>

Algunos navigadores de moviles no suportan las media queries : Symbian browsers, Blackberry <OS 6.0, Netfront, WP7 pre-Mango, etc
La ausencia de suporte para @media query es una primera media query 🙂

Detectar y redirigir hacia usuario de mobiles

Con javascript


<script type="text/javascript">
<!--
if (screen.width <= 699) {
document.location = "YOUR-MOBILE-SITE.com";
}
//-->
</script>

Con user agent:

<script type="text/javascript">
<!--
if ((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))) {
location.replace("http://YOUR-MOBILE-SITE.com");
}
-->
</script>

El nuevo metodo CSS @media


<link rel="stylesheet" href="screen.css" media="screen"/>

<link rel=”stylesheet” href=”handheld.css” media=”handheld”/>

Utilizando PHP

Pero aqui hay que actualizar una lista largissima de user-agents

<? if (
stristr($ua, "Windows CE") or
stristr($ua, "Mobile") ) {
$DEVICE_TYPE="MOBILE";
}
if (isset($DEVICE_TYPE) and $DEVICE_TYPE=="MOBILE") {
$location='YOUR-MOBILE-SITE.com/index.php';
header ('Location: '.$location);
exit;
}
?>

Si utilizas WordPress, y no quieres crear un theme en Responsible Design, puedes usar un plugin.
Le más comun es: http://wordpress.org/extend/plugins/wordpress-mobile-pack/
Pero igualmente tienes que adpatar tu wordpress al plugin!

WURFL = Wireless Universal Resource FiLe

WURFL es una base de datos universal de la lista completa y actualizada de todos los dispositivos.
Es un formto XML.

Crear un theme wordpress para movil

Como crear un theme wordpress para movíl : Responsive Web Design

Wordpress Crear un theme para movil

 

La gran parte del trabajo consiste en definir el concepto del diseño en detalle.

Se hace un borrador con los varios tamaños de pantallazas que queremos preparar.

Se suele hacer 2 o 3 : Movil, tablet, Desktop

 

Consejos para crear el borrador de template de movíl para wordpress

1 ) El menu

  1. No pondremos un drop down menu, porque no es de facil uso con una pantalla tactíl.
  2. Prioridad al contenido sobre navegación. Por el tamaño del diseño de la navigación, mejor no poner el menu primero.

… Mañana sigo

Responsive Web Design Barcelona

Cada vez más webs necesitan ser visibles en todos los dispositivos, en todos los tamaños.
El Responsive Web Design consiste en crear una web con diseño adaptable a los varios tamaños de pantallas:

– Pantalla movil, Iphone, Smartphone

– Pantalla de Tablets, IPad

– Pantalla de ordenador de mesa, portatil

Si necesiteis Responsive Web Design, no dudais en pedirnos información.