¿Sabes cómo mejorar la velocidad de tu web mobile?

Antes de comenzar con el contenido en sí del post, queremos recordarte la importancia que tiene hoy en día contar con una web que sea responsive. Es decir, que tu web esté adaptada a cualquier tipo de dispositivo desde el que poder acceder a Internet.  Esto implica que la página podrá modificarse de tamaño en función de la pantalla sin que los elementos que la componen se deformen o se descoloquen. No se trata únicamente de redimensionar las imágenes en función del tamaño de la pantalla, va mas allá.

La necesidad de contar con sitios web que se puedan adaptar a cualquier tipo de dispositivos sin importar el tamaño de la pantalla es lo que ha llevado a los diseñadores web a crear este tipo de diseños. Pero si aún te quedan dudas aquí te dejamos tres motivos que te convencerán definitivamente para adaptar tu web:

  • Un diseño responsive mejora la usabilidad y legibilidad cuando realizamos búsquedas en un dispositivo móvil. Hoy en día, es fundamental ya que las búsquedas las realizamos mayoritariamente a través de otros dispositivos que no son el ordenador.
  • No será necesario generar diferentes contenidos para las diferentes versiones de la web.
  • Conseguirás un mejor posicionamiento en Google ya que, uno de sus parámetros para valorar mejor o peor una web es que cuente con una web adaptada a todos los dispositivos.

Una vez recordado lo importante que es contar con una web adaptada, pasamos al tema en cuestión.

¿Cómo podemos saber si nuestra web funciona correctamente cuando los usuarios la visitan desde sus móviles?

Hoy en día la mayor parte del contenido que encontramos en Internet lo consumimos a través de los dispositivos móviles, y Google es consciente de esta cuestión. Por esta razón el buscador mas utilizado en el mundo, ha decidido modificar por completo su herramienta Test my site.

Se trata de una herramienta muy útil  con la que se mide la velocidad de tu web, hoy en día vamos buscando rapidez e inmediatez a la hora de realizar cualquier cosa y más cuando se trata de una búsqueda en internet, por esta razón es fundamental que tu sitio esté bien optimizado y sobre todo sea rápido. (Entre otras cuestiones)

Los nuevos parámetros que evalúa Google de cara a tu web móvil son:

  1. El tiempo global de carga de tu página web (móvil) y también de todas las páginas individuales
  2. La relación de esa velocidad en el momento actual con respecto al mes anterior.
  3. Se compara además la velocidad de tu web con la de tu competencia.

Estos son algunos de los datos que podemos extraer del informe que nos proporciona Google sobre nuestra web de cara a su adaptación para móviles.

Es fundamental, hoy en día no solo de cara a los usuarios sino también de cara al posicionamiento SEO contar con una web responsive. Google valorará de forma este punto, y posicionará mucho mejor tu marca.¿A qué esperas para adaptar tu web?

 

¿Cómo conseguimos un logotipo perfecto?

El logotipo se trata del elemento gráfico con el que identificamos a una entidad pública o privada. Pero el logotipo engloba muchas cosas, engloba en una sola imagen la esencia, valores y personalidad de una marca en las mentes de los usuarios.

Con el tiempo el logotipo se asocia a una marca hasta tal punto que gracias al logo conseguimos que el producto sea la marca y terminar diciendo  “Tengo un Ford” o “¿Tienes un Clinex?»

El logotipo además es el elemento diferenciador respecto a la competencia por lo que es importante que a la hora de crear tu logotipo captes su esencia como empresa. Es un hecho que el logotipo es un elemento que influye en aquellos que lo ven.

La psicología de las fuentes

Y es que todo elemento visual nos afecta a nivel psicológico,  y las fuentes no iban a ser menos. Tanto es así que la propia forma de la tipografía de una marca provoca emociones que están muy relacionadas a las respuestas que damos antes ciertos estímulos.

Pues bien, siendo tan importantes las letras, ¿Cuáles elegimos para nuestra marca?

Se han hecho diferentes análisis y estudios de los rasgos que asociaban las personas a las diferentes tipografías y  asi todas concluyeron que:

  • Arial y Times New Roman son estables, maduras pero también sin imaginaron y conformistas
  • Comic Sans o Crtoonis Hand son juveniles e informales alegres.

Sin embargo las 3 tipografías que todos preferían eran

  • Serif: tipografías que son fáciles de leer gracias a sus remates en cada letra sobre todo cuando se trata de textos largos. Los usuarios las conciben como tradicionales, respetables, instituciones y corporativas
  • Sans Serif: se trata de tipografías de palo recto sin terminaciones se relacionaba con la modernidad y seguridad
  • Scrips o más conocidas como manuscritas, son propias de firmas y transmiten exclusividad elefancia y creatividad aun que tienen un gran pero y es que no son sencillas de leer.

La máxima que tenemos que tener siempre presente a la hora de elegir una tipografía es que sea legible

La psicología de las formas

Todo logotipo tiene una forma, hay tres grandes categorías en las que podemos dividir las formas :

  • Formas geométricas

