¿Tenes un sitio web que no se adapta a dispositivos móviles?

Si tenes un sitios web que no se adapta a dispositivos móviles, seguramente fue desarrollado del 2013 para atrás, que evidentemente todavía no ha sido re-diseñado.

Por ese entonces la técnica “Responsive Design” recién estaba desarrollándose y solo los pioneros la aplicaban y aunque ya existían algunas alternativas un poco más rusticas, muy pocos las utilizaban y le daban la importancia que suponía tener un sitio que se adapte.

Y era lógico porque, sobre todo en Latinoamerica, la inserción de dispositivos móviles inteligentes recién estaba empezando a ser una tendencia en crecimiento.

Lo cierto es que actualmente esta técnica es un estándar mundial. Los sitios web que diseño y que se desarrollan en todo el mundo tienen en cuenta desde el primer momento la inclusión en sus diseños de todos los dispositivos móviles con los que actualmente la gente interactúa en su día a día.

No tener un sitio web que se adapte a los dispositivos móviles repercute negativamente en toda la comunicación de la empresa y en su presencia digital.

A continuación detallaré estas consecuencias, analizando el problema desde distintos niveles y puntos de vista.

A nivel publicitario

El servicio publicitario utilizado por excelencia es Google AdWords, y al ser propiedad de Google sigue a rajatabla las tendencias mundiales a nivel de diseño y desarrollo de sitio web. Por este motivo uno de los factores esenciales que brindan valor a los anuncios es la optimización del sitio web de destino para dispositivos moviles.

En la siguiente imagen se puede ver una notificación antigua que recibí en la cuenta de Google AdWords de uno de mis clientes, advirtiendo que la campaña podría obtener mejores resultados si el sitio web estuviera optimizado para dispositivos móviles.

oportunidad-adwords

El sitio web de destino es un factor muy importante dentro del conjunto de factores que afectan al valor de un anuncio. Tener un anuncio de mala calidad significa perder un mayor presupuesto en cada click que se logra y/o tener una peor posición con respecto a la competencia.

A nivel experiencia de usuario

Como mencioné anteriormente, Google está permanentemente acompañando los avances tecnológicos para brindar a sus usuarios la mejor experiencia posible, por eso es que teniendo en cuenta la revolución móvil que existe en todo el planeta, no ve con buenos ojos que los sitios web a los que facilita el acceso no estén optimizados para todos los dispositivos.

Lo siguiente es una captura de pantalla del sitio de Google Developers, donde se aprecia cómo Google interpretaba el sitio web del mismo cliente. Indicando claramente que “No está optimizado para móviles”.

resultado-analisis-mobile

En un test más avanzado y de mayor precisión “Test My Site with Google”, se vuelven a apreciar los malos resultados en cuanto a la experiencia móvil con el sitio de mi cliente que no se adaptaba a dispositivos móviles.

reporte-test

Hasta aquí analizamos la experiencia de usuario a un nivel técnico, pero si vamos a lo más tangible, el comportamiento de los usuarios, veremos a continuación donde se muestra un cuadro de estadísticas obtenidas de Google Analytics, herramienta que instalé en el sitio para obtener métricas y estadísticas precisas del comportamiento de los usuarios en la web, desde dónde estaban accediendo los clientes de mi cliente.

sesiones-por-dispositivo

En el cuadro se aprecia el desglose de visitas (periodo mensual) para computadoras de escritorio, dispositivos móviles y tablets. Se puede ver cómo más del 25% de las visitas se realizan desde dispositivos móviles como smartphones. Si a esto se le agregan las tablets, para las cuales el sitio tampoco está optimizado, el porcentaje total supera el 30%.

Esto significa que el 30% de los usuarios que ingresaba al sitio web tenían una mala experiencia. Esto se ve reflejado en otras estadísticas que también muestra el cuadro como el porcentaje de rebote, el cual es más alto en mobile.

Significa entre otras cosas que el usuario que ingresa mediante un dispositivo móvil es más propenso a abandonar el sitio rápidamente, a que le quede una mala imagen de la marca, a que no logre realizar la acción que deseaba (como contactar con la empresa) o que simplemente no recomiende el ingreso al sitio.

