Con la penetración que tienen los celulares hoy en día, es fundamental que tu sitio web esté ajustado a esas pantallas. Y es por esto que queremos que conozcas 3 herramientas para que sepas cómo se ve tu sitio en diferentes dispositivos como celulares, tabletas o tamaños de computadora de escritorio. No esperes más, probá si tu sitio es responsivo.

¿Qué significa que mi sitio es responsivo?

El término responsivo o responsive en inglés indica que el diseño de la pantalla se va a ajustar a los distintos tamaños en donde se visualice.

Es muy común que se confunda responsivo con mobile first o “primero para celulares” pero no son lo mismo. Pensar un sitio primero para celulares plantea un tipo de diseño diferente, una lógica de uso, que tendrá en cuenta la forma en que usamos nuestro teléfono.

En cambio, cuando el sitio es responsivo es “simplemente” agregarle un par de lineas de código para que un diseño pensado para escritorio (computadoras) se vea bien en un celular. (esto no quiere decir que el diseño no cambie, pero no es un gran cambio)

Ahora sin más, ¡Probá si tu sitio es responsivo!

Herramientas para probar si tu sitio es responsivo

Responsinator

Resultado para responsinator

Responsinator es una herramienta muy simple de usar para probar si nuestro sitio es responsivo o no.

Simplemente en la barra superior (header) incluimos la url de la web que queremos saber si es responsive o no y se cargarán en los celulares que están en el cuerpo de la web todos los diseños.

Cuenta con muchos modelos diferentes de teléfonos, algo muy bueno porque como saben en cada pantalla varía mucho como se ve un diseño.

Responsivedesign

Resultado para sitios responsivo

Responsivedesign es la segunda herramienta que vamos a presentarles para probar si su sitio es responsivo.

Es muy similar a la anterior, pero en este caso sólo muestra 4 dispositivos, todos apple. Para previsualizar su sitio tienen que hacer scrooll con el mouse y agregar su sitio en el formulario.

Lo interesante de esta web es que va cargando en cada dispositivo en tiempo real la web, como se demostrara incluso el tiempo de carga que tiene el sitio, dispositivo por dispositivo y eso es algo muy bueno.

Google, test mobile

Resultado para herramienta google diseño responsivo

Google también tiene su versión. No lo ponemos como TOP #1 porque ofrece muchas más opciones que las páginas anteriores.

Es fácil de usar como las herramientas que ya vimos. Ingresas tu url y se te cargará una nueva web (en este caso) mostrándote cómo se ve tu sitio en un celular.

Resultado para probá si tu sitio es responsivo

Pero, lo importante que ofrece la herramienta de google es que te indicará en diferentes reportes los “problemas” o errores de código con los que cuenta tu sitio. Esto es algo más avanzado y no está directamente relacionado al diseño del sitio y si es responsivo o no. Para poder explicarlo necesitaríamos una entrada nueva y no es el espíritu de esta nota.

Si querés aprender más de herramientas de diseño te dejamos esta nota sobre wireframes, para que comiences tus proyectos webs desde cero con increíbles herramientas de diseño.

Categorías: #DesarrolloWeb