5 trucos interesantes para tu Web en móvil o tablet

Website en ordenador, móvil y tablet

Todos lo sabemos, el futuro de la web es móvil: tabletas y smartphones son ya una parte importante de nuestro tráfico web —al menos en la nuestra ya representa el 13% de las visitas según Analytics, fíjate tú.

Nosotros nos hemos encontrado ante distintos retos cuando se trata de hacer que un website esté mejor adaptado a la visualización en tales dispositivos. ¿Queréis algunas soluciones interesantes con unos cuántos códigos simples, sin tener que hacer cambios dramáticos? Os las servimos en bandeja a continuación…

 

 

Adaptar la visualización encajándola al dispositivo

Si tu website no se ve “encajado” correctamente en una tablet o móvil, aunque no sea un sitio “responsive” (o sea, de esos que se adaptan a cada uno, mediante CSS o Javascript), aun así hay una etiqueta HTML que bien utilizada por lo menos dará cierta funcionalidad a las páginas.

[code]<meta name=”viewport” content=”width=device-width”>[/code]

Esta etiqueta, colocada en la zona de <head> de un documento HTML, provoca que el dispositivo ajuste el “zoom” para que todo el ancho de la zona de contenidos se encaje en el ancho del dispositivo. La mayoría de las veces con eso, al menos en un tablet, empieza la visualización a estar mejor encajada. Coloca el código en todas las páginas de tu web y empezará a tener todo otra “pinta”.

Más información sobre la etiqueta META de vierport en htmlcinco.com

 

Haciendo que el teléfono llame (o no)

Si colocas números de teléfono y otros datos, algunos dispositivos los intentan reconocer y que puedas tocarlos para utilizarlos (añadir direcciones en la agenda, etc.)

En ocasiones quieres específicamente poner un enlace a un teléfono de tal forma que puedas llamar desde un móvil. Ese tipo de enlaces son simples, sólo tienes que enlazar a tel:XXXXXXXX —sustiyendo las Xs por el número de teléfono todo seguido, sin espacios, guiones ni otros caracteres. El enlace en código quedará así tal como sigue:

[code]<a href=”tel:987271430″ title=”Llamanos por teléfono”>987 27 14 30</a> [/code]

Pero ¿y si lo que quieres evitar es que el iPhone, por ejemplo, autodetecte el teléfono (como suele hacerlo)? También es sencillo con otra etiqueta META, como es esta:

[code]<meta name = “format-detection” content = “telephone=no”>[/code]

Más información en esta página: Tips para optimizar tu página web en smartphones

 

Google Maps en versión móvil en un iPhone

A veces querrás ver la versión móvil de Google Maps, y a veces, no…

Mapas, no me vayáis a versión móvil, por favor…

En un móvil tiene sentido que si pones un enlace normal a Google Maps te salte una página que te recomiende descargarte la aplicación, y te dé la opción de seguir y verlo en formato “web móvil”. Pero en un tablet quizá no tanto…

Para forzar que se cargue en la versión estándar de Google Maps, añade la siguiente cadena a la URL: &ui=maps

Por ejemplo, si la dirección del enlace al mapa fuera:
[code]http://maps.google.es/maps?q=Gran+Via+37+madrid[/code] la sustituiríamos por:
[code]http://maps.google.es/maps?q=Gran+Via+37+madrid&ui=maps[/code]

Y si queremos forzar a que se cargue la versión móvil en todos los casos, pondríamos la URL así:
[code]http://maps.google.es/m/maps?q=Gran+Via+37+madrid[/code]

Por cierto, para llevar a la app de mapas de Apple, puedes usar esta URL en tus enlaces:
[code]http://maps.apple.com/maps?q=Gran+Via+37+madrid[/code] Sustituyendo tras q= con cualquier dirección que quieras, separando las palabras con el signo +

Puedes ver las URLs de las versiones móviles de algunas webs populares en este listado de websites móviles

 

El redondeo “maldito” de campos de formulario

En los dispositivos con Safari móvil verás que tus campos de formulario o INPUTs tienden al redondeo. Con un poco de CSS aplicado a ellos lo podrás eliminar, por ejemplo con esto:

[code]input, textarea {

-webkit-appearance: none;

-webkit-border-radius: 0;

}[/code]

