Accesibilidad, WordPress, compatibilidad y CSS para el iPhone y otros dispositivos móviles

13 de Julio, 20092 Comentarios

El iPhone y los dispositivos móviles son empleados cada vez más para acceder a Internet. Las compañías de telecomunicaciones lanzan tarifas planas e híbridas para animar a la movilidad de sus clientes.

Seas de los que piensan que se vivía mejor sin móviles o apasionado del iPhone como Arturo Goga si eres diseñador o desarrollador web te debe interesar cómo evoluciona el mercado de los dispositivos con acceso a Internet.

Si diseñamos pensando sólo en resoluciones 1024×768 o mayores nos olvidamos de los dispositivos móviles que como el iPhone usan resoluciones de 320×480 (o viceversa) y de los que cada vez más tienen un ultraportátil.

Posibles soluciones para diseñar para móviles

1.- Layouts líquidos o elásticos

El abanico de resoluciones es tan grande que un layout líquido o elástico podría ser la solución. En el repaso que Olga Carreras de buenas prácticas en HTML y CSS enfocadas a la accesibilidad se aconseja el uso de unidades relativas y porcentajes. El problema es que si dicho layout es multicolumna en resoluciones pequeñas el ancho de las mismas será ridículo.

2.- Uso de distinto CSS

Javier Aroche nos da dos soluciones para el iPhone

Detectar el dispositivo en el que se está viendo nuestra web y especificar un CSS distinto. Podemos hacerlo mediante un condicional PHP:

if (stristr($_SERVER['HTTP_USER_AGENT'],'iPhone')) {
       /* iPhone user */
}

o mediante una expresión CSS3:

<link media="only screen and (max-device-width: 480px)"	href="iPhone.css" type="text/css" rel="stylesheet" />

3.- Dominio .mobi

Son muchas las compañías que adquieren el dominio .mobi para su versión para móviles, pero son también muchos los que opinan que no es la mejor alternativa.

Soluciones para WordPress

1.- Plugins y Themes

Si tu sito está gestionado por WordPress puedes utilizar:

este plugin y theme iWPhone WordPress Plugin and Theme. El plugin detecta el dispositivo para utilizar el theme optimizado para el iPhone e iPod (instrucciones en español)
plugin para iPhone y PDA: Wordpress PDA & iPhone
WPTouch: el más completo y personalizable. Integración con Flickr y otros. Para iPhone, iPod y Android.

2.- Función para detectar navegador y especificar estilo

Puedes añadir a tu archivo functions.php este código de wp-recipes:

<?php
add_filter('body_class','browser_body_class');
function browser_body_class($classes) {
	global $is_lynx, $is_gecko, $is_IE, $is_opera, $is_NS4, $is_safari, $is_chrome, $is_iphone;

	if($is_lynx) $classes[] = 'lynx';
	elseif($is_gecko) $classes[] = 'gecko';
	elseif($is_opera) $classes[] = 'opera';
	elseif($is_NS4) $classes[] = 'ns4';
	elseif($is_safari) $classes[] = 'safari';
	elseif($is_chrome) $classes[] = 'chrome';
	elseif($is_IE) $classes[] = 'ie';
	else $classes[] = 'unknown';

	if($is_iphone) $classes[] = 'iphone';
	return $classes;
}
?>

Esto añadirá una clase a la etiqueta body de tus páginas según el navegador de forma que puedas personalizar el CSS

<body class="home blog logged-in iphone">

En esta otra solución de Andrés Nieto se detecta para cambiar todo el theme.

3.- Paneles de administración

Una vez que tenemos el diseño optimizado para el frontend qué ocurre si queremos entrar en nuestro panel de administración desde el dispositivo móvil. La solución es instalar alguna de estas app:

WordPress y Tumblr para Blackberry
WordPress para iPhone

7 herramientas para testear tu web en distintos dispositivos móviles

El problema es que no siempre disponemos de todos los gadgets para ver in situ nuestra web, igual que no siempre tenemos equipos con distintos Sistemas Operativos y utilizamos alguna solución alternativa para comprobar testearlos.

MobiReady: app web gratuita, además del renderizado te da una valoración, consejos e incluso el costo y el tiempo de visitarla. Mucho más completa que dotMobi Emulator
OperaMini: La versión para móviles del famoso navegador.
W3C Mobile OK Checker: Una iniciativa del World Wide Web Consortium para comprobar si tu web es “mobile-friendly”.
iPhoney: app que te ayuda a diseñar para el iPhone (sólo Mac)
ViewLikeUs además de poder ver cómo se ve tu web a distintas resoluciones tienes la posibilidad de ver cómo se renderiza en un iPhone o en la Wii.
iphonetester: emulador de iPhone e iPod. App web, se aconseja verla en Safari.
TestiPhone: otro emulador online del iPhone.

Todas estas opciones son gratuitas, de pago hay muchas otras como Device Anywhere, una app comercial.

Conclusiones

El mercado evoluciona a una velocidad que los diseñadores difícilmente alcanzamos, ni el más certero gurú vaticinó el auge de los ultraportátiles, no sabemos en qué acabarán los e-books, y no sabemos si el iPhone es el mejor sitio para llevar chuletas o si será capaz incluso de salvarnos la vida :)

Dicotomías relacionadas en pqpq.es

Fuentes

Six Tools For Testing Designs On Mobile Devices en SitePoint vía Blogoff
WordPress y Tumblr para BlackBerry
WPTouch, el nuevo theme para iphone

Añade tu propio comentario | 2 Comentarios

diseño y hosting dice:

13 Julio 2009 en 5:33 pm

No estoy en ninguna de las dos puntas, no creo que se viviera mejor sin celuar y a su vez creo que hay cierta tendencia a adquirir tecnologias que no se necesitan o no simplifican las cosas cotidianas. Hay un usuario para cada tecnología y los hay que necesitan conectividad 24/7 aunque no es el caso de la mayoría.

Responder
diseño de grafico dice:

15 Julio 2009 en 3:25 am

Excelente blog de diseño, realmente te felicito, me resulta de mucha utilidad. Esta nota sobre css es muy interesante

Responder