A nivel posicionamiento orgánico

Es de público conocimiento que Google decidió favorecer el posicionamiento en sus resultados de búsqueda orgánicos a los sitios web que estén optimizados para móviles.

Estas medidas comenzaron a regir a partir de abril de 2016 pero particularmente a partir de mayo.

Esto significa que cuando los usuarios realicen búsquedas desde sus dispositivos móviles, se priorizan los resultados que incluyan sitios web optimizados y diseñados para móviles. Dejando de lado y más atrás en los resultados a los que no lo hagan, sin dar importancia al buen trabajo que puedan tener en materia de posicionamiento de sus sitios de escritorio.

A nivel de branding

La marca de tu empresa, tiene de por sí una prestigio y una trayectoria, y por ese motivo debería acompañar los cambios tecnológicos para demostrar que siempre está actualizándose, que su presencia digital es moderna y que es una empresa dinámica que no se queda estática ante las novedades que repercuten a nivel mundial y que afecta directamente a sus clientes.

Cuando le mostré todas estas pruebas y métricas a mi cliente, no dudó en realizar el rediseño de su sitio. Por lo que ahora puede disfrutar de su hermosa web desde cualquier dispositivo móvil.

Por todo esto y mucho más (¿alguien dijo «la competencia»?) recomiendo que si todavía no rediseñaste tu sitio web para que sea responsive, te platees hacerlo con urgencia.

Lanzamiento: Una Web Móvil

Lanzamiento Una Web Movil

Una Web Movil nace de una necesidad propia y una ajena. Muchas veces me crucé con profesionales, o personas que tenían un emprendimiento, y también con dueños de pequeñas empresas o negocios, a los cuales no logré ayudar a entrar en el mundo de Internet. No por falta de comunicación o por no estar dispuesto a ofrecerle diferentes alternativas, si no por no tenerlas.

Como Diseñador Web profesional tengo la capacidad de crear sitios web desde cero, completamente a medida y eso por supuesto tiene un precio que no todos pueden pagar. Si viviera en Los Angeles seguramente podría cobrar miles de dolares por un sitio web corporativo y nadie lo objetaría ni lo vería como algo descabellado. Si viviera en España (con crisis y todo) podría cobrar muchos euros por un sitio con diseño adaptable. Pero viviendo en Argentina la cosa es un poco más complicada y muchas veces lo que más le importa al posible cliente es cuanto le va a salir.

Necesidad propia: ofrecer un servicio económico

Yo por el contrario nunca pienso en el precio, si no en ofrecer la mejor solución para el objetivo de la persona que quiere tener su propio sitio web. Muchas veces incluso he cobrado de menos o trabajado de más para lograr resultados que en principio me dejen satisfecho a mi mismo. Puedo resignar dinero, pero no bajar mis propios estándares de calidad.

Entonces pensé una solución que englobe ese concepto. Muchas veces me pedían algo «sencillo» como para dar a entender que sea «barato». El problema con lo barato es que no puede ser bueno ni hacerse rápido. Pero para solucionar esto decidí implementar un sistema de plantillas (que yo mismo diseñe) y ofrecerlas a un precio justo a modo de suscripción. De esta forma se obtiene un sitio web de calidad, en muy poco tiempo y a un precio inmejorable.

Necesidad ajena: todos deben tener un sitio web preparado para dispositivos móviles

Este concepto hoy en día ya no es algo discutible, las cifras del uso de dispositivos móviles en todo el mundo crecen permanentemente. Para el que no las conozca daré solo algunas a nivel global y local:

  • Argentina tendrá casi 13 millones de usuarios de smartphones en 2014 (20% de la población). Siendo uno de los países de Latinoamericano con mayor cantidad de usuarios de teléfonos inteligentes.
  • Se espera que el uso de Internet móvil supere al trafico de escritorio durante este 2014.
  • El 65% de los usuarios realizan búsquedas desde sus teléfonos inteligentes todos los días.
  • Más del 20% del total de búsquedas en Google se realizan a través de un dispositivo móvil.
  • La penetración de los teléfonos inteligentes está aumentando año a año (2013 – 31%)
  • Los teléfonos inteligentes están siempre encendidos, se llevan a todas partes y se usan cada vez más.
  • El 61% de las personas tienen una mejor opinión sobre las marcas cuando estas ofrecen una buena experiencia móvil.

