Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Business
  2. Responsive Web Design
Business

13 Rápidos Consejos y Trucos para un Diseño Web Responsivo en 2018

by
Length:MediumLanguages:
This post is part of a series called How to Make Responsive Business Websites (Tutorial Guide).
How to Make Responsive Business Websites With Templates
20 Best Responsive HTML5 Website Design Business Templates

Spanish (Español) translation by Eva Collados Pascual (you can also view the original English article)

Contar con un diseño web responsivo a día de hoy es obligatorio. Debido al incremento del número de gente que accede a internet para realizar búsquedas sobre productos y noticias desde sus dispositivos móviles, tu negocio no puede permitirse tener un diseño web que no sea responsivo.

Cuando a esto le añadimos el hecho de que Google favorece con su algoritmo a los sitios web responsivos, está claro que el diseño responsivo está aquí para quedarse. Si estás preparando el lanzamiento de tu sitio web, los consejos que destacamos en este artículo te ayudarán a diseñar un sitio atractivo y responsivo. Y si estás rediseñando tu sitio web actual, estos consejos te servirán igualmente.

Cómo Implementar un Diseño Web Responsivo

Los siguientes consejos para el diseño de una web responsiva y apta para dispositivos móviles te ayudará a asegurarte tanto de que tu web sea responsiva como "mobile-friendly". Aquí tienes algunos de los mejores consejos para el diseño web responsivo:

1. Descubre Cómo Usan el Móvil Tus Usuarios

Debes comprender que la gente usa los sitios web de forma diferente desde un dispositivo móvil que desde un ordenador de sobremesa. Valora la posibilidad de encuestar a los visitantes de tu sitio web o usa las analíticas para descubrir porqué acceden con un dispositivo móvil y a qué páginas y qué elementos usan más. Esta información te ayudará a entender qué páginas y elementos de tu sitio web deben estar disponibles en las pantallas pequeñas.

Por ejemplo, si buscan tu sitio web para acceder a tu información de contacto, asegurarte de que tu página de contacto aparezca en el menú que se muestra en los dispositivos móviles será sin duda una decisión inteligente.

2. Primero Planifica Tu Diseño

Antes de diseñar tu sitio web, es útil que planifiques primero la maquetación de las páginas. De hecho, la mayoría de los diseñadores web empiezan creando un boceto a groso modo, después pasan a la etapa de diseño y por último, lo crean mediante código. Esto no sólo te ayudará a crear el aspecto exacto que deseas, también facilitará, a tí o a tu diseñador, la personalización de la plantilla y a integrarla con tu imagen de marca sin esfuerzo. 

Asegúrate de crear varios prototipos de tu sitio web y compruébalos en distintos tamaños de pantalla para asegurarte de que el diseño final sea responsivo. Aquí tienes algunas herramientas que puedes usar para crear prototipos responsivos.

  • Adobe Edge Reflow. Esta herramienta de Adobe te posibilita diseñar de forma visual un sitio web responsivo convirtiendo los archivos Photoshop en HTML y CSS y permitiéndote ajustar el diseño mediante breakpoints para dispositivos móviles.
  • In Vision. Gracias a InVision, podrás crear prototipos interactivos de tu sitio web. Los usuarios a los que envíes el enlace de acceso, podrán testear la navegación, los botones, el desplazamiento de página, y mucho más. Además podrán dejarte comentarios de 'feedback' para ver cómo funcionará tu sitio web en distintos contextos.
InVision website prototypes
  • Wirefy. Esta herramienta es muy útil si quieres basar tu diseño teniendo en cuenta en primer en el contenido. Te permitirá usar una retícula responsiva y crear un boceto de tu sitio web sin tener que calcular las anchuras y los porcentajes de las columnas.

3. Ten Cuidado con la Navegación

El sistema de navegación es la parte más importante de cualquier sitio web. Sirve de mapa para que tus usuarios accedan fácilmente a otras páginas de tu sitio. En la versión de sobremesa de tu sitio, tu navegación tendrá normalmente enlaces bien visibles hacia todas las páginas importantes. En dispositivos móviles, la práctica habitual consiste en usar un menú con un icono "hamburguesa" que oculta/muestra los enlaces al ser pulsado.

Sin embargo, este no siempre es el mejor enfoque ya que algunos usuarios podrían no darse cuenta de que tienen que hacer clic sobre el icono para revelar el menú y se sienten frustrados al no saber cómo visitar otras páginas. Un mejor enfoque sería dejar los elementos de menú más importantes bien visibles incluso en las pantallas pequeñas y usar la hamburguesa para el resto de los enlaces. También puedes incluir enlaces a otras páginas en el texto de tu página de inicio para facilitar la navegación.

4. Optimiza las imágenes

