Nur Ein Site Redesign

[grumpymike]

I finally have a working product for the core use case - the "title" page.

See here.
Notable changes:
* easily navigate within a contest
* volume normalization
* seeking (lol)
* soundcloud-like UI
* responsive design with fun sticky headers/scroll-away-headers. Looks particularly good on iOS or Mac. Three general styles are handled - wide and tall, wide, and narrow.
* forum links (if they've been entered)
* ajax loading (so eventually the player won't stop when you navigate)

Please report issues you stumble upon.

[Lunkhead]

Looks really cool! I most of all appreciate being able to scrub within a track. That will make the first couple rounds next year a lot more bearable.

[BoffoYux]

I like it!

One request - on the artist page, the group names aren’t linked to their songs pages.

[BoffoYux]

I like the color coded pie circle on the actual judges scores around the tally number. I missed that at first glance.

[Pigfarmer Jr]

I believe I did a shadow for 3:20 for Nur Ein XIII and emailed it in. I see someone did a review of it, but I don't see it listed anywhere. Not that it was a good shadow, but....

[grumpymike]

Only shadows for this year are up. Anyone can be a data janitor, so if you organize all the shadows for a year and send me a zip, I’ll put them up.

[Pigfarmer Jr]

Only shadows for this year are up. Anyone can be a data janitor, so if you organize all the shadows for a year and send me a zip, I’ll put them up.

I put it on the to do list. Just behind "make a to do list." We'll see if I get around to it. *evil grin*

[thirdcatmusic]

looks sharp!

[BoffoYux]

Another feature request - playback counter somewhere on the site? I know one next to the judges scores would be confusing.

[Geech]

Been using this lately to re-acquaint myself with songs from this year's competition.

Overall, this is a nice upgrade. Some feedback:

o It is not clear how to play a track. Can you put a play button right next to the song in the list, like in SoundCloud?
o The site itself is very narrow, but the player in the footer takes up the entire browser width. This is a little weird.
o How about allowing the space bar to toggle play/pause?
o I don't think you're showing the actual mp3 art if it is available. Could you? And could you allow the user to get a big look at it somewhere? Maybe swap out what the standard art is for the mp3 art?
o Sorting should allow the user to select the sort. Right now the app selects. It’s not intuitive. It can take many clicks to change to where you want it go.

[Lunkhead]

+1 to all of those suggestions.

[grumpymike]

I went down a web performance rabbit hole because fluffy had a complaint about 'responsive design'. I don't know if this is the original reason for the complaint, but some techy people might find it fascinating.

Problem:
Chrome scrolling is slow, causing "unresponsive" UX artifacts. (Safari works as intended.)

Cause:
1. Chrome just added backdrop-filter support, which means my dormant backdrop-filter CSS is no longer dormant. This is the effect on Apple platforms when you scroll content underneath translucent bars.
2. Chrome's software renderer chugs on the blur effect. It could maybe do better using SIMD instructions, but that requires custom code paths for different CPUs.

Solution:
I've disabled the blur in non-Safari browsers for now. There's no way to determine whether Chrome has GPU rendering enabled and/or whether it's running on a device that can handle it. There are some hacks I could apply, but ultimately it's not worth it. (Interestingly, placing a transform on elements seems to force buffering or GPU).

TLDR: Use Safari for the best website experience.

[jast]

Or use a decent browser. You know, one that isn't Safari or Chrome. Or Edge. Or Opera. (Yes I mean lynx obviously)

The real problem, of course, is that the web as a platform is complete shit.

[Lunkhead]

The real problem is anybody thinking that content scrolling under a frosted glass effect is required for "the best experience".

[grumpymike]

I need to print this thread and frame it to remind myself why it’s all worth it.

[Lunkhead]

Not to derail the topic but I thought you'd appreciate this email that just showed up in the fightmaster inbox:

Not sure if you knew this but your website songfight.org has some problems that you might want to consider looking into. I spent 2-3 minutes looking around and found:

- It doesn't work properly on Mobile Phones, at all (which is how people browse the web these days).
- It doesn't adjust properly when you resize the screen (Google recommends RESPONSIVE Websites rather than ADAPTIVE)
- It's hard to read on larger displays
- The design looks really, really dated compared to some of your competitors.

I actually do web design as a living so I figured I'd reach out and let you know there's serious room for dead easy(and affordable) improvement. If you would like, I can send you some of my previous work samples.

[jast]

Competitors, eh?

[BoffoYux]

Only shadows for this year are up. Anyone can be a data janitor, so if you organize all the shadows for a year and send me a zip, I’ll put them up.

I’ll look through my archives. Most likely I have some that were played at the LPs that might not have a link in the threads.

[grumpymike]

That'd be awesome. Any help is much appreciated.

[BoffoYux]

I forgot about this - I think it's because the volume of Nur Ein 14 topics that are pinned makes anything newer stay below the fold. The LP topic is way down the list. That and my mind is a sieve these days.

Let me get on the old iMac and try and find any shadows for you that might not have fallen through the cracks. It's great to have them all in one place to listen to.

[owl]

A few suggestions:

• On mobile at least, the round zero entries all showed "null" till scores were posted; there might be a more graceful way to display that.
• Maybe we could add a description of the new shadow reinstatement rule
• Would be good to add a link to the Nur Ein forum thread (maybe also the lyrics thread)?

[iVeg]

Can we unpin the older threads?