Alt1040. Noticias acerca de Internet, diseño, música, cine, opiniones, weblogs y medios

Es uno de los weblogs de tecnología más seguidos de la blogosfera hispana.

Bitelia. Blog de software, internet y servicios web

Software y aplicaciones para mejorar tu vida, guías de uso, trucos, listas, noticias y todo sobre tecnología.

Xataka. Publicación de noticias sobre gadgets y tecnología.

Últimas tecnologías en electrónica de consumo y novedades tecnológicas en móviles, tablets, informática, etc.

Wwwhatsnew. Aplicaciones, marketing y noticias en la web.

Servicios que os pueden ser útiles para dibujar, gestionar tareas, hacer amigos, encontrar restaurantes...

Fayerwayer. Discusiones y opiniones de lo ultimo en tecnología y gadgets

Con secciones dedicadas a Internet, Software o Redes Sociales es un referente a nivel de tecnología en español.

Mostrando entradas con la etiqueta responsive. Mostrar todas las entradas
Mostrando entradas con la etiqueta responsive. Mostrar todas las entradas

21 de noviembre de 2016

6 sugerencias para mejorar tu diseño web móvil

Recientemente, Google señaló que el volumen de consultas de búsqueda en dispositivos móviles había sobrepasado la cantidad de consultas en ordenadores. Aquella declaración junto con las recientes actualizaciones de algoritmos nos lleva a concluir lo siguiente: las páginas web bien diseñadas están ganando más valor.

Los sitios para ordenadores que no se ajustan a la norma son susceptibles de presenciar una marcada disminución en las clasificaciones SEO y en el tráfico.

¿Y qué significa esto para los diseñadores web móviles y profesionales del marketing?

Si no has creado una página web móvil o no has implementado en la que tienes funciones responsive, es probable que estés perdiendo ranking SERP y tráfico valioso porque es probable que la mayoría de los usuarios visiten la web desde sus teléfonos.

Una estrategia de contenidos puede ser muy efectiva o un fracaso absoluto...
Échale un vistazo a estos errores imperdonables: 6 desastrosos errores de diseño que arruinarán tu SEO

A continuación presentamos 6 sugerencias que necesitas saber para actualizar tu página web a los modernos estándares móviles.

1. Entender la usabilidad

La usabilidad es sin duda el aspecto más importante de una página web para dispositivos móviles. Solo pensemos en lo siguiente: ¿comprarías un vehículo inestable? El mismo ocurre con una página web, los usuarios no quieren visitar un sitio que no pueden usar.

Para comenzar, visualiza tu página web desde tu móvil. Si tienes que hacer zoom para leer el contenido y requiere de muchos intentos para navegar por una nueva página, entonces obtuviste una clara visión de la experiencia móvil que ofreces a los usuarios.

2. Una página web responsive no siempre es la mejor respuesta



Según la página web que tienes, querrás considerar el desarrollo de un tema responsive que se adapte al navegador del usuario o a la resolución del dispositivo. Sin embargo, algunas veces esto no se logra y en su lugar hay que optar por una página web personalizada para tu smartphone.

Construir un sitio móvil tiene sus beneficios. Por ejemplo, el desarrollo es más sencillo que integrar el responsive en un sitio existente. Por lo general los costos son significativamente menores. No obstante, una página web adicional requiere mantener dos diferentes bases de códigos y subir contenido a ambos.

Cualquiera que sea la ruta que decidas tomar, se necesita investigar para garantizar la opción más adecuada a tu modelo de marketing y negocio a largo plazo.

3. Entender las necesidades actuales de los usuarios

Comprender las necesidades de los usuarios consiste en mucho más que simplemente incluir alguna de las últimas tendencias de diseño y dar por concluido el trabajo. Necesitas investigar a profundidad tu nicho.

Echa un vistazo a las páginas móviles de la competencia (en especial aquellas que te superan en ranking) para analizar el tipo de funciones de diseño incluidas, la estructura de su contenido y la facilidad en la funciones principales del sitio web. Luego puedes observar e implementar algunas de las funciones a tu página web.

