thoughts on fic interactivity
Sep. 10th, 2021 05:51 pm![[personal profile]](https://www.dreamwidth.org/img/silk/identity/user.png){kind=small}
girlrock As Everyone Knows i looove mixed media in fic and i love seeing people push the boundaries of interaction and structure in things they write online!!! so i'm really always wondering how we can go further with it *___*
when i started writing my recent miniz, i coded the pm skin in dreamwidth before anything else (which is why it's kind of the most awkward and i might go in and fix it later ;__;) and also decided i wouldn't post it on ao3 at all—mostly because it's not a fic i wanted to post outside of my audience of 2 people, but also because i actually think dw DOES have some strengths over ao3 in terms of coding + styling. hence why i worked mainly within the scope of minimalism when i made the facebook post work skin on ao3, as opposed to doing a little bit more with my lockscreen/kkt/etc. screens this time. see Thoughts:
AO3 (EXTERNAL CSS)
➕ a lot easier to implement and cleaner to write
➕ can use pseudo-classes/elements (hover, before/after, active, nth-child, etc.)
➖ unless you use "content" to embed images, they always look terrible when the creator's style is turned off and not everyone has creator's style on by default in their account
➖ ao3 adds extra <br> tags all the time that makes it hard to control spacing
➖ can't use google fonts
➖ doesn't support <details> i'm pretty sure???
DREAMWIDTH (INLINE CSS)
➕ has <raw-code> functionality
➕ don't have to worry about creator's style
➖ have to account for minor discrepancies with default site skin
➖ INLINE CSS....................
at its core: ao3 is a fic site and dreamwidth is a blogging site that can be used to post fics. blogging sites, despite dw using inline css, are built for better interaction than more "traditional" storytelling interfaces.
also i think to me the most painful part of inline css isn't even the repetition because it's easy to use an external editor and copy paste/replace-all whatever you need (and i've unfortunately just gotten used to it LOL). but... sigh... not being able to use pseudo-elements is definitely an issue T___T how do you add embellishing touches to message bubbles or just general social media elements ?___? which is why i'm like should i just transfer in the base layout code to my blog so i can un-embed the layout stylesheet and then use custom classes for specific posts??? but that also seems kind of finicky and i want to maintain some sort of consistency between my layout and the site style, but then it's like anything you code on dreamwidth is forcibly finicky because it's literally dreamwidth....... no js just vibes. can't even embed social media posts like lj does over here!!!
but basically (AFAIK?) the main elements you can exploit with inline css on dw are:
and whenever i make something on dreamwidth with a "hack" i feel like i'm both rediscovering stuff people who rp on this website have been using and executing more successfully for a longggg time + also just like... engaging in really terrible coding practices LOL. but while i respect people who make full on interactive fics via twine + itch.io or whatever, i really... reallyyyyy want to see more stuff that pushes those bounds just within ao3 + (A GIRL CAN DREAM!!!) dreamwidth as well!!!
like jess showed me sakuatsu domesticity simulator a while back which is super cool and interesting but is also hosted on itch.io. and it doesn't have to be anything on that level or something crazy in terms of multimedia exploration like 17776 ofc, but i just think it would be sooo cool if there were a way of folding that kind of interaction just into someone's fic or blog page... maybe we need to bring neocities (culturally) back. and there's more to think about when we approach fiction and interaction and narratives and games ofc—a friend i knew in it fandom created an entire game herself that was soooo well-executed and perfect and was in its own way a "fic," or a narrative response to the source material. and maybe it isn't productive to have "platform attachments" and try to force dw to structure something it isn't meant for... but i'm still enticed by the idea of posting multimedia fic on dreamwidth because i feel like it could be way more accommodating than ao3 if we gave it a chance!!!
also just purely imo but: to me the strengths of pretty css design come in when you add some extra component of interactivity/realism to it, because i otherwise really do like epistolary fics that are very "loosely" styled!!! for ex. chaotic neutral and i killed a clown. ama! are both objectively PERFECT fics and i'd argue that they're better the way they are without anything that strictly models an imageboard/reddit??? like the way i see it if you're going to interrupt the "flow" of your fic or overstyle it with more intensive emulation, i personally prefer when it isn't just delivered in a one-note, tweet after tweet after tweet after tweet floating in the middle of the page way. but that could just be me *___*
so i think what i want isn't what interactive twine fic tends to look like (mostly clicking through prose/text to load new pages + occasionally the idea of alternate endings), but something that is still tightly structured as a singular narrative but has kind of... this pov immersion of the characters involved, especially in social media. like you're not just reading tweets at once, you're reading through that person's tweets on the tl and scrolling continuously within their phone, or you're on their laptop and see their email in one window and their chat box in another and can "click" around (in a very constrained html/css way)!
honestly i'm just making this post because i honestly don't know what i think myself or exactly what i want to see or whether anything i've been thinking about even makes sense!!! like i'm really just... reflecting on how we present multimodal elements in fic ^^ and i've seen soo much interesting stuff over the past years from like... marvel, persona, haikyuu, genshin, etc. etc. fandoms, but since i have 0 attachment to fandom and haven't been involved in the public twittersphere (outside of a brief bts stint that i somewhat regret) for the past 8 years, i've only witnessed peripheral approaches to fic "trends" and hence could seriously not tell you SHIT!!! let me know if you have thoughts or tips on fic coding because i would love 2 hear ;__; i'm just in my silly little echo chamber here.
+ some more thoughts about trying to force interactivity into inline css:
1. you can only strictly SHOW or HIDE things with details, depending on whether you default them open or closed.
what you can't do is hide something and show something else at the same time—as far as i've tried, at least. for ex. i used a summary to create the "extra notifications" banner in my lockscreen design, but while clicking on it successfully brings up those extra notifications, there's no way of hiding those shadows beneath it or the notifications subtext the way an iphone usually does.
4:15
Friday, September 10
KAKAOTALK
32m
KAKAOTALK
7h
KAKAOTALK
7h
KAKAOTALK
7h
PHONE
8h
TWITTER
14h
2. the problem with forcing interactivity by ""loading"" a new page is that (obviously) you can only reward One Click at a time.
take for example my favorite thing txt have EVER done teaser-wise: their interactive phone screen for blue hour!!! of course, when you implement actual js you can accrue the set password after 4 button clicks and check whether that string matches, then load/flash the according screen afterward, which is what they did. it's a 4-step process—but if we wanted to replicate this functionality with purely static screens, it would require returning to the start state after every misstep, and the anchor points would just follow a sequence of 0→3→0→4, with 0 being a repeated screen.
but i guess the question is... do we even have want or reason to make anything this involved? if we're following the philosophy of non-twine/game-ified works, then maybe trying to reward more than one click is already defeating the purpose of the exercise, which is why it's rarely implemented. once a reader has to engage in a continuous or conscious interactive experience, then we've required too much action on their part. i guess, at its core, what i'm looking for more of is just simple, direct clicks and div scrolls—something like a carrd page, always offering the same paths even if they're taken at different intervals. actually exactly like a carrd page LOL.
there's levels of sophistication to social media emulation in fics that look a little something like this:
honestly idk but the more i think about it... if i want to combine ao3 and dw flexibility i really just need to code shit into my theme. everything on the internet is finicky there's no way around it.... orz
ok let me end this post here. i feel like i sound kind of stupid rn because i'm just Guy On The Internet who loves epistolary and social media narratives and loves when Things Are Meta and built upon but maybe there isn't actually any "narrative" or literary merit to that!? but also who cares!!! ok i'm just saying anything rn but it's fine T___T
TL:DR; i just like when things are fun and pretty! and i doubt anyone will read this since it's just my unorganized and scrambled thoughts but if you have gotten to this point what are YOUR favorite multimodal works and elements?????? i don't even plan on writing anything for the rest of the year but i'm always suuuper curious and i just like the idea of it all and looking at pretty styling 🥰 enough rambling now good bye!
when i started writing my recent miniz, i coded the pm skin in dreamwidth before anything else (which is why it's kind of the most awkward and i might go in and fix it later ;__;) and also decided i wouldn't post it on ao3 at all—mostly because it's not a fic i wanted to post outside of my audience of 2 people, but also because i actually think dw DOES have some strengths over ao3 in terms of coding + styling. hence why i worked mainly within the scope of minimalism when i made the facebook post work skin on ao3, as opposed to doing a little bit more with my lockscreen/kkt/etc. screens this time. see Thoughts:
AO3 (EXTERNAL CSS)
➕ a lot easier to implement and cleaner to write
➕ can use pseudo-classes/elements (hover, before/after, active, nth-child, etc.)
➖ unless you use "content" to embed images, they always look terrible when the creator's style is turned off and not everyone has creator's style on by default in their account
➖ ao3 adds extra <br> tags all the time that makes it hard to control spacing
➖ can't use google fonts
➖ doesn't support <details> i'm pretty sure???
DREAMWIDTH (INLINE CSS)
➕ has <raw-code> functionality
➕ don't have to worry about creator's style
➖ have to account for minor discrepancies with default site skin
➖ INLINE CSS....................
at its core: ao3 is a fic site and dreamwidth is a blogging site that can be used to post fics. blogging sites, despite dw using inline css, are built for better interaction than more "traditional" storytelling interfaces.
also i think to me the most painful part of inline css isn't even the repetition because it's easy to use an external editor and copy paste/replace-all whatever you need (and i've unfortunately just gotten used to it LOL). but... sigh... not being able to use pseudo-elements is definitely an issue T___T how do you add embellishing touches to message bubbles or just general social media elements ?___? which is why i'm like should i just transfer in the base layout code to my blog so i can un-embed the layout stylesheet and then use custom classes for specific posts??? but that also seems kind of finicky and i want to maintain some sort of consistency between my layout and the site style, but then it's like anything you code on dreamwidth is forcibly finicky because it's literally dreamwidth....... no js just vibes. can't even embed social media posts like lj does over here!!!
but basically (AFAIK?) the main elements you can exploit with inline css on dw are:
- ✅ <details> & <summary>
✅ anchor links
✅ textareas, although this is purely aesthetic
✅ buttons, but they also don't do anything
and whenever i make something on dreamwidth with a "hack" i feel like i'm both rediscovering stuff people who rp on this website have been using and executing more successfully for a longggg time + also just like... engaging in really terrible coding practices LOL. but while i respect people who make full on interactive fics via twine + itch.io or whatever, i really... reallyyyyy want to see more stuff that pushes those bounds just within ao3 + (A GIRL CAN DREAM!!!) dreamwidth as well!!!
like jess showed me sakuatsu domesticity simulator a while back which is super cool and interesting but is also hosted on itch.io. and it doesn't have to be anything on that level or something crazy in terms of multimedia exploration like 17776 ofc, but i just think it would be sooo cool if there were a way of folding that kind of interaction just into someone's fic or blog page... maybe we need to bring neocities (culturally) back. and there's more to think about when we approach fiction and interaction and narratives and games ofc—a friend i knew in it fandom created an entire game herself that was soooo well-executed and perfect and was in its own way a "fic," or a narrative response to the source material. and maybe it isn't productive to have "platform attachments" and try to force dw to structure something it isn't meant for... but i'm still enticed by the idea of posting multimedia fic on dreamwidth because i feel like it could be way more accommodating than ao3 if we gave it a chance!!!
also just purely imo but: to me the strengths of pretty css design come in when you add some extra component of interactivity/realism to it, because i otherwise really do like epistolary fics that are very "loosely" styled!!! for ex. chaotic neutral and i killed a clown. ama! are both objectively PERFECT fics and i'd argue that they're better the way they are without anything that strictly models an imageboard/reddit??? like the way i see it if you're going to interrupt the "flow" of your fic or overstyle it with more intensive emulation, i personally prefer when it isn't just delivered in a one-note, tweet after tweet after tweet after tweet floating in the middle of the page way. but that could just be me *___*
so i think what i want isn't what interactive twine fic tends to look like (mostly clicking through prose/text to load new pages + occasionally the idea of alternate endings), but something that is still tightly structured as a singular narrative but has kind of... this pov immersion of the characters involved, especially in social media. like you're not just reading tweets at once, you're reading through that person's tweets on the tl and scrolling continuously within their phone, or you're on their laptop and see their email in one window and their chat box in another and can "click" around (in a very constrained html/css way)!
honestly i'm just making this post because i honestly don't know what i think myself or exactly what i want to see or whether anything i've been thinking about even makes sense!!! like i'm really just... reflecting on how we present multimodal elements in fic ^^ and i've seen soo much interesting stuff over the past years from like... marvel, persona, haikyuu, genshin, etc. etc. fandoms, but since i have 0 attachment to fandom and haven't been involved in the public twittersphere (outside of a brief bts stint that i somewhat regret) for the past 8 years, i've only witnessed peripheral approaches to fic "trends" and hence could seriously not tell you SHIT!!! let me know if you have thoughts or tips on fic coding because i would love 2 hear ;__; i'm just in my silly little echo chamber here.
+ some more thoughts about trying to force interactivity into inline css:
1. you can only strictly SHOW or HIDE things with details, depending on whether you default them open or closed.
what you can't do is hide something and show something else at the same time—as far as i've tried, at least. for ex. i used a summary to create the "extra notifications" banner in my lockscreen design, but while clicking on it successfully brings up those extra notifications, there's no way of hiding those shadows beneath it or the notifications subtext the way an iphone usually does.
4:15
Friday, September 10
KAKAOTALK
21m
Minhee-hyung
so bored ㅠㅠ
4 more notifications
KAKAOTALK
21m Minhee-hyung
so bored ㅠㅠ 4 more notifications
KAKAOTALK
32m Kim Hyunwoo
hyungggg can i ask you for a favor later lol >__<
KAKAOTALK
7h Kim Sunoo
you coming???
KAKAOTALK
7h Kim Sunoo
i'm getting dinner with intak and taeyoung and their friends tonight
KAKAOTALK
7h Kim Sunoo
yah ahn seongmin
PHONE
8h Mom
Missed Call
TWITTER
14h X1members Tweeted: 미니꾸안꾸❤️ 날씨가 좋아서
2. the problem with forcing interactivity by ""loading"" a new page is that (obviously) you can only reward One Click at a time.
take for example my favorite thing txt have EVER done teaser-wise: their interactive phone screen for blue hour!!! of course, when you implement actual js you can accrue the set password after 4 button clicks and check whether that string matches, then load/flash the according screen afterward, which is what they did. it's a 4-step process—but if we wanted to replicate this functionality with purely static screens, it would require returning to the start state after every misstep, and the anchor points would just follow a sequence of 0→3→0→4, with 0 being a repeated screen.
but i guess the question is... do we even have want or reason to make anything this involved? if we're following the philosophy of non-twine/game-ified works, then maybe trying to reward more than one click is already defeating the purpose of the exercise, which is why it's rarely implemented. once a reader has to engage in a continuous or conscious interactive experience, then we've required too much action on their part. i guess, at its core, what i'm looking for more of is just simple, direct clicks and div scrolls—something like a carrd page, always offering the same paths even if they're taken at different intervals. actually exactly like a carrd page LOL.
there's levels of sophistication to social media emulation in fics that look a little something like this:
- 1️⃣ twitter-hosted "aus" with generated imgs: requires the most extra clicks, from having to click through different screenhots within the same tweet and then clicking on other tweets within the same thread
2️⃣ ao3-hosted fics with generated imgs: still less accessible than text and generally renders in lower quality. also images are prone to breaking if hosting goes awry
3️⃣ ao3-hosted fics with coded media in "log" format: this would look like a log of individual tweets or a very long messaging log with zero contained scroll functionality, doesn't offer much "immersion"
4️⃣ ao3-hosted fics with coded media that actually emulates its real dimensions: see scroll functionality of this email work skin. another (honestly incredible) example is this discord skin!
honestly idk but the more i think about it... if i want to combine ao3 and dw flexibility i really just need to code shit into my theme. everything on the internet is finicky there's no way around it.... orz
ok let me end this post here. i feel like i sound kind of stupid rn because i'm just Guy On The Internet who loves epistolary and social media narratives and loves when Things Are Meta and built upon but maybe there isn't actually any "narrative" or literary merit to that!? but also who cares!!! ok i'm just saying anything rn but it's fine T___T
TL:DR; i just like when things are fun and pretty! and i doubt anyone will read this since it's just my unorganized and scrambled thoughts but if you have gotten to this point what are YOUR favorite multimodal works and elements?????? i don't even plan on writing anything for the rest of the year but i'm always suuuper curious and i just like the idea of it all and looking at pretty styling 🥰 enough rambling now good bye!
no subject
Date: 2021-09-11 07:26 am (UTC)no subject
Date: 2021-09-11 09:35 pm (UTC)but anyway it's so nice to hear your thoughts re: epistolary styling on ao3 because i definitely feel you on that… to me it's impressive when people manage to style something a bit more complex that maybe wouldn't be properly conveyed with pure text (like i read this persona fic that showed someone's twitter profile with their account info + recent tweets in different columns, and even though it wasn't entirely realistically executed it looked really cool to me!!)… but then with stuff like texting i'm often too lazy to do anything but just bold the names LOL.
and ngl i'm honestly terrible at coding 😭 but it's a mix of both and i definitely think css is one of those things you can pick up purely on your own (+ the help of the internet) by just continuously practicing + trying to make whatever interests you atm! thank you for leaving a comment and good luck out there with your dw code~ n__n
no subject
Date: 2021-09-12 01:02 am (UTC)and wow, i have had a twine fic in my head for AGES and this brought it back to the forefront of my mind, lol.
no subject
Date: 2021-09-14 12:25 am (UTC)anyway would love to see u tackle a twine fic i will always be once fan <333