Las imágenes juegan un papel importante en el diseño web de tu sitio. Pueden ayudarte a crear una conexión emocional con los usuarios y permitirles visualizar el producto que les interesa comprar. Por tanto, es crucial que tus imágenes estén optimizadas para la web.

Esto significa que las imágenes deberían guardarse con el formato apropiado - JPG para las fotografías o imágenes de escenas y PNG-8 para iconos y logotipos que requieren un fondo transparente. Además de todo esto, deberías reducir el tamaño de las imágenes mediante una herramienta como TinyJPG y valora usar imágenes que estén optimizadas para distintos "breakpoints" móviles de manera que reduzcas los problemas de ancho de banda.

TinyPNG

5. Valora Hacer Uso de un Enfoque "Mobile First"

Otra forma de enfocar un diseño responsivo consiste en empezar diseñando primero la versión móvil del sitio web. Esto te permitirá comprobar cómo se verán las imágenes, los textos, los logos, y otros elementos en las pantallas pequeñas. Si se muestran sin problemas, entonces no deberías tener ningún problema para adaptar posteriormente este diseño a las pantallas de mayor tamaño.

6. Aprende Cómo Usar las Media Queries

Las media queries formaban parte de la propuesta inicial de CSS, pero no se convirtieron en realidad hasta que los navegadores no les ofrecieron oficialmente soporte en 2012. El papel principal de las media queries consiste en permitirte optimizar el diseño de tu sitio web para distintas anchuras de pantalla.

Cuando usas media queries, el contenido responderá a las distintas condiciones de dispositivos concretos. En pocas palabras, una media query comprobará la resolución, la anchura, y la orientación del dispositivo y mostrará el conjunto de reglas CSS adecuadas.


7. Agrega Activadores de Teclado para los Formularios

No hace falta señalar que los formularios de tu sitio deberían adaptarse a la anchura y el tamaño de las distintas pantallas. Sin embargo, puedes ir un paso más allá y asegurarte de que los campos de entrada funcionan correctamente con cada tipo de teclado. Puedes hacerlo fácilmente añadiendo elementos input en tus campos de formulario.

Los campos de entrada de texto como aquellos para el nombre, el email, la dirección, etc., deberían activar un teclado de texto mientras que los campos de entrada que requieren cifras deberían activar de inmediato el teclado numérico. Esto mejorará la usabilidad móvil de tu sitio web así como experiencia de usuario.

8. Asegúrate de Que los Botones Pueden Ser Clicados Fácilmente en las Pantallas Pequeñas

No olvides prestar atención extra a los botones de tu sitio web. Como el espacio de pantalla disponible es tan preciado, es fácil caer el error de crear botones más pequeños de manera que quepan en la pantalla. Sin embargo, esto también hace que sea más complicado pulsarlos.

Asegúrate de que los botones son fácilmente reconocibles:

  • Usa el color para resaltarlos del resto de la página.
  • Usa un rectángulo o un círculo para representar el botón.

En lo que respecta al tamaño, usa la propiedad css "padding" para hacer que el área clicable de tu botón aumente. También podrías seguir la recomendación de Material Design para la accesibilidad de los botones y asegurarte de que tienen como mínimo 36dp de altura (1dp = 1px).

9. Optimiza la Tipografía

En lo relativo al texto, asegúrate de que sea legible en las pantallas pequeñas. Un buen tamaño para el cuerpo del texto sería 16px o 1em y después ajusta en consecuencia el tamaño de los titulares. Al mismo tiempo, querrás ajustar la altura de línea de tu texto a 1.5em para asegurarte de que las líneas de los párrafos respiran lo suficiente.

Otro tip sobre el diseño web para dispositivos móviles es usar fuentes legibles. Evita usar fuentes decorativas o script para el cuerpo del texto o para los elementos de menú ya que son difíciles de leer, especialmente en pantallas pequeñas.

10. Usa las Microinteracciones

Una de las mayores tendencia que se está abriendo paso en el diseño web consiste en usar microinteracciones. En años anteriores, las animaciones y las funcionalidades interactivas se consideraban como "bonitos extras" para la mayoría de los sitios web corporativos. Sin embargo, conforme los diseñadores se han ido centrando cada vez más en la experiencia del usuario, el empleo de las animaciones a saltado a la palestra, especialmente en los formularios.

Proporcionan rápido feedback a los usuarios, lo cual es especialmente útil en dispositivos móviles, en lugar de refrescar la página - algo que puede disparar el el uso de ancho de banda. Considera este ejemplo de una empresa de limpieza de alquileres australiana. Me dirigí a ellos para hablar sobre la forma en la que usan las microiteraciones. Aquí tienes lo que me dijeron:

Nuestro formulario de finalización de compra fue diseñado para ayudar a que los australianos obtengan su contrato de arrendamiento de limpieza fácilmente. Queríamos destacar el hecho de que es un proceso realmente instantáneo no había mejor forma para demostrarlo que mediante el uso de una microinteraction. Cuando solicitas un presupuesto, un recibo se anima por detrás del formulario, revelando el precio total de tu presupuesto de limpieza. Creemos que este pequeño momento de "ta-da" ha incrementado verdaderamente nuestro porcentaje de conversión durante el proceso de pago.
ThisIsNeat quote

Otro buen ejemplo de microinteracciones lo encontramos en el sitio web de Le Cafe Noir Studio. Su tienda online muestra corazones animados que cruzan la pantalla cuando se agrega un artículo al carrito, transmitiendo gratitud al cliente de inmediato:

Le Cafe Noir Sudio website

11. Usa Frameworks

Puedes ahorrar un montón de tiempo al diseñar tu sitio web responsivo si usas un framework en tu proceso de trabajo. Un framework como Bootstrap usado en una plantilla HTML sería un buen punto de inicio si quieres diseñar una web sencilla y estática.

Bootstrap

También puedes sacar provecho de los temas responsivos para wordPress si quieres crear un sitio web más complejo e incorporar un blog en tu estrategia de marketing. Los frameworks de este tipo también son una magnífica elección en caso de que no tengas experiencia con código pero aún así quieras crear tú mismo tu sitio web.

Responsive WordPress themes

12. Mantén el Minimalismo en Tu Diseño

La popularidad del diseño minimalista ha ido en aumento durante los últimos años y por un buen motivo. Eliminan todo lo superfluo, e incitan a los usuarios a fijarse más en tu contenido,como consecuencia, se mejoran los ratios de conversión, y ayuda a que tu sitio web se cargue más rápido al usar menos elementos. También funciona bien con los diseños responsivos ya que puede ayudarte a destacar las áreas importantes del sitio y dirigir la atención hacia tus llamadas a la acción.

13. Asegúrate de Que Tus Botones Para Compartir No Bloquean el Contenido

Incluir botones para compartir te puede ayudar a dar visibilidad a tu contenido y ganar más tráfico de clientes potenciales. Sin embargo, estos botones para redes sociales pueden bloquear frecuentemente tus contenido, dificultando la lectura en pantallas pequeñas. Asegúrate de que los botones disminuyen su escala en las pantallas pequeñas testeándolos en dispositivos móviles o valora la posibilidad de deshabilitarlos en las pantallas inferiores a 768px.

Cómo Comprobar si Tu Sitio Web Es Responsivo

Una vez hayas implementado los anteriores consejos para un diseño web responsivo, merece la pena comprobar si tu sitio web es ahora responsivo. Existen cientos de herramientas online que te permitirán comprobar la responsividad de tu sitio. Aquí tienes las que nosotros recomendamos en mayor medida:

1. El Mobile Friendly Test de Google

Google tiene su propia versión para testear la adaptación a dispositivos móviles y es bastante comprensible. Basta Introducir la URL de tu sitio web, pulsar Analizar, y esperar los resultados. Si tu sitio web es mobile-friendly, verás un mensaje de confirmación de color verde. Si no lo es, el test te mostrará los motivos por los que tu sitio web no ha supera las pruebas y te indicará recursos para ayudarte a solucionar los problemas.

2. Screenfly

Screenfly de QuirkTools te mostrará qué aspecto tendrá tu sitio web en distintos tamaños de pantalla. Esta herramienta no te ayudará proporcionándote pistas y sugerencias, sin embargo, podrás ver qué aspecto tendrá tu sitio web en smartphones, ordenadores de sobremesa, e incluso en grandes pantallas de televisión.

Screenfly

3. MobileTest.me

Por último, MobileTest.me te permite elegir un móvil concreto, introducir la URL, e interactuar con tu sitio como si lo hicieses verdaderamente desde dicho dispositivo. Esta herramienta es especialmente útil porque puedes comprobar cómo funciona tu sitio web en un dispositivo móvil, testear los formularios y los botones, y entender si tus usuarios disfrutarán de una buena experiencia de usuario. Puedes usarlo de forma independiente o junto con las dos anteriores herramientas para asegurarte de que tu sitio web es realmente responsivo.

MobileTestme

Avanza Con Estos Consejos y Tips Sobre el Diseño Web Responsivo

Crear un diseño web responsivo ya no es algo opcional. Es una necesidad. El diseño web responsivo hace que cualquiera pueda ver tu sitio fácilmente y sin problemas y puede tener un gran impacto en la reputación de tu marca así como en tu porcentaje de conversiones. Con los anteriores consejos y tips para un diseño web responsivo, serás capaz de hacer que el sitio web de tu negocio tenga un aspecto excelente independientemente del dispositivo que estén usando tus visitas, además asegura que tendrán una experiencia de usuario excelente.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.