Muchas veces no es suficiente analizar lo que quieren los usuarios. Son necesarios algunos datos concretos para tomar una decisión informada. Ya sea que decidas entre un par de landing pages, una estructura de contenido o la elección de estilo y estructura, una prueba dividida podría ser una buena forma de tomar la decisión.

4. Define la estructura de contenido para que sea compatible en todas las plataformas



Cuando se trata de móviles, estructurar el contenido de forma lógica y estética es una parte fundamental para el proceso de diseño móvil.
Las principales consideraciones son:

  • La tipografía necesita ser elegible
  • La navegación debe ser fluida y dinámica (recordemos aquellos íconos hamburguesa)
  • Incluye botones grandes y fáciles de hacer clic
  • Establece el contenido del blog de forma moderna
  • Reemplazar las palabras por los íconos (simples palabras como casa, contacto, o registro a boletín se pueden asignar un ícono que es más sencillo de interpretar y mejora la estética de la página)

5. Enfocar la atención del usuario con funciones de llamada a la acción

Los botones de llamada a la acción (CTA) sin duda son una de las funciones más importantes que se integran en una página web. Ya que su objetivo es influenciar al usuario a completar una acción determinada, necesita ser accesible y lo más obvia posible dentro de la página. Una efectiva CTA genera conversiones, incrementa las interacciones y definitivamente es algo que no debemos pasar por alto.

De la misma manera que ocurre con las UI en los ordenadores, los botones CTA móviles son por lo general audaces y llamativos. Destacan de la página de contenido y llaman al usuario a hacer clic. La forma del botón puede también jugar un gran papel cuando se trata de interacción y conversiones.

Si bien mucho del diseño de CTA se abre a interpretación, algunas de las mejores prácticas para móviles son:

  • Colores audaces, llamativos. Algunas veces el color principal de tu marca funciona bien. En otros casos se requiere de un color de contraste alternativo para sobresalir
  • Muchos botones móviles tienen el mismo ancho que el área de texto para un diseño fluido
  • Despejar un poco de espacio en la parte superior e inferior del botón ayudará a dirigir la atención a la llamada a la acción
  • Menos es más. Las palabras breves e inspiradoras funcionan mejor para incrementar los clics

6. Mantener en mente la continuidad de la marca



La continuidad de marca es la mejor práctica a través de todas las áreas de diseño, y el marketing de tu negocio y una página web móvil no es la excepción. Es importante que la mayoría de los esquemas de colores, gráficos, y logos se comuniquen efectivamente desde móviles. Aunque debido a la falta de espacio en la pantalla, puedes omitir ciertos objetos por el bien del diseño.

Si un usuario que visitó tu página desde un ordenador decide visitar tu página móvil y no reconoce de inmediato tu marca, entonces estás haciendo las cosas mal.

La continuidad de marca es un fuerte signo de confianza y debe cultivarse lo más pronto posible durante el diseño, los esfuerzos de marketing y todas las facetas disponibles de tu marca.

Una página web móvil es una extensión de tu marca y debe tratarse los detalles con el mismo respeto y atención como con un sitio web para ordenadores.

* Artículo cortesía de Mariana Barreto *



Mariana Barreto Galindo


Gerente Comercial en Staff Digital, Agencia de Diseño y Marketing Digital






17 de marzo de 2015

Google penalizará la web móvil sin diseño responsive a partir del 21 de abril

Google anuncia en su blog oficial que sigue adaptando sus algoritmos a los patrones de uso a medida que el número de usuarios que accede a internet a través de dispositivos móviles aumenta de forma exponencial.
A partir del 21 de abril, los contenidos web que no se adapten a la tecnología móvil sufrirán penalizaciones en su ranking de resultados de búsquedas.

Este cambio afectará a las búsquedas móviles en todos los idiomas a nivel mundial y tendrá un impacto significativo en los resultados. En consecuencia, los usuarios encontrarán más fácil obtener resultados relevantes, de alta calidad de búsqueda y optimizados para sus dispositivos.

