Comencemos por el principio: hacer webcomics responsives no fue mi primer opción.
Hace algunos años, comencé a pensar en subir algunos comics a la web. Parece una idea sencilla y de fácil implementación, pero como siempre me pasa, no lo fue.
Mi primera opción fue subirlos en PDF y listo, que se puedan descargar o leerlos online. Pero No se leían bien en celulares. Y ese no era un dato irrelevante: Mas del 50% de las personas que leen esta web entran desde un dispositivo móvil, asumí que en otras webs pasa lo mismo, por eso una lectura cómoda en celulares era prioridad.
Mi primera idea fue seguir el modelo Webbton, algo perfecto para celulares. Luego de algunas pruebas no llego a convencerme, estaba muy alejado de lo que para mi es un comic. Podes ver un ejemplos de esas pruebas fallidas aquí.
Paso el tiempo, superado la parálisis por análisis, llegue a otra idea: Webcomic Responsive.
Que es el diseño responsive:
Cuando utilizamos el término “responsive” (adaptable), nos referimos principalmente a “responsive design” (diseño web adaptable). Esto significa hacer que un sitio web sea accesible y adaptable en todos los devices: tabletas, smartphones, etc.
Pensé que si esto funcionaba para las webs tenia que funcionar para los webcomics. Pero tenia un pequeño inconveniente: No se nada de programación web.
La solución llego con CSS Grid, una herramienta que se usa para maquetar webs, principalmente galerías de imágenes. Eso soluciono mis problemas, podría crear webcómics responsives con CSS Grid y con jQuery modificar la maquetación para celulares. Se que todo esto parece complejo si no sabes nada de diseño web, pero ya lo vas a entender.
Acompaname en este articulo larguísimo sobre programación web sin tener ni idea de que se trata eso por que soy solo un dibujante.
Pensando para móviles
A la izquierda, podes ver el comic como se ve en una PC, a la derecha la versión del mismo comic para smartphone.
Como se nota a simple vista, las viñetas se reacomodan para la lectura en celulares. Esa es a magia del CSS Grid y jQuery.
Como advertencia antes de comenzar con el código, cada viñeta debe ser un archivo individual. Y en este primer ejemplo, todas viñetas tienen el mismo tamaño.
HTML
CSS
Este es el webcómic en el que use ese código.
En este ejemplo todas las viñetas tienen el mismo tamaño, por lo que el código CSS es mucho mas simple. Para la versión de PC tenemos 2 viñetas adyacentes y en la versión de celulares una viñeta debajo de la otra.
No entrare en detalles de cada elemento del CSS, pero si de los mas importante para hacer un webcomic, esta es la parte del CSS que afecta como se vera en una computadora:
Ese 2 significa la cantidad de columnas que estarán una al lado de la otra. En este caso, cada columna será una viñeta y se vera así:
Pero si cambiamos el 2 por un 3, se vera así:
Entonces, dependiendo del numero de viñetas adyacentes que queramos, podemos cambiar el valor de repeat.
En el CSS también podemos ver estos valores:
1: Es el numero de la imagen que usamos en el HTML. No es el nombre de la imagen, si no el orden en el que esta. En este ejemplo de HTML la primer imagen se llama “01.png”, pero si se llamara “sorucho.png” funcionaria exactamente igual.
2: grid-column-start: Indica en que columna empezará el ítem de la cuadrícula.
3: span: Indica cuantas columnas ocupara esa imagen, en este caso una.
1: grid-gap: Es la separación en pixeles que tendrán las columnas y filas, por lo tanto, el tamaño de las calles que separaran nuestras viñetas. Puede ser mayor o menor, depende de tu gusto.
2: border: 0px solid black: Es el borde que tendrán nuestras viñetas, en este caso es “0” por que no tienen borde. Pero, por ejemplo, este webcomic tiene 3PX de borde. Lo importante es que las viñetas NO tienen borde en el archivo de dibujo. Ejemplo:
Esta es la parte de jQuery, y afecta a como se vera en celulares:
1: Es el tamaño de la pantalla en pixeles en los que se “romperá” el modo computadora y se acomodara para su lectura en móviles.
2: La cantidad de columnas, en este caso solo una.
2: La cantidad de filas, y OJO!, en el caso de celulares es importante poner el numero de filas que se forman según nuestra cantidad de viñetas.
Para las imágenes, seguimos la misma la misma lógica que vimos anteriormente.
Y con eso ya podemos hacer nuestro webcomic responsive, fácil y sencillo. Pero si lo que queres es usar un diseño de pagina mas complejo, seguí leyendo.
Diseño de paginas de comic mas complejas.
Ya vimos que cada columna y fila puede representar una viñeta, pero ¿se puede complejizar mas el diseño de la pagina de comic? La respuesta, obviamente es SI.
Para este ejemplo vamos a usar el siguiente webcomic responsive.
En lugar de usar “grid-template-columns: repeat(2, 1fr)” Usamos 4 “grid-template-columns: repeat(4, 1fr)”
Algo que tenemos que tener en cuenta a la hora de usar filas y columnas, son combinables. Entonces, podemos crear algo como esto (vista en una PC):
El código CSS para estas viñetas es el siguiente:
CSS
1: las viñetas 1 / 4 ocupan 1 columna.
2: Las viñetas 5 y 6 ocupan 2 columnas .
3: La viñeta 7 ocupa 4 columnas y 2 filas. La cantidad de filas se llaman desde este código: grid-row-start: span
4: La viñeta 8, 4 columnas.
El código para celulares es similar al ejemplo que vimos antes, pero en lugar de 1 columna, usamos 2.
Como podrás imaginar, esta forma de hacer webcomics es como armar un rompecabezas, y a veces resulta muy limitante. Pero hasta ahora es la mejor manera que encontré, o al menos, la que más me gusta a mi.
Disclamer
Como dije ni bien arranque todo este palabrerío, no soy programador, por lo tanto tal vez haya cometido errores al momento de escribir y seguramente use un vocabulario poco técnico. Pido disculpas a los programadores.
Es probable que el código que uso no sea perfecto o incluso puede existir una forma mas simple de hacer lo mismo.
Deja tus dudas o preguntas en los comentarios y serán respondidas dentro de mi limitado conocimiento.
Finalmente no quiero dejar de mencionar algunos webcómics que también son responsive.
Mask
A walk in the city
Alas de madera / La Bandera
Developer comics
Stephen Collins
Seguramente faltan muchos, pero eso son los que fui encontrando en el camino.
¡Hasta la próxima!