Como hacer una web responsive: la forma sencilla

CSS tiene mala reputación por varias razones. Basandome en encuestas propias, una de las cosas que más frustran a la gente es hacer webs adaptables (‘responsives’).

Affiliated Ad

Algunos de los problemas que oigo más a menudo son:

  • Las ‘media queries’ son una pesadilla.
  • Es difícil encontrar el orgien del problema.
  • Demasiados puntos de ruptura que tener en cuenta.
  • Demasiadas partes movibles.

Recientemente creé un vídeo en Youtube (en inglés) comentando porque pienso que mucha gente podría simplificar su vida cambiando el enfoque a móvil-primero, porque para mi sorpresa, parece que la mayoría de gente aún sigue trabajando con la mente puesta en escritorio-primero. Un cambio al enfoque móvil-primero resolvería muchos de los problemas anteriores.

Es fallo del diseñador

En la sección de comentarios, pregunté a la gente por qué prefiere escritorio primero. La respuesta habitual era:

Nuestro diseñador sólo nos pasa diseños para escritorio

Entiendo por qué empiezan a escribir los CSS para que encajen con las maquetas en esa situación, pero no creo que sea una excusa demasiado buena.

Una buena excusa que sí encontré es que estaban creando aplicaciones que se suponía que sólo debían usarse en ordenadores… ahí estaría justificado.

La razón por la que me molesta tanto que la gente tome el enfoque escritorio-primero es que realmente pienso que si empezarán por el diseño móvil sería mucho más fácil hacer webs adaptables, incluso en el caso de que solo tuvieran un ordenador de escritorio con el que empezar.

Como comenté en el vídeo anterior, nosotros tenemos la culpa de que una web no sea adaptable. Quita todo el CSS, y tendrás un diseño adaptable. Los problemas empiezan cuando escribimos el CSS.

Por qué móvil-primero is un enfoque más sencillo

Cuando escribo CSS, no me preocupo del diseño inicialmente. Siempre empiezo con la tipografía.

  • font-family
  • font-sizes
  • margin

Cuando lo tenemos, seguramente tu web ya se ve decentemente en el móvil

Después, la mayoría de tu página para móviles estará lista añadiendo estas dos propiedades:

  • padding
  • background-images / background-colors

Una vez hecho esto, la verisón móvil de tu web tendrá bastante buen aspecto. Algunos componentes necesitarán algo más de detalle, pero la mayoría del trabajo está hecho.

Algunas partes / secciones / componentes son más complicadas en móvil

Sí, es cierto que algunas cosas, como la navegación, parecen más complejas. A menudo las escondemos y necesitamos JavaScript para que aparezcan.

Pero desde la perspectiva del diseño, ¿son más complejas? La mayor parte de la navegación en móviles son <ul> desactivados y algo de espacio extra.

Existe complejidad añadida en cómo el usuario interactúa con el menú, pero eso no afecta al diseño.

Cambiando de mentalidad

Una de las cosas más difíciles de conseguir es cambiar algo que estás acostumbrado a hacer.

Creo que mucha gente se queda con el enfoque de escritorio primero por que es lo que aprendemos inicialmente al crear páginas estáticas.

Por eso, es el lugar de inicio natural cuando empezamos a crear nuevas páginas. Pero eso nos lleva a muchos de los problemas que tenemos para hacer webs adaptables.

Tenemos que invalidar (override) muchos de los estilos que ya hemos aplicado cuando empezamos con escritorio-primero, en lugar de hacer que el sitio se adaptable de forma natural. Cambiando nuestra mentalidad, empezando por móvil-primero y añadiendo complejidad, podemos:

  • Simplificar el proceso
  • Escribir menos código
  • Minimizar errores

Superando los desafío de los diseños adaptables

Me gustaría mostrar como, si simplificamos el enfoque, los diseños adaptables no son tan complicados.

Para conseguirlo, he lanzado un curso gratuito (en inglés) llamado Conquering Responsive Layouts. Tan sólo profundiza en los diseños adaptables, y se ha pensado como un desafío de 21 días.

Si quieres unirte, el desafío empieza el 13 de abril. Después, las puertas estarán cerradas durante algunos meses. Así que si los diseños adaptables te dan problemas, acepta el desafío y aprende con nosotros.

Si no has llegado a tiempo, abriré el curso cada pocos meses y será siempre gratuito. Todavía puedes registrarte y te enviaré una notificación antes de la apertura.

Puedes leer el artículo original en inglés en https://dev.to/kevinpowell/stop-making-responsive-websites-the-hard-way-kgb

Deja un comentario

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