Entradas

Consejos de optimización web para dispositivos móviles

, ,

En este artículo plantaremos unos consejos de optimización web para dispositivos móviles.

¿Por qué es tan importante la optimización web para dispositivos móviles?

Cuando el mundo pasó de los ordenadores de escritorio a los dispositivos móviles, los diseñadores se centraron aún más en el UX (User Experience / Experiencia de Usuario). Aunque la interfaz de usuario desempeña un papel importante en la creación de diseños optimizados para dispositivos móviles, la experiencia del usuario se ha vuelto igualmente importante, especialmente porque ahora tenemos más dispositivos en los que centrarnos y la experiencia del usuario difiere según el tipo de dispositivo.

No es demasiado difícil separar los componentes clave que conforman un diseño altamente efectivo, optimizado y centrado en el usuario. Pero aquí os dejamos algunas buenas prácticas que ayudarán en el desarrollo:

1. Optimiza tus recursos para web

Los elementos visuales como fotos, ilustraciones, iconos y videos son los mayores consumidores de ancho de banda en las páginas web.

Si bien no hay un tamaño de página web establecido que todos deben cumplir, es de sentido común que un tamaño de página web más pequeño equivale a tiempos de carga más rápidos.

Utilizar tamaños de imagen alternativos para vista móvil que estén entre 600 y 700px de ancho sería lo idóneo.

La compresión / optimización de imágenes es el proceso de utilizar software de terceros para reducir la cantidad de colores presentes en una imagen. Esto se puede hacer hasta el punto de que tus fotos no pierdan su calidad innata, pero pueden reducir drásticamente su tamaño de archivo. Si necesitas ayuda para comprimir imágenes, te proponemos algunas opciones gratuitas online:

https://tinypng.com/

https://compressor.io/compress

http://www.punypng.com/

https://imagify.io/optimizer/

2. Utilizar la Precarga y Carga Diferida

La precarga (Pre-Loading) consiste en cargar todos los objetos que su aplicación necesitará con anticipación y la carga diferida (Lazy-Loading) se trata solo de cargar un objeto cuando lo necesita por primera vez.

Precarga: Hay que tener en cuenta que la precarga no siempre funciona ya que depende del comportamiento del navegador. Otros factores como el tipo de dispositivo y el ancho de banda también afectarán al funcionamiento.

Dado que los Preloaders usan etiquetas HTML dinámicas, puede precargar contenido como Google Fonts o crear un script personalizado para precargar los activos de JavaScript en WordPress.

Carga Diferida: Es un método de decirle al navegador que cargue (procese) contenido que solo esté dentro de la ventana gráfica del usuario. Por lo tanto, si se agregan fotos o videos sensibles al tamaño a una página determinada, esos archivos solo se mostrarán cuando la pantalla del navegador llegue a esa parte del sitio.

Y si estás preocupado por posibles problemas de SEO, no tienes que estarlo. Google representa páginas que usan carga diferida, y lo ve como otra señal de mejora del rendimiento.

3. Almacenar la web en caché

El almacenamiento en caché web se basa en el concepto de copiar una versión de una página, que luego se puede presentar al usuario en cualquier momento. Las páginas se almacenan en caché en la primera visita a la página de un sitio web. Cuando un nuevo usuario intenta acceder a esa página, en lugar de servir la versión en vivo, el servidor web mostrará la versión en caché.

El objetivo de cualquier tipo de almacenamiento en caché es mejorar el rendimiento del sitio web y disminuir los recursos de fondo necesarios. Dependiendo de la solución de almacenamiento en caché, se pueden configurar intervalos personalizados y otros eventos basados en triggers.

4. Utilizar librerías de AMP

Esencialmente, AMP (Accelerated Mobile Pages, es decir, Páginas para Móvil Aceleradas) reduce las páginas a lo esencial para proporcionar una experiencia de carga súper rápida, pero también para que la legibilidad del contenido sea una prioridad.

AMP es una página HTML sencilla con ciertas limitaciones sobre qué tipo de contenido se puede mostrar. Esto conduce a tiempos de carga mucho más rápidos y al rendimiento general debido a la limitación para ejecutar scripts y demás.

JavaScript, por ejemplo, no funciona con AMP. A menos que, por supuesto, utilicemos la biblioteca AMP JS disponible en GitHub. El uso de la biblioteca JS le permite lograr ciertos resultados, como evitar los bloqueadores de anuncios, pero si buscamos un verdadero rendimiento, entonces el AMP sin procesar es el camino a seguir.

Conclusión de la optimización web para dispositivos móviles

Optimizar tu sitio web para una experiencia móvil sin problemas no es tan difícil. Todo lo que necesitas es un poco de determinación y aplicar estos métodos adaptados a las necesidades de tu sitio web.

En Gsoft Innova, desarrollamos y diseñamos sitios web totalmente adaptados a los diferentes dispositivos.

Contáctanos para más información o solicitar nuestros servicios de optimización web para móviles.

Contacta con Gsoft Innova
/por

¿Qué es la usabilidad en el diseño web?

,

La usabilidad en el diseño web es parte del término más amplio «Experiencia de Usuario» (UI, User Experience) y se refiere a la facilidad de acceso y uso de un producto o sitio web. El nivel y las características de usabilidad no siempre están predefinidas. Dependerán del contexto, el usuario y la finalidad del sitio web.

¿Qué es la usabilidad en diseño web?

La usabilidad de un sitio web mide la efectividad, eficiencia y grado de satisfacción con la que los visitantes o usuarios reciben la información del contenido e interactúan con la página. Eso incluye todo lo que normalmente experimentaría un usuario cuando visita el sitio web, incluidas las barras de navegación, menús, contenido, imágenes, videos, hipervínculos, botones, formularios, juegos, etc. Supervisar el buen funcionamiento de estos y otros atributos nos proporcionará la información necesaria para encaminar el diseño a su estructura óptima.

Podríamos decir entonces que la usabilidad se basa en tres pilares:

  • Efectividad
  • Eficiencia
  • Satisfacción

Cuando un invitado llega a un sitio web cuyo diseño es efectivo, sus expectativas se cumplen o superan y pueden usar el sitio para completar sus objetivos previstos con facilidad. Un sitio web eficiente va un paso más allá, permitiendo a sus usuarios encontrar la información o los recursos que necesitan de la manera más rápida y económica posible, sin perder tiempo ni esfuerzo. Aunque, podría decirse que el más conocido de los tres pilares de usabilidad es la satisfacción. Cuando los visitantes buscan y descubren un sitio web que cumple con sus requisitos o necesidades respondiendo a sus preguntas, brindando los recursos necesarios, etc. de manera confiable, se crea esta satisfacción en la experiencia.

