Nur Ein Site Redesign

There can be only one.
User avatar
grumpymike
Push Comes to Shove
Posts: 418
Joined: Sun Apr 17, 2016 3:12 pm
Instruments: Rage and curmudgeonry
Recording Method: Zero-turn lawnmower
Submitting as: Grumpy Mike

Nur Ein Site Redesign

Post by 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.
User avatar
Lunkhead
You're No Good
Posts: 8106
Joined: Sat Sep 25, 2004 12:14 pm
Instruments: many
Recording Method: cubase/mac/tascam4x4
Submitting as: Berkeley Social Scene, Merisan, Tiny Robots
Pronouns: he/him
Location: Berkeley, CA
Contact:

Re: Nur Ein Site Redesign

Post by 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. :P
User avatar
BoffoYux
Panama
Posts: 908
Joined: Tue Jan 11, 2011 9:22 pm
Instruments: Keys, Clunking, SFX and Strings
Recording Method: Audacity, Adobe, and other 'A' titled software
Submitting as: Boffo Yux Dudes
Location: New England
Contact:

Re: Nur Ein Site Redesign

Post by BoffoYux »

I like it!

One request - on the artist page, the group names aren’t linked to their songs pages.
User avatar
BoffoYux
Panama
Posts: 908
Joined: Tue Jan 11, 2011 9:22 pm
Instruments: Keys, Clunking, SFX and Strings
Recording Method: Audacity, Adobe, and other 'A' titled software
Submitting as: Boffo Yux Dudes
Location: New England
Contact:

Re: Nur Ein Site Redesign

Post by BoffoYux »

I like the color coded pie circle on the actual judges scores around the tally number. I missed that at first glance.
User avatar
Pigfarmer Jr
Jump
Posts: 2293
Joined: Sat Mar 21, 2009 6:13 am
Instruments: Guitar
Recording Method: Br-900CD and Reaper to mix
Submitting as: Pigfarmer Jr, Evil Grin, Pork Producer, Gilmore Lynette Tootle, T.C. Elliott
Pronouns: he/him
Location: Columbia, Missouri
Contact:

Re: Nur Ein Site Redesign

Post by 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....
Evil Grin bandcamp - Evil Grin spotify
T.C. Elliott bandcamp - T.C. Elliott spotify

"PigFramer: Guy and guitar OF MY NIGHTMARES." - Blue Lang
User avatar
grumpymike
Push Comes to Shove
Posts: 418
Joined: Sun Apr 17, 2016 3:12 pm
Instruments: Rage and curmudgeonry
Recording Method: Zero-turn lawnmower
Submitting as: Grumpy Mike

Re: Nur Ein Site Redesign

Post by 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.
User avatar
Pigfarmer Jr
Jump
Posts: 2293
Joined: Sat Mar 21, 2009 6:13 am
Instruments: Guitar
Recording Method: Br-900CD and Reaper to mix
Submitting as: Pigfarmer Jr, Evil Grin, Pork Producer, Gilmore Lynette Tootle, T.C. Elliott
Pronouns: he/him
Location: Columbia, Missouri
Contact:

Re: Nur Ein Site Redesign

Post by Pigfarmer Jr »

grumpymike wrote:
Sat Jul 06, 2019 7:33 pm
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*
Evil Grin bandcamp - Evil Grin spotify
T.C. Elliott bandcamp - T.C. Elliott spotify

"PigFramer: Guy and guitar OF MY NIGHTMARES." - Blue Lang
User avatar
thirdcatmusic
Somebody Get Me A Doctor
Posts: 214
Joined: Sun May 06, 2018 8:52 am
Submitting as: Third Cat
Pronouns: they/them
Location: US
Contact:

Re: Nur Ein Site Redesign

Post by thirdcatmusic »

looks sharp! :!:
User avatar
BoffoYux
Panama
Posts: 908
Joined: Tue Jan 11, 2011 9:22 pm
Instruments: Keys, Clunking, SFX and Strings
Recording Method: Audacity, Adobe, and other 'A' titled software
Submitting as: Boffo Yux Dudes
Location: New England
Contact:

Re: Nur Ein Site Redesign

Post by BoffoYux »

Another feature request - playback counter somewhere on the site? I know one next to the judges scores would be confusing.
User avatar
Geech
Somebody Get Me A Doctor
Posts: 133
Joined: Mon Mar 18, 2019 9:08 am
Instruments: Guitar, Vox, Drums, Keys, Bass, Handclaps
Submitting as: Geech Sorensen
Pronouns: he/him
Location: Berkeley, CA
Contact:

Re: Nur Ein Site Redesign

