72

Qué es el diseño responsive: 7 ejemplos fantásticos

8425Puntos

hace 5 meses

Curso de Responsive Design
Curso de Responsive Design

Curso de Responsive Design

Maqueta aplicaciones con diseño web adaptable. Adapta tus sitios para que funcionen en cualquier pantalla, dispositivo y resolución con HTML5 y CSS3 y genera la mejor experiencia para tus usuarios con Responsive Design.

El diseño Web responsive es el enfoque que sugiere que el diseño y el desarrollo web deben ir pensados con prioridad en el comportamiento y el entorno del usuario, en función del tamaño de la pantalla que utilice, la plataforma y la orientación de su dispositivo.

Todo el mundo está conectado a internet hoy en día. Si no tienes un teléfono inteligente en tu bolsillo en este momento, eres probablemente una excepción muy rara (¿qué tiene de malo mi Nokia con lucecitas de colores?).

Así como hay más usuarios conectados, también hay más formas de conectarse a internet. Desde computadoras de escritorio, laptops, iPhones, tablets y hasta refrigeradoras. Todos estos dispositivos con diferentes tamaños de pantalla necesitan conectarse a tu sitio web. Aquí entra en acción el diseño web responsive.

banner.png

Este método consiste en una mezcla de rejillas (o grids) y diseños flexibles, imágenes pensadas en diferentes dispositivos y un uso inteligente de CSS queries. Si no conoces lo que es un CSS query, Platzi tiene un curso completo de HTML y CSS que te puede ayudar a entenderlo mucho mejor.
A medida que el usuario pasa de su portátil a una tablet, el sitio web debería cambiar automáticamente para adaptarse a la resolución, el tamaño de la imagen y las capacidades de escritura del dispositivo. Visto de otra manera, el sitio web debería contar con la tecnología adecuada para responder automáticamente a las preferencias del usuario. Esto eliminaría la necesidad de diseñar un “sitio web diferente” para cada nuevo artilugio que la gente de Silicon Valley decida sacar al mercado.

Diseño Responsive vs. Adaptativo - ¿Es lo mismo?

El diseño responsive y adaptativo no son lo mismo. A pesar de estar pensados hacia un futuro similar, en el que el sitio web debe ser capaz de servir contenido a distintos tipos de pantallas, hay una diferencia clave entre ambos. El diseño responsive es “fluido”, esto quiere decir que no está enfocado a una pantalla en específico, sino que va mostrando su contenido de forma que ocupa el tamaño completo de la pantalla, independiente del tamaño de la misma. En el diseño adaptativo, por el contrario, se usan media queries para conocer la resolución de la pantalla y con base en esa información, mostrar una versión diferente del sitio web hecha para esa pantalla o la que más se le aproxime.

Ventajas de implementar un diseño responsive

Hoy en día tus usuarios y potenciales clientes te visitan desde todo tipo de dispositivos diferentes, principalmente teléfonos móviles. Cuando tu contenido es responsive, puedes entregar una mejor experiencia de usuario a todos ellos, sin necesidad de sacrificar calidad o multiplicar tu trabajo. Al contrario, el tiempo de permanencia de usuarios en páginas con una buena experiencia de usuario para móviles aumentará considerablemente y esto trae grandes beneficios para tu propiedad digital. Entre algunos de los beneficios se encuentran:

  • Mejorar los tiempos de carga: Al priorizar los dispositivos móviles, entregaremos contenido en el tamaño adecuado, lo cual mejora los tiempos de carga, sobre todo para pantallas pequeñas.

  • Evitar los contenidos duplicados: Sí, evita en todo momento los contenidos duplicados, debido a que no muestra una página web diferente con el mismo contenido para una pantalla u otra.

  • Optimizar la experiencia del usuario: El algoritmo de Google puede variar cada día, pero la única constante que prevalece es fomentar la buena experiencia del usuario y el contenido valioso. Cuando tu interfaz es adecuada y el contenido es fácil de consumir, la mirada de Google hacia tu sitio siempre va a ser positiva.

¿Cómo se implementa el Diseño Responsive?

Ahora que sabemos de qué trata el diseño responsive, debemos saber cómo aplicarlo en nuestro sitio web, de esta forma obtener mejores resultados optimizando la visualización para nuestros distintos visitantes.
En principio debes pensar “cómo se vería mejor mi web en un dispositivo móvil” y desde esta idea, redimensionar los elementos para lograrlo.

En esta etapa del proceso, hay un término muy importante que nos resultará útil para definir cómo lograremos convertir a nuestro sitio en “mobile first”, el breakpoint.

¿Qué es un breakpoint?

Es una resolución específica en la que el navegador “decide” pasar de una presentación a otra en el dispositivo. La recomendación general es manejar al menos tres breakpoints en un sitio web para hacerlo adaptable al menos a 3 o más tipos de dispositivo.
Aunque no hay una medida estándar para definir los breakpoints responsive debido al gran número de dispositivos existentes, sí contamos con un grupo de resoluciones principales que son ampliamente reconocidas como las más usadas en el mundo:
● 360×640
● 1366×768
● 1920×1080
● 375×667
● 360×720
● 768×1024

