responsive web design fua

Con la masificación de los smartphones y las conexiones de datos de alta velocidad, el diseño web ha cambiado inmensamente. Hasta ese momento diseñar una web significaba trabajar para el típico PC de escritorio, pero ahora tenemos cientos de dispositivos totalmente diferentes desde los cuales cualquiera puede acceder a nuestra web. Tenemos que emplear Responsive Web Design.

Para estar preparados para este “nuevo mundo” en el que ya no sólo se navega por internet desde un PC, sino que se puede navegar desde un móvil, una tablet, una smart-TV o una videoconsola, el diseño web ha debido adaptarse realmente rápido a esta cantidad de dispositivos.

De la versión móvil al Responsive Web Design

Y en un principio aparecieron las web móviles, esas horripilantes versiones de webs que carecían de la mayoría de opciones que sí nos daban la versiónes “normales”, carecían de la mayoría de imágenes y estilos de la web. Estas versiones estaban bien cuando las conexiones de datos móviles eran tremendamente lentas, pero en gran medida han perdido todo su sentido en la época actual.

Y llegamos al Responsive Web Design (diseño adaptativo), o lo que es lo mismo, una forma de diseñar webs para adaptarse al dispositivo desde el que los usuarios ven nuestra web y mejorando así la experiencia de navegación en la web. Con un Responsive Web Design bien aplicado nuestra web se verá perfectamente en todos los dispositivos, y no solo eso, sino que además se adaptará a las características del mismo, así que si por ejemplo navegamos mediante una tablet el diseño se podrá adaptar para utilizar gestos táctiles, o si estamos ante un móvil los datos menos importantes se mostrarán únicamente cuando el usuario realmente los necesite.

Diferencias entre la versión móvil y la versión responsive de as.com

Diferencias entre la versión móvil y la versión responsive de as.com

Claves para un Responsive Web Design correcto

- Ten en cuenta todas las resoluciones de pantalla: Esto es básico y a la vez lo que más problemas da a la hora de crear una web con diseño adaptativo.  No es cuestión de que la web se vea bien en los principales dispositivos, es necesario que se vea correctamente en todos los aparatos con los que se pueda visitar tu web.

- Cuida el tamaño de letra: No es plan de que los visitantes de tu web se dejen los ojos intentando leer la web, y tampoco que sea tan grande que en los móviles únicamente se vean cuatro letras.  Esto adquiere suma importancia cuando hablamos de enlaces, ya que si la letra es demasiado pequeña nos será imposible pulsar en los mismos.  Se puede controlar el tamaño para cada dispositivo así que que nunca se te olvide hacerlo.

- No utilices imágenes muy pesadas: Sí, ahora navegar con móvil es mucho más rápido que antes y se puede cargar cualquier página en un instante, pero las tarifas de datos son caras por lo que ningún usuario querrá gastar su Giga de datos en visitar tu web. Cuida el tamaño y el peso de las imágenes, además tu empresa de hosting te lo agradecerá.

- Intenta simular el funcionamiento de una aplicación: Para las versiones móviles puedes intentar simular el funcionamiento de las aplicaciones móviles. Los usuarios de estos dispositivos están acostumbrados a que ciertos puntos y ciertos iconos de la pantalla hagan acciones concretas (por ejemplo que en la parte superior haya un icono para expandir el menú).  Eso hará que les sea más sencillo navegar por tu web y se adapten mejor a ella.

- Que tus scripts funcionen en dispositivos táctiles: ¿Sabes ese efecto chulo que aparece cuando pasas el ratón del teclado sobre un menú para expandirse y poder pulsar en las subsecciones? Pues los navegadores táctiles no. Tener en cuenta las características de cada dispositivo a la hora de crear los scripts es realmente importante.

Así que que no se te olvide, si quieres hacer que tu web sea FUA no has de olvidar que tiene que tener un Responsive  Web Design.

5 comentarios

  1. Luis González enero 9, 2014 a las 12:31

    Responder

    ¡Un gran artículo! A veces no somos conscientes de que por muy bonitos que hagamos los diseños, lo más importante es que estén adaptados a todas las resoluciones de pantalla, porque el tráfico desde dispositivos móviles es cada vez mayor.

    Un saludo.

  2. Francisco Magaña enero 9, 2014 a las 12:39

    Responder

    Muchas gracias por el comentario Luis.

    Al final es un todo, seguir haciendo diseños bonitos pero para todos los dispositivos. Ahora con CSS3 y jQuery tenemos unas herramientas BRUTALES para conseguirlo, por lo que no tenemos excusa.

    Un saludo.

  3. Pingback: Las cinco claves para un buen Responsive Design...

  4. Pedro Fumero - FocoBlogger febrero 24, 2014 a las 12:10

    Responder

    Excelente artículo, tengo ganas de mandar a hacer una plantilla responsive, pero leyendo este artículo creo que podría darle caña a hacerla yo misma, te agradezco por la información. Muchas gracias!

    • Francisco Magaña febrero 24, 2014 a las 12:23

      Responder

      Gracias Pedro por el comentario. Hoy en día el responsive design es un imprescindible por lo que tenemos que tenerlo muy en cuenta a la hora de crear una web moderna (el número de visitas desde dispositivos como tablets o móviles no para de aumentar).

      Es interesante que intentes darle caña al responsive, y si necesitas cualquier cosa ya sabes dónde estamos ;)

      Un saludo.

Haz más molón este post dejándonos tu comentario

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

Puedes usar las siguientes etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>