Consejos Prácticos para Mejorar tu Web y Vender Más

1
(No Transcript)
2

• Mucho han ido evolucionando las páginas web en
  estos últimos años, pero es en este año 2015 se
  espera un cambio tanto más radical como más
  extendido.
• Mientras muchas empresas han ido innovando y
  actualizando tanto su diseño web como su
  usabilidad, adaptándose a los continuos cambios
  en el mundo online, hay otras muchas empresas
  cuyas webs siguen con diseños obsoletos y sin
  preocuparse por la usabilidad.

3

• Pero con la gran popularización y uso de
  diferentes dispositivos móviles (Smartphones,
  tablets, etc.) se ha impuesto el llamado Diseño
  Web Responsivo o Adaptable, es decir, un mismo
  diseño para todos los dispositivos (ordenadores y
  dispositivos móviles) que se adapta al tamaño y
  resolución de la pantalla desde la que se
  visualiza la web para una experiencia web
  similar independientemente del dispositivo.
• El diseño web adaptable es una configuración en
  la que el servidor siempre envía el mismo código
  HTML a todos los dispositivos y se utiliza código
  CSS para modificar el procesamiento de la página
  en el dispositivo. La siguiente infografía y te
  muestra la importancia de un diseño responsivo

4
(No Transcript)
5
(No Transcript)
6

• Ventajas
• La cantidad de usuarios que acceden a la web
  desde dispositivos móviles ha aumentado y seguirá
  haciéndolo. Un 57 de los usuarios no
  recomendaría una compañía con un sitio móvil mal
  diseñado y un 40 visitarían la página de un
  competidor antes que usar un sitio escasamente
  optimizado para su navegación en móviles.
• Esta información nos muestra el perfil de los
  usuarios de Internet en dispositivos móviles

7
(No Transcript)
8
(No Transcript)
9

• Las ventajas del diseño web adaptativo son
  obvias
• Mejor Experiencia de Usuario Todos los usuarios
  ven la web de la mejor manera posible para el
  dispositivo desde el que acceden.
• Costos más Bajos Se reducen los costos de
  creación y mantenimiento, ya no es necesario
  desarrollar aplicaciones para distintas versiones
  móviles.
• Actualizaciones más Eficientes Cualquier
  actualización o modificación en el diseño, se ve
  reflejado en todas las plataformas, lo que reduce
  tiempos y márgenes de errores.
• Búsquedas Al hacer una búsqueda, aparecerá una
  URL única en los resultados, por lo que se
  ahorran redirecciones y posibles fallos.
• Mejor SEO para Móviles Google puede descubrir
  mejor tu marketing de contenido.
• Accesible a Todos Incluidos las personas con
  distintos problemas de disminución visual.

10

• Esta tendencia es ahora inevitable tras el
  reciente anuncio de Google que avisa de que a
  partir del 21 de Abril las webs que no tengan un
  Diseño Web Responsivo serán penalizadas
  desapareciendo de su buscador. Ya no hay
  excusas para que miles de webs obsoletas
  actualicen su diseño, si quieren seguir
  apareciendo en el popular buscador, o lo que es
  lo mismo, si quieren seguir teniendo visibilidad
  en Internet.
• Si quieres saber si tu página web está optimizada
  para móviles utiliza alguna de estas 2
  herramientas de Google para conocerlo
• Prueba de optimización para móviles.
• Informe usabilidad móvil.

11

• En este artículo te contaremos cómo debería ser
  tu web en 2015. Lo dividiremos en 4 secciones
• Daremos algunas razones de por qué debes de
  mejorar tu web para mejorar tu negocio.
• Mostraremos las principales tendencias en Diseño
  Web para este año 2015.
• Características de un Diseño Web Responsivo.
• Algunos errores a evitar en tu web.

12
Mejora tu Web, Mejora tu Negocio

• Si actualizas y mejoras tu web, mejorarás tu
  Negocio y más aspectos