Fuentes: Google, Latin Link. Prince & Cooke

Al no tener un sitio web preparado para dispositivos móviles se está desaprovechando una gran cantidad de mercado que por si fuera poco crece exponencialmente. Es lógico que esto pase cuando el 100% de las PyMes argentinas posee conexión a Internet pero sólo el 34% de estas publica sus productos en Internet. Imagínense entonces lo ínfimo del porcentaje de las que tienen un sitio web adaptativo.

Personalmente ya no ofrezco sitios que no estén diseñados para adaptarse a todos los dispositivos de la actualidad. Por eso decidí lanzar un servicio que tenga como premisa ofrecer sitios con diseño web adaptable. Hay muchos servicios en la actualidad que ofrecen «crea tu propia web sin saber programación» o «en 5 minutos», pero casi ninguno ofrece diseño adaptable y además deja en manos del cliente lo que debe hacer un profesional.

¿Que ofrece Una Web Móvil?

Para ofrecer una propuesta adecuada a los posibles clientes del servicio, cree tres planes con algunas características compartidas y otras independientes.

Todos los planes incluyen:

  • Alojamiento del sitio (Hosting)
  • Dominio (.com / .com.ar)
  • Casillas de correo (@ejemplo.com.ar)
  • Plantilla Profesional con ultimas tecnologías (HTML, CSS3, jQuery)
  • Diseño Adaptable a todos los dispositivos móviles y computadoras. (Responsive Design)
  • Sin anuncios

Características especiales:

  • Productos de Google
  • Galería multimedia
  • Personalización de Plantilla
  • Elección de Plantilla
  • Contenido Auto-Administrable
  • Botones de compra

Si ya tuvieron la oportunidad de trabajar conmigo o vieron mi portfolio se darán cuenta que tengo un alto compromiso con la calidad en el diseño y la funcionalidad de mis trabajos. Por lo tanto puedo garantizar que lo que se ofrece es un servicio que está pensado para los propósitos que pueda tener un profesional, una PyME o un emprendimiento. Puedo asegurar también que con el correr del tiempo y la experiencia de los clientes lo iré mejorando y sumando funcionalidades.

Vale aclarar que este servicio funciona de forma paralela mientras sigo ofreciendo sitios web a medida con el modo de trabajo de siempre.

Los invito a conocer entonces todas las características y los precios promocionales de Una Web Móvil. No se olviden de compartilo y recomendarlo a sus conocidos.

Lanzamiento: Sitio Web de Catenaro Automotores

Mientras se presentaban el nuevo Hyundai i30 y el Hyundai Elantra en la flamante sucursal de Gonnet con muchos invitados, en la nube también se realizaba el lanzamiento del sitio web de Catenaro Automotores. Realice el sitio web de la empresa basándome en el prestigio de la misma y respetando la imagen de Hyundai a nivel mundial y la calidad de sus productos. El sitio supone un gran salto comunicacional para la empresa dirigida por Pablo Catenaro, el beneficio es tanto para los clientes como para la automotriz. Acá les dejo el link  a la web oficial de Catenaro Automotores y a continuación el video del miércoles pasado tan especial.

Ejemplo malo, ejemplo bueno (capitulo 3)

En esta sección dentro del blog suelo poner como el titulo lo indica, un sitio web mal diseñado que viene a ser el «ejemplo malo» y posteriormente un «ejemplo bueno» que viene a mostrar como se puede hacer algo bien con un enfoque similar.

Pero en este caso me referiré a dos ejemplos malos, opuestos entre si por el enfoque de los sitios, pero relacionados por el espantoso diseño web, si es que tienen algún tipo de diseño.

Ejemplo malo:

La Web del Programador

ejemplo_malo_3a

1- Se trata de una comunidad, de un foro de encuentro de programadores o gente que aspira a serlo. Por supuesto que no es un sitio fácil de desarrollar. Al parecer no se apoya en ninguna plataforma que este pre-programada por así decirlo, lo que es más meritorio aún. Pero lo que en esta sección analizo es el diseño y el sitio como un todo. En este aspecto, el sitio deja mucho que desear.