La usabilidad de un sitio web que incluye consideraciones de todos estos componentes, junto con su efectividad general, eficiencia y satisfacción para los usuarios, a menudo es evaluada por investigadores, analistas y diseñadores de experiencia de usuario.

¿Qué factores influyen en la usabilidad web?

La investigación cuidadosa del comportamiento y necesidades de los clientes actuales y el público objetivo es esencial para una comprensión integral de la usabilidad en el diseño web. Hay una variedad de métodos disponibles para lograr esto. La investigación puede incluir una revisión de los análisis digitales del sitio web desde un punto de vista de SEO (es decir, optimización de motores de búsqueda). También puede incluir una investigación sobre las necesidades de los clientes y la receptividad a mensajes y diseños específicos. Los resultados de estos métodos se pueden probar y aplicar mejoras, de modo que se impulse tanto la experiencia del usuario como la del proveedor del servicio web.

Algunos de los factores clave que afectan la usabilidad y la satisfacción de la necesidad de los clientes serían:

Accesibilidad

¿Todos pueden usar el sitio web por igual?

La accesibilidad web aquí significa que las personas con discapacidad pueden percibir, comprender, navegar e interactuar con el sitio web. Esto incluye beneficiarse de su información, recursos, etc.

Capacidad de respuesta

¿Funciona el sitio web en los dispositivos que los clientes prefieren usar?

El diseño web receptivo (RWD) es un enfoque para el diseño web. Busca proporcionar una experiencia óptima de visualización e interacción en una amplia gama de dispositivos.

Search Engine Optimization (SEO)

¿Pueden los clientes encontrar el sitio web en los resultados de búsqueda?

El proceso que afectar la visibilidad de un sitio web o una página web a través de los resultados gratuitos (por ejemplo, naturales, orgánicos) de un motor de búsqueda.

Contenido y mensajería

Si los usuarios tienen preguntas específicas, ¿el sitio ofrece respuestas claras?

Los usuarios a menudo llegan a los sitios en busca de respuestas a una pregunta específica. Por lo tanto, su texto debe diseñarse de manera notable, fácil de leer y comprensible.

Diseño y navegación

¿Pueden las personas encontrar lo que buscan en el sitio web?

Con qué rapidez y facilidad un visitante puede encontrar lo que está buscando a través de herramientas como una barra de navegación, migas de pan, menús, botones, etc., diseñados para ayudarlo a alcanzar sus objetivos o responder preguntas específicas.

Errores y efectividad

¿Es suficientemente efectivo el sitio web para los visitantes?

Esto puede ser una medida de cuántos errores encuentran los usuarios al usar el sitio web, cuántos errores cometen en la búsqueda de objetivos o respuestas, y cuántos de ellos salen del sitio sin completar su objetivo en comparación con aquellos que si lo hacen.

Tiempo y expectativas de la tarea

¿Pueden las personas usar el sitio web eficientemente?

Una medición de la cantidad de tiempo que le lleva a un visitante completar sus objetivos a través del sitio web en comparación con sus expectativas (por ejemplo, demasiado tiempo, más rápido de lo esperado) de ese tiempo.

Conclusión de la usabilidad en el diseño web

Junto con la optimización de motores de búsqueda y la visibilidad del contenido, la usabilidad del sitio web juega un papel clave en la creación de proyectos web de alto valor. En GSoft Innova diseñamos y desarrollamos tu proyecto web para que cumpla los requisitos indispensables necesarios de acuerdo a las últimas tendencias y necesidades de usabilidad.

¿Algún proyecto online en mente?

¡Contacta con nosotros!

/por

Utilización de plantillas para desarrollos de Magento 2

, , , ,

Cuando estamos planeando realizar una tienda online, ya sea en Magento 2, PrestaShop u otra plataforma de venta online, una parte importante del proyecto es el diseño de nuestra tienda. No sólo la parte visual es importante, también lo es la usabilidad, la adaptación a móviles y el SEO.

El diseño de una web incluye estas 4 partes importantes por igual, y todas has de ser tomadas en consideración.

Teniendo esto en cuenta y sabiendo lo que necesitamos para el diseño de nuestra tienda en Magento, ahora vamos a ver cómo conseguirlo. Tenemos dos opciones: un diseño personalizado o una plantilla para Magento 2. Te explicamos los pros y contras de estas dos opciones.

Diseño personalizado para Magento 2

Un diseño personalizado para Magento 2 es caro, así de claro. Pero podrás tener una web completamente a tu gusto, con un buen SEO y usabilidad. Siempre que quien realice el diseño sea un buen profesional y experto en Magento 2. A caro nos referimos que menos de 3000 Euros (sólo por realizar el diseño de la página) no te va a pedir nadie para un proyecto de Magento 2. Si lo hacen, te están engañando. Un diseño personalizado requiere de muchas horas de trabajo, y un profesional que conozca Magento y trabaje bien. Los expertos cobran por ello. Aparte de este coste económico, recordad que un proyecto de comercio electrónico tiene muchos otros costes no incluidos en el diseño.
Aparte del diseño, la usabilidad es importante también. Hay que tener en cuenta que será necesario comprar algún módulo para que la página sea fácil de usar y rápida.

Plantillas para Magento 2

Las plantillas son una gran solución para realizar una tienda online. Desarrolladores de Magento 2 y diseñadores crean diseños genéricos que luego venden a otras empresas para que lo utilicen como diseño para su tienda online.

¿Quiere decir esto que mi plantilla no será única y parecerá una copia burda o sosa de otras tiendas? Para nada. Internet es inmenso, demasiado grande para que dos clientes vayan a parar a dos tiendas hechas en Magento con el mismo diseño. Las plantillas se venden en todo el mundo y es muy difícil ver dos tiendas online con la misma plantilla. Además de que encontrar dos websites con la misma plantilla en todo el mundo es casi imposible. Todas las plantillas para Magento se pueden personalizar al máximo, de manera que, dos tiendas online con la misma plantilla, difícilmente serán parecidas.

Otra gran ventaja de las plantillas para Magento 2, es la usabilidad. Muchas ya vienen con módulos que mejoran la funcionalidad de Magento. Cuando vayamos a comprar una plantilla, podremos verla en funcionamiento por completo y probar todas sus características. Las plataformas de venta de plantillas web, tienen una web de pruebas montada para que podamos ver cómo funciona la plantilla. En nuestro caso podremos ver nuestra plantilla ya montada en una tienda Magento 2, con las distintas opciones de configuración de diseño y utilizar la tienda como si fuera la nuestra.