Google pone a disposición de los usuarios una guía de sitios web optimizados para móviles: https://developers.google.com/webmasters/mobile-sites/get-started/

Enlaces de interés

  • Prueba de optimización para móviles (mobile-friendly): introduce la url de tu web y te indicará si la página tiene un diseño optimizado para móviles.



  • Personaliza el software del sitio web para usuarios de móviles: si tu web site utiliza software de terceros (WordPress, Joomla!, Drupal, Blogger, vBulletin, Tumblr, DataLife Engine, Magento, PrestaShop, Bitrix, Google Sites), esta completa guía de Google te resultará muy útil.
  • Guía SEO para móviles: te ayuda a configurar el sitio para varios dispositivos para que los motores de búsqueda comprendan la configuración y evitar errores habituales.
  • Usabilidad móvil: la usabilidad móvil resulta del todo relevante para obtener unos resultados de búsqueda óptimos.
  • PageSpeed Insights: introduce la url de tu sitio web y al pulsar el botón Analizar aparecerán los resultados de Velocidad y Experiencia de Usuario para móviles en una escala 1/100.


Aspectos básicos a tener en cuenta

  • si usas diseño web adaptativo en el que el código HTML es el mismo para todos los dispositivos y son las CSS las encargadas de modificar el procesamiento de la página, se recomienda el uso de media queries.

    Media Queries es un módulo CSS3 que permite la representación de contenido para adaptarse a condiciones como la resolución de pantalla. Se convirtió en un estándar recomendado por la W3C en junio del 2012 y es un principio básico de la tecnología de diseño web adaptaivo. Fuente Wikipedia: Media Query.

    Ejemplo: @media only screen and (max-width: 620px) {...}.

  • si optamos por la publicación dinámica de diferentes HTML en la misma URL, el servidor responderá en función del user-agent que solicite la página. Se recomienda que el servidor envíe una sugerencia para detectar el contenido móvil. Esta sugerencia se implementa mediante la cabecera Vary HTTP.

    El contenido de la respuesta variará en función del user-agent que solicite la página. Si el servidor ya utiliza la cabecera Vary HTTP, puedes añadir User-Agent a la lista que ya se ha proporcionado.

  • en el caso de URL para móviles independientes, la recomendación es la siguiente:

    1. para las páginas de escritorio, añade una etiqueta de enlace especial rel="alternate" que señale la URL para móviles.

      Ejemplo: <link rel="alternate" media="only screen and (max-width: 620px)" href="http://m.example.com/default"/>
    2. y para las páginas para móviles, añade una etiqueta de enlace rel="canonical" que señale la URL para equipos de escritorio.

      Ejemplo:<link rel="canonical" href="http://www.example.com/default"/>
Extracto de las recomendaciones para Developers de Google: Google Developers

Errores comunes en los sitios desarrollados para smartphones que debemos evitar:

  • los vídeos no se reproducen porque no usamos tecnología html5 estándar.
  • redireccionamientos defectuosos.
  • error 404 (Page Not Found) sólo para smartphones.
  • baja velocidad de carga de la página.
  • no prestar atención a la usabilidad: tamaño incorrecto de los textos e imágenes, colores inapropiados, ubicación inadecuada de las opciones de navegación, falta de implementación de los atajos de teclado, etc.
  • llamadas a enlaces externos que se abren en otras ventanas.
  • ausencia de un apartado de contacto o método de retroalimentación.
  • no proporcionar un enlace al sitio web completo.



17 de julio de 2013

La web móvil. Aspectos técnicos

Ya nos quedó suficientemente claro por qué tenemos que invertir nuestro tiempo en desarrollo web para móviles.
Toda la información en el post 'la necesidad de adaptar tu web site a dispositivos móviles'



El siguiente paso es determinar lo que queremos, ¿web móvil o aplicación móvil?

Tenemos que partir de la base de que el diseño web es universal o compatible con cualquier dispositivo, mientras que una app tiene que aportar un valor añadido, lo que va a suponer una mayor inversión en recursos para la adaptación a la plataforma específica (Iphone, Android, Windows Phone, etc).

