graficadver diseño web responsive design

¿Si al Responsive Design o no? Esa es la cuestión

Escrito el

Con la cantidad de smartphones y tablets que hay en el mercado y, sobre todo, las distintas resoluciones de los dispositivos, se ha vuelto más necesario que nunca desarrollar las webs pensando en todos estos dispositivos. ¿Y a esto como se le llama? Esto es el conocido como Responsive Design. Consiste en readaptar los elementos de la web al tamaño de la pantalla que estamos utilizando. Podríamos decir que consiste en hacer una web nueva, pero solo con CSS ya que el código HTML ya lo tenemos. Parece sencillo, pero existe un problema: no todo el contenido de una web se adapta bien a todos los tamaños de pantalla. Esto es algo que tenemos que tener muy claro.

Hay un obsesión tan grande con que se vea la web bien en todos los dispositivos que al final, por querer llegar a todo el mundo y con todo el contenido, se hacen auténticas chapuzas. Es necesario que nuestra web se vea en distintos dispositivos, pero hay que tener claro que es lo que vamos a poder mostrar para que quede bien. Hay que tener en cuenta que un tamaño de 1024px no es lo mismo que uno de 320px, por lo tanto no podremos ordenar las cosas igual y, probablemente, tendremos que eliminar contenido.

Hoy vamos a ver una serie de webs que nos permiten ver nuestro desarrollo en distintas resoluciones y, a partir de esto, adaptar la web.

Webs Responsive Design

 

smartphones

 

Responsinator

Esta web nos permite testear con la resolución de distintos dispositivos como iPhone 5, iPhone 6, Nexus 4, etc. El único fallo es no poder seleccionar el navegador que queremos utilizar.

 

Mobile Phone Emulator

Esta web tiene unas opciones muy interesantes como poder seleccionar las pulgadas de la pantalla, elegir entre distintos smartphones y tablets, así como distintos navegadores. Un test responsive muy completo.

 

Responsive Test

En esta web tenemos la posibilidad de poner los tamaños de pantalla a mano o si lo preferimos podemos seleccionar el dispositivo concreto en el que queramos ver nuestra web. Lo bueno de este test es que tiene una gran cantidad de dispositivos a elegir.

 

Chrome DevTools

Por último la forma más sencilla de poder ver el código fuente de la web y poder trabajar el responsive. Para abrir el DevTools con Mac solo tendremos que presionar Manzana+alt+I y en Windows usaremos CTRL+MAYUS+I. A la izquierda de la ventana que se nos abre hay un icono de un móvil, le damos y ya podremos empezar a ver nuestra web en distintos tamaños.

Deja una comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Pin It on Pinterest