Categoría: Web y Redes Sociales

Qué es Responsive Web Design

dibujo responsive web design

El Responsive Web Design consiste en que la web se adapte al CONTEXTO en el que será visualizada (el navegador). El objetivo es diseñar en función del CONTENIDO que tengamos.

En otras palabras una web “Responsive” es aquella web única a la hora de hacerla y que se adapta a los diferentes navegadores de los distintos dispositivos. (móvil, tableta, portátil,  sobremesa, TV).

Este es el tema del workshop que impartieron la gente de swwweet.com (@htmlboy y @martuishere) el pasado 5 de Mayo de 2012 en Eutokia (Bilbao). Gracias a @arketipo por organizarlo.

He preparado el post explicativo fuera de este blog para poder hacerlo “responsive”:

Ver el Post sobre Responsive Web Design

Quiero sugeriros que REDIMENSIONEIS la ventana del navegador para que veáis como se va adaptando el contenido. El efecto será semejante a esto:

 

ilustración: ardiluzu

 

 

 

 

Tipografía para la web

conceptos de tipografía

Ayer asistí a un workshop sobre “Tipografía para la web” impartido por la gente de www.swwweet.com en Eutokia (Bilbao).

Muy instructivo y con cantidad de temas a trabajar a partir de ahora.

@martuishere fue la ponente, con la ayuda de @htmlboy (gracias @arketipo por organizarlo)

Dejo mis conclusiones en este enlace
(He utilizado una tipografía de Google Web Fonts, sorry @martuishere )

Eventos en Google Analytics

Eventos en Google Analytics

Otro Post relativo al cusrso de Curso de certificación individual IQ en Google Analytics

En esta ocasión sobre el trackeo (seguimiento) de acciones que los usuarios relizan en nuestras páginas. No son páginas pero nos interesa hacer un seguimiento: descargar un archivo, desplegar algo, pinchar en algún sitio, etc.

Aquí tienes el post completo.

Ilustración: @ardiluzu

Filtros y Segmentos avanzados en Google Analytics. ¿Qué elijo?

Una entrada más relativa a mis apuntes  del Curso de certificación individual IQ en Google Analytics

Filtros y Segmentos avanzados son dos herramientas de Google Analytics que pueden llevarnos a confusión.

Por lo que intentaré aclarar ideas:

PERFILES:

Son un conjunto de reglas que definen los informes que vamos a utilizar.

  • Los perfiles de una misma Propiedad Web (UA-XXXXXXXX-X) comparten el mismo código de seguimiento.
  • Cada Cuenta puede tener un máximo de 50 perfiles.
  • DEJAR EL PERFIL POR DEFECTO SIN APLICAR NINGÚN FILTRO

Filtros

  • Los FILTROS son una manera de segmentar.
  • Nos permiten generar diferentes Perfiles.
  • Los Filtros se hacen a nivel de perfil, no a nivel de cuenta.
  • Los Filtros definen la información que debe aparecer en los informes de nuestros Perfiles.
  • Permiten dar acceso a ciertos usuarios a un subconjunto de datos
  • En un Perfil se pueden aplicar varios Filtros.El ORDEN de los Filtros IMPORTA (se filtra sobre lo filtrado).
  • IMPORTANTE:  una vez se aplica el filtro a un perfil sus datos quedan modificados para siempre y no podremos recuperar la información filtrada. No son retroactivos.
  • Hay Filtros PREDEFINIDOS y PERSONALIZADOS.
  • Se crean desde la Administración de Perfiles.

Usos habituales:

  • No contabilizar tráfico interno•Restringir información a un perfil o usuario.
  • Segmentación de los datos.
  • Personalizar los informes

Segmentos Avanzados

Informes de G.A. que ya tenemos definidos por el criterio que queramos. Hay segmentos ya definidos y otros que podemos crear nosotros mismos.

Los Segmentos avanzados son una especie de “filtrado” pero sin crear un Perfil o hacer un Filtro.

  • Se pueden aplicar al histórico de datos. Son Retroactivos.
  • Disponibles para todas las cuentas y perfiles. (si creamos un Segmento Avanzado, será visible en todas las cuentas)
  • Se pueden comparar los datos de hasta 4 Segmentos Avanzados simultáneamente.
  • Son sencillos de crear.
  • Se crean desde “Administración” > se elige Perfil > “Advanced Segment”

Los datos de los segmentos avanzados a veces no son del todo consistentes.

En resúmen, puede que en un primer momento me lance a…
Los Segmentos Avanzados.
Son sencillos, retroactivos, permiten comparaciones, pero… la información que ofrecen no es tan fina como con los filtros, además quedan visibles para todas las cuentas y perfiles, por lo que si hemos dado permisos para alguna de nuestras cuentas, estarán visibles para otros….

Entonces mejor…
Los Filtros
Me permiten crear perfiles ajustados a mis necesidades, la información parece más robusta, podemos dar acceso a otros usuarios, pero… son más delicados de configurar, la información no es retroactiva (empiezo a acumular datos desde el momento en que los configuro…)

Conclusión:

Los necesito a los dos.
En Primer lugar, los Filtros para definir los Perfiles y después los Segmentos Avanzado para obtener una mayor flexibilidad en mis informes.

Puedes contactar conmigo a través de este: FORMULARIO DE CONTACTO
Ilustración: @ardiluzu

Avanzando en Google Analitycs: el Etiquetado

