Here it is, the very long overdue website layout overhaul I'd been planning for literal years. In commemoration of hitting #600, I figured it was a good time to finally go ahead and update the website's look. A really great human being and friend of mine helped to put this together for me since I can't code for socks, so I'm super duper grateful ♥ There are a lot of quality of life changes and tweaks done here and there, with various cool bits and bobs now possible through the Magic and Power of Someone Who Knows How To Website™. Thanks so much! ;v;*)/ And thanks to you, dear readers, for supporting and sticking with Serpamia Flare through 600 pages. I really appreciate your love and support of the story and its characters, and of course your endless patience in regards to its often ailing author. Please know that I am super grateful to every one of you, and I hope to continue to bring SF to you until it meets its conclusion. :3 That will take a while yet though XD
The new characters being introduced on this page have been glimpsed on the cover page for this chapter. I hope you guys enjoy their introduction~ :3 They'll be fairly important in the grand scheme of things so stay tuned!
I also really hope you guys like the new website - please feel free to poke around. There are still some more updates I need to do in terms of content but the layout should now be a lot more sleek and less heavy on the loading side of things. Let me know if you have any issues or thoughts on the new layout :D I'm sure I'll keep tweaking things in the days to come.
Also, my big moving day is happening right on update day this week, so I'm afraid I'll have to beg for the benevolence of you dear readers as I take another week off so I can actually do that. I'll be back with an update on the 4th of September.
Thanks once again for reading SF! ;v;*)/ See you guys in September! Stay safe and sane 'till then, dear readers.
OMG Gwen's even cuter now that we're meeting her ahahaha that puffy pout <3 And Jack looks so fancy~ (they both do, actually, they're wonderful and I love them already <3<3<3)
I'm glad you like Gwen in all her puffiness XD <3 they are both here on an official capacity, so I'd hoped to present them looking a bit fancy-pants - very happy it came across well X3
(Thank you! :D I'm sure I have loads left to tweak but I'm glad to finally get the re-skin up and running XD)
Love the design of both characters introduced here. If seems like they will have a fun dinamic.
Some might say Jack has a little too much green, but I for one believe you can never have too much of that rich forest green. It has to be my favorite shade. I like him already.
Wow, this is great! First new characters to learn about, and, second, the new site look and layout!
We already learn a couple of small things about Gwen and Jack, in that they are pretty well aquainted, and that Gwen might have some "thief" attributes, such as stealth?
The site looks more "flowing" if that makes sense. One's eye runs more smoothly along the page. Does that make sense?
Hopefully the move didn't take too much out of you, and you're keeping well!
Thank you! :D I think Gwen, er, thinks she has better "thief" attributes than she actually does XD
I'm very glad that the site flow works better this time around. It's certainly something I was aiming for so hurrah~ \o/ Streamlining the viewing experience is something I'd like to continue to try and do :3
The move was a major pain but I'm definitely starting to settle in now :) Thank you very kindly for your encouragement and support!
It's certainly different, of the "needs getting used to" kind. So I'm reserving judgement for a bit. It's modern-ish for a tablet-age but I can see the vertically rather enormous header getting annoying quickly trying to trawl the archive, for example.
Oh, I'm getting a "sorry, post too long". I don't see how a 1000 character limit is limiting spam because most spam will be random crud like "Gosh I like your website!!!", add some keywords, then some links to whatever is being peddled, but anyway. Rest of the comment, elided.
You're definitely right about the header being a bit big - it didn't seem like it at the time I was installing it, but now I totally see what you mean XD; I will try and see what I can do about reducing it a bit. Thank you for the feedback :3 and feel free to continue to provide further thoughts on the layout if you have more!
And feel free to break a comment up into bits or pop into Discord to share thoughts if it extends past 1,000 characters :O I didn't even know there was a comment limit to be honest XD;
Thanks very much for sharing your thoughts so far though <3 much appreciated!
I got annoyed and threw the rest of the comment away. It ended up being a soapbox lecture on the sorry state of websites, the politics, the "living standard" idiocy, and everything else that annoys me about "html 5" and friends. It really doesn't add anything of value for a webcomic, or even the majority of other sites whose staple is publishing text and pictures. html 4 allows already much more than it needs to, most of the time.
Point in case, the menu with its fold-out features is really super fancy, and probably looks nice on a tablet, but it introduces extra clicks, makes it harder to find stuff because it's more hidden, and is involved enough that it discourages me from looking around on the site. Of course, I have a really slow desktop, not a smartphone or a tablet that introduce their own and often enough conflicting or even incompatible requirements. But still.
So it's really nice of your friend to help you with the site, and hey they get to show off how clever they are with web-features (as programmers tend to like to do--I know, yes) but in bald usability it's overkill and actually sooner detrimental than helpful (as sysadmins tend to notice--I know that too, yes).
Reason why my website designs tend to some scripting to tie header, footer, and half a page of css to the actual content and statically generate a set of publishable pages. With that I'm quite a long way from the mainstream.
Compare and contrast to this design that starts with a gigantic slab of copy/pasted css just to make lots of browsers produce comparable results. That was never in the original task description of html (explicitly not: it's about content, not looks) so it gets lots easier when you(r designer) stops trying to get pixel-perfect results everywhere. You won't get them anyway. Saves a lot of reinventing basic html functionality in javascript, too. It's not too bad on this site by modern standards really, I'm just saying. And so we're back to the general sorry state of websites, also named "webshit".
Some other points I noticed: There are a few errors in the menu parts typeset in laifen.
Because I was bored I tried to decipher the laifen speech bubbles with the font and it looks like the stuff Kylie gets told is just the second part that doesn't really make sense when relayed one on one. It wasn't easy because of low contrast and low resolution so I gave up after I got most of it. I don't know if that even should need attention.
My friend built the website layout completely based on my specifications - I produced a mockup on Photoshop and he coded it into reality, while working with the limitations that come with using ComicFury as a free host. We only went halfway (i.e. didn't complete coding a lot of features) because it was taking too long and I wanted to update the website already, given how long I'd been putting it off. I agree that the new menu style adds more clicks to get places, but I felt that the older row of buttons looked a bit messy so I wanted to clean it up a bit.
I noticed the Laifen errors a while back and kept forgetting to update it, so thanks for the reminder - I've gone in and fixed those now. If you're interested, quite a while back mjkj created a forum post with Google docs for Laifen - there's also a Laifen channel in our Discord, lol. The Laifen that was shown in Chapter 3 was handwritten and based off a chart I created by hand, and I had never intended for people to actually decipher it at the time XD; Later, I created an original font for Laifen and used that instead for consistency and to save me from the trouble of writing it out everytime, but I couldn't replicate some of my chart's grammar notes into the font. That's why some of Chapter 3's Laifen is actually not possible to read and I do apologise for that inconsistency (ironic that the change I made for consistency would cause that -v-).
Thanks for sharing your thoughts! :) I did do my best to reduce the header size based on reader remarks and hopefully it's less obnoxious now.
I can see where you're coming from. Not sure if this is the right way of "cleaning things up", but it's your call.
One thing I forgot to bring up because I was working from memory is that there's the currently-hip-and-happening fade-in/fade-out effect. It's strange that with our ever-faster comptuers the latest design trend is on deliberately slowing it all down, having the visitor wait on the computer. In my case the effect takes several seconds and I'm sitting there waiting for the computer to stop being stupid and do what I asked already, sheesh. So I can't wait for this fad to up and die.
I mentioned I have a slow desktop, didn't I? Also, a 5:4 screen, and I think some pages could stand a little more right margin (the one with the blue author notes).
You have a header-menu item "home" that does the same thing as the title customarily does. You could lose it, move "menu" to the side, and use that headroom for the silhouettes. It's still tablet-big in set-up, but it might be worth a try.
You could even make the silhouette clickable for something. If you have it, a list of pages with that character in it, or even a random page with that character in it. That's getting silly, it's just a wild idea. A direct link to the character's spot in the cast page is another possibility.
Another idea is to have the menu items that only exist for mouse-over and expand a submenu, become links themselves to pages that embody that submenu. Iff (see below) you can do that without too much extra work.
It's not unusual for changes for consistency cause inconsistencies to become more noticeable. I generally can't access google docs, because they like to be modern and my browser is anything but--if it doesn't peg a cpu it crashes the browser, and I have similar problems with, well, anything else that wants to be modern. So I perforce have to leave the rest to the other nerds.
One thing that is not part of a designer's mindset but very much should be in a coder's mindset, is that if you're generating and not hand-coding things, that things like a menu item title and its associated menu item sub-title, which differs only in the font used to typeset it, should be generated automatically. IOW there should be a "mechanical" code-link between the two, such that changing one automatically changes the other. Which empathically does't have to be a linkage that works at every page-load, it can just as well be something that only runs once after you've touched the menu structure and then gets fixed into static html for thousands upon thousands of page-loads. But the linkage should be there. That's part of automating. I don't expect you to put much work in fixing that now, I'm just saying, it's one of those things I tend to notice.
600!!!! YEAY!!!! (insert noise poppers, balloons, and teary eyed fans with champagne glasses).
I like the new layout, but I should mention that the rotating silhouettes in the title banner look great in chrome, but don't show up if I'm using Edge (another reason to not use Edge, I suppose).
D'aw thank you DLK! ;v;* I certainly would try and splurge on the good bubbly for that celebration if I could XD
Thanks for the feedback re: the silhouettes - I didn't realise it'd look different in different browsers o-o I should try and fix that a bit, probably when I attempt to reduce the size of the header. According to Google Analytics I do have some readers that view the comic on Edge, so I should keep that in mind >3<*)/
oooOOoh! New layout!! New characters!! (they look like fun characters :D)
Good luck with moving!! Don't get too worn out, and take as much time as you need to get back to updating!
(in the meantime, I think it's high time I go re-read the archives hohoho)
I'm glad they look fun :3 they have been under wraps for quite some time now, a long time in the making, so it's great to have them finally out in the open :D
Thank you so much for your kind words of encouragement dear <3 moving was a massive pain but I am now on the other side of the unpacking business, thank the Lord!
(Thank you very much <3 I hope the archive trawl isn't too difficult with the header as it is :'D)
Fun fact perhaps - this scene was originally supposed to be slotted in a bit earlier, but I rejigged it a bit for Reasons. Hopefully the transition isn't too jarring - we're about to do another scene change very shortly after so XD;
And thank you so very much for your kind words and support all the way through these hundreds of pages mjkj ;v;* I don't have enough words to express my gratitude, but thank you! <3
This comic is incredibly engrossing! I started reading it and I just couldn't put it down. I looking forward very much to seeing what happens in the future.
(Also, I am absolutely over the moon that Kylie finally found her brother and it is utterly adorable how much she fawns over him.)
Aww geez, thank you melaredblu <3 ;v;** I'm very happy you're enjoying it so far! Thank you for taking the time to let me know <33 I hope you'll continue to enjoy the story as we go on >v<**
(<333 I'm extra happy about this too, thank you so much >v<**9)
(Also I like the new website look!)
(Thank you! :D I'm sure I have loads left to tweak but I'm glad to finally get the re-skin up and running XD)
Some might say Jack has a little too much green, but I for one believe you can never have too much of that rich forest green. It has to be my favorite shade. I like him already.
And you know, now that you mention it, I did give Jack a lot of dat forest greeeen XD; hopefully nobody out there doesn't like dat green :D
We already learn a couple of small things about Gwen and Jack, in that they are pretty well aquainted, and that Gwen might have some "thief" attributes, such as stealth?
The site looks more "flowing" if that makes sense. One's eye runs more smoothly along the page. Does that make sense?
Hopefully the move didn't take too much out of you, and you're keeping well!
I'm very glad that the site flow works better this time around. It's certainly something I was aiming for so hurrah~ \o/ Streamlining the viewing experience is something I'd like to continue to try and do :3
The move was a major pain but I'm definitely starting to settle in now :) Thank you very kindly for your encouragement and support!
Oh, I'm getting a "sorry, post too long". I don't see how a 1000 character limit is limiting spam because most spam will be random crud like "Gosh I like your website!!!", add some keywords, then some links to whatever is being peddled, but anyway. Rest of the comment, elided.
And feel free to break a comment up into bits or pop into Discord to share thoughts if it extends past 1,000 characters :O I didn't even know there was a comment limit to be honest XD;
Thanks very much for sharing your thoughts so far though <3 much appreciated!
Point in case, the menu with its fold-out features is really super fancy, and probably looks nice on a tablet, but it introduces extra clicks, makes it harder to find stuff because it's more hidden, and is involved enough that it discourages me from looking around on the site. Of course, I have a really slow desktop, not a smartphone or a tablet that introduce their own and often enough conflicting or even incompatible requirements. But still.
So it's really nice of your friend to help you with the site, and hey they get to show off how clever they are with web-features (as programmers tend to like to do--I know, yes) but in bald usability it's overkill and actually sooner detrimental than helpful (as sysadmins tend to notice--I know that too, yes).
Reason why my website designs tend to some scripting to tie header, footer, and half a page of css to the actual content and statically generate a set of publishable pages. With that I'm quite a long way from the mainstream.
Compare and contrast to this design that starts with a gigantic slab of copy/pasted css just to make lots of browsers produce comparable results. That was never in the original task description of html (explicitly not: it's about content, not looks) so it gets lots easier when you(r designer) stops trying to get pixel-perfect results everywhere. You won't get them anyway. Saves a lot of reinventing basic html functionality in javascript, too. It's not too bad on this site by modern standards really, I'm just saying. And so we're back to the general sorry state of websites, also named "webshit".
Some other points I noticed: There are a few errors in the menu parts typeset in laifen.
Because I was bored I tried to decipher the laifen speech bubbles with the font and it looks like the stuff Kylie gets told is just the second part that doesn't really make sense when relayed one on one. It wasn't easy because of low contrast and low resolution so I gave up after I got most of it. I don't know if that even should need attention.
My friend built the website layout completely based on my specifications - I produced a mockup on Photoshop and he coded it into reality, while working with the limitations that come with using ComicFury as a free host. We only went halfway (i.e. didn't complete coding a lot of features) because it was taking too long and I wanted to update the website already, given how long I'd been putting it off. I agree that the new menu style adds more clicks to get places, but I felt that the older row of buttons looked a bit messy so I wanted to clean it up a bit.
I noticed the Laifen errors a while back and kept forgetting to update it, so thanks for the reminder - I've gone in and fixed those now. If you're interested, quite a while back mjkj created a forum post with Google docs for Laifen - there's also a Laifen channel in our Discord, lol. The Laifen that was shown in Chapter 3 was handwritten and based off a chart I created by hand, and I had never intended for people to actually decipher it at the time XD; Later, I created an original font for Laifen and used that instead for consistency and to save me from the trouble of writing it out everytime, but I couldn't replicate some of my chart's grammar notes into the font. That's why some of Chapter 3's Laifen is actually not possible to read and I do apologise for that inconsistency (ironic that the change I made for consistency would cause that -v-).
Thanks for sharing your thoughts! :) I did do my best to reduce the header size based on reader remarks and hopefully it's less obnoxious now.
One thing I forgot to bring up because I was working from memory is that there's the currently-hip-and-happening fade-in/fade-out effect. It's strange that with our ever-faster comptuers the latest design trend is on deliberately slowing it all down, having the visitor wait on the computer. In my case the effect takes several seconds and I'm sitting there waiting for the computer to stop being stupid and do what I asked already, sheesh. So I can't wait for this fad to up and die.
I mentioned I have a slow desktop, didn't I? Also, a 5:4 screen, and I think some pages could stand a little more right margin (the one with the blue author notes).
You have a header-menu item "home" that does the same thing as the title customarily does. You could lose it, move "menu" to the side, and use that headroom for the silhouettes. It's still tablet-big in set-up, but it might be worth a try.
You could even make the silhouette clickable for something. If you have it, a list of pages with that character in it, or even a random page with that character in it. That's getting silly, it's just a wild idea. A direct link to the character's spot in the cast page is another possibility.
Another idea is to have the menu items that only exist for mouse-over and expand a submenu, become links themselves to pages that embody that submenu. Iff (see below) you can do that without too much extra work.
It's not unusual for changes for consistency cause inconsistencies to become more noticeable. I generally can't access google docs, because they like to be modern and my browser is anything but--if it doesn't peg a cpu it crashes the browser, and I have similar problems with, well, anything else that wants to be modern. So I perforce have to leave the rest to the other nerds.
One thing that is not part of a designer's mindset but very much should be in a coder's mindset, is that if you're generating and not hand-coding things, that things like a menu item title and its associated menu item sub-title, which differs only in the font used to typeset it, should be generated automatically. IOW there should be a "mechanical" code-link between the two, such that changing one automatically changes the other. Which empathically does't have to be a linkage that works at every page-load, it can just as well be something that only runs once after you've touched the menu structure and then gets fixed into static html for thousands upon thousands of page-loads. But the linkage should be there. That's part of automating. I don't expect you to put much work in fixing that now, I'm just saying, it's one of those things I tend to notice.
I like the new layout, but I should mention that the rotating silhouettes in the title banner look great in chrome, but don't show up if I'm using Edge (another reason to not use Edge, I suppose).
Thanks for the feedback re: the silhouettes - I didn't realise it'd look different in different browsers o-o I should try and fix that a bit, probably when I attempt to reduce the size of the header. According to Google Analytics I do have some readers that view the comic on Edge, so I should keep that in mind >3<*)/
Good luck with moving!! Don't get too worn out, and take as much time as you need to get back to updating!
(in the meantime, I think it's high time I go re-read the archives hohoho)
I'm glad they look fun :3 they have been under wraps for quite some time now, a long time in the making, so it's great to have them finally out in the open :D
Thank you so much for your kind words of encouragement dear <3 moving was a massive pain but I am now on the other side of the unpacking business, thank the Lord!
(Thank you very much <3 I hope the archive trawl isn't too difficult with the header as it is :'D)
And I'm happy you like that scene, it was definitely fun to draw XD
So, who are they?
@a/n: yeah, noticed it right away :)
...congratulations on comic 600 :D 😁🥳🍰🍪🧁🍨🎆🎉🎊
And thank you so very much for your kind words and support all the way through these hundreds of pages mjkj ;v;* I don't have enough words to express my gratitude, but thank you! <3
Good luck with your move. :-)
(Also, I am absolutely over the moon that Kylie finally found her brother and it is utterly adorable how much she fawns over him.)
(<333 I'm extra happy about this too, thank you so much >v<**9)