Home Blog/ Estilo de vida/
Estilo de vida

Los tips que debes seguir para hacer la mejor web con dise√Īo responsive

Eugenia Martin - 01 Mar 21

Articulo

7 min.

¬ŅQu√© es un dise√Īo responsive? Hacer consultas en p√°ginas web o navegar por nuestros sitios de inter√©s, es un h√°bito que tenemos a diario y, para hacerlo, usamos un sinf√≠n de dispositivos. Por eso, es fundamental que nuestros sitios web se adapten a todas esas pantallas y sus distintos tama√Īos ¬ŅC√≥mo lograrlo? Pues con un dise√Īo responsive o adaptativo que "se acomode" al dispositivo que sea.

Mucho podemos hablar sobre las webs que piensan en sus [email protected]; las que aplican pruebas de usabilidad y toman en cuenta los fundamentos del dise√Īo UX/UI, pero... ¬Ņqu√© hay con el dise√Īo responsive en p√°ginas web?

En esta nota te contaremos qu√© es el dise√Īo responsive y la importancia de tener una web responsive; adem√°s, te explicaremos c√≥mo saber si una p√°gina web es responsive. 

Qu√©date hasta el final del art√≠culo, porque compartiremos algunos tips imperdibles para que puedas aplicarlos hoy mismo en tu web y convertirla en un verdadero sitio web con dise√Īo responsive.

 

ūüí° Aviso importante: usaremos algunas palabras en ingl√©s, que no son de f√°cil traducci√≥n al espa√Īol, porque remiten a conceptos muy amplios del dise√Īo. Entre par√©ntesis encontrar√°s su traducci√≥n aproximada ¬°esperemos que sea de ayuda!

 

√ćndice

  1. ¬ŅQu√© sabes sobre dise√Īo web?
  2. ¬ŅQu√© es el dise√Īo responsive?
  3. Tipos de dise√Īo responsive
  4. ¬ŅPor qu√© es importante el dise√Īo responsive en tu sitio web?
  5. Tips para convertir tu p√°gina web en responsive

 

¬ŅQu√© sabes sobre dise√Īo web?

Solemos elogiar dise√Īos, funcionalidades, im√°genes de una p√°gina web, pero ¬Ņqu√© sabes sobre dise√Īo web? Te contaremos brevemente c√≥mo se estructura y por qu√© es importante el dise√Īo web ‚¨áÔłŹ.

En una primera instancia de la creaci√≥n de nuestra web, debemos definir la arquitectura de la informaci√≥n para obtener nuestra estructura o "√°rbol web" y un esquema de las funcionalidades y contenidos que tendr√°n los wireframes (prototipos). 

Sobre esa estructura "trabajar√°" el dise√Īo web, tomando en cuenta las necesidades que el proyecto va a satisfacer, adem√°s de los gustos, requisitos y preferencias del cliente.

En esta etapa, contar con un dise√Īo accesible e interactivo, que tenga una buena usabilidad y engagement; y que plantee una est√©tica arm√≥nica con las funcionalidades del sitio, son aspectos claves. 

A la hora de crear una web, el dise√Īo es uno de los aspectos m√°s importantes porque refleja la creatividad del proyecto y su eficacia en plasmarlo.

 

Fuente: Unsplash

 

¬ŅQu√© es el dise√Īo responsive?

Imaginemos esta situaci√≥n: logramos el dise√Īo web que quer√≠amos, lleg√≥ la hora de mostrarlo, pero... ¬Ņse ver√° igual en varios dispositivos? Esa fotograf√≠a tan bonita en mi laptop se ve√≠a incre√≠ble, pero en mi celular se "rompe" toda.

Pues aqu√≠ es donde el dise√Īo responsive (o responsive design) empieza a jugar su rol fundamental y podremos ver los beneficios que tiene contar con un dise√Īo web responsive.

El dise√Īo web responsive es una t√©cnica de dise√Īo web que busca la correcta visualizaci√≥n de una misma p√°gina en distintos dispositivos, desde ordenadores de escritorio hasta tablets y m√≥viles. Se trata de un solo sitio web que se adapta a todo tipo de pantallas.

