🖖 Inicio

SERVICIOS

Salir

nochedía

Cómo comprobar que mi web es responsive con Responsinator

600 palabras
2 minutos
August 14, 2019
blogcss

Te hablo de cómo comprobar que tu web es responsive y se ve bien en todas las configuraciones posibles

  1. Prólogo
  2. Mobile first
  3. Responsinator

Prólogo

Diseñar una web pensando en el escritorio y por lo tanto en un navegador estándar no es que sea un error, pero sí que es un peligro si nuestra audiencia (y es lo habitual) nos visita masivamente a través de móviles

Lo suyo es diseñar para tu audiencia, que no son clones tuyos

Mobile first

La (posiblemente) primera decisión que tengas que tomar cuando te enfrentas a un diseño web sea: diseño para móvil o para escritorio?

Esa pregunta en realidad es fácil saltarsela y diseñar pensando en ti, esto es, para un usuario que use desktop puesto que esa es tu herramienta de trabajo

El problema es que tu audiencia habitualmente te visitará (y masivamente) con el móvil

Es por eso que la estrategia mobile first no sólo es una estrategia interesante para diseño web, sino que sobre todo nos obliga a cambiar el chip y enfocarnos a diseño web en móvil desde el principio

Las razones para diseñar primero en móvil son básicamente dos

  • No adaptarás un diseño desktop para mobile sino que lo harás al revés, puede parecer irrelevante pero tiene un impacto profundo
  • Adaptarás tus @media queries a la experiencia desktop, no al revés, con lo que todo el proceso se estará priorizando a tráfico móvil

Y además es más sencillo diseñar para móviles, hay menos pantalla, hay pocas opciones para presentar los elementos en distribuciones complejas, es todo más rápido

En mi opinión pesa más en la decisión de empezar un diseño pensando en móviles el hecho de centrarse desde el principio en un móvil que no las consideraciones técnicas (al final con un impacto posiblemente negligible)

Pero claro, esto sólo tiene sentido si tu audiencia utiliza el móvil, por lo que tienes que definir cómo te visita tu audiencia

  1. bien definiendo tu persona (público objetivo) desde un punto de vista hipotético
  2. bien generando algo de tráfico frío con anuncios
  3. o bien analizando tu tráfico actual si ya tienes, y en ambos casos analizar con Google Analytics (por decir el más popular) los navegadores, pantallas y resoluciones que utilizan

Una vez tengas claro quién es tu audiencia mayoritaria (que no tiene porqué ser la más grande sino la que más convierte), entonces está claro, diseña la web pensando en los aparatos que ellos utilicen

Una vez tengas claro quienes te visitan, diseña tu web enfocado a los devices que utilicen

Responsinator

Y una vez tienes tu diseño, cómo compruebas que funcione bien en todas las resoluciones posibles?

Hay muchas opciones, la mejor es utilizar Chrome y sus developer tools, allí tienes el icono de simular un móvil y puedes definir tu medidas o utilizar medidas ya configuradas para los devices más populares

Aún y así, al final del día es tedioso tener que ir uno por uno y es fácil saltarse alguna resolución importante

Por lo que cuando ya lo tienes todo acabado, lo suyo es utilizar una de las múltiples webs que nos ofrecen este servicio: esto es, visualizar nuestra página desde distintas perspectivas

Y el más útil para mi es www.responsinator.com con diferencia:

  1. Es gratis (no libre, y hay opciones de pago)
  2. Te muestra en una única página una representación de distintos devices

Por lo que puedes comprobar muy rápidamente si se te ha escapado algo y tienes que corregirlo

Eso sí, no funciona (o no lo hace muy bien) con localhost, con lo que puedes probar alternativas como ami.responsivedesign.is/ o con otra joya terriblemente interesante

troy.labs.daum.net

Estas dos, Troy y Responsisator son dos de las mejores herramientas que conozco para validar tu web de una manera cómoda y rápida, conoces a alguna otra más?

Qué tal la entrada?
👌 Bien 🙌🙌
👍 Bien, pero algunas cosas podrían explicarse mejor 😬
🤷‍♂️ Da por sentadas demasiadas cosas 😒
🤷‍♂️ A ver, hay poca chicha 😬
🤷‍♂️ Los ejemplos no son muy claros 🙇‍♂️
🤷‍♂️ No se entiende, está mal escrito 👎
✍️ Hay errores, revísalo en cuanto puedas 🙏

Newsletter de kuworking, un correo de tanto en cuanto

Quizá te interese

Privacidad
by kuworking.com
[ 2020 >> kuworking ]