Las plantillas no son el santo grial para el diseño web, casi, pero no. Normalmente tienen un problema que nos vamos a encontrar en el 99% de las plantillas – el SEO de la tienda online. Las plantillas para Magento 2 no vienen muy optimizadas para SEO. Principalmente porque cuidan mucho el aspecto visual de la tienda y son muy configurables. Eso hace que tengan muchos recursos que no se utilizan según la configuración que escojamos. Posteriormente esto se puede mitigar un poco con un buen experto en SEO para Magento 2. No lo solucionaremos al 100% pero se pueden conseguir buenos resultados.

Lo mejor de todo es el precio. Una plantilla para Magento 2 viene a costar unos 100 Euros. Está bastante bien teniendo en cuenta el trabajo que lleva detrás. Con las modificaciones que hay que realizar para adaptar la plantilla y extras, a partir de 1000 Euros. Así podemos tener un buen diseño para nuestra tienda, mejor que un diseño personalizado. Como dato, en nuestra empresa, más del 90% de los desarrollos de comercio electrónico se basan en plantillas.

Pese a que no tendremos un diseño 100% nuestro y a las posibles penalizaciones en SEO, es recomendable utilizar plantillas para Magento 2. Las ventajas que aportan y el coste económico comparando con un diseño personalizado, hacen de utilizar una plantilla la mejor opción para los desarrollos en Magento.

/por

Web responsive y SEO: Buenas prácticas para el diseño web en WordPress

, , ,

Cuando comenzamos un nuevo proyecto de diseño web en WordPress, tenemos que tener en cuenta una serie de cuestiones técnicas para que el funcionamiento de nuestra web sea el óptimo.

En este artículo, el equipo de diseño web de Valencia de Gsoft informática te presenta una serie de consejos SEO, web responsive  y buenas prácticas para el desarrollo de una web en WordPress:

  1. Web responsive:  Plantilla de WordPress adaptable.
  2. Optimizar para SEO: Consejo.
  3. Los recursos de diseño web: optimización de imágenes y tipografías.
  4. Plugins de Seguridad y Caché para WordPress.

1. Web responsive:  Plantilla de WordPress adaptable

¿Cómo hacer que un buen diseño web WordPress tenga visibilidad en Internet? Utilizando una plantilla responsive.

La oferta de temas y plantillas para WordPress es muy amplia. Existe gran variedad, pasando por plantillas de WordPress gratuitas a plantillas de pago. Estas últimas suelen utilizarse para proyectos web que, debido a la amplitud de su contenido, requieren de mayor libertad a la hora de customizar el diseño de las páginas.

Una vez tenemos claro el tipo de diseño web que tenemos que hacer, hay un punto que no puede escaparse a al hora de elegir una plantilla: que sea responsive. Es decir, que la maquetación web se adapte a los diferentes dispositivos: escritorio, tablets y smartphones.

La navegación desde el portátil queda genial pero… ¿Cómo se ve tu web en el móvil?

paginas web adaptadas a móvil

Es muy importante realizar una web responsive, teniendo en cuenta que el tráfico en Internet a través smartphones se ha incrementado considerablemente en los últimos años, ocupando algo más de la mitad de las visitas en servicios online en los últimos años.

Desde Valencia, nuestro equipo de desarrolladores y diseñadores web ofrecemos el servicio de marketing online para mejorar el SEO de tu web.

2. Optimizar para SEO: Consejo

La optimización web comienza en el primer minuto del desarrollo… ¡Manos a la obra con el SEO!

Ya tenemos el tema de WordPress responsive instalado y es momento de empezar a configurar el SEO o posicionamiento web. Aunque los resultados reales los veremos a los largo del desarrollo web y al finalizar el proyecto, es importante que tengamos el SEO presente desde el principio.

En Gsoft Informática Valencia, recomendamos que instales el plugin gratuito Yoast SEO , una herramienta bastante completa y fácil de usar con la que poder trabajar el SEO web sobre los contenidos y estructura de tu WordPress.

SEO para wordpress

Este plugin va analizando cada página o entrada de tu web, haciendo un análisis a tiempo real de la legibilidad y frases objetivo. A su vez facilita las posibles mejoras que puedes hacer para aumentar la optimización SEO.

Existe unos elementos SEO cruciales que harán que aumenten el tráfico de tu sitio web.

Okey, ¡gracias Yoast! Ahora que tengo un diseño responsive y una herramienta para SEO, ¿qué más puedo mejorar en mi web WordPress?

3. Los recursos de diseño web: optimización de imágenes y tipografías

via GIPHY

Es tan importante tener unos buenos recursos, como su correcta utilización.

Como creadores de diseño web nos encanta utilizar las mejores imágenes con la mejor resolución. Pero esto puede ser bastante perjudicial, ya que afectará al rendimiento y carga de la página web. Si nuestro sitio tarda la vida en cargar el contenido, perderemos tráfico y las horas de diseño no habrán servido 🙁

Para evitar esto, la recomendación que hacemos antes de subir los archivos, es optimizar las imágenes para web. La clave es que la resolución de tu imagen web sea de 72 ppp(Píxeles/Pulgada) y no supere los 800 KB.

Si utilizas Photoshop, tienes la opción el el panel Imagen > Tamaño de imagen con la que poder redimensionar y ajustar a estas medidas web.

Optimizar imagen para web

 

Ahora hablemos del uso de tipografías para web. Otro recurso que nos vuelve locos a los diseñadores pero, cuando se trata de diseño web  hay que tratar con especial cariño.

Como hablábamos en el post anterior ELEMENTOS CLAVE BÁSICOS PARA UN BUEN DISEÑO WEB , lo mejor que podemos hacer es utilizar como una o dos fuentes. Con nuestra creatividad en diseño, maquetar textos jugando con los tamaños de letra, colores y peso de la tipografía, no resultará ningún problema obtener un buen resultado.

Si sigues estos consejos mejorarás el SEO web.

tipografías web

Cuando ya tenemos claro cómo podemos optimizar al máximo nuestra web en WordPress, nos queda este consejo, no menos importante.

3. Plugins de Seguridad y Caché para WordPress

La web perfecta: Legible, bien diseñada, rápida y segura.

Al igual que en el mundo real, hay personas que, sin conocer de nada y a base de ser pesados, intentan meterse el la vida de los demás sin venir a cuento, en Internet pasa exactamente igual. Para evitar que spammers, bots o gente aburrida intente colarse en tu maravilloso y optimizado WordPress, recomendamos la instalación de un plugin de seguridad. Existe un listado de módulos de seguridad gratuitos. Nosotros recomendamos el más utilizado: WordFence. Solo hay que instalarlo y facilitar un email donde quieras recibir las notificaciones en cuanto a intento de acceso por parte de terceros, actualizaciones de plugins necesarias, entre otras.

