Blaugust 12 - Make a Comic Webpage with me!

I've posted abt my troubles moving webhosts, and it's still ongoing... So if I'm still on neocities for the time being, let's get through some changes I've been itching to do!

Comic layout

Here is my process...!

I boot up ms paint and do a quick draft. I focus on mobile and desktop viewing. 60% of your website visitors will be doing it via their phones! I think mobile coding can wait until you've gotten a big more comfortable with coding, it's not as hard as people think. But it does depend on how you want your site experience to be. I won't talk about the "indieweb" complaints, which I think a little misplaced. Maybe in another Blaugust?

Anyway... what do we want?

Mobile
• Pages are automatically full-sized, and at 100% width to the device.
• When I'm on my tablet or phone, I want to scroll.
• I know a lot of manga sites/webtoons just have the infinite scroll with no breaks between pages. I personally don't like this, so we're going to have gaps between. Or maybe I'll change my mind!
• Title and comic info
• Like button and comments
• Footer with a return to index or return to top

Desktop
• I guess I always default to the dA layout...
• I like being able to tab/click right/left buttons to read through my comics. I don't like scrolling on my desktop.
• Title and comic info
• Like button and comments
• Footer with a return to index or return to top

Deadly, we have what we want! But what do we need to do?

I have to find a javascript lightbox script I can use for the desktop. I have 0 JS knowledge, so I will be testing out bohemiansultriness simple lightbox.(update: didn't actually end up using it but i still think it could be helpful to someone else!)

I have a comments system and a like button. Due to neocities security measures, you have to be a supporter to use these (you can use them if you're on Nekoweb, or whatever other hosting VPS/selfhosting)

Let's start!

Coding...

I'm not an expert! I try my best ^_^ If I'm doing something arseways, lemme know! I enjoy learning how to streamline my process.. I do love to work smarter not harder...

I've seen people use sitebuilders, but honestly I'm not interested. I hate having to deal with systems like that. I value the customization that html/css offers me. It's such a fun hobby.

I think the main issue here will be ensuring the lightbox doesn't work on certain screen sizes.

LOL avoided this issue altogether...

Let's decide on our colour scheme >:) I have a yellow-orange theme for my comics/gallery pages. As much as I love the background my comic index page has, let's go for a darker theme!

I love this page! It's the first I did from scratch. I'm proud of myself for being able to figure it out, and it exists exactly how I want it to.

For now I just have links that jump to the original and fanart section, but I'd love to add a tag system in the future ^.^ this is why I love webdev!! It's so easy to know you can FIX THINGS later on when you gain the knowledge!!

This is using kaylee rowena's gallery template, which I love for my gallery, but not so much for comics. Maybe it's the entirety of "reading comics via landscape mode" that's bothering me lol...

Mobile

I cannot find the exact post, but hellomei (another site that hugely inspired me) made the point it's much easier to plan + code for mobile first, rather then doing the reverse. So that's what we'll do!

This is 80% of where I want it to be. Most of this code is still perfect, it's honestly all css changes. The title is fine. I want no margins for the comic pages whatsoever. I do want a break between every page, because I personally hate when I can't tell when a page stops or begins.

I'm also going to remove the "to top" thumb button on the lower right side. It's annoying me!

Comments are fine, I need to add the like, and I'm going to make the footer fit the entire width of the screen.

Okay, after deleting margins and messing with articles... we're basically done! With my old code, I was basically taking away so it wasn't going to be at this long. Look at those PAGE BREAKS..!! YES!!

For total beginners... I honestly just think looking through templates or code is the way to go. Download random templates and just start deleting things or messing with the css file. I'm pretty much just deleting/editing this gallery template.

I don't go much into code here because honestly I'm deleting/trying different things in css. I have a basic understanding but I'm still guesstimating a lot of the time. Most of the time I am right! But I think playing around is the best way to learn. You get better digging through code, and you get to see people's mistakes...

And we have a nice box below for my author's notes(? i dunno what else to call it), the like button and a comment section!! Yippee!!

Now it's all prettifying css time... But before we do that... Let's move back to our desktop view....

Desktop

Uh oh.

Okay, we have things to fix. Tbh, you'll find yourself jumping back and forth between coding for desktop and mobile. But once you have a blueprint in place, you're pretty much working towards that. You're never really deleting everything from one side, just small tweaks until you get what you want!

It looks worse then it is. All I need is to either use articles or divs to make the images the right size and then change the main {display:} to block instead of flex. Might use a flexibox? There's too many options!

Future gg8473: I just used articles LOL

I think I changed my mind about using js... I think... This might be how I like it? I can just write how many pages in the header then for information...

LOL that's great, everything is in the right place when we switch from desktop to mobile, so now it's time to make everything look perfect.

I have some wallpapers/patterns saved from rawpixel. I resize them to 1080 x 1920 in clip studio paint and export as a webp.

You can check out the new comic page here! Not too bad for a days work.

I've got to make a favicon... I might change the colour palette in future, but I like it for now. It's set up exactly how I want for both mobile and desktop! Yippee!!

btw, and I'll add this to my copyright/faq page in future, but feel free to steal my code. It's not that good, and can be improved. But idc. Just link back to my site somewhere. (I may make a blog about having a copyright/faq page, esp for artists/gamedevs so then you can save yourself time by just linking to the page...)

Other website to dos

I'm thinking about adding a cw page for my site? IT'S ANNOYING TO HAVE TO THINK ABOUT. I have it on my landing page, but o)-( might have to add a "did you read this properly this site is for adults" to cover myself... Lads... this ain't it...

I wanna move to porkbun asap... but I have to wait for this other webhost to GET BACK 2 ME.... its been 3 weeks and they never answered me... I just made a simple mistake...

Validation thoughts

When I shared my blogpost about online validation, I got so many great pointers and conversations about it! It's such a current topic. It's just hard to exist as a human being online, don't you need the big numbers to prove it's all worth it...

It reminded me about another point I forgot to make. Engagement is the other buzzword! Why won't people Engage With My Products!! Girl!! Just say you want to talk!!! Conversation is a normal human need! I've been there. It can be embarrassing when you realise it's been 2 days and you haven't talked to another human being and you have to hit up your friends and pretend to act as normal as possible but it's killing you. I've felt that need to just TALK. It drives me crazy! The need for another human being does crazy things to us... I could talk about the death of third spaces... God, or the simple pleasure of sitting down over a cuppa and having the chats! But you both work 2 jobs. Or all your mates have left the country. It's tough!! The current climate is TOUGH...

The world

I feel as though we can't have one day's peace. I tend to keep to lighter topics on here, but wherever you are... Stay connected and take the time for yourself to rest. It's a very scary world out there, and online :(

--xoxo becky