– \u00a1Qu\u00e9 buena idea! \u00a0\u00a1responsive!.<\/p>\n
-No, esto son c\u00f3mics pensados para verse s\u00f3lo desde un m\u00f3vil.<\/p>\n
Su cara lo dijo todo. De alguna forma, estaba trabajando en un formato incompleto. \u00bfEra posible crear un formato de publicaci\u00f3n de c\u00f3mics que se adapte a m\u00f3viles y ordenadores?<\/p>\n
El problema<\/h3>\n
Los webcomics nacen en un primer momento, para ser vistos desde una pantalla de ordenador, es decir en formato horizontal. La irrupci\u00f3n del m\u00f3vil y su lectura vertical, hace muy compleja la adaptaci\u00f3n de los c\u00f3mics de un formato a otro.<\/p>\n
Un c\u00f3mic responsive, deber\u00eda leerse con sensaciones narrativas similares en horizontal y en vertical. Si las vi\u00f1etas tienen distintos pesos, ser\u00e1 imposible para el autor jugar con el ritmo y buscar recursos que narren de la misma forma en los dos formatos. Una vi\u00f1eta que ocupe la pantalla completa en el ordenador, puede verse peque\u00f1a en el m\u00f3vil y perder ese impacto buscado.<\/p>\n
Una soluci\u00f3n<\/h3>\n
Esa charla con mi amigo, fue la chispa que hizo que empezara a asomarme al problema que supon\u00eda la b\u00fasqueda de un formato responsive para crear c\u00f3mics. Cuatro a\u00f1os y medio despu\u00e9s y tras innumerables horas de\u00a0comeduras de cabeza y aprender nociones b\u00e1sicas de HTML y CSS, lo que aqu\u00ed presento es una soluci\u00f3n. Hay m\u00e1s soluciones. Otras llegar\u00e1n. Es una soluci\u00f3n en la que te agarras a unas cosas y renuncias a cosas. Un c\u00f3mic responsive, es un formato distinto. La experiencia, nunca ser\u00e1 como la que se tiene al leer un c\u00f3mic impreso, pero es un formato que por el contrario presenta otras cualidades.<\/p>\n
<\/p>\n
La universalidad<\/h3>\n
Esta fue siempre la clave del formato para m\u00ed. La raz\u00f3n que justificaba las horas dedicadas a esa b\u00fasqueda.<\/p>\n
La existencia de un formato de c\u00f3mic que se puede colgar en una web y autom\u00e1ticamente verse en cualquier idioma y desde cualquier lugar, lo convierte en el formato m\u00e1s accesible y universal para ver c\u00f3mics. Seguro que no el mejor, pero s\u00ed el m\u00e1s universal.<\/p>\n
<\/p>\n
Publicaciones de calidad<\/h3>\n
El otro reto es conseguir un publicaciones de calidad, sin errores de formato, que resten fuerza a la lectura del c\u00f3mic. Construir una estructura que permita una experiencia de lectura satisfactoria.<\/p>\n
<\/p>\n
Los pesos de las vi\u00f1etas<\/h3>\n
Si queremos que el lector tenga una experiencia similar de lectura desde un m\u00f3vil o desde un monitor, hay que conseguir en ambos formatos impactos visuales similares. Una vi\u00f1eta que llene toda la pantalla del m\u00f3vil, deber\u00eda ser capaz de llenar tambi\u00e9n toda la pantalla de un ordenador o una tablet, para que el impacto en el lector sea el mismo.<\/p>\n
\u00bfEs posible?<\/p>\n
<\/p>\n
Mobile first<\/h3>\n
A la pregunta de si es posible, mi respuesta es s\u00ed. S\u00ed, pero con limitaciones. Todo no lo vamos a tener. Perderemos por el camino algunas de las libertades que da una p\u00e1gina de papel en blanco. Eso es lo primero que hay que encajar y asumir para seguir.<\/p>\n
De entrada, tenemos que elegir una de las dos opciones como dominante, aqu\u00ed entra la famosa frase Mobile first! \u00bfPor qu\u00e9? Porque es un formato con m\u00e1s limitaciones. Se ve m\u00e1s peque\u00f1o todo.<\/p>\n
El primer paso es descomponer los pesos de las vi\u00f1etas sobre el m\u00f3vil. Esto es, encontrar los distintos tipos de vi\u00f1eta que se pueden leer bien desde un m\u00f3vil y jerarquizarlos por el espacio de pantalla que ocupan. Desde una pantalla completa hasta una vi\u00f1eta con una altura m\u00ednima y dividida en dos verticalmente.<\/p>\n
Estas vi\u00f1etas nos marcan las opciones de formato que tenemos.<\/p>\n
<\/p>\n
Adaptaci\u00f3n a horizontal.
\nLas grandes renuncias.<\/h3>\n
En el paso anterior, han quedado definidas las \u00fanicas opciones de vi\u00f1eta de las que disponemos. El formato responsive obliga a renunciar a posibles vi\u00f1etas que funcionan con mucha fuerza en horizontal por no poderse adaptar respetando las jerarqu\u00edas de espacio de pantalla ocupado.<\/p>\n
Para llenar los espacios en la versi\u00f3n horizontal, las vi\u00f1etas deber\u00e1n agruparse en grupos con la misma altura.<\/p>\n
<\/p>\n
Multilenguaje<\/h3>\n
Esto es un hallazgo de mi experiencia en mobilecomic, que incorporo a la versi\u00f3n responsive. Tener textos html, convierte a los c\u00f3mics en traducibles por los navegadores. Esta es la segunda cualidad que refuerza ese car\u00e1cter universalizador del formato.<\/p>\n
Cierto es que hay un problema con las traducciones. Hay que luchar por encontrar formas de crear traducciones correctas e implementarlas, porque de momento, las traducciones autom\u00e1ticas, presentan graves problemas. Desde WordPress existen plugins que abren esas posibilidades.<\/p>\n
<\/p>\n
Conclusi\u00f3n<\/h3>\n
Un c\u00f3mic responsive parte de unos l\u00edmites muy grandes y estrictos, pero es una opci\u00f3n para crear una narrativa visual. No todas los estilos de creaci\u00f3n podr\u00e1n adaptarse a este tipo de c\u00f3mics, pero habr\u00e1 elecciones art\u00edsticas que s\u00ed lo permitir\u00e1n.<\/p>\n
El gran reto es trabajar en c\u00f3mics pensados para ese formato y conseguir publicaciones con una calidad que tenga valor para los lectores.<\/p>\n
\u00bfEs eso posible?<\/p>\n\tEn esta p\u00e1gina<\/a> cuelgo las historias que voy creando con este sistema. Responsive C\u00f3mic El comienzo Hace varios a\u00f1os, desarroll\u00e9 un formato para crear c\u00f3mics pensados para verse desde un dispositivo m\u00f3vil. Al empezar a contarle a un amigo mis hallazgos con mobilecomic, este, me interrumpi\u00f3 y me dijo – \u00a1Qu\u00e9 buena idea! \u00a0\u00a1responsive!. -No, esto son c\u00f3mics pensados para verse s\u00f3lo desde un m\u00f3vil. Su…<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-2406","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/illot.net\/zh\/wp-json\/wp\/v2\/pages\/2406","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/illot.net\/zh\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/illot.net\/zh\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/illot.net\/zh\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/illot.net\/zh\/wp-json\/wp\/v2\/comments?post=2406"}],"version-history":[{"count":0,"href":"https:\/\/illot.net\/zh\/wp-json\/wp\/v2\/pages\/2406\/revisions"}],"wp:attachment":[{"href":"https:\/\/illot.net\/zh\/wp-json\/wp\/v2\/media?parent=2406"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
\n
\nY a a continuaci\u00f3n dejo un esquema de los distintos tipos de vi\u00f1eta que he podido introducir.\n \n Grupo A
\n Vi\u00f1eta altura XL
\n Ocupa toda la pantalla
\n en horizontal y en vertical\n <\/h4>\n \n Grupo B.
Vi\u00f1etas altura M
\n Segundo grado de importancia.\n <\/h4>\n \n Grupo B.\n
Estructura 1:1
\n <\/h4>\n \n GrupoC.
Vi\u00f1etas altura M.
\n Una de las dos se divide.
\n Estructura 1:2.\n <\/h4>\n \n GrupoC.
\n <\/h4>\n \n GrupoC.
\n <\/h4>\n \n GrupoD.
Vi\u00f1etas altura M.
\n 4 bloques que se agrupan de dos en dos.
\n Estructura 2:2.\n <\/h4>\n \n GrupoD.\n <\/h4>\n
\n GrupoD.\n <\/h4>\n
\n GrupoD.\n <\/h4>\n
\n GrupoE.
Vi\u00f1etas altura S.
\n Estructura 1:1.\n <\/h4>\n \n GrupoE
\n <\/h4>\n \n GrupoF.
Vi\u00f1etas altura S.
\n Estructura 2:2.\n <\/h4>\n \n GrupoF\n <\/h4>\n
\n GrupoF.\n <\/h4>\n
\n GrupoF.\n <\/h4>\n
\n GrupoG.
Vi\u00f1etas altura S.
\n Estructura 1:2.\n <\/h4>\n \n GrupoG\n <\/h4>\n
\n GrupoG\n <\/h4>\n\t\t\t\t\n\t\t\t\t
![\"firma_typo_illot_small_BG\"](\"https:\/\/illot.net\/wp-content\/uploads\/2019\/06\/firma_typo_illot_small_BG-150x150.png\" "\\"firma_typo_illot_small_BG\\"")
\n\t\t\t\t<\/a>","protected":false},"excerpt":{"rendered":"