Son las que conocemos como círculos, cuadrados o triángulos perfectos. Son fácilmente reconocidos si pensamos que no son formas naturales que hayan sido creadas por el hombre. Se caracterizan por ser formas que transmiten orden y poder.

  • Los cuadrados y rectángulos se relacionan con la confianza, fuerza, el orden y la planificación
  • Los círculos se relacionan con la unidad, en ciertos ámbitos también con la atemporalidad. Las curvas además se relacionan con el físico femenino y por tanto los círculos los relacionamos de forma inconsciente con la suavidad y la feminidad.

 

  • Formas abstractas o simbólicas

Sin símbolos que ya de por si tienen su significado son el caso de

  • Las estrellas que están asociadas a ámbitos religiosos o patriotismos
  • Los corazones que tienen dos visiones si esta entero puede usarse para comunicar amor sin embargo cuando los encontramos rotos significan tristeza
  • Flecha es el símbolo utilizado por excelencia cuando lo que queremos es indicar un recorrido(el mejor ejemplo que podemos encontrar es el de amazon)

 

  • Formas orgánicas

En este grupo se agrupa cualquier forma que no sea simbólica y venga de la naturaleza como son hojas, montañas, arboles, mariposas, agua… Aquellas formas de la naturaleza que tiene formas suaves tienen a transmitir calma frente a los ángulos rectos o irregulares que transmiten ansiedad.

La psicología de las líneas

Las líneas son elementos que en muchos logotipos encontramos pero el tipo de línea también transmite mucho, son elementos que de por sí crean definición y dividen el espacio

  • Lineas finas: relacionadas con la fragilidad, debilidad y flexibilidad , con la elegancia y feminidad
  • Lineas gruesas: son muy recomendables cuando lo que queremos es conseguir centrar nuestra atención donde se coloca, se relacionan con la fuerza y la rigidez.
  • Lineas rectas: relacionadas directamente con el orden la rigidez.
  • Lineas curvas: se relacionan con el dinamismo y la energía

La ubicación de la línea también hace mucho respecto al significado que le queremos dar a ese espacio.

 

Estos son algunos de los aspectos que engloban un logotipo, pero hay que tener muy en cuenta la combinación que hagamos de todos los elementos que lo componen, ya que no cualquier composición vale ni es adecuada . Afecta de forma directa a la perfección que el usuario vaya a tener de nuestro logo.

Por tanto, además de elegir correctamente los elementos del mismo hay que tener el mismo cuidado al elegir la combinación de los elementos que queremos que aparezcan en nuestro logotipo y por supuesto los colores que empleemos.

Un diseño web sostenible, ¿te apuntas?

Es algo sabido por todos que si continuamos maltratando de esta forma el entorno en el que vivimos terminaremos por desaparecer. Por suerte, empezamos a tomar conciencia de la importancia de reducir las emisiones de CO2 que enviamos a la atmosfera en muchos ámbitos de nuestras vidas.

Somos cada vez más conscientes de que tenemos que reciclar y tirar el plástico al cubo amarillo y la basura orgánica al verde, movernos en transporte público, bicicleta o a pie en vez de usar tanto el coche.

Pero, ¿sabías que también tu web contamina? Pues sí, Internet deja una huella de carbono que cada día crece más y más debido al aumento de su consumo. Y las cifras son alarmantes, ni más ni menos que 830 millones de toneladas de CO2 se emiten al año. Y la tendencia es bastante desfavorecedora, se espera que en 2020 esta cifra sea prácticamente el doble.

Pero no todo está perdido y tenemos la oportunidad de cambiar, actualmente el 40% de esa huella de carbono se debe al diseño de la web. Las imágenes de alta resolución y todos aquellos elementos que introducimos en la página que  provocan un consumo desmesurado de energía son la causa de esta contaminación.

¿En qué consiste la huella de carbono de una web?

Se trata de calcular la energía que puede consumir una web, de igual manera que se calcula en la industria del automóvil calculando el uso de energía en un coche en kilómetros, en una web se calcula el uso de la energía en datos de descarga. De forma que se puede establecer una relación entre el tamaño de la página y la huella de carbono.

Lo vemos con un ejemplo: la página web de Tumblr  que cuenta con una media de visitas de 83 millones al día ( se calcula que un 10% de esas visitas se hacen desde el móvil) emite diariamente 2600 toneladas de CO2 al día.

Consejos para reconvertir el diseño web en sostenible

  1. Estrategia de contenido: una forma de reducir el peso de la web puede ser sustituir el contenido que tiene un gran peso por alternativas menos pesadas, cambiar vídeos por imágenes o imágenes por texto, siempre que sea posible, respetando tus objetivos y sin descuidar las necesidades de tu web
  2. Diseño visual: sabemos las imágenes en la web son muy importantes, pero son también la mayor causa de la huella de carbono en la web. Por ello, son uno de los elementos por los que debemos empezar, una de las mejores formas es almacenándolas en el formato adecuado y optimizarlas. Existen herramientas gratuitas que consiguen esto.
  3. Un diseño responsive: tenemos que tener en cuenta que mayoritariamente las consultas en la web se realizan a través de dispositivos móviles. Los datos móviles contaminan mucho más que los datos regulares, por lo que una gran ayuda para reducir esa contaminación es asegurarnos que contamos con una página responsive.

 

