Este documento describe la importancia de tener un diseño web responsivo para adaptarse a diferentes dispositivos. Explica que con el aumento del uso de dispositivos móviles, las páginas web deben adaptarse al tamaño de la pantalla para mejorar la experiencia del usuario. También destaca las ventajas de un diseño responsivo como mejor experiencia del usuario, menores costos y mejor posicionamiento en los buscadores.

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:

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:

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:
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.

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.

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.

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.

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