Redireccionar a una web móvil cuando detectamos el dispositivo

Un código interesante que podemos utilizar para redireccionar a una web móvil al entrar en nuestro website podría ser este que hemos adaptado del blog de Joason:

[code]<script language=”javascript”>

var device = navigator.userAgent;

var url = “http://m.miweb.com/”;

if (device.match(/Iphone/i)|| device.match(/Ipod/i)|| device.match(/Android/i)|| device.match(/J2ME/i)|| device.match(/BlackBerry/i)|| device.match(/iPhone|iPad|iPod/i)|| device.match(/Opera Mini/i)|| device.match(/IEMobile/i)|| device.match(/Mobile/i)|| device.match(/HTC/i))

{

window.location.replace(url);
window.location = url;

} else {

}

</script>[/code]

Bastaría con poner este script justo detrás de <body> en el HTML para que se ejecute y redirija cuando detecte cualquiera de esos dispositivos.

 

El futuro de la web, cada vez más móvil

Hay que prepararse y utilizar cada vez mejor técnicas que permitan coexistir nuestra web de escritorio, con una buena visualización y funcionamiento en smartphones y tablets.

En IDDECO ya estamos formando a nuestros alumnos en ese ámbito, y esperamos que estos trucos os sean útiles para ir puliendo vuestras habilidades de Web móvil.

 


Comentarios (7)

  • Jacinto
    |
    18 agosto, 2013 at 11:50 pm

    Me interesó el tema del código html para el link “tel”, lo estoy probando en distintos móviles y hasta ahora funciona, pero como hacer para que ese mismo link, cuando se cliquee desde una pc de escritorio abra automáticamente la conexión telefónica que tenga disponible, ej: Skipe u otro. En su defecto si no dispone de ninguna conexión que muestre una pagina con el mensaje correspondiente.
    Muchas gracias y saludos cordiales

    • |
      14 septiembre, 2013 at 12:17 pm

      Skype hemos visto a veces que instala al navegador algún tipo de add-on o barra de navegación que se puede instalar y detecta automáticamente los teléfonos. Si el usuario tiene instalada alguna de esas ayudas, no necesitas poner nada en tu web. De todos modos Skype tiene una referencia para desarrolladores que puedes consultar para saber más:
      http://dev.skype.com/skype-uri
      Es complejo utilizar soluciones que detecten todo tipo de situaciones, quizá con Javascript y si funcionan como plugins. Sentimos no poder decirte mucho más…

  • ivAN VALDES
    |
    8 septiembre, 2013 at 7:41 am

    Tengo una duda que he buscado por muchas lados y aquì tocan un poco el tema, por lo que pienso que talvez ustedes conozcan la respuesta. Tengo en mi web el mobile detect para que al ingresar desde un dispositvo los envìe a la web movil, el problema está en que no he logrado encontrar el còdigo para hacer que estando en la web movil te permita cambiarte a la versiòn de escritorio. Quedarìa eternamente agradecido si pudiera ayudarme.
    Saludos y excelente Domingo.

  • juan carlos
    |
    21 enero, 2014 at 7:44 pm

    Hola!
    Me estoy volviendo loco, a ver si me podéis ayudar.
    Tengo un icono en mi web movil que al pulsar quiero que llame a un telefono, en el vinculo coloco el enlace pero no funciona…
    ¿que puedo hacer?

  • juan carlos
    |
    25 enero, 2014 at 6:59 pm

    Hola!
    El lunes os vuelto lo de la imagen.
    Sabríais decirme si esta redirección sería correcta??
    Muchas gracias

    var device = navigator.userAgent;

    var url = “http://m.miweb.com/”;

    if (screen.width <= 400)

    {

    window.location.replace(url);
    window.location = url;

    } else {

    }


Deja tu Comentario

¿Cookies, por qué?

Las cookies que utilizamos sólo son para estadísticas varias, nada del otro mundo. Sólo tienes que seguir navegando para aceptar que las utilicemos. No tenemos ningún plan malvado para la información que graba, si quieres saber más de cómo se utilizan en la política de cookies te contamos, si no con pulsar el botón siguiente ya te dejamos tranquilo ACEPTAR

Aviso de cookies