2- El aspecto prácticamente nos hace viajar al pasado, a finales del siglo pasado para ser mas exacto. Esta particularidad ya tira por la borda cualquier análisis. Está mas que claro que todo en el sitio es mejorable, pero de todas maneras intentare desenmarañar los principales errores.

3- La navegación es terrible, es un sitio ilegible, no se puede comprender en un simple recorrido los propósitos de ninguna de las secciones y cuesta entender la disposición de los elementos. Está llena de cosas difíciles de interpretar. Por ejemplo, las imágenes en violeta que se ven en la parte superior y que parecen una sola imagen a simple vista, algo así como un banner principal descriptivo, en realidad se trata de un menú. Pero en ningún momento dan la sensacion de ser un enlace, incluso cuando nos posicionamos encima. El menú que permanentemente nos acompaña sobre el lado derecho tampoco ayuda demasiado.

4- Hay bastante cantidad de iconos y botones, pero parecen sacados todos de distintas librerías, y librerías que huelen mal de tan vencidas que están.

5- Y sinceramente podría seguir mucho tiempo, pero acomodando el dicho para tales fines, una visita al sitio dice mas que mil palabras. Lo último que quiero mencionar y que termina por destruir todo es la publicidad, y como siempre digo, no estoy en contra de poner publicidad en los sitios (dependiendo de su temática) pero hay que hacerlo de forma responsable y de manera que se adapte al sitio.

Algo curioso es que si buscamos «programadores» en Google, todos los sitios a los cuales podemos acceder mediante los primeros resultados son similares y uno mas horrible que el otro. Elegí este por saber que sigue en vigencia, es decir, que no es un sitio abandonado desde el año 99.

Ejemplo malo 2:

Vis Diseño

ejemplo_malo_3b

1- Para empezar no me cierra el hecho de entrar al sitio desde «visdiseño.com.ar» y que el logo me diga que se llaman «Vis Design». Ustedes me dirán que significa lo mismo, pero yo les digo que confunde.

2- Todavía no entre al sitio pero noto otro fatal error. Dejemos de lado el hecho de que la presentación está hecha en flash y lo que sabemos de lo dañino que es para nuestro SEO, me pregunto, es necesario esa ridícula presentación? No, ni tampoco hacerla en Flash. Hoy se pueden lograr animaciones de todo tipo con HTML5.

3- Al entrar al sitio vuelvo a quedarme sin palabras, no es que no se puedan mencionar errores de diseño, es que el sitio entero es un error. Es un error en si mismo. HTML mal estructurado mezclado con imágenes que no encajan, mezclado con flash innecesario, con una navegación graciosa y una falta de contenido que asusta.

4- No quiero ser malo, y mucho menos injusto, pero como también ustedes se pueden preguntar, en este caso se trata de una Diseñadora en Comunicación Visual recibida en la UNLP y podríamos perdonarle el hecho de no dominar código, o no saber utilizar Flash, o cualquier otra falta pero la verdad que también el diseño de cada uno de los elementos y la relación entre estos es preocupante.

Conclusión:

En este tercer capitulo de Ejemplo Malo, Ejemplo Bueno, quise demostrar una de las cosas que siempre sostuve y que cada día es mas obvia pero que muchos se resignan a aceptar, otros desconocen, y otros se aprovechan de esto para lucrar.

Un sitio web necesita de un programador, un sitio web necesita de un diseñador gráfico y un sitio web necesita de un diseñador web! Y un sitio web NO puede ser hecho solo por un programador o un diseñador gráfico, pero en cambio sí puede hacerlo solo un diseñador web. Claro está que dependerá de las capacidades y conocimientos de diseñador web y ademas de la complejidad del sitio a crear. Para ser cociente de que para realizar un sitio web se necesita de un equipo solo hace falta ver a los grandes de Internet y las diferentes capacidades y profesiones de sus empleados.

Como siempre, aclaro que estos post no están hechos con ánimos de ofender, ni tienen como objetivo perjudicar a estos sitios ni a sus creadores, solo se mencionan para señalar errores, algunos mas simples y comunes, otros mas graves y poco frecuentes. Y como siempre digo también, si necesitan una mano para mejorarlos pueden contactarme sin compromiso alguno.