Seguridad wordpress

 

Por otro lado, tenemos el almacenamiento en caché. Este es importante porque reduce la carga de la web y hace que el contenido aparezca más rápido. Es necesario que instalemos un plugin de configuración de almacenamiento en caché para mejorar el rendimiento de nuestro WordPress.

Está claro que los usuarios se fijarán mucho en el diseño web, que sea una web responsive. Pero también hay que tener en cuenta que Google otorga una importante ventaja de SEO a los sitios web más rápidos, lo que le ayudaen los resultados de búsqueda a obtener mejores calificaciones.

Al igual que tenemos diferentes plugins de seguridad, también podemos elegir entre varios para la gestión de caché de nuestro sitio web en WordPress. Los mejor valorados:

Plugins caché wordpress

Nota: Dependiendo del tema que utilicemos, nos funcionará mejor uno u otro. Por esto, es conveniente que si no nos optimiza lo suficiente uno, probemos con otro.

Para saber la puntuación en SEO de Google para nuestro sitio web, podemos hacer un análisis desde la página de PageSpeed:

https://developers.google.com/speed/pagespeed/insights/

En este post te explicamos cómo configurar PageSpeed en WordPress.

CONCLUSIÓN:

Si seguimos estos consejos SEO, tu web responsive ganará en velocidad y mejorará la experiencia del usuario, animando a visitar más páginas. Esto también aumentará el tiempo que los usuarios pasan en la web.

Estas junto con otras buenas prácticas para la optimización web que iremos compartiendo, complementarán el diseño web obteniendo el mejor resultado.

Gsoft Infomática en Valencia, desarrolla tu sitio web responsive, optimizado para SEO y con las últimas actualizaciones en seguridad.

Somos una empresa que trabaja y mejora el SEO y el diseño web de empresas de Valencia, Comunidad Valenciana  y otros clientes de ámbito nacional.

Te asesoramos y desarrollamos tu proyecto web ¿Necesitas más información? No dudes en contactar con nuestro equipo 🙂

/por

Elementos clave básicos para un buen diseño web

Hace unos años, era imprescindible tener una tarjeta de visita y algún díptico explicativo para poder crear nuevos contactos y visibilidad del negocio. Hoy en día, aparte de tener una bonita tarjeta, toda empresa que desee llegar al máximo número de clientes necesita tener presencia en internet.

El primer paso para que esto ocurra, es hacerse con un buen especialista y asesor en diseño y desarrollo web profesional. Esto hará que la decisión de publicar una web corporativa para el negocio, obtenga el mejor resultado.

Hay multitud de opciones para realizar una web y publicarla de cualquier manera, para “salir del paso” y simplemente que aparezca la información del negocio online. Pero esto puede estropear la identidad visual. Estas opciones ofrecen una personalización muy limitada y finalmente habremos invertido tiempo y dinero en unos resultados que no terminan de representar la esencia del servicio o producto que se ofrece.

A continuación, enumeramos una serie de puntos clave para que tu web represente con mayor fidelidad la imagen de marca de tu empresa.

Elegir una buena paleta de colores web

Si un logotipo es rosa y sólo se utilizan verdes y grises en la maquetación del contenido web, existe la probabilidad de que el usuario se sienta inconscientemente desubicado, ligeramente incómodo, y lo primero que haga sea salir del sitio porque hay algo que no “le cuadra”.

La mejor forma de extraer la gama de colores web que queremos utilizar, es partiendo de nuestro logotipo, extraer las diferentes tonalidades.

Para ello pondremos el ejemplo de un rediseño web para una empresa dedicada a suministros de carpintería y fabricación de muebles.

 

 

 

Este color podemos utilizarlo como principal para, por ejemplo, títulos H1 o botones.

Con este color principal, pasamos a elegir dos o tres colores secundarios para que nuestro diseño quede más dinámico y no se vea soso.

Aquí es importante la sensibilidad del ojo del diseñador, ya que hay que tener en cuenta que los colores casen bien con el color principal. 

 

 

En este caso hemos elegido una gama de colores que transmitiesen confort, cierta sofisticación, evocando la elegancia de la madera trabajada y sus diferentes tonalidades.

Nota: Para el texto, siempre quedará menos agresivo si utilizamos un color oscuro que no llegue a ser negro, como un gris o azul oscuros. En nuestro caso, recurrimos a un marrón madera oscuro.

Tipografía web, legible y acorde a la marca

Como recurso más utilizado para elegir una tipografía adecuada a nuestra web, tenemos el catálogo tipográfico online de Google Fonts https://fonts.google.com/.

Aquí encontramos gran variedad de fuentes tipográficas optimizadas para ser usadas en web.

Ventajas: Son gratuitas y podemos utilizarlas copiando un simple código en nuestra hoja de estilo CSS.

Inconvenientes: Funcionan siempre que estemos conectados a Internet.

Recomendación: Utilizar como mucho muchísimo dos fuentes de Google Fonts, ya que si importamos demasiadas, la carga de nuestra página web será más lenta.

 

 

Para este proyecto, tras un proceso de investigación, seleccionamos la tipografía “Libre Franklin”, ya que ofrece diferentes estilos y quedaba visualmente acorde con el contenido web.

 

Tipografía web

 

Elementos visuales: Iconos, formas, texturas

El uso de iconos para reforzar la comunicación dentro de una web está más que a la orden del día, convirtiéndose ya no en un simple sistema informativo si no que parte del diseño y la imagen de marca de una empresa con presencia online.

Para que la iconografía de nuestra web cumpla con las finalidades básicas de funcionalidad y esteticismo, tendrá que seguir un estilo claro, homogéneo y coherente. Si mezclamos muchos estilos de iconografía (fotografía con imágenes abstractas, o iconos a todo color con negros) obtendremos un resultado algo caótico.

Por otro lado, está el uso de elementos visuales como las formas geométricas o irregulares para hacer la navegación más atractiva.

Es importante no abusar de esto ya que puede resultar agobiante para el usuario.

En nuestro caso, solo recurriremos de forma puntual, a utilizar dos texturas para fondos de elementos:

  • Marca de agua de la imagen corporativa

 

  • Textura evocando a la madera

Dejando bien cerrado el sistema de elementos visuales que queremos utilizar, y ciñéndonos a ello, podemos combinarlos entre ellos y con nuestra gama de colores y tipografías para obtener diferentes módulos de información que sigan una línea estética acorde a nuestra marca a lo largo de la navegación en nuestra web.

Por último, y no menos importante: La fotografía para web

El uso de buenas fotografías es un recurso visual importantísimo en el diseño de nuestra web.

Es necesario que las imágenes no estén pixeladas. Además que el tamaño no supere los 800 KB, ya que afectaría a la carga de la página, así como su optimización y SEO.

