What features do you add to make your website more interactive?

[rolypolyphonic]

I'm sure we're all aware of the common features of a personal website like about pages, blogs, guestbooks, etc. but I'm curious about the little things people do to give their website a little more flair and, more importantly, to give the visitors something to do! Good content is always the best part but there's something endearing in having a few gimmicks here and there.

Here are some things I have on my website:

• Custom themes based on my characters, some with their own 'gimmick' (eg if you use the theme for the prophet characters, there's a random fortune generator; the musician character changes the playlist of the website music player to original music)
• Interactive pagedolls that sing (complete with stage lights), play games and also explode
• A 'clap' counter for my guestbook
• A 'Code Input' where visitors can input codes they find throughout the website to find hidden links, illustrations, etc.
• An interactive terminal

I have a lot more planned that are integrated into the webcomic of my website itself, but I like thinking of other more minor things I can add over time, maybe I'll get inspiration from the ideas people share here. 

[Dan Q]

My website used to be fun and weird. Nowadays it's boring and dry. I'm working on a redesign to kickstart improvement of that, though, but I probably shan't be able to launch it before Christmas or thereabouts (it's taking a while).

Today: The Sadness

Right now, interactive things include:

• Comments
• Reactions ("click an emoji to respond", on some pages)
• A few April Fools pranks (you get assigned one randomly if you visit my site on 1 April, but you can manually engage one at any time: I quite like "1999 mode", which changes my site design to approximate how it looked in 1999 - screenshot below)

Aaand... that's about it! Boo! That's no fun!

Coming Soon: The Hotness

So yeah, I'm working on a redesign that'll aim to re-engage with my love of the web being fun and frivolous. I might have to drop some of the April Fools gags for compatibility reasons, but I'm looking to add:

• A guestbook (I can't believe I don't have one!)
• More posts on which you can draw comments (last year I came up with a way to make my blog accept drawn comments and see them animated back, somewhat inspired by games like Drawful: I want to make that feature slightly more-widely available!)
• Sticker sheets that you can "find" on pages; if you find one, you can "stick" the stickers onto other posts and pages (you can see a non-interactive experiment in what they'll look like down the sides of this page)
• An expanded ability for me to "override" my theme on individual pages, which right now is a limiting factor in me adding in-page interactives (slows me down a lot!)
• "Danaboos": I've been teaching myself enough Inkscape to make animated SVG caricatures of myself, my dog, etc.; and because they're SVGs I can use CSS variables to style them, which means I can add a "Dress-Up" menu that lets visitors change how I look where I appear around the site (demo below)

So yeah, the tl;dr: is that I don't have remotely as much interactive stuff on my site as I'd like, but I'm looking to change that over the next couple of months![/list]

[hikatamika]

• "Danaboos": I've been teaching myself enough Inkscape to make animated SVG caricatures of myself, my dog, etc.; and because they're SVGs I can use CSS variables to style them, which means I can add a "Dress-Up" menu that lets visitors change how I look where I appear around the site (demo below)

That Dress Up is wickeddd 


Right now I struggle between "I could add more interaction to my site" and, like, "this specific mode of interaction I'm thinking of, can cause me to metricate my site, or, compare the performance of one post/piece on the site to other posts/pieces". (It's just a bad habit on my part, tbh.) So I find myself holding back a lot from adding interactive elements.

Right now I just have a home-page hit counter I see as a mileage thing, a guestbook, and a link to my (somewhat-redundant?) WaveBox. A Japanese service that combines an ask box with emoji reaction features.

One thing I've added to my to-do list are little JavaScript Shimeji like things? Kinda like, on the bottom of the JoelG shop? It'd be cool to have an OC of mine wander around the bottom of the screen. I could make their opacity decrease when hovered over, in case they're in the way of some text, or something. 💭`

[Dan Q]

That Dress Up is wickeddd 

It's probably something that, like, I'm the only person in the world that cares about, but...

...the dressing up thing? 100% CSS, no JS. The drop-down menu is a carefully-styled <details>/<summary> block. The images are SVGs with CSS variables in them. The menu options are plain old HTML <input type="checkbox">es and <label>s with some CSS magic. And the interaction that makes the hair/clothes change? That's CSS that looks like this:

Code

:root:has(#dan-tshirt-color-white:checked)  { --dan-tshirt: #c3d4d7; }
:root:has(#dan-tshirt-color-purple:checked) { --dan-tshirt: #7429a8; }
:root:has(#dan-tshirt-color-red:checked)    { --dan-tshirt: #d02828; }
:root:has(#dan-tshirt-color-green:checked)  { --dan-tshirt: #2dd028; }
:root:has(#dan-tshirt-color-blue:checked)   { --dan-tshirt: #2862d0; }
:root:has(#dan-tshirt-color-pink:checked)   { --dan-tshirt: #ee4fd5; }

:root:has(#dan-hair-color-natural:checked)  {   --dan-hair: #896a51; }
:root:has(#dan-hair-color-blue:checked)     {   --dan-hair: #3b6f8f; }
:root:has(#dan-hair-color-black:checked)    {   --dan-hair: #24170d; }
:root:has(#dan-hair-color-platinum:checked) {   --dan-hair: #ffffff; }
:root:has(#dan-hair-color-pink:checked)     {   --dan-hair: #ff00cb; }
:root:has(#dan-hair-color-lime:checked)     {   --dan-hair: #60c851; }
:root:has(#dan-hair-color-pride:checked)    {   --dan-hair: url(#pride-rainbow-lg); --logo-text-light: url(#pride-rainbow-lg); }

:root:has(#dan-dye-beard-toggle:checked)    {  --dan-beard: var(--dan-hair); }

What that code is doing is saying "where the document contains a checked checkbox of ID #dan-tshirt-color-white, set the variable --dan-tshirt: #c3d4d7;" And so on.

That bottom line just copies hair colour to beard colour if the "dye beard" checkbox is checked.

100% CSS solution, which means it's resilient and high-performance. Plus it's super elegant code too, right?

(I've added some JS to save your choices to localStorage, but the whole thing "works" without it. I'm way too proud of it.)

[rolypolyphonic]

• "Dress-Up" menu that lets visitors change how I look where I appear around the site (demo below)

Waouh, good luck with adding all those features to your website! The dress-up feature in particular sounds really good. I've been working on a dress-up game of my own for my website but it's definitely time-consuming on my end because I have a minimum of six main characters I'd need to do it for (around thirteen or so if I decide to include side characters too). Using SVG's to customise the colours without needing to manually recolour them sounds really useful

Right now I struggle between "I could add more interaction to my site" and, like, "this specific mode of interaction I'm thinking of, can cause me to metricate my site, or, compare the performance of one post/piece on the site to other posts/pieces".

That makes sense, you could definitely still experiment with features that don't really record any metrics so you wouldn't have to check it. My website's interactive pagedolls don't really 'measure' anything, they just have pre-programmed interactions like singing or displaying a random quote/trivia from an array for users to play with without me knowing whether they did or not.

One thing I've added to my to-do list are little JavaScript Shimeji like things?

The shimeji sounds like a really cute idea, and very nostalgic too. I've considered doing something like that myself but so far haven't had a lot of time to work on the art for it. I'm not particularly fond of animating so even if the walk cycle's only three frames, just knowing I'd have to animate it demotivates me from even starting. 

[postponed0x00]

It's probably something that, like, I'm the only person in the world that cares about, but...

...the dressing up thing? 100% CSS, no JS. The drop-down menu is a carefully-styled <details>/<summary> block. The images are SVGs with CSS variables in them. The menu options are plain old HTML <input type="checkbox">es and <label>s with some CSS magic. And the interaction that makes the hair/clothes change? That's CSS that looks like this:

You are def not the only person in the world who cares about using CSS in this way. It looks so sick on your website! I used the same trick to make a sliding drawer open and close for a guestbook on my site with an HTML checkbox and some CSS magic. https://postponed0x00.gay

Source code in the spoiler

Spoiler

.dilogueBox{
   margin:10px;
   border: 2px solid var(--fontLightYellow);
   background-color: var(--bgDarkBlack);
   height: var(--dbMin-height);
   corner-shape: bevel;
   border-radius: 10px 0 10px 0;

}
.dilogueBox:has(#dbMin:not(:checked)){
   animation-name: appearFromLine;
   animation-duration: .2s;
   animation-iteration-count: 1;
   animation-timing-function: ease-in;
   --dbMin-scale: 1;
   --dbMin-height: 400px;
   --gbMax-height: 350px;
}
.dilogueBox:has(#dbMin:checked){
   animation-name: disappearToLine;
   animation-duration: .2s;
   animation-iteration-count: 1;
   animation-timing-function: ease-out;
   --dbMin-scale: 0;
   --dbMin-height: 34px;
   --gbMax-height: 0px;
}
.dilogueBox .bar{
   background-color: var(--bgLightBlack);
   margin: 0px auto;
   padding: 2px 10px;
   border: 1px solid var(--fontLightYellow);
   corner-shape: bevel;
   border-top-left-radius: 8px;
   font-weight: bold;

}
.dilogueBox .bar p{
   justify-self: center;
   margin: 0px;
}
.dilogueBox .body{
   padding: 5px;
   max-width: 800px;
   margin:auto;
   height: var(--gbMax-height);
   /*scale: 1 var(--dbMin-scale)*/;
}
@keyframes appearFromLine {
   from {--dbMin-scale: 0;--dbMin-height: 34px;--gbMax-height: 0px;}
   to {--dbMin-scale: 1;--dbMin-height: 400px;--gbMax-height: 350px;}
}
@keyframes disappearToLine {
   from {--dbMin-scale: 1;--dbMin-height: 400px;--gbMax-height: 350px;}
   to {--dbMin-scale: 0;--dbMin-height: 34px;--gbMax-height: 0px;}
}
@property --dbMin-scale{
   syntax:"<number>";
   initial-value: 1;
   inherits: true;
}
@property --dbMin-height{
   syntax:"<length>";
   initial-value: 34px;
   inherits: true;
}

[close]

I was so excited coming back to making a website when I learned you could make little CSS-only state machines like this. I think it has a ton of potential for interactivity and doing it in a way that doesn't require JS at all feels like magic to me

[Monoki]

I’m actually working on redoing my whole website again. So far it’s on hiatus mode because of it.

The previous iterations had some animations and things like that. The landing had a modal that popped up, both as a way to warn of it not being very mobile friendly and as a way of allowing music to play on the landing.

My reason for wanting to change my site goes a little like this:

There was one or two websites that I’ve come across that function a lot like old point and click games, as well as a couple that were like text-adventure games.

I like the idea of the website being like an interactive world/game, rather than just a purely informational one. So I kinda want to go in a similar direction with my own site. I’ve tried a few things like that, say here and here for example.

Thing is I’m not sure where to begin yet.

[star dreams]

I learnt about jqeury draggable once and never looked back, a lot of elements on my page are draggable! It ranges from the more benign dragging my touys and stickers, but for my 2024 reflections page I made it such that dragging the correct tools to their respective sylvanians changes the image

Only other thing that comes to mind at the moment is a valentine's letter writing page, using dropdown menus to customise a letter to me, and of course draggable stickers to decorate

[rolypolyphonic]

I learnt about jqeury draggable once and never looked back, a lot of elements on my page are draggable!

Waouh, those pages you linked are very cute! I've been meaning to use draggable elements myself for a dress-up game but I haven't finished drawing the actual graphics for it. It's such a fun feature

I also saw the ant farm on your website, it is very cute.

[Dan Q]

Only other thing that comes to mind at the moment is a valentine's letter writing page, using dropdown menus to customise a letter to me, and of course draggable stickers to decorate

Those stickers rock! That's the kind of vibe I'm aiming for with the stickers in my blog redesign; I'm just trying to perfect the storage of them (so that if you drag a sticker somewhere, it's still there the next time you visit the page. Maybe it can yellow over time and eventually fall off, I don't know). One challenge is that I'm trying to reliably identify which piece of content a user sticks a sticker to... so if they e.g. stick it to the summary/excerpt of a blog post, it'll still appear on that summary/excerpt even if that summary/excerpt is found on a different page (e.g. because it's been bumped from the front page, or because it turns up on a category listing page, or something). It's proving to be a bit of a challenge, but I'm willing slowly.

Also: your Valentines' letter concept is just generally fabulous. I might make take inspiration from that and make a "mad libs" mode for my (future) guestbook!

[pepper]

This thread inspired me. I found Nightfall City the other day and I've been trying to figure out something I can do with it, because I love weird little esoteric things like that. I added a little easter egg on my homepage that takes you to my spot on the shore in nightfall city, and made a simple little intro to an in-universe little short story I'll write on nex. Two birds with one stone: I can learn nex/ gemini, and I can tell a story for my fiction! 

[PossiblyAxolotl]

Currently I'm rebuilding my website, but I do have a few little buttons and things around that go to secret pages :)

There's a guestbook hidden on a secret page, as well as a few images and things around that go to different places, but I wanna put more on my site in the future.

I used to also have a game on my 404 page, maybe I can try adding something there again too :3