Cómo utilizar cualquier tipografía en tu sitio web

A medida que pasa el tiempo utilizar en nuestros diseños tipografías poco comunes se vuelve una tarea mas sencilla y practica. En un principio todo consistía en utilizar imágenes con los títulos o textos que presentarían una fuente que no estuviera instalada en las computadoras de los usuarios que visitaban nuestra web. Después se desarrollaron diferentes técnicas que no tuvieron mucho éxito, como sIFR que utilizaba Flash.

Hasta hace poco una de los métodos utilizados era Cufon que se maneja a través de jQuery. Pero actualmente y gracias a HTML5 y CSS3, podemos usar cualquier tipografía sin complicaciones por medio de @font-face. Si bien esta propiedad ya existía desde CSS 2.1, estaba bastante limitada, hoy en día acepta formatos como .eot, .ttf y .otf (los dos últimos no son soportados por IE9 ni versiones anteriores). A continuación explicare la aplicación básica del método.

El primer paso es importar la fuente. Tenemos dos opciones, subir la fuente deseada a nuestro directorio (por ejemplo en una carpeta “fonts”) o importarla desde Google Web Fonts (donde hay alojadas mas de 500).

La sintaxis para el primer caso es la siguiente:

@font-face { 
   font-family: 'BabelSans'; 
   font-style: normal; 
   font-weight: normal; 
   src: url(BabelSans.ttf); 
}

Una vez realizado este paso, la implementación al elemento es la siguiente:

p { 
   font-family: "BabelSans";
}

En caso de elegir una fuente de Google, primero debemos incluir el código que nos provee en el HTML:

<link href='http://fonts.googleapis.com/css?family=Ranchers' rel='stylesheet' type='text/css'>

Y finalmente lo asignamos al elemento desde CSS:

h2 {
   font-family: "Ranchers", "Arial", sans-serif;
   font-size: 0.9em;
   font-weight: normal;
}

Videos tutoriales sobre Responsive Design

Hace algunos días publique recursos indispensables para responsive design hoy les traigo dos videos tutoriales para dar los primeros pasos en la materia.

Ambos tutoriales fueron dictados en vivo por streaming hace algunas semanas. El primero cronológicamente hablando estuvo a cargo de @silvercorp para CodeJobs. Habló sobre conceptos básicos y características que se deben saber antes de empezar a diseñar para los distintos dispositivos.

A mitad del video podemos comenzar a ver las cuestiones referidas específicamente con el código respondiendo siempre a las consultas que en ese momento le enviaban los usuarios. Además dejó direcciones para descargar de forma gratuita plantillas base para comprender e investigar por nuestra propia cuenta.

El segundo tutorial de la mano de mejorando.la estuvo a cargo de @leonidasesteban y se baso en una guía pero arrancando desde el principio y de cero a escribir código. También dejaron a disposición el repositorio oficial en github para descargar y compartir contenido relacionado, que seguramente será de gran ayuda para todos los que comiencen en el tema.

Recursos indispensables para responsive design

Todo Diseñador Web debe tener muy en claro que los sitios web que desarrolle de ahora en mas deberán estar optimizados para un sin fin de dispositivos móviles. Ya no solo tenemos la tarea de diseñar para los distintos navegadores que encontramos en PC y Mac si no también para una gran cantidad de dispositivos que poseen diversos tamaños de pantalla. Nuestra web debe poder visualizarse correctamente en notebooks, netbooks, tablets y smartphones, modificando la ubicación y tamaño de nuestros elementos pero manteniendo el diseño y el contenido.

Seguir leyendo

¿Qué es un sitio web?

Estamos en tiempos de cambios, generacionales, culturales, temporales, etc. A pesar de su juventud Internet no es la excepción y también cambia o evoluciona quizá con una velocidad que supera los procesos del acostumbramiento del hombre. Por eso muchas veces es preciso remarcar qué es un sitio web, de que esta hecho, como funciona y para qué.Descripción: http://elementodc.com/blog/wp-includes/js/tinymce/plugins/wordpress/img/trans.gif
Seguir leyendo