Continuo con mis apuntes  del Curso de certificación individual IQ en Google Analytics .
A la hora de hacer un seguimiento o TRACKEO a nuestras CAMPAÑAS ON LINE en Google Analytics, hay algo que nunca debemos olvidar:

el ETIQUETADO.

Consiste en marcar todas las URL y aplicaciones que vienen de fuera, a fin de poder identificar el tráfico que recibimos, analizarlo y tomar las medidas adecuadas para lograr una mejor conversión.

En primer lugar, un gráfico explicativo de los componentes de una Campaña On Line:

En el caso de tener una campaña de ADWORDS, debemos tener en cuenta:

  • En primer lugar: conectar una cuenta de Analytics para cada cuenta de Adwords (1 : 1)
  • Se activa el AUTOETIQUETADO: adwords.google.es : Mi cuenta > Preferencias > Seguimiento > Etiquetado
  • Si no etiquetamos los links que vienen de Adwords, parece que todo el tráfico es orgánico (proveniente de buscadores)
  • Lo que hace el autoetiquetado es añadir un identificador al final de la URL del anuncio cuando se hace click sobre él: www.loquesea.com/gclid=…
  • Evitar los acortadores URL y las redirecciones en Adwords.
  • Adwords contabiliza clicks y Google Analytics visitas.

 

Etiquetado de enlaces:

Es necesario para que Google Analytics pueda interpretar los datos y los transforme en campañas y no sólo en páginas vistas.

Etiquetas obligatorias:

utm_source (origen): google, yahoo, base de datos, newsletter, url, (desde donde se ha accedido)…
utm_medium: e-mail, banner, cpc, …
utm_campaing: navidad, rebajas, lanzamiento, …

Etiquetas opcionales:

utm_term: palabra clave de pago
utm_content: diferentes versiones de un mismo anuncio

Ejemplo:

www.loquesea.com/?utm_source=yahoo.com&utm_medium=banner&utm_campaign=navidad

En el caso de un Newsletter, si contiene varios enlaces, hay que etiquetar cada enlace. Si pertenecen a la misma campaña, hay que utilizar utm_content para diferenciar.

Herramienta creadora de URLs etiquetadas:
http://support.google.com/googleanalytics/bin/answer.py?hl=en&answer=55578

NOTA:
Lanzo este post a través de Twitter y voy a etiquetarlo, creando la campaña “etiquetado”

Ilustraciones: @ardiluzu

10 píldoras (conceptos básicos) sobre Objetivos en Google Analytics

Siempre he querido escribir un post con un ampuloso título, de los que tanto abundan en Twitter, del tipo: “5 maneras de …”, “Las 25 mejores webs para…”, “Las 20 aplicaciones que no pueden faltar en…”, etc. etc.

¡Pues ha llegado mi momento!

10 conceptos que yo destaqué con lápiz rojo en mi cuaderno de apuntes el pasado sábado en el Curso de certificación individual IQ en Google Analytics .

¡Ahí van!:

OBJETIVOS en G.A.

1.- Primero, IDENTIFICAR objetivos (y ponderarlos)

2.- Cuatro tipos de objetivos:

– URL de destino
– Tiempo en el sitio
– Páginas por visita
– Evento realizado

3.- En G.A. Disponemos de 4 grupos de objetivos, y en cada grupo se pueden incluir 5 objetivos.

4.- Los objetivos de cada grupo deben tener relación.

5.- La CONVERSIÓN en G.A. NO se muestra por objetivos, se muestra por GRUPO de objetivos.

6.- Los objetivos en G.A. no se pueden borrar (sí se pueden editar o desactivar).

7.- Los objetivos se crean en cada Perfil (no se comparten entre perfiles).

8.- FUNNELS: son Procesos de Conversión, o EMBUDOS de conversión. (Por donde debemos pasar hasta llegar al objetivo).

9.- El sentido de los FUNNELS es conocer los puntos de un proceso en los cuales estamos perdiendo visitantes.

10.- En una sesión, un usuario solo puede cumplir una vez cada objetivo, pero puede cumplir varios objetivos distintos.

Aquí queda dicho…

Evidentemente habrá quien eche de menos cosas. Si es así, házmelo saber!

Ilustración: @ardiluzu

GO MO

GO MO es una nueva campaña de Google que viene a decir: “pasa/adapta tu web a dispositivos móviles”

Ante la evidencia del incremento en la navegación vía móvil, Google nos plantea la necesidad de que adaptemos nuestro sitio a otros dispositivos, como tabletas y teléfonos móviles.

EN GO MO

  1. Nos explican las razones
  2. Podemos simular como se ve y qué problemas tiene nuestro sitio en un smartphone
  3. Nos sugiere empresas o herramientas para hacer la adaptación

Después de ver todo esto, me planteo la idoneidad de optar por el HTML5 y CSS3 y Media Queries tal y como lo plantea la gente de Sonicbyte en su post Diseño web para telefonos moviles con HTML5, CSS3 y Javascript, es decir, construir la web desde un principio para todos los dipositivos.

NOTA:

He hecho el test con este Blog y estos han sido los resultados y la simulación de visualización en un móvil.

  • Loading Speed: 5.44 seconds. Your site loaded in more than the recommended loading time of 5 seconds.
  • Images: Your site’s images are appearing properly.
  • Text: Your site’s text is not visible without pinching or zooming.
  • Navigation: Your links and buttons are thumb friendly.

Así que… me pongo a ello!