1- La primera opción es la de adaptar nuestro sitio web a dispositivos móviles.

Éstos son algunos de los aspectos técnicos básicos a considerar:

  • si usas diseño web adaptativo en el que el código HTML es el mismo para todos los dispositivos y son las CSS las encargadas de modificar el procesamiento de la página, se recomienda el uso de media queries.

    Media Queries es un módulo CSS3 que permite la representación de contenido para adaptarse a condiciones como la resolución de pantalla. Se convirtió en un estándar recomendado por la W3C en junio del 2012 y es un principio básico de la tecnología de diseño web adaptaivo. Fuente Wikipedia: Media Query.

    Ejemplo: @media only screen and (max-width: 620px) {...}.

  • si optamos por la publicación dinámica de diferentes HTML en la misma URL, el servidor responderá en función del user-agent que solicite la página. Se recomienda que el servidor envíe una sugerencia para detectar el contenido móvil. Esta sugerencia se implementa mediante la cabecera Vary HTTP.

    El contenido de la respuesta variará en función del user-agent que solicite la página. Si el servidor ya utiliza la cabecera Vary HTTP, puedes añadir User-Agent a la lista que ya se ha proporcionado.

  • en el caso de URL para móviles independientes, la recomendación es la siguiente:

    1. para las páginas de escritorio, añade una etiqueta de enlace especial rel="alternate" que señale la URL para móviles.

      Ejemplo: <link rel="alternate" media="only screen and (max-width: 620px)" href="http://m.example.com/default"/>
    2. y para las páginas para móviles, añade una etiqueta de enlace rel="canonical" que señale la URL para equipos de escritorio.

      Ejemplo:<link rel="canonical" href="http://www.example.com/default"/>
Extracto de las recomendaciones para Developers de Google: Google Developers

Errores comunes en los sitios desarrollados para smartphones que debemos evitar:

  • los vídeos no se reproducen porque no usamos tecnología html5 estándar.
  • redireccionamientos defectuosos.
  • error 404 (Page Not Found) sólo para smartphones.
  • baja velocidad de carga de la página.
  • no prestar atención a la usabilidad: tamaño incorrecto de los textos e imágenes, colores inapropiados, ubicación inadecuada de las opciones de navegación, falta de implementación de los atajos de teclado, etc.
  • llamadas a enlaces externos que se abren en otras ventanas.
  • ausencia de un apartado de contacto o método de retroalimentación.
  • no proporcionar un enlace al sitio web completo.

2- Si nos decantamos por la aplicación para móviles, tenemos que contar con conocimientos de los lenguajes de programación necesarios para su desarrollo, ¿o tal vez no?

Existen en el mercado diferentes herramientas para crear apps móviles para las distintas plataformas existentes sin conocimientos previos de programación.

Vamos a poder utilizar asistentes de edición para personalizar el diseño de la interfaz y configurar las funciones de aplicaciones básicas, siendo el propio asistente quién se ocupe de compilar nuestro proyecto en una aplicación nativa para la plataforma elegida y su posterior publicación en la tienda de aplicaciones.

  • Creapp: ofrece un buen catálogo de plantillas prediseñadas para ayudar a los iniciados en este interesante campo a crear nuestra primera aplicación.
    Permite integrar en nuestro proyecto, sistemas de pedidos online, pasarela de pago para tiendas virtuales y otro tipo de servicios de gran utilidad para medianas y pequeñas empresas.

  • Apps Builder: la diferencia de este servicio con respecto al resto de asistentes es que su editor puede capturar los contenidos de nuestra página web para utilizarlo como base con la que desarrollar aplicaciones para los diferentes sistemas operativos móviles.
    Además ofrece la posibilidad de configurar paso a paso y sin tocar una sola línea de código las características de tu aplicación añadiendo módulos como: Noticias, Foto, Vídeo, Podcasting, Tienda, Canal RSS, Facebook, Twitter, Sitio web, Radio, PDF, Texto, Código, Muro de chat, Contactos, Mapas, Mensaje de texto, Llamada y Correo.

  • Mobincube App Generador: quizá sea uno de los generadores de aplicaciones móviles multiplataforma más completos dado el grado de personalización que permite.
    Resulta bastante intuitiva y práctica y ofrece la posibilidad de exportar nuestro proyecto a las principales plataformas móviles como iOS, Android, HTML5, BlackBerry o Windows Phone.

  • BlackBerry App Generator: nos permite crear aplicaciones para las diferentes versiones del sistema operativo BlackBerry sin tener conocimiento alguno de programación.