A parte de estas características técnicas, si queremos vender bien nuestra imagen de marca, destacando lo bien que realizamos nuestros productos o servicios, lo que siempre recomendamos es contratar un servicio de fotografía profesional. Los resultados de la inversión son notoriamente satisfactorios y el usuario lo nota al instante.

Al fin y al cabo, una imagen vale más que mil palabras.

Conclusión

Antes de empezar a diseñar una web como locos, tenemos que definir muy bien los diferentes recursos visuales que vamos a utilizar, teniendo en cuenta el equilibrio entre dinamismo y sobriedad que cada proyecto necesita. Esto nos facilitará mucho el trabajo posterior y nos ayudará a obtener mejores resultados de diseño web en menor tiempo.

 

/por

10 elementos esenciales que debe tener la home de una tienda online

,

 

Ir de compras, es cosa de mujeres ¿verdad? Bueno, ya no. Hay muchas tiendas online con una amplia gama de dispositivos tecnológicos que pueden hacer que cualquier hombre quede pegado a la pantalla del ordenador o del móvil durante horas. Hoy en día, no se puede decir que las compras online sean un nicho de mercado, dirigido a un público reducido.

No vamos a hablar sobre las ventajas de las tiendas online, todos sabemos que el sistema funciona. De lo que sí vamos a hablar es de los diseños de la página de inicio que realmente podrían ayudar al éxito de tu negocio online.

Diseño de una tienda online

Seguramente, no hay características universales u opciones de diseño que garanticen que tu tienda online se elevará a la más alta popularidad, pero hay varios elementos esenciales que no deben ignorarse al crear una tienda online.

Antes de nada hay que tener en cuenta de un par de planteamientos previos:

  • Haz que tu tienda online venda. Suena extraño, pero hay muchas tiendas que están diseñadas sin pensar en hacer ventas. Son muy bonitas, pero son absolutamente inútiles cuando se trata de ir de compras. Estas tiendas priman la imagen de marca para que la presencia online sea equivalente al de la tienda física.
  • Haz que los visitantes de tu web confíen en ti. La gente mira lo que gasta; por lo tanto, es natural esperar que quieran saber todo lo que hay que saber sobre el producto que van a comprar, el proceso de compra, los métodos de pago, el servicio de entrega, las garantías, etc., que los ayudarán a tomar una decisión y comprometerse a una transacción.

Elementos esenciales de la home de una tienda online

Y ahora, desde Innovaciones Informáticas Gsoft nos gustaría sugerirte varias características que probablemente te ayudarán a mejorar la usabilidad de tu tienda online y aumentar la rentabilidad.

  1. Logotipo claro. Cuando se trata de compras online, un logotipo reconocible es un símbolo tranquilizador y un elemento de confianza de la empresa u organización.
  2. Ofertas, regalos y envío gratis en la home de tu tienda online. Por lo general, las personas deciden rápidamente si les gusta una web o no, es por eso que deberían interesarse en cuestión de segundos cuando entren en la tienda; de lo contrario, encontrarán alguna otra tienda con una página de inicio más atractiva. Y nada atrae mejor y más rápido que las ofertas. Millones de personas pierden la cabeza durante las rebajas y los períodos de descuento, y compran cualquier cosa a precios reducidos solo porque están rebajados.

Algunos se sienten atraídos por el envío gratuito, otros por los descuentos importantes, pero casi todos están interesados ​​en un tipo de promoción u otra. Por lo tanto, los descuentos y las ofertas especiales suelen ser lo primero que buscan los visitantes de una tienda online. Las promesas atractivas y los precios únicos estimulan a los visitantes a gastar, gastar y gastar. Por lo tanto, tiene sentido colocar pancartas llamativas con ofertas de descuento en la parte superior de la página de inicio de una tienda online.

El envío gratuito también es un favorito de la multitud. Ahora estás vendiendo al mundo, no solo al mercado local, por lo que debes tener en cuenta los costes de envío. Para ahorrarse gastos innecesarios de envío, muchas tiendas online generalmente ajustan el precio mínimo de pedido para incluir los costes de envío.

  1. Últimas noticias y productos más populares. Cuando hay noticias, un período de rebajas o eventos próximos que los compradores deben saber sobre el producto, la página de inicio es el mejor lugar para albergarlos. No hagas que sea muy difícil para los compradores encontrar ofertas exclusivas y precios calientes.
  2. Productos de marca en la home de tu tienda online. No siempre es posible predecir qué buscará el próximo cliente, pero eso no significa que debas colocar todos tus productos directamente en la página de inicio. Lo que puedes hacer es tener las ofertas más llamativas. Si tienes productos de marca en oferta, muéstralos primero. Es un gran aliado a la hora de captar la atención, especialmente con los visitantes primerizos que no saben exactamente lo que están buscando.
  3. Carro de compras, el botón de inicio de sesión y el botón de búsqueda. El carrito de la compra, el botón de inicio de sesión y las funciones del botón de búsqueda generalmente se colocan juntos. Es casi imposible imaginar una tienda sin una función de carrito de compras incluida. El ícono de carrito de compras más popular es una canasta simple, por lo que tiene sentido elegir algo similar para tu tienda online. Muchas tiendas también ofrecen a sus clientes cuentas privadas donde es posible verificar todos sus pedidos anteriores y actuales. Todos los clientes que se registren pueden elegir un nombre de usuario personal y una contraseña para acceder más veces. Además, los propietarios de dichas cuentas pueden recibir ofertas especiales de descuento y participar en diferentes promociones o ventas. Por otra parte si tienes una tienda online con una amplia variedad de productos, entonces el botón de búsqueda es imprescindible. Esto también será de gran utilidad entre los clientes que buscan un producto específico.
  4. Iconos de sistemas de pago en la home de tu tienda online. Las tiendas online comúnmente usan tarjetas de crédito y débito, vales de regalo, contra reembolso, PayPal, etc. como su principal sistema de pago. Puedes encontrar fácilmente estos iconos de pago en el pie de página o en la esquina superior derecha de las webs. Estos detalles de pago deben mostrarse en la página de inicio a plena vista.
  5. Enlaces de redes sociales en la home de tu tienda online. Se dice que casi el 20% de las compras online se realizan después de navegar a través de las redes sociales. La gente suele buscar las opiniones públicas. Además, las redes sociales brindan excelentes oportunidades para la autopromoción: las comunidades online pueden ayudar a identificar a los clientes más activos e influyentes, o encontrar nuevos que aún no estén familiarizados con la tienda online. Para las tiendas online, es un buen canal para mantener a los clientes al corriente de las últimas noticias u ofertas especiales que están orientadas solo a los seguidores de las redes sociales.
  6. Números de teléfono y chats online en la home de tu tienda online. Cuando hay un problema, es más probable que los clientes prefieran contactar con alguien con quien puedan hablar. De ahí la necesidad de tener equipo de soporte de la tienda; Las líneas de atención 24/7 y los chats en vivo son formas muy apreciadas de servicio al cliente. Si las compras online se pueden realizar durante todo el día y toda la noche, existe la necesidad de proporcionar servicios al cliente las 24 horas para resolver la mayoría de las preguntas de preventa y postventa. Además, las personas pueden conectarse online desde sus lugares de trabajo o desde su hogar, por lo que una compra, y cualquier consulta complementaria, pueden realizarse en cualquier momento del día.
  7. Buscador de tienda en la home de tu tienda online. Una pestaña de buscador de tiendas es una opción imprescindible para las tiendas online que tienen varios locales o nacionales. Muchos clientes conservadores que prefieren visitar la tienda física pueden visitar la web, pero solo para encontrar la tienda más cercana. Si la tienda tiene una red amplia, es conveniente crear un cuadro de búsqueda de ubicación por país, ciudad, código postal o búsqueda de dirección.
  8. Confianza en la home de tu tienda online. Las marcas de confianza son imágenes pequeñas o logos que muestran una garantía de seguridad por parte de un tercero que indica que es seguro comprar en la tienda online. Estos certificados de acreditación brindan a los clientes una sensación de seguridad y les da confianza para compartir su información privada. Los visitantes están proclives a hacer una compra si saben que sus detalles de pago están a salvo de miradas indiscretas. También se debe tener en cuenta que las marcas de confianza no importan en las tiendas de grandes marcas. No necesitan pasar pruebas de seguridad y privacidad para confirmar su confiabilidad porque ya tienen una buena reputación. Además de las marcas de confianza, un diseño claro, menús convenientes, descripciones detalladas de los productos y reseñas de los usuarios también son importantes para crear una mejor reputación online.