El sistema detecta autom√°ticamente el ancho de la pantalla y a partir de ah√≠ adapta todos los elementos de la p√°gina, desde el tama√Īo de letra hasta las im√°genes y los men√ļes, para ofrecer al usuario la mejor experiencia posible.

 

Caracter√≠sticas del dise√Īo responsive

  • Los layouts e im√°genes son fluidos y se adaptan a cada pantalla.
  • Permite reducir el tiempo de desarrollo.
  • Evita los contenidos duplicados.
  • Aumenta la viralidad de los contenidos.

 

que es el dise√Īo responsiveFuente: Unsplash

 

 

Tipos de dise√Īo responsive

Hay diversas formas de crear una p√°gina web que tenga un dise√Īo responsive. Ya te contamos qu√© es el dise√Īo responsive, ahora veamos las distintas maneras de optimizar tu web, ya sea con el dise√Īo web responsivo o el dise√Īo web adaptativo; o bien utilizando mobile first web o el framework de Twitter, Bootstrap.

 

Dise√Īo web adaptativo o dise√Īo responsive web

Dise√Īo web adaptativo

El dise√Īo web adaptativo elabora diferentes dise√Īos para los distintos dispositivos m√≥viles, ya sea una tableta o un smartphone.

‚úÖ Se crean diversas versiones de nuestra p√°gina web, destinadas a los usuarios de cada clase de dispositivo.

‚úÖ El dise√Īo web adaptativo permite una mayor personalizaci√≥n y mayor carga r√°pida de los sitios.

 

Dise√Īo web responsive

El dise√Īo web responsive, por su parte, consiste en una misma versi√≥n de la p√°gina web para todos los dispositivos.

‚úÖ Esa √ļnica versi√≥n de la p√°gina web se adapta a las dimensiones de cada dispositivo de manera autom√°tica.

‚úÖ El aspecto de la web siempre ser√° el mismo, s√≥lo cambiar√° el tama√Īo de los elementos que la componen.

 

Mobile-First Web

Lo que propone la t√©cnica mobile-first es empezar a dise√Īar un sitio web de manera escalable; esto es, comenzar desde la resoluci√≥n m√°s peque√Īa para ir creciendo y adaptando el contenido y el dise√Īo a la resoluci√≥n m√°s grande.

En los √ļltimos a√Īos, las tecnolog√≠as fueron avanzando y el principio de mobile-first se est√° convirtiendo en un concepto cada vez m√°s extendido y usado.

 

Fuente: timov.la

 

Bootstrap

Si est√°s en el camino de dise√Īar y desarrollar p√°ginas web desde cero, otra buena opci√≥n es que utilices el framework (entorno de trabajo) que cre√≥ Twitter en 2010, Bootstrap. Es ideal para construir sitios web responsive y es muy completo, porque combina distintos lenguajes del desarrollo web front end como CSS y JavaScript, permitiendo estilizar los elementos de HTML.

Por cierto, si no sabes qu√© es CSS y c√≥mo se relaciona con HTML, te recomendamos que conozcas nuestros cursos de UX y web para hacer p√°ginas web incre√≠bles ūü§©.

 

tipos de dise√Īo responsiveFuente: Unsplash.

 

Este template gratuito te permitir√° crear tu propia p√°gina web con dise√Īo responsive ¬°Desc√°rgalo gratis!

banner herramienta Crehana

 

¬ŅPor qu√© es importante el dise√Īo responsive en tu sitio web?

Adem√°s de toda la data que venimos compartiendo, aqu√≠ te dejamos algunos puntos m√°s que dejan bien presente la importancia de tener una web con dise√Īo responsive y sus ventajas.

 

Bounce rate

Fuente: mytechguy.co.nz

 

 

¬ŅC√≥mo saber si una p√°gina web es responsive?

Te compartimos un truco muy sencillo para que compruebes si una p√°gina web (¬°o la tuya propia!) tiene dise√Īo responsive en su maquetaci√≥n.

