¿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.

Perdón por molestarle

Buceando por la red en busca de una forma de hacer que un botón personalizado de Twitter se abriese como popup, encontré una noticia en la sección de tecnología de El País que me chocó: “El creador de los ‘pop-up’ pide perdón por su invento”. Si, el popup es un invento del que todos hemos echado pestes. Esos malditos popups que aparecen por todas las páginas y que molestan tanto la usabilidad de la web como la experiencia de usuario. Entiendo perfectamente que este hombre reniegue de su creación. Pero, no todo es malo.

El popup tiene su utilidad. Más haya de su intrusismo en nuestra navegación, básicamente como publicidad, hay formas interesantes de utilizar los popups. Ejemplos: botones que abren pequeñas ventanas con información sobre algo concreto, los botones de redes sociales que abren un popup para compartir contenido, un popup abierto al entrar en la web con alguna promoción, como ventana para suscribirte a la newsletter, etc. Estas son formas interesantes de utilizar los popups. No son molestas y pueden ser bastante eficaces.

Como los popup no son el mal, aquí te dejamos unos enlaces para que, si lo necesitas, puedas incluirlos en tu página web.

HypergURL

http://www.hypergurl.com/newwindow.html

Pop Up Window Generator Dynamic Drive

http://www.dynamicdrive.com/dynamicindex8/popwin.htm

Popup Toolkit

http://popup-toolkit.com/webmaster-tools/hover-ad-generator/

El código nos divierte como a enanos

Hace unos días encontré en la App Store una aplicación llamada Codeacademy con la que supuestamente podemos aprender a programar: un poco de JavaScript por aquí, un poquito de HTML, su dosis de CSS… y ya tenemos un programita o una web. Después de leerme un poco de lo que trata la aplicación (aquí toda la información) me la descargué y la probé. Tengo que decir que todo muy básico y muy intuitivo. Es una aplicación para aprender algunos conceptos básicos sobre la programación. Nada del otro mundo.

Lo realmente interesante está en su web: http://www.codecademy.com/. A través de esta, podemos aprender a programar de una forma sencilla y divertida, mediante una consola interactiva con la que programar y una serie de ejercicios prácticos para empezar desde cero. Codecademy propone desde el principio, tres ejercicios con los que aprender los conceptos más básicos de HTML, CSS y JavaScript.

· Web Personal: Con el primer ejercicio aprenderemos los conceptos básicos de la programación web con HTML y CSS. Muy sencillo e intuitivo.

· Anima tu Nombre: El segundo ejercicio nos permite desarrollar una pequeña animación con un poco de JavaScript.

· El Sistema Solar: En este último ejercicio aprenderemos, sobre todo, CSS. El objetivo es desarrollar el sistema solar con HTML y CSS.

A medida que avanzamos, vamos consiguiendo medallas o logros que podremos compartir, al igual que todos los ejercicios que completamos. Destacar que, a pesar de que también está en castellano (América Latina), la plataforma está en inglés y es como mejor están desarrollados los ejercicios (por una mala traducción al castellano en muchas cosas).

Codecademy es una buena forma de acercarse a la programación y aprender los conceptos básicos. ¿Por qué me parece interesante? Porque creo que en el mundo tecnológico en el que vivimos, en el que con un solo click podemos encontrar información sobre todo, aprender algo de programación para iniciar tu proyecto online es algo fundamental.

Pin It on Pinterest