Mucho han ido evolucionando las páginas web en estos últimosaños, pero es en este año 2015 se espera un cambio tanto másradical como más extendido.

Mientras muchas empresas han ido innovando y actualizandotanto su diseño web como su usabilidad, adaptándose a loscontinuos cambios en el mundo online, hay otras muchasempresas cuyas webs siguen con diseños obsoletos y sinpreocuparse por la usabilidad.

Pero con la gran popularización y uso de diferentes dispositivosmóviles (Smartphones, tablets, etc.) se ha impuesto el llamado“Diseño Web Responsivo o Adaptable”, es decir, un mismodiseño para todos los dispositivos (ordenadores y dispositivosmóviles) que se adapta al tamaño y resolución de la pantalladesde 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 elservidor siempre envía el mismo código HTML a todos losdispositivos y se utiliza código CSS para modificar elprocesamiento de la página en el dispositivo. La siguienteinfografía y te muestra la importancia de un diseño responsivo:

Ventajas

La cantidad de usuarios que acceden a la web desde dispositivosmóviles ha aumentado y seguirá haciéndolo. Un 57% de losusuarios no recomendaría una compañía con un sitio móvil maldiseñado y un 40% visitarían la página de un competidor antesque usar un sitio escasamente optimizado para su navegación enmóviles.

Esta información nos muestra el perfil de los usuarios deInternet en dispositivos móviles:

Las ventajas del diseño web adaptativo son obvias:

• Mejor Experiencia de Usuario: Todos los usuarios ven la web de lamejor manera posible para el dispositivo desde el que acceden.

• Costos más Bajos: Se reducen los costos de creación ymantenimiento, ya no es necesario desarrollar aplicaciones paradistintas versiones móviles.

• Actualizaciones más Eficientes: Cualquier actualización omodificación en el diseño, se ve reflejado en todas las plataformas, loque reduce tiempos y márgenes de errores.

• Búsquedas: Al hacer una búsqueda, aparecerá una URL única en losresultados, por lo que se ahorran redirecciones y posibles fallos.

• Mejor SEO para Móviles: Google puede descubrir mejor tumarketing de contenido.

• Accesible a Todos: Incluidos las personas con distintos problemas dedisminución visual.

Esta tendencia es ahora inevitable tras el reciente anuncio deGoogle que avisa de que a partir del 21 de Abril las webs que notengan un Diseño Web Responsivo serán penalizadas“desapareciendo” de su buscador. Ya no hay excusas para que milesde webs obsoletas actualicen su diseño, si quieren seguirapareciendo en el popular buscador, o lo que es lo mismo, siquieren seguir teniendo visibilidad en Internet.

Si quieres saber si tu página web está optimizada para móvilesutiliza alguna de estas 2 herramientas de Google para conocerlo:

• Prueba de optimización para móviles.

• Informe usabilidad móvil.

En este artículo te contaremos cómo debería ser tu web en 2015. Lo dividiremos en 4 secciones:

1. Daremos algunas razones de por qué debes de mejorar tu web para mejorar tu negocio.

2. Mostraremos las principales tendencias en Diseño Web para este año 2015.

3. Características de un Diseño Web Responsivo.

4. Algunos errores a evitar en tu web.

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.

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.

Características del Diseño Web Responsivo

El diseño adaptable proporciona a todos los dispositivos un mismo código quese ajusta al tamaño de pantalla.

Es una técnica de diseño y desarrollo web que, mediante el uso de estructurase imágenes fluidas y media queries en la hoja de estilo CSS permite que el sitioweb se adapte al entorno del usuario, sea cual sea el dispositivo que utilicepara navegar.

El diseño web adaptativo supone que usando HTML y CSS logremos una solaversión que cubre todas las resoluciones de pantalla, por lo que el sitio webcreado es accesible desde todo tipo de dispositivos.

Los algoritmos de Google no deberían tener problema para detectarautomáticamente esta configuración si todos los agentes de usuario deGooglebot tienen permiso para rastrear la página y sus elementos (CSS,JavaScript e imágenes).

3 Ingredientes Técnicos:

1. Fluid Grid (Cuadrícula Fluida): En lugar de píxeles utilizaporcentajes para definir los anchos de las columnas o divs.

2. Imágenes Flexibles: Las imágenes no tienen anchos fijos sinoun máximo (o max-width), que por lo general suele mostrarseal 100% en un ordenador de escritorio. De esta manera, lasimágenes se optimizan y reducen para ajustarse a otraspantallas o resoluciones de navegador.

3. Media Queries: Permiten consultas al CSS personalizadobasándose en el ancho mínimo y máximo de un navegador(min-max width).

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.

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.

Artículo Original: www.alojate.com/blog/mejorar-tu-web-para-vender