Post by 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.
/// --- geech.com --- ///
User avatar
Lunkhead
You're No Good
Posts: 8106
Joined: Sat Sep 25, 2004 12:14 pm
Instruments: many
Recording Method: cubase/mac/tascam4x4
Submitting as: Berkeley Social Scene, Merisan, Tiny Robots
Pronouns: he/him
Location: Berkeley, CA
Contact:

Re: Nur Ein Site Redesign

Post by Lunkhead »

+1 to all of those suggestions.
User avatar
grumpymike
Push Comes to Shove
Posts: 418
Joined: Sun Apr 17, 2016 3:12 pm
Instruments: Rage and curmudgeonry
Recording Method: Zero-turn lawnmower
Submitting as: Grumpy Mike

Re: Nur Ein Site Redesign

Post by 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.
User avatar
jast
Ice Cream Man
Posts: 1325
Joined: Tue Jul 29, 2008 7:03 pm
Instruments: Vocals, guitar
Recording Method: Cubase, Steinberg UR44
Submitting as: Jan Krueger
Pronouns: .
Location: near Aachen, Germany
Contact:

Re: Nur Ein Site Redesign

Post by 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.
User avatar
Lunkhead
You're No Good
Posts: 8106
Joined: Sat Sep 25, 2004 12:14 pm
Instruments: many
Recording Method: cubase/mac/tascam4x4
Submitting as: Berkeley Social Scene, Merisan, Tiny Robots
Pronouns: he/him
Location: Berkeley, CA
Contact:

Re: Nur Ein Site Redesign

Post by Lunkhead »

The real problem is anybody thinking that content scrolling under a frosted glass effect is required for "the best experience". :P
User avatar
grumpymike
Push Comes to Shove
Posts: 418
Joined: Sun Apr 17, 2016 3:12 pm
Instruments: Rage and curmudgeonry
Recording Method: Zero-turn lawnmower
Submitting as: Grumpy Mike

Re: Nur Ein Site Redesign

Post by grumpymike »

I need to print this thread and frame it to remind myself why it’s all worth it.
User avatar
Lunkhead
You're No Good
Posts: 8106
Joined: Sat Sep 25, 2004 12:14 pm
Instruments: many
Recording Method: cubase/mac/tascam4x4
Submitting as: Berkeley Social Scene, Merisan, Tiny Robots
Pronouns: he/him
Location: Berkeley, CA
Contact:

Re: Nur Ein Site Redesign

Post by 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.
:lol: :lol: :lol:
User avatar
jast
Ice Cream Man
Posts: 1325
Joined: Tue Jul 29, 2008 7:03 pm
Instruments: Vocals, guitar
Recording Method: Cubase, Steinberg UR44
Submitting as: Jan Krueger
Pronouns: .
Location: near Aachen, Germany
Contact:

Re: Nur Ein Site Redesign

Post by jast »

Competitors, eh? :)
User avatar
BoffoYux
Panama
Posts: 908
Joined: Tue Jan 11, 2011 9:22 pm
Instruments: Keys, Clunking, SFX and Strings
Recording Method: Audacity, Adobe, and other 'A' titled software
Submitting as: Boffo Yux Dudes
Location: New England
Contact:

Re: Nur Ein Site Redesign

Post by BoffoYux »

grumpymike wrote:
Sat Jul 06, 2019 7:33 pm
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.
User avatar
grumpymike
Push Comes to Shove
Posts: 418
Joined: Sun Apr 17, 2016 3:12 pm
Instruments: Rage and curmudgeonry
Recording Method: Zero-turn lawnmower
Submitting as: Grumpy Mike

Re: Nur Ein Site Redesign

Post by grumpymike »

That'd be awesome. Any help is much appreciated.
User avatar
BoffoYux
Panama
Posts: 908
Joined: Tue Jan 11, 2011 9:22 pm
Instruments: Keys, Clunking, SFX and Strings
Recording Method: Audacity, Adobe, and other 'A' titled software
Submitting as: Boffo Yux Dudes
Location: New England
Contact:

Re: Nur Ein Site Redesign

Post by 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
Panama
Posts: 974
Joined: Mon May 15, 2017 1:29 pm
Instruments: vox keys uke guitar
Recording Method: REAPER
Submitting as: Vowl Sounds, miscellaneous owl
Pronouns: she/her
Location: Madison, WI
Contact:

Re: Nur Ein Site Redesign

Post by 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)?
User avatar
iVeg
Mean Street
Posts: 531
Joined: Sun May 12, 2013 10:06 pm
Submitting as: inflatable vegetables

Re: Nur Ein Site Redesign

Post by iVeg »

Can we unpin the older threads?
facebook.com/ivegband
Post Reply