Conclusión: Cómo debe ser la home de una tienda online

¡Y eso es todo! Esperamos que los consejos anteriores te ayuden a que tu tienda online sea la página perfecta para compradores potenciales. En Gsoft somos especialistas en desarrollo de tiendas online. Si tienes pensado poner en marcha una tienda online contacta con nosotros y te asesoraremos. Si por el contrario ya tienes tu tienda online funcionando pero no consigues ventas, contacta con nosotros y te haremos una auditoría de usabilidad y diseño para que tu tienda online se aun éxito.

/por

Usabilidad y diseño de tiendas online

, , ,

Uno de los factores más importantes para los usuarios web es la usabilidad y diseño de tiendas online. Un buen diseño y un ecommerce intuitivo hará que aumenten las ventas online.

De esta forma, un buen diseño de una tienda online mejorará su posicionamiento, además, es un beneficio para el usuario ya que aumenta su usabilidad y ayuda a tener una experiencia de usuario óptima.

Usabilidad y diseño de tiendas online, diseño para los usuarios

El diseño perfecto para los clientes potenciales es algo imposible de realizar a la primera, es decir, se debe perfeccionar una tienda online mediante la observación del comportamiento de los usuarios

A través de lo que perciben se llegará a un diseño óptimo para ofrecer la mejor usabilidad web para el usuario. Una buena usabilidad de tiendas online viene a través del diseño y de los contenidos del comercio electrónico, de esta forma se ofrece una buena experiencia para el usuario que facilite la conversión.

Usabilidad y diseño de tiendas online, la usabilidad web

 

La usabilidad web se trata de ofrecer al usuario una experiencia lo más fácil posible para que llegue a su objetivo final, en una tienda online sería la compra de un producto o un servicio.

Existen tres factores para que el usuario tenga una experiencia óptima y de esta forma alcanzar la conversión:

  • Efectividad: Se trata de tener una tienda online sin errores, en la que el usuario pueda acceder a todos los rincones de la web sin ningún tipo de problema.
  • Eficiencia: Se trata del esfuerzo que hace el usuario para alcanzar su objetivo, es decir, el número de pasos que debe realizar el potencial cliente para, por ejemplo, comprar un producto.
  • Satisfacción: Un factor donde el usuario tendrá una actitud positiva hacia el ecommerce, uno de los puntos clave a tener en cuenta es la velocidad de carga, una tienda online lenta hará que el usuario se desespere y no llegue a comprar el producto.

Usabilidad y diseño de tiendas online, el diseño responsive

Usabilidad y diseño de tiendas online responsive

El diseño responsive es otro de los factores a tener en cuenta para crear una buena usabilidad y diseño de tiendas online. Un diseño responsive se crea para adaptar los contenidos de una web o una tienda online a los dispositivos móviles.

¿Por qué es importante que un ecommerce o una página web normal tenga un diseño adaptado a los dispositivos móviles?

Actualmente, los móviles superan a los ordenadores para la búsqueda y la compra online. La importancia de poder comprar en cualquier momento, en el lugar que se quiera a través del móvil, es algo fundamental para que las tiendas online adapten sus contenidos.

Los diseños minimalistas, los CTA’s (Call to action) o llamadas a la acción y la implementación de información sobre productos o servicios ayudan al usuario a lograr su objetivo, en tiendas online la compra. Esto supone un refuerzo de la imagen del ecommerce y a largo plazo supondrá una reducción de los costes y que esos clientes vuelvan a comprar, es decir, se genera fidelización.

/por

Marketing móvil

, ,

Actualmente el marketing móvil es primordial para las empresas. La sociedad está hiperconectada a nivel mundial.

En un mundo en la que existe una población total de 7.260.711.000 personas, 7.000.000.000 de estas personas tienen y utilizan el smartphone o dispositivos móviles.

Para que nos hagamos una idea, la utilización del móvil está más extendido que por ejemplo el uso del cepillo de dientes en el mundo, 3.500.000.000 de personas, es decir, la mitad de las personas que utilizan el móvil.

Marketing móvil, el smartphone como cambio social

 

La necesidad de una comunicación inmediata ha hecho que desde hace muchos años se hayan investigado nuevas formas de comunicación.

Todo comenzó con la invención del telégrafo, más tarde fue el teléfono. Los cambios sociales, la globalización, por necesidades laborales… Todo ello, y mucho más, hizo que se buscaran formas de comunicación portátiles.

Desde finales de los años 80, con Motorola y Ericsson a la cabeza de la creación de teléfonos móviles hasta la actualidad con la nueva generación de teléfonos inteligentes, han hecho que las formas de comunicación hayan cambiado y que las empresas deban adaptar sus estrategias de marketing y sus campañas de publicidad al marketing móvil.