El diseño del código de la web también puede adaptarse a esta tendencia para reducir las emisiones, todas aquellas modificaciones que ayuden a reducir los datos, son bienvenidas, los scrips encogidos, las descargas comprimidas, la comunicación de archivos, son algunos de los ejemplos que pueden ayudar. Tiene una gran relación con la rapiez con la que responde la página, y para ello  podemos usar una herramienta gratuita de Google el Google Page speed, que puede darnos pistas acerca de que podemos modificar para hacerla más rápida y por tanto que su consumo de energía sea menor.

 

Estos son algunos de los consejos para conseguir una página más sostenible.  Los consejos que hemos mencionado son en general para optimizar la web, algo que no solo ayudará  reducir las emisiones, sino que también son medidas para optimizar el rendimiento de la web a niveles generales, lo que ayudará a mejorar también la experiencia de los usuarios al entrar en ella.

Lo que a su vez repercutirá de forma muy positiva en el SEO, así que si tenías alguna duda sobre si merece la pena o no la respuesta es clara POR SUPUESTO QUE SÍ, beneficios para el medio ambiente, y una mejora en las conversiones. ¿Qué más se podría pedir?

Ejemplos de cómo hacer o crear una tabla en HTML

¿Estas entrando al mundo del HTML? Una de las cosas que debes aprender es cómo crear una tabla en HTML, para ello os traemos una serie de consejos y ejemplos que te vendrán que ni pintados. Las tablas en HTML son muy útiles y sencillas de aprender.

Cómo hacer tablas en HTML

Antes de meternos en faena, recordaros que una tabla se basa de filas y columnas, las cuales en HTML se crean así:

Las tablas en HTML se detectan: <table>

Las filas completas de una tabla en HTML se detectan con la etiqueta: <tr>

Las celdas de cada fila de una tabla en HTML se detectan con la etiqueta: <td>

Ahora con estas nociones vamos a crear una tabla con dos filas y dos columnas:

<table>

<tr>

<td>Prueba 1</td>

<td>Resultado prueba 1</td>

</tr>

<tr>

<td>Prueba 2</td>

<td>Resultado prueba 2</td>

</tr>

</table>

Así es como quedaría al escribir el código:

Prueba 1 Resultado prueba 1
Prueba 2 Resultado prueba 2

Esta es una tabla muy sencilla sin bordes ni destacados, este tipo de tablas sirven para dar ideas básicas. Para añadir un borde y un encabezado destacado a una tabla se deben añadir las siguientes etiquetas:

Etiqueta para añadir borde a una tabla en HTML: Se debe añadir la palabra border=1 (el número sirve para poner el grosor del borde) en la etiqueta <table>. Ejemplo: <table border=2> </table>

Etiqueta para encabezado destacado para una tabla en HTML:  En vez de usar la etiqueta <td> se debe usar la etiqueta para las celdas de las filas <th> </th>.

Con estas nociones vamos a crear una tabla de precios:

<table border=”2″>

<tr>

<th>Móvil</th>

<th>Precio</th>

</tr>

<tr>

<td>Samsung S7</td>

<td>950€</td>

</tr>

<tr>

<td>Iphone 7</td>

<td>972€</td>

</tr>

<tr>

<td>LG G5</td>

<td>760€</td>

</tr>

</table>

Así es como quedaría al escribir el código:

Móvil Precio
Samsung S7 950€
Iphone 7 972€
LG G5 760€

Os dejamos unas últimas etiquetas que sirven para combinar varias columnas o filas:

Etiqueta para combinar 2 o más columnas y convertirlas en 1: colspan= “(nº columnas a combinar)” Fila  Celdas

Etiqueta para combinar 2 o más filas y convertirlas en 1: rowspan

Ejemplo de cómo quedaría el HTML:

<table border=”2″>

<tr>

<th>Columna 1</th>

<th>Columna 2</th>

<th>Columna 3</th>

</tr>

<tr><td rowspan=”2″>Fila 1 Celda 1</td><td>Fila 1 Celda 2</td><td>Fila 1 Celda 3</td></tr>

<tr><td>Fila 2 Celda 2</td><td>Fila 2 Celda 3</td></tr>

<tr><td colspan=”3″>Fila 3 Celda 1</td></tr>

</table>

Así es como quedaría al escribir el código:

Columna 1 Columna 2 Columna 3
Fila 1 Celda 1 Fila 1 Celda 2 Fila 1 Celda 3
Fila 2 Celda 2 Fila 2 Celda 3
Fila 3 Celda 1

Para que la tabla no quede muy apretada, se puede establecer el ancho y el largo de la tabla en HTML que nosotros queramos, ¿de qué manera?

Muy sencillo usaremos las etiquetas: width y height en ese orden (especificándolo en píxeles o en porcentaje) Ejemplo:

<table border= “2” width= “300” height= “200”> </table>

Ahora que ya sabéis cómo crear tablas en HTML, es el momento de ponerse a ello y practicar, practicar y practicar.