THE SITE REVAMP - A first look (Patreon)

Hey everyone! I have a very exciting post to share today. It's a bit long and I spent a couple hours writing it, but it's worth the read! Trust me, you're gonna wanna sit through this. Buckle up!

As everyone is aware, and if you've been keeping up with the Tumblr, the site is currently being revamped, or redesigned from the very bottom. The reasons I'm doing this are many. The biggest reason for the revamp is the fact that, when I originally built the site, I was not at all an experienced web developer. Most of my HTML/CSS/JS skills came from making Tumblr themes back in the day. Over the years, my skills as a web developer improved, but the main problem with the site in its current state is that it's very obviously designed by an amateur developer, and this leads to a lot of reader-experience suffering.

For so many years there have been many features requested for the site that I could not implement because of the terrible way my 17 year old self designed the base code of the website when I barely knew what I was doing. Now, I'm 23, and I've been doing a lot of web development stuff in practice for smaller projects, and I finally feel like I actually know what I'm doing. But in order to fix the problem, I have no choice but to rebuild the entire website. This is a hefty task, and it's a lot of work, but I promise that the end result will be SO worth it.

My MAIN goals with redesigning the site were a few things:

• Making the site more reader-friendly (with advanced accessibility options)

• Improving the mobile-reader experience (because I know, we ALL KNOW, the current mobile site is awful. I know. I know it is, I am SO sorry)

• Making it easier for me to upload updates (by improving things like the navigation code, which is currently a nightmare in its original state)

• And lots more smaller fun things!

Today I'm going to be showcasing the first-ever sneak-peek at the new site for you patrons to see it in action! The main thing I'll be focusing on in this post is obviously the biggest part of the site, the comic viewer, which is basically the thing that lets you read the comic. I'll touch on a few other things as well, though.

So, let's get into it.

The site header (for desktop devices)

I'll be touching on the mobile site too, but I'm going to start with obviously where the building had to begin- the top of the site, with the logo and page buttons. Let's see what it looks like!

 This is the new top navigation for the site! As you can see, the links are no longer images, but are pure HTML, using a font icon kit for the little icons.

The biggest reason I wanted to change the look of the little buttons is because I didn't like needing to make new versions of the buttons with different colors every time I did a new site theme. It looks cleaner too, and neater. The site logo is also smaller than it currently is, and clicking on the header takes you to the home page. You don't have to only use the home page button to go there. There's also a button in place of the saturation toggler, but we'll take a look at that in a moment. Let's go over the buttons we see here first!

The buttons with the little carets on them are drop-down links that give you multiple options to choose from. For example, the about drop-down gives you a link to the about page, the trigger warning masterlist, and the reading guide. The reading guide obviously is new- it's basically just a link to a page that explains all the comic reader features.

And this- this is also new! When you hit "read" it gives you a drop-down of every series instead of automatically taking you to series 1. Even though we're not going to reach series 2 or 3 for a while, it will be beneficial in the long run to be able to immediately jump to the series you want to read instead of going all the way to the beginning of series 1 and needing to toggle the volume select drop-down to get to the next series. The volume select got an update too, but we'll look at that in a moment as well! One last thing, there's a button that gives you a pop-up box that explains what "series" means in case you're new and don't know what they are or which to start with. Okay! Moving on...

Oh, that's cool- we also get the option to select which series' cast we want to see! Once again, there's only ES available, but when S2 and S3 are out it'll be a helpful tool to quickly access those different sets of character bios! You'll also note that the Toyhouse page is also accessible through this drop-down, so people can access all the art I have of existing characters on their Toyhouse pages (plus, any other information I might add eventually. We'll see, this is all very barebones!)

Not a drop-down, but I gotta put focus on this. Look, guys. It's the lore page. The Spinch lore page. On the top bar. Finally. No more digging through the FAQ for lore! The lore page is also getting an overhaul to match the layout and code of the new site as well, but it won't be updated until the main site is done, so you should still be able to access Spinch lore via the URL still in the meantime.

We've also got this- THE ASK BLOGS!!! A link to the main comic ask blog and the two AU blogs, so people don't have to scramble to figure out how to access the AUs. This is also cool because if I make any other AUs I can put them on here! It's not a focus right now, but I feel it's also worth mentioning that a later project post-release is going to be a more versatile archive of the AU blogs, which will make catching up much easier to people who don't use Tumblr/exclusively are on mobile. That's coming LATER, though, it's not going to be ready at launch.

LASTLY- THE ARCHIVES. Here you'll be able to access page archives, transcript archives, and volume summaries. Clicking these links takes you to a page where you can select a series and then shows a list of all the volume covers and on each one you'll get to access:

• A page archive, which is a page containing every single page of the volume in thumbnail form plus links to the page to make finding specific pages much easier. The current archive is a disaster, I know. Seeing every page as an image is so much better.