De esta forma, nos encontramos con un usuario que está conectado a todas horas y por ello las marcas se están adaptando a estas tendencias de comunicación de las personas a niveles que tanto locales, nacionales e incluso internacionales.

Estrategias de marketing móvil para las empresas

marketing móvil estrategias

Como se ha dicho anteriormente, las personas estamos hiperconectadas y el reto principal para las empresas es la adaptación de sus estrategias de marketing móvil.

A partir de la llegada de 2007 del smartphone, se ha ido evolucionando la forma de comunicación de la sociedad y las empresas han ido buscando nuevas formas de llegar a ese público conectado en cualquier momento y en cualquier lugar.

Hace dos años que los dispositivos móviles han superado con creces a la conectividad a través del PC. Los sistemas operativos más utilizados en nuestro país son Android e iOS, los dos gigantes en dispositivos móviles en la actualidad.

Los smartphones se utilizan de forma complementaria al PC y a la vez que otros medios, por ejemplo, la televisión. De esta forma surge la necesidad de adaptar las páginas web o las tiendas online de las empresas a los dispositivos móviles, es decir, utilizar diseño responsive.

El diseño responsive también puede aplicarse en forma de aplicación móvil o app, de esta forma, tanto en aplicación como en navegador, se le proporcionará una mayor usabilidad móvil y una buena experiencia de usuario.

El marketing móvil trata de todo tipo de acciones de marketing que podemos realizar en dispositivos en movilidad, los diferentes tipos de acciones que se dan para el marketing móvil son:

  • Publicidad móvil. Display y Search.
  • Presencia en las RRSS.
  • Servicios basados en geolocalización.
  • Mensajería. SMS, MMS, OTT.
  • Contenidos y aplicaciones (Apps).

Tendencias del marketing móvil

marketing móvil tendencias

Las tendencias empresariales de comunicación van encaminadas a la omnicanalidad, es decir, la utilización por parte de los usuarios de diversos canales de comunicación.

El comportamiento de los usuarios está cambiando y estos se mueven a través de diferentes canales, ya sea a través de las diferentes redes sociales, de aplicaciones, navegadores, SmartTv, etc. De esta forma las marcas se adaptan para ofrecer una mejor experiencia para los clientes.

Además, las tendencias que se están dando actualmente y que seguirán evolucionando para ofrecer una mayor experiencia de usuario, se están dando a través de:

  • La realidad aumentada
  • Realidad Virtual: Inmersión total en mundos virtuales.
  • El internet de las cosas: Smartwatches, neveras, bombillas, casas, etc.
/por

¿Porque es importante cambiar el diseño web de tu sitio?

,

¿Porque es importante cambiar el diseño web de tu sitio?

cambiar el diseño web valencia

Estamos en la era tecnológica y los cambios son constantes, cada vez somos mas móviles y queremos acceder a todas partes desde nuestros dispositivos móviles, cuando entramos en una página web desde nuestro smartphone o tablet buscamos una navegación satisfactoria, rápida y directa, tanto como para hacer hacer una compra online como para hacer cualquier tipo de consulta.

Estos son los factores determinantes para cambiar tu diseño web.

Sitio responsive: A día de hoy muchos sitios web no están adaptados a todos los dispositivos móviles y el usuario por la incomodidad de la navegación abandona el sitio web. De este modo no es de extrañar que se pierdan clientes o un posibles compradores. Este factor está marcando una tendencia que los buscadores están teniendo muy en cuenta, ya que no solo afecta al comportamiento del usuario frente a tu web, si no al propio posicionamiento de tu sitio en los principales motores de búsqueda. si quieres ampliar esta información puedes acceder al siguiente a este articulo.

Contenido y usabilidad: Hay que darles facilidades a los usuarios a la hora de acceder a la información de la página, como por ejemplo tener en cuenta los clicks que tiene que hacer un usuario para acceder a un producto o para realizar una compra en un ecommerce. Un usuario se puede cansar rápidamente de navegar por nuestra web si no encuentra de una forma ágil y sencilla lo que ha venido a buscar.  Una buena organización de contenido ayudara a que tus posibles clientes tengan una navegación satisfactoria y puedan localizar tus productos o servicios en unos pocos clicks de ratón.

Otros factores a tener en cuenta que no dejan de ser importantes son la conectividad con las redes sociales mas relevantes, el posicionamiento y la carga del sitio web que también sería importante analizar.

Un sitio web con mas de 4 años posiblemente necesite cambiar muchas cosas, como hemos comentado al principio del articulo, estamos en la era tecnológica y los cambios constantes de tecnología y comportamiento del usuario pueden afectar a la forma en que se ve tu sitio web.

En resumen si tu sitio web no esta adaptado a dispositivos móviles, no facilita la navegación de los usuario desde cualquier dispositivo, no está bien posicionado y no conecta con las redes sociales mas importantes, es el momento de cambiar el diseño de tu web.

Si quiere cambiar el diseño de tu sitio web y darle un aspecto fresco, profesional e innovador ponte en contacto con nosotros y te mandaremos una propuesta sin ningún compromiso.

 

/por

Porque necesitamos fuentes web compatibles

Durante los inicios de la Web, no había fuentes estándar que poder usar a través de todas las plataformas. Sin embargo, algunas fuentes como Arial , Helvetica y Times New Roman tenían más posibilidades de estar instaladas en el ordenador de una persona. Estas fuentes del sistema populares se llaman fuentes compatibles con Web. Por aquel, entonces era la mejor opción de diseño web.
Las cosas han cambiado bastante. Ahora es seguro y compatible usar fuentes Web. Es una técnica para la utilización de cualquier fuente remota en una página web con @font-face. Esto nos da más libertad creativa y una gama mucho más amplia de fuentes.

La regla @font-face

La regla @font-face ha existido desde hace 13 años, que funcionaba en Internet Explorer 5.5.

@font-face ha sido incluida formalmente en la versión más reciente de los estándares CSS del W3C ( CSS3 ) y los navegadores modernos (por ejemplo, Chrome, Safari , IE y Firefox) soporta la regla.

Y con servicios como la conexión API Google Fonts, la utilización de fuentes Web es fácil. Por ejemplo, utilizando el servicio web de Google Fonts, se necesitan dos líneas de CSS para utilizar una fuente relativamente desconocida, como Reglas Bigelow en la gran mayoría de los navegadores :

