ceslavaUn profe que hace webs

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

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.

navegando-iphone

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:

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:

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.

  1. 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
  2. OperaMini: La versión para móviles del famoso navegador.
  3. W3C Mobile OK Checker: Una iniciativa del World Wide Web Consortium para comprobar si tu web es «mobile-friendly».
  4. iPhoney: app que te ayuda a diseñar para el iPhone (sólo Mac)
  5. 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.
  6. iphonetester: emulador de iPhone e iPod. App web, se aconseja verla en Safari.
  7. 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 :)

Artí­culos relacionados

Dicotomí­as relacionadas en pqpq.es

Fuentes

Curso completo de WordPress

Si queréis aprender WordPress, nada mejor que el curso de Armando Sotoca, 7 horas de ví­deotutoriales del premiado CMS por 41,48€

altWordPress es un pequeño gestor de contenidos que ha revolucionado el panorama de publicación en internet, haciendo fácil y accesible para todos la creación de una web personal. Ya seas todo un profesional informático o alguien que está dando sus primeros pasos, WordPress podrá adaptarse a tus necesidades y servirte de ventana a internet. Con este curso video2brain te iniciarás en el uso de WordPress, qué es, para qué sirve, cómo instalarlo y entender cómo funciona. Aprenderás lo fácil que es añadir funcionalidades, realizar tareas de mantenimiento o evitar el indeseable spam. Todo, explicado desde un punto de vista que no requiere de amplios conocimientos para poder entenderlo.

También gestionamos las ayudas para Formación para trabajadores de la Fundación Tripartita. Con ellas nuestros cursos te salen completamente gratis. Si necesitáis más información sobre los cursos contactad conmigo

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

  1. 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