• Audiencia
• Marca
• Conversión
• Ventas
• Nota Las empresas que invierten en Diseño
  aumentan su ingreso en un 22.
• Tu sitio web es tu identidad, la primera
  impresión es vital
• 91 de los clientes que tuvieron una primera
  impresión negativa nunca volvieron a la web.
• 1/20 de segundo necesitan para crearse una
  primera impresión.
• 10 segundos para decidir si se quedan en tu web.

13
(No Transcript)
14
(No Transcript)
15

• 6 Principales Tendencias en Diseño Web 2015
• Responsive Web Design Diseño Web Responsivo,
  webs adaptables a cualquier dispositivo.
• Flat Design Diseño plano y sencillo para logos e
  ilustraciones.
• Scroll Vertical Más scroll y menos clicks.
• Ghost Buttons Botones sin relleno con diseño
  minimalista.
• Imágenes Grandes A pantalla completa y de
  calidad.
• Tipografía Grande y con personalidad.

16
(No Transcript)
17

• Características del Diseño Web Responsivo
• El diseño adaptable proporciona a todos los
  dispositivos un mismo código que se ajusta al
  tamaño de pantalla.

18

• Es una técnica de diseño y desarrollo web que,
  mediante el uso de estructuras e imágenes fluidas
  y media queries en la hoja de estilo CSS permite
  que el sitio web se adapte al entorno del
  usuario, sea cual sea el dispositivo que utilice
  para navegar.
• El diseño web adaptativo supone que usando HTML y
  CSS logremos una sola versión que cubre todas las
  resoluciones de pantalla, por lo que el sitio web
  creado es accesible desde todo tipo de
  dispositivos.
• Los algoritmos de Google no deberían tener
  problema para detectar automáticamente esta
  configuración si todos los agentes de usuario de
  Googlebot tienen permiso para rastrear la página
  y sus elementos (CSS, JavaScript e imágenes).

19
3 Ingredientes Técnicos

1. Fluid Grid (Cuadrícula Fluida) En lugar de
   píxeles utiliza porcentajes para definir los
   anchos de las columnas o divs.
2. Imágenes Flexibles Las imágenes no tienen anchos
   fijos sino un máximo (o max-width), que por lo
   general suele mostrarse al 100 en un ordenador
   de escritorio. De esta manera, las imágenes se
   optimizan y reducen para ajustarse a otras
   pantallas o resoluciones de navegador.
3. Media Queries Permiten consultas al CSS
   personalizado basándose en el ancho mínimo y
   máximo de un navegador (min-max width).

20
25 Errores a Evitar en un Sitio Web

• Hablar sólo de lo que a usted le interesa.
• Demasiado compre, compre, compre.
• No invitar a un siguiente paso.
• No optimizar el contenido.
• Sobrecarga de información.
• No está adaptado para dispositivos móviles.
• Información desactualizada.
• No está integrado con otras plataformas.
• Vídeo o música que se reproduce automáticamente.
• Verlo como algo estático.
• Información en exceso y desordenada (visualmente
  congestionada).
• Errores de ortografía.
• Chat online permanentemente inactivo.

21
25 Errores a Evitar en un Sitio Web

• Pop-ups intrusivos.
• Lento tiempo de carga.
• Sin caja de búsqueda.
• Darle más relevancia a la publicidad que al
  contenido.
• Pedir registro de manera inmediata.
• El último artículo del blog es de hace un año.
• Formularios de contacto que nadie responde.
• Información difícil de encontrar.
• Sección de Preguntas Frecuentes con tres
  preguntas.
• Fotos de banco de imágenes en lugar de gente
  real.
• Contraste que agota leer.
• Que el dominio y alojamiento web hayan caducado.

22
(No Transcript)
23
(No Transcript)
24
(No Transcript)
25
(No Transcript)
26
(No Transcript)
27
(No Transcript)
28
(No Transcript)
29
(No Transcript)
30
Artículo Original www.alojate.com/blog/mejorar-t
u-web-para-vender