@import url(http://fonts.googleapis.com/css?family=Bigelow+Rules);
body { font-family: 'Bigelow Rules'; }

Ejemplo de fuente web

Pero incluso con el apoyo de la regla @font-face, como una buena práctica , debemos seguir utilizando pilas de fuente CSS. Por otra parte, nuestras pilas de fuente CSS todavía deben incluir fuentes compatibles con Web, así como las familias de fuentes genéricas sans- serif y serif.

Incluso si tuviéramos que utilizar la fuente más popular de servicio de fuentes web de Google (Open Sans), deberíamos usar una pila de fuentes CSS que incluya fuentes compatibles con Web similares. Es la última declaración de la pila – una familia tipográfica genérica (sans-serif en el caso de Open Sans):

body {font-family: "Open Sans", "Arial", "Helvetica", sans-serif; }

En Chrome, esta es la secuencia de retorno de representación :

Pila de fuentes web

Como puede observar, el uso de una buena pila de fuentes protege nuestro texto HTML en el caso de que nuestra fuente elegida no se pueda cargar por algún motivo.

¿Por qué aún necesitamos una pila de fuentes?

Las Fuentes compatibles con Web y las pilas de fuentes CSS pueden parecer prácticas obsoletas de diseño web, sobre todo porque @font-face tiene una gran compatibilidad.

Cerca del 90% de los usuarios de Internet utilizan un navegador que soporte @font-face.

Pero si alguna vez has considerado prescindir de pilas de fuente CSS, a continuación son algunas de las razones que podrían cambiar de opinión.

Fuentes incompletas

Si ciertos caracteres de la fuente no están disponibles, el navegador intentará renderizar esos carácteres, utilizando el siguiente tipo de letra en la pila. Pero si usted no tiene una pila fuentes, se utilizará tipo de letra estándar por defecto del navegador.

Por ejemplo, la fuente Libre de Baskerville no tiene el carácter ™.

El primer ejemplo muestra, cómo el carácter que falta, se renderiza en Chrome sin una pila de fuentes, mientras que el segundo ejemplo utiliza en la pila «Times New Roman» y serif:

Impacto fuentes web incompletas

Por lo menos con una buena pila de fuentes, el carácter ™ tiene una apariencia similar a la de la fuente «Baskerville Libre».

Problemas de red

Carga de una fuente remota utilizando @font-face requiere una conexión a Internet. Si el servidor web, responsable de servir la fuente, no está disponible o está en mantenimiento, el navegador utilizará su fuente estándar por defecto, a menos que especifique una fuente segura tu pila de fuentes CSS.

Para Google Chrome, el texto estándar (en Windows) es » Times New Roman». Esto puede ser una mala noticia si estuviéramos usando un tipo de letra sans-serif.  El servidor web o de la red de distribución de contenidos, donde se encuentra el archivo de fuente, no está disponible.

Por ejemplo , echa un vistazo a esta maqueta de un diseño web que utiliza la fuente PT Sans :

Fuentes web problema en la red

Si nuestra pila de fuentes no tenía fuentes compatibles con Web en la pila y ocurrió una interrupción en la red, nuestra página web se mostraría así ( en Chrome ):

Fuentes web problema en la red

La página web se ve completamente diferente porque Times New Roman afecta en gran medida el diseño.

Pero si usamos una pila de fuente que incluía fuentes compatibles con Web, podemos mitigar algunos de los problemas estéticos que vienen con los problemas de red.

El uso de la pila de fuentes:

font-family: "PT Sans", "Helvetica", "Arial", sans-serif;

Somos capaces de reducir el impacto visual causado por una interrupción en la red:

Fuentes web problema en la red

@font-face se puede desactivar en el cliente

Algunos navegadores ofrecen la opción de deshabilitar la descarga de ficheros.

En la mayoría de los casos, la desactivación de ficheros remotos en un navegador web está oculta, pero es posible.

¿Por qué alguien quiere desactivar fuentes remotas? Para acelerar los tiempos de carga de página web, que es especialmente deseable para los usuarios de Internet que tienen conexiones lentas.

Para ilustrar cómo el actúa sobre el rendimiento el uso de fuentes Web, vamos a utilizar la fuente «Lobster Two».

El marcado siguiente se utilizó para probar la carga útil de la langosta Dos localmente mediante un documento HTML llamado » langosta y dos payload.html «:

<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Lobster+Two:400,400italic,700,700italic' rel='stylesheet' type='text/css'>
<style>
body { font-family:"Lobster Two"; }
</style>
</head>
<h1>Display Font</h1>
</html>

Las condiciones de ensayo son una conexión a Internet de banda ancha y la caché desactivada (lo que significa que la caché del navegador se borra para cada prueba).

#1 resultado. Tiempo total : 972ms

Carga de fuentes web

#2 resultado. Tiempo total : 1.61s

Carga de fuentes web

#3 resultado. Tiempo total : 1.36s

Carga de fuentes web

En la condición probada, tardaría una media de 1,3 segundos para renderizar la etiqueta <h1> totalmente para alguien que tiene la caché vacía.

Esto significa tener una página en blanco durante 1,3 segundos antes de que el usuario pueda leer el texto. El comportamiento por defecto de Chrome es no mostrar texto mientras la fuente todavía esté cargando.

Considere que 1,3 segundos es el tiempo promedio de carga, utilizando una conexión de banda ancha para descargar los ficheros de los servidores de Google. Imagínese cuánto tiempo se tardaría en situaciones no ideales, tales como redes móviles lentas.

Sin la fuente Web, el mismo documento terminaría renderizado en sólo 0,012 segundos. Eso significa que la fuente incrementó el tiempo de carga de 10,733%. Este es un precio muy alto a pagar por la prestación de una fuente. Es por eso que algunos usuarios optan por desactivar la descarga de ficheros.

Si queremos disminuir el impacto correctamente de nuestro diseño de páginas web en las situaciones en que el usuario ha optado por desactivar ficheros remotos, deberíamos utilizar fuentes compatibles con Web en nuestra pila de fuentes.

Cabe señalar que no tenemos que cargar toda la familia de fuentes. Si utilizamos el servicio Google Fonts, podemos cargar selectivamente sólo las variaciones del tipo de letra que necesitemos.

/por

Webalizate Ya con Gsoft Informática

Gsoft Informática lanza su campaña Webalizate Ya dirigida a empresas y particulares que deseen tener presencia en Internet.

La campaña Webalizate Ya es ideal para nuevas empresas y emprendedores. Promueve tener su mejor carta de presentación – su propia página Web. Un sitio web totalmente profesional y adaptado a sus necesidades y de sus clientes.

Le garantizamos que sea cual sea la actividad que desee difundir, ofrecemos una página web a medida y totalmente personalizada, dando notoriedad a su actividad. Todo ellos a un precio increíble.

Pida su presupuesto sin compromiso o pongase en contacto con nosotros a través de comercial@gsoft.es.

GSOFT-WEBALIZATE

/por

Items de portfolio