Simplemente tienes que redimensionar la pantalla del navegador desde tu escritorio; el tama√Īo de la pantalla ir√° variando y de ese modo podr√°s comprobar si la estructura, el dise√Īo, las im√°genes, los textos se van adaptando a las condiciones de visualizaci√≥n.

¬°Te dejamos un ejemplo de dise√Īo web responsive con el sitio web de Crehana! ¬ŅTe parece que tiene las caracter√≠sticas de una p√°gina web responsive? ūü§Ē

 

 

Fuente: de la redactora.

 

Tips para convertir tu p√°gina web en responsive

Si te has preguntado c√≥mo convertir una p√°gina web en responsive, te dejamos una serie de buenas pr√°cticas para que tengas en cuenta a la hora de convertir tu p√°gina web en un sitio web con dise√Īo responsive. 

¬°Usa tambi√©n estos tips para chequear si tu p√°gina web ya cuenta con dise√Īo responsive! ūüėČ

1. Carga de p√°gina

Corrobora el tiempo de carga de tu p√°gina web. Trata de utilizar librer√≠as que te permitan hacer una carga de p√°gina condicional para su versi√≥n mobile, evitando cargar recursos innecesarios cuando la gente te visita desde m√≥viles. No querr√°s perder clientes porque tu web es lenta ¬Ņverdad?

2. ¬°Ojo con los tama√Īos de pantalla!

El mercado ofrece gran cantidad de dispositivos y pantallas, por eso tienes que tener en cuenta tama√Īos de contenido fluidos y no est√°ticos, para evitar que haya usuarios que no vean bien tu sitio web. Te recomendamos dise√Īar con el patr√≥n mobile-first para evitar tener problemas de adaptaci√≥n con las pantallas.

3. Evita los efectos

Algunos de los efectos que usas en la web de escritorio no funcionar√°n en la web responsive. ¬°Aseg√ļrate de hacer una comprobaci√≥n multi dispositivo-plataforma para que todo lo que veas en escritorio, tambi√©n se aprecie en su versi√≥n mobile!

4. Las tipografías

El tama√Īo de letra tiene que ser diferente en funci√≥n de la pantalla, de manera que podamos leer los textos sin necesidad de hacer zoom. La tipograf√≠a o las lettering fonts que escojamos tambi√©n son muy importantes a la hora de determinar la legibilidad.

5. Las imágenes y los vídeos

Los elementos visuales de la p√°gina deben seguir una proporci√≥n l√≥gica en funci√≥n del dispositivo donde se muestren. Para que la experiencia del [email protected] sea la mejor, las im√°genes y los videos deben poder verse con comodidad.


6. El formato horizontal o vertical

Los [email protected] de m√≥viles suelen preferir el formato vertical, pero pueden alternar entre ambos para visualizar un contenido determinado.

7. La usabilidad

Los [email protected] de m√≥viles y tablets usan pantallas t√°ctiles para interactuar con los contenidos, mientras que en las computadoras de escritorio esta interacci√≥n tiene lugar a trav√©s del mouse. Esto implica que, por ejemplo, los men√ļes y los botones deben repensarse para ofrecer una buena experiencia de usuario en ambos casos, ya sea que se use el mouse o la funci√≥n t√°ctil.

8. ¬°Mide los cambios!

No olvides medir, medir y medir continuamente todos los cambios que apliques en tu sitio web para detectar posibles fugas y fallas de rendimiento en la navegación móvil.

 

Esperamos que estos tips te sirvan para hacer tu web responsive y para que la experiencia de aplicar el dise√Īo responsive a tu sitio sea la mejor.

Si te result√≥ complicado entender algunos t√©rminos en ingl√©s, te recomendamos nuestro Curso de ingl√©s pr√°ctico para principiantes para poder profundizar en el tema y que no se te escape nada.

¬°Que tengas excelentes resultados! Hasta el pr√≥ximo blogpost ūüôĆūüŹĽ.