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

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.

El Maravilloso Mundo del HTML5

No hace muchos años se puso muy de moda Flash y la mayoría de gente se subió a este carro para desarrollar webs. Era raro no ver una web desarrollada en Flash debido a que ofrecía un diseño visual espectacular. Por suerte (menos para todos los que se ganaban el pan haciendo webs en Flash) esa época ya pasó.

Quizás la caída de Flash se deba a la cruzada de algunas compañías o que los motores de búsqueda no indexan (no entienden, vamos) las webs desarrolladas con dicha tecnología. Pues bien, el tiempo ha pasado y ahora todas las cosas que antes se desarrollaban en Flash ahora se hacen con un poco de HTML5 y CSS3.

Hoy os presento una web que he encontrado, gracias a los amigos de Creativos Online, en la que podemos ver el potencial de HTML5. (Si no podéis verlo bien, os recomiendo que os bajéis la última versión del navegador que uséis).

Form Follows Function

¿Impresionante verdad? Pues esto es solo el comienzo.

Pin It on Pinterest