¿Qué es un grid?

Un grid o cuadrícula, mantiene varios elementos en su interior y los organiza en categorías para darles un “sentido”. Cuando el tamaño de una pantalla se vuelve demasiado chico para mostrar todas las columnas, la cuadrícula acomoda estos elementos que quedan por fuera en el espacio reducido que se mantiene en las columnas que aún siguen activas en pantalla.

3.png

Principio Mobile First

Los diseñadores de sitios web los optimizaron en principio para computadores de escritorio, pues era la forma principal de acceso a internet. Ahora el teléfono es nuestra puerta de entrada esencial a internet y por eso debemos mantenerlo como prioridad al momento de maquetar y desarrollar una interfaz. Hay un gran número de desarrolladores que siguen priorizando la experiencia de escritorio, al ser el medio por el que ellos personalmente entran a su web y con el que interactúan a diario, no tomando en cuenta la experiencia de sus usuarios o clientes en el proceso. Esto inevitablemente reduce la calidad del sitio y Google entiende esto, pues los usuarios interactúan menos y rebotan más de un sitio así. Si quieres evitar caer en esto y conocer más a fondo sobre la maquetación mobile first, tenemos exactamente el curso para eso.

¿Cómo saber si mi web está optimizada para móviles?

Google está al tanto de la importancia del diseño responsive y ha facilitado muchas herramientas para desarrolladores, una de ellas es la conocida Mobile Friendly test, siendo de las más recomendadas hoy en día.
Entrando en esta web encontrarás una interfaz muy fácil de utilizar, que te solicita una URL para verificar si la web está correctamente optimizada para utilizarse en dispositivos móviles o no. Al ingresarlo y hacer clic en “Probar URL” obtendremos el resultado dependiendo del estudio de la herramienta.

4.png

Además, puedes descargar el navegador especializado para responsive design “Responsively” aquí. Este navegador te mostrará diferentes versiones de tu sitio web con base en las pantallas que tú elijas.

5.png

Cómo aprender diseño responsive

En Platzi contamos con un contenido muy completo y actualizado sobre diseño responsive, con dos cursos en particular que puedes iniciar hoy:

Curso de diseño responsive
Curso de diseño responsive: maquetación mobile first.

Ejemplos de páginas con diseño responsive

Dentro del vasto mundo de internet, nos encontramos con muchos ejemplos de un gran diseño responsive, pensado con el fin de darle al usuario una experiencia no solo agradable y coherente entre dispositivos, sino además visualmente increíble.

Platzi:

platzi-portatiles.png
platzi-moviles.png

Pluralsight:

pluralsight-portatiles.png
pluralsight-moviles.png

Slack:

slack_portatil.png
slack_moviles.png

Notion:

notion_portatil.png
notion_moviles.png

Despegar:

despegar-portatiles.png
despegar-moviles.png

Rappi:

rappi_portatil.png
rappi_moviles.png

Headspace:

headspace-portatiles.png
headspace_moviles.png

Curso de Responsive Design
Curso de Responsive Design

Curso de Responsive Design

Maqueta aplicaciones con diseño web adaptable. Adapta tus sitios para que funcionen en cualquier pantalla, dispositivo y resolución con HTML5 y CSS3 y genera la mejor experiencia para tus usuarios con Responsive Design.
Diego
Diego
diegocamachop

8425Puntos

hace 5 meses

Todas sus entradas
Escribe tu comentario
+ 2
Ordenar por:
4

Espectacular esta entrada.

Ya anoté todos los recursos, gracias por compartir 🤗.

3
2459Puntos

Excelentes referencias! Gracias por la información. Que bueno contar con herramientas que nos ayudan a priorizar la experiencia de usuario. Estos cursos van directo a mi ruta de aprendizaje.

2
6254Puntos

genial blog, muy recomendado, seguiré el curso de responsive design

2
7866Puntos

Importante que tu sitio sea Responsive para que el usuario se sienta cómodo y a gusto al navegar dentro de tu web

2
10966Puntos

Muy buen Blog, el tema del responsive es supremamente importante, y para los que se quieren dedicar al frontend debe ser algo elemental.

2
14209Puntos

Genial Blog!!

1
12359Puntos

Me gustaron mucho los ejemplos, espero lograr el nivel de programación y diseño para hacer páginas web así de bien. Excelente blog, guardado en favoritos.

0

Me parecen excelentes ejemplos , voy a intentar llevarlos a cabo pero sin bootstrap , alguien sabe donde puedo aprender sin bootstrap responsive ?

0
16188Puntos

Que buena informacion, no sabia la existencia de esas herramientas, muchas gracias

0
8358Puntos

El diseño de Platzi me parece espectacular

0

De las entradas mas interesantes que he leído. Buen trabajo.