• A transcript archive, which contains the entire script of the volume in text form if you need to read the volume in text for any reason.

• A volume summary, which is just like the current volume summaries we have already, a series of paragraphs summarizing every scene and major event in the volume.

Now, let's step back a bit and take a look at this...

 Settings... what does this do? Let's check it out!

Oh man, okay. Here it is. One of the biggest selling points of the revamp, the MOST REQUESTED FEATURE since DAY 1, the ability to toggle content warnings.

As you can see, you can either enable all of them (they're enabled by default, you have to manually turn it off in order to change the settings) or unswitch that option-- doing that enables all of the category switches. When the main switch at the bottom is ON, then all of the options are toggled on even if you manually set different settings. However, your browser remembers your manual settings and automatically goes back to them after you disable the main switch.

Now, all of the toggles can be set manually. This gives you the ability to select what kind of content you want filtered. For example, maybe violence bothers you, but medical imagery doesn't, etc. You can select what you want filtered specifically to your own needs.

The question mark circle icon gives a brief summary of what falls underneath the category in question. If you have a specific trigger or squick and you don't know which category it falls under, never fear! That's what the trigger masterlist is for.

This is still a WIP so I don't have a full version, but I'm including it here for demonstration purposes to emphasize that this is being handled with as much care for reader comfort as possible.

The masterlist will be accessible through the settings AND top navigation, it allows you to select which volume you need to check the contents of. Each warning on the list contains specific icons that indicate which category the sensitive content is underneath. It's also emphasized that this contains potential spoilers and should be used with caution and is really only to help people figure out what their comforts are.

 The context button explains the context of the trigger so you know what the situation is, what it entails, and gives an elaboration of whether or not the content is visual or verbal.

IMPORTANT: THIS SPECIFIC AREA OF THE SITE IS STILL A HUGE WIP, I only have barebones base code for this at the moment. It's subject to be updated or changed (I may include links to specific pages mentioned on these contexts for example).

Now, let's see what's at the bottom of settings! Where did the saturation toggler go? Well...

 Yep, that's right. It's a slider. You can set the exact saturation you desire for the entire site. Every page element is affected regardless of device (I know that the current toggler has the issue of not desaturating the background on some devices, that is fixed here!)

 You can even make the entire site completely grayscale if you want. It's pretty fun to play with. It also remembers your saturation on revisiting the site, AND there are no flashing or loading issues anywhere- when you open the site, the page doesn't even change until everything has loaded. This prevents eye strain potentially caused by site page loading.

Oh, I'll include this too. When you first read the comic, did your eyes hurt when you opened the site for the first time? We have a solution.

 The first time you open the site, you select your saturation in advance on a less-straining background with a cute little visual of the main characters to decide how bright they will be when you read. This feature was really important to me because I know it was probably overwhelming for a new reader to visit the site and have to adjust to all the bright colors. Now, you don't even have access until you set your saturation in advance.

It's also important to note that setting the saturation on this page...

 (note the slider position)

...automatically updates the slider on the actual site, so you don't have to worry about it not remembering your settings.

Also, this saturation slider landing page ONLY DISPLAYS on your first time loading the site, after you hit that "I'm good to go!" button, you'll never see it again (unless you open on a different device or browser or incognito mode, etc) so don't worry about the possibility of it becoming annoying. You only have to set it in advance once!

The comic viewer

Okay, I'm having a blast here, but it's time we move on from the header stuff and onto the MAIN EXPERIENCE... READING THE COMIC.

Here at the top of the page we have a bunch of buttons that do different things! Here I'll showcase everything they do, so you can get a glimpse of what the live experience will be like. It's important to note that I have added and changed features/the layout several times, so things may be added or look different at launch).

Here's the updated volume select dropdown!

It's not extremely different aside from the fact it now includes the other series! Also, V5 is on there, as you can see-- but it's disabled obviously because it isn't out yet!

And here are these buttons! NOTE: I intend on implementing a "button legend" that will explain what each of these buttons does soon. It will also be included on the reading guide, so don't worry about the possibility of a new reader being confused. In the meantime though, here's an explanation of each button and its function:

• SAVE PAGE - This star basically functions as a "bookmark" that saves your place in the comic, so if you leave the site and you want to go back to your place later, you can! All you have to do is click the star and it saves your place. When you have a page saved, it will go from being an outline to being filled in. Clicking the star again clears the saved page.

• LOAD PAGE - This bookmark does what you'd expect - it loads whatever page you have saved. Note that you can save literally anywhere in the comic, even regardless of what SERIES you're on- if you have series 3 open and you saved your place in series 1, you can instantly jump back to right where you saved it.

• PAGE TITLE - Above the arrows, it tells you which series, volume, and page you're on. However, not everyone will find this necessary, so you can easily disable it and the title text just disappears. Clicking it again will re-enable page titles.