Fuente: Cómo crear aplicaciones móviles sin saber programar. Think Big

24 de junio de 2013

La necesidad de adaptar tu web site a dispositivos móviles

España es líder en tasa de penetración de Smartphones de los países EU5 (Alemania, España, Francia, Italia y Reino Unido). Estudio realizado por ComScore en abril de 2013.
El año 2012 cerró con una tasa de penetración del 63% dónde el 89% de los usuarios afirman usar estos dispositivos para conectarse a Internet a diario.

En cuanto a tablets ocupamos la octava posición en el ranking mundial con una tasa de penetración del 24%. El crecimiento de estos dispositivos ha sido histórico y nunca antes visto en nuestro país.

En términos de tráfico web procedente de estos dispositivos la tendencia también es creciente. En el año 2012 se duplicó por cuarto año consecutivo respecto al año anterior y se espera que en 2013 se mantenga dicho crecimiento.
Fuente: Comunidad IEBS, Innovation & Entrepreneurship Business School

  • ¿son éstas, razones de peso en la adaptación de contenidos para la web móvil?

    Evidentemente sí, en el año 2013 ya habrá más usuarios navegando desde móviles que desde PC.

  • ¿cuáles son los problemas con los que nos vamos a encontrar?

    Las características de este tipo de dispositivos dificultan la experiencia de navegación y de usuario. Cuentan con una serie de limitaciones que no tienen los ordenadores de escritorio:

    1. las pantallas son pequeñas y su resolución escasa
    2. no están optimizados para la entrada de datos
    3. existe una gran diversidad de dispositivos con diferentes capacidades: algunos terminales no soportan determinados formatos de vídeo o lenguaje de script
    4. la velocidad de carga de datos es más lenta
    5. disponen de un menor ancho de banda en sus conexiones
    6. escasos recursos de memoria de los dispositivos
    7. etcétera

  • Ante un reto de tal magnitud, ¿cuáles son mis opciones de desarrollo?

    Existen tres técnicas de desarrollo que se utilizan normalmente en la web para dirigirse a los usuarios multidispositivo y permitir la personalización de contenido y optimización en la experiencia de usuario:

    1. Responsive Web Design o diseño web adaptativo

      El diseño web adaptativo o adaptable es una técnica de diseño y desarrollo web que consigue adaptar el sitio web al entorno del usuario, lo que hace posible tener un único diseño para móviles, tabletas y PC.
      Esta técnica te permite optimizar la experiencia de tu página en diferentes tamaños de pantalla sin crear varios sitios web.
    1. Dynamis Serving o publicación dinámica de diferente contenido HTML en la misma URL

      Cuando un cliente visita tu sitio web, el servidor web puede detectar el tipo de dispositivo en el que se encuentra y presentar una página personalizada (provees un documento HTML y CSS distintos) en la misma URL.
      Puede ser muy útil para ocultar o mostrar ciertos elementos que, según el contexto, no tienen sentido en móvil o en la versión de escritorio.

    2. Web dedicada y exclusiva para móviles

      Consiste en crear un sitio diferente para el tráfico de móviles, independiente del sitio original para ordenadores.
      La ventaja fundamental es que la carga y navegación son más rápidos al adaptar más fácilmente el contenido a los usuarios de móviles.

Construyendo sitios web móviles amigables



¿Qué solución es mejor?



Google Developers: Creación de sitios web optimizados para móviles