Curso Retícula

Maquetación y móvil: la misma información, ordenada para la pantalla donde llega la visita.

Un teléfono y un portátil con la misma retícula de bloques, uno en columna y otro en fila

Duración 15 días aprox.

Los cursos se están actualizando con la inteligencia artificial. Intentamos estar siempre a la vanguardia de los avances de la IA: las herramientas cambian, y el temario se revisa para que lo aprendido siga sirviendo al publicar.

Añadir al carrito

Qué se aprende

Retícula enseña a maquetar una web para que se use en el teléfono, que es donde llega la mayoría de las visitas. El curso no empieza por el escritorio y luego “se adapta”. Empieza por el ancho estrecho: qué cabe, qué se apila, qué se esconde y qué tiene que seguir a un toque de distancia. Una retícula aquí no es un adorno de columnas. Es la decisión de cuántos bloques hay, en qué orden se leen y cómo cambian cuando la pantalla se ensancha.

Se trabaja con CSS moderno y medible. Una columna en el móvil, dos o tres a partir de un ancho concreto, con huecos iguales y sin textos pegados al borde. Se usan consultas de medios o una retícula que se reorganiza sola, y se comprueba el resultado en anchos reales: 360, 390, 768 y el escritorio. Se mira el desbordamiento horizontal, que suele venir de una imagen sin límite, de un botón demasiado largo o de un margen negativo. Se corrige el relleno lateral para que ningún párrafo empiece en el borde de la pantalla. El menú se abre y se cierra, y al pulsar un enlace interno no se queda tapando el contenido.

Los controles se diseñan para el dedo. Un enlace o una casilla demasiado pequeños se fallan. Se deja altura suficiente, separación entre elementos que se pueden pulsar y un estado visible al foco, porque no todo el mundo usa el ratón. Los formularios se revisan en vertical: etiqueta, campo, error. El teclado del teléfono no debe tapar el botón de envío sin que se pueda llegar a él. Las imágenes se sirven en un tamaño adecuado al hueco, con una proporción que no dé saltos cuando cargan y con un texto alternativo que no desaparezca al cambiar de columna.

También se ordena la lectura. En el móvil, lo primero que se ve tiene que ser lo que el visitante venía a buscar: el servicio, el lugar o la forma de contacto. Un carrusel que ocupa toda la primera pantalla, un vídeo que se reproduce solo o un aviso que tapa el título se cuestionan. Se practica a recortar. Si un bloque no cabe sin hacer scroll eterno y no responde a una pregunta, se baja o se quita. En escritorio, esa misma información puede ponerse en columnas, pero el orden de lectura del código sigue siendo el del móvil, para que un lector de pantalla no encuentre el pie de página antes que el contenido.

En una semana se deja una página que se lee bien en el teléfono, con márgenes, tipo legible y un menú que se recoge. En quince días se maquetan varias plantillas —inicio, ficha y contacto— con la misma retícula. En un mes se revisa un sitio ya publicado: se miden anchos, se corrigen desbordes y se documentan los puntos de ruptura. Retícula no cubre aplicaciones nativas ni animaciones complejas. Cubre el oficio de que la misma web sea usable en la pantalla que la gente lleva en el bolsillo, sin una versión “para el móvil” distinta y abandonada.

Salidas profesionales