• ARROW POSITION - You might have noticed that arrows are above the page. Actually, despite the screenshot only showing the top, they're at the bottom too. The arrows can be set to be on both top and bottom (two arrows), on top only (up arrows), and on bottom only (down arrows). All you have to do is click this button several times and the button dynamically changes its icon to tell you where your arrow placement is. But again, its on top and bottom by default, you don't have to change this unless you want to make more page space or something.

• PAGE SIZE (DESKTOP ONLY) - This allows you to select the size of your page on your screen. However, this option is not available to mobile devices due to limitations and making the mobile experience seamless and comfortable (but I can't imagine why you'd want to change the page to be smaller on your phone anyways!)

• SITE HEADER (DESKTOP ONLY) - You see the logo at the top? Pressing that "T" makes it vanish. You can turn it back on just by clicking again, but if you feel like the header takes up too much space, you can toggle it. It's a small feature, but I feel like it's useful for people on lower resolution desktop devices like laptops for example.

Pretty neat, huh? These accessibility features were really important for me to include because I feel like readers should have the option to customize their reading experience as they need because everyone reads in a different way! These versatile options give so much room for different reading styles.

Content warnings, IN ACTION

The display of content warnings looks different too! Here, I'll give you a visual demonstration of how the switches function live. We'll start with the first page in the comic with a content warning.

 These are what warnings look like. Instead of it being summarized sentences, each individual warning gets its own line with an icon of what category its underneath. Now, you might be wondering... what happens if a page has different kinds of warnings, but you have different settings? I'll show you!

Let's go into settings... now, the violence trigger warnings are indicated by the claw marks icon. What happens if we turn that switch off?

Let's go see...

 Despite the long list of warnings this originally had, now there's only one- the medical imagery one. Doing the opposite...

Enabling violence warnings...

...but disabling medical imagery...

 ...now, only the violence warnings are listed! And if we have them both turned off? (for demonstration purposes I manually disabled ALL warnings)

Sparklecare uncut.

No warnings at all!

Also, important note, these changes happen LIVE, so it's not like you have to refresh for them to take effect. Toggling a switch on a page that contains a warning automatically enables the warning immediately as you're on it! It's also important to note that it saves your settings even if you close the site, but it does not sync across different devices or anything. You have to manually change settings on desktop and mobile separately.

Transcripts

Now, lets take a look at the updated transcript system!

 As you can see, we still have a regular transcript and a clean transcript. The regular transcript slides out from the left-

 Whilst the clean transcript, IF THERE IS ONE, displays on the right-

Transcripts are also a little fancier looking! Not only do they have differing font sizes for titles and headings, the dialogue sections are a little different.

Character names are highlighted on lines of dialogue. The highlight color changes depending on the site theme too (in the Wedoncare scene it's green instead of pink, etc).

THE BIGGEST DEAL... THE MOBILE SITE

Now... we've taken a look at all the main features I have working for the comic viewer, so up next I'm going to show off the mobile site! I've already mentioned on Tumblr that it does look different, but these changes are made with mobile design in mind. I know a LOT more about web development than I did when I built the original site, and the mobile site currently is kinda garbage and impossible to use. So let's see what it looks like!!!

The biggest selling point of the mobile site in my opinion is the page size. I know there's a bit of extra space on this screenshot but that's just for patreon spacing purposes, the comic page goes all the way to the edge of your phone screen. Most pages, you do NOT need to zoom in much, if at all.

Gears icon gives you the settings popup.

Hamburger menu gives you all the top nav links, except the buttons aren't annoyingly huge and you can see them a lot better on most devices. The dropdowns still work as normal as well, if you select archive or ask blog you may need to scroll a little to see the links but it's not annoying to do so and it doesn't bug out or anything weird.

Content warnings are also mobile-friendly, and even pages with a large number of warnings don't annoyingly extend beyond the page box. *Note: The page number displayed here doesn't match the one currently on the site, I'm removing the "letter" pages and making all pages numbered so you don't have to guess which page it is.

Summary

In short, I have been working REALLY HARD on making the new site as good as it can be. I want it to be a better reader experience overall and I want it to make it a lot less frustrating to use the site because I know it's not great in its current state. I hope you guys like the look of these new features! And one final time, it's very obvious this is still a WIP and there's stuff that's potentially going to be changed or added before launch. As I finish up more areas of the site I will show them off more on here!

If you have any suggestions or ideas feel free to leave a comment, I can't promise it'll be implemented but I am open to hearing them, it's not the first time I've taken suggestions for features in mind! Please leave a comment even if you don't have a suggestion for a feature, I really would like to hear what everyone thinks of this, it's been a labor of love for me. I've spent months putting some of these things together. There's even stuff I haven't included in this post, but it's not polished enough to share, so more to come soon! I'm also available to answer any and every question you may have about anything in this post (or about the revamp in general).

Thank you so much for the support, I apologize for the recent sparse posting on here. I hope this post is exciting enough to make up for it!

-Kittycorn/Eve