In general it dawned on me that cursors seem like very much a missed opportunity in terms of building the aesthetic of a website. I can’t help but feel that there’s so many possibilities with them, yet they’re so easily overlooked.
Are there any interesting cursor designs you’ve seen that stick out to you? Or maybe new use cases for different kinds of designs? You can have new kinds of cursors beyond what the system gives you, and I feel that’s just waiting to be taken advantage of in the realm of web design.
For instance, here are some custom cursors I just recently added (they’re not live yet):
To add custom cursors you can simply have a PNG image that’s 32x32, 64x64 or 128x128, then add cursor: url("/path/to/cursor.png") for your CSS. I do a little bit more than that for my website because there’s some issues with some devices:
Fun fact: you can also specify the hotspot of the cursor. So if your cursor needs to be offset by, let’s say, 1 pixel horizontally and 2 pixels vertically, you do this:
On my website, I use Lapin’s cow cursor as the primary pointer. She recolored a Harvest Moon cow sprite to be pink, and I’m obsessed with it. The click pointer was something I found on pixel soup, and it works well with the cow.
For my Animal Crossing shrine, I use the City Folk cursor! It works well and it’s super cute. ^__^
Fun fact: you can also specify the hotspot of the cursor.
@npw I had no idea this was possible. It has opened doors for me. Thanks for sharing!
I like using a cursor which changes to indicate to a visitor that a space is differently interactive.
(it’s far easier to code and less ‘flashy’ than techniques you see on the mainstream web like an animation)
At the thrift shop, I use the grab/grabbing cursors, as well as a key when you hover over the clock (does a key mean there’s something to unlock…?) - and on the signpost to other locations and towns, some luggage because you’re travelling.
I actually like the default simplicity of grab/grabbing, they’re just so evocative. I put one of them on my Moria gate because it looks like a hand about to knock.
Aside from this, I’m a fan of a fairly clear text-based interface, so I find using the default cursors are satisfying in the same way I find a good serif font and well-chosen bullet point satisfying.
(my one big css wish is that details & also iirc button would have cursor:pointer by default, it’s needlessly annoying to add it every time)
Unsolicited 2 cents: I prefer not to change the pointer to anything unexpected. It’s not quite as bad as changing the default scroll behaviour of pages but I’m always afraid that it’ll encumber the experience of users who depend more than I do on their pointer looking the expected way, whether that’s an eyesight thing or a mental thing. Anyone can always disable custom pointers as a browser setting of course - but I’d rather no one has to do that to engage with my site.
I agree with @rmf. I have no problem with other people doing custom cursors through CSS, but using them kinda goes against my own personal website’s aesthetic, which is to adapt to the visitor’s setup whenever feasible instead of imposing on them.
Understandable, it’s definitely something you have to be careful with. My personal rule is to not change the underlying shape or gesture, just change the execution of that shape.
Completely fair as well! It’s like how some people believe only in using CSS default fonts rather than anything custom.
My personal guiding principle behind the style of my website is that I don’t style by adding decorations (except adding images), I only style by changing what’s already necessary to display the info and navigate my website. So I personally found that styling the cursor helped reinforce my website’s aesthetic but still retaining its minimalistic, straightforward appearance. Similar reason why I use a custom font (since you already need a font to set text anyway).
It’s an interesting question: where’s the balance between accessibility and experimentation? We want our websites to be usable, but also to try stuff out and be creative. Plenty of works of art aren’t accessible to everyone, but that doesn’t make them bad - a painting is not usable to someone who can’t see, music isn’t usable to someone who can’t hear. Where do personal websites fall on the scale between art and use objects?
Anyway, sorry, don’t mean to derail your thread! Here’s a Win95/98 cursor pack that I may or may not use on my Arch installation:
.cur files are compatible with desktop browsers so they can be plugged right into your stylesheet.
I’ve thought about this in the past, & I think the answer is: it depends on the website.
Any website that exists to convey information must be accessible if at all possible (the more important the information, the more essential accessibility is).
But I think it’s important to challenge what the web ‘is’ or ‘is for’. A web browser is not a door through which you visit facebook, a web browser is a program with many potential purposes, including as a game engine or a site-specific art medium. In that sense, if you are creating an artwork to be a certain way or have certain goals, then it might not be for everyone & I think the rules can be different.
(Although i don;'t think anyone should ever blanket assume that an art-installation-as-website with inaccessible qualities can’t be made more accessible - producing an two versions, for example, or talking with more experienced coders to find out if you can widen access without compromising the vision)
I definitely agree that it depends on what the site is for. But accessibility aside, I think there’s something to be said about unexpected behaviour even on a website-as-art. It can be part of the experience if the artist thought of it and anticipated it (and a lot of sites are built with purposefully unintuitive navigation or features for this reason), but otherwise it could work against the artist’s goals.
E.G, when visiting your thrift store page for the first time, before I hover over anything I assume that these are are links to other pages, which most are. But when I hover over to the album art item, I see the grabby-hand and assume I can drag the album somewhere (I was looking for a record player to drop it onto or something ), but instead it’s another link and dragging didn’t do anything so I had to click on it again to navigate to the mixcloud page.
That’s not me saying that’s a bad surprise or anything, just that it might not be how you intended for me to experience the page so it felt like a good example to use.
personal websites are more art than use object. in my opinion. though i may be biased.
my website for an example, is written manly in html4 to ensure compability with netscape and old(er) IE browsers. i don’t even force https, you can, in fact visit over http, too. the trade-off is that it doesn’t look that great on mobile phones, although it’s still readable. this may or may not change for both better or for the worse in the future as i see it fit. personal web should be manly focused on what YOU like first. not saying accessibility is bad, but it can be a limiting factor.
FYI, I’ve tested my HTML5-based website NCSA Mosaic (even older than Netscape or IE), and the only real hurdle was that Mosiac doesn’t support Unicode. If a browser hasn’t implemented a HTML element or CSS feature, they’ll just ignore it. You don’t have to limit yourself to HTML 4 or even HTML 3.2 to support old browsers.
), but instead it’s another link and dragging didn’t do anything so I had to click on it again to navigate to the mixcloud page.