Nur Ein Site Redesign

There can be only one.
Post Reply
User avatar
grumpymike
Marmoset
Posts: 226
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 » Mon Jul 01, 2019 1:34 pm

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
Gorilla
Posts: 6241
Joined: Sat Sep 25, 2004 12:14 pm
Instruments: many
Recording Method: cubase/reason/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 » Mon Jul 01, 2019 5:02 pm

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
Tamarin
Posts: 451
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 » Sat Jul 06, 2019 9:17 am

I like it!

One request - on the artist page, the group names aren’t linked to their songs pages.
User avatar
BoffoYux
Tamarin
Posts: 451
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 » Sat Jul 06, 2019 9:21 am

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
Galago
Posts: 871
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
Location: CoMo
Contact:

Re: Nur Ein Site Redesign

Post by Pigfarmer Jr » Sat Jul 06, 2019 3:05 pm

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 has an album: https://evilgrin.bandcamp.com/
Spotify: https://open.spotify.com/album/1Dcqs6LhwsoYS6EDGPhCCk

My solo Album: http://tcelliott.bandcamp.com/

Ad astra per alia porci - Steinbeck
(To the stars on the wings of a pig.)
User avatar
grumpymike
Marmoset
Posts: 226
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 » 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.
User avatar
Pigfarmer Jr
Galago
Posts: 871
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
Location: CoMo
Contact:

Re: Nur Ein Site Redesign

Post by Pigfarmer Jr » Sat Jul 06, 2019 7:36 pm

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 has an album: https://evilgrin.bandcamp.com/
Spotify: https://open.spotify.com/album/1Dcqs6LhwsoYS6EDGPhCCk

My solo Album: http://tcelliott.bandcamp.com/

Ad astra per alia porci - Steinbeck
(To the stars on the wings of a pig.)
User avatar
thirdcatmusic
Tarsier
Posts: 99
Joined: Sun May 06, 2018 8:52 am
Submitting as: Third Cat
Location: US

Re: Nur Ein Site Redesign

Post by thirdcatmusic » Mon Jul 08, 2019 10:20 am

looks sharp! :!:
User avatar
BoffoYux
Tamarin
Posts: 451
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 » Sat Jul 13, 2019 6:50 am

Another feature request - playback counter somewhere on the site? I know one next to the judges scores would be confusing.
User avatar
Geech
Tarsier
Posts: 28
Joined: Mon Mar 18, 2019 9:08 am
Instruments: Guitar, Vox, Drums, Keys, Handclaps
Submitting as: Geech Sorensen
Location: Berkeley, CA

Re: Nur Ein Site Redesign

Post by Geech » Mon Jul 15, 2019 8:51 am

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
Gorilla
Posts: 6241
Joined: Sat Sep 25, 2004 12:14 pm
Instruments: many
Recording Method: cubase/reason/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 » Mon Jul 15, 2019 1:10 pm

+1 to all of those suggestions.
User avatar
grumpymike
Marmoset
Posts: 226
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 » Mon Aug 12, 2019 11:16 am

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
Loris
Posts: 1217
Joined: Tue Jul 29, 2008 7:03 pm
Instruments: Vocals, guitar
Recording Method: REAPER, Steinberg UR44
Submitting as: Jan Krueger
Location: near Aachen, Germany
Contact:

Re: Nur Ein Site Redesign

Post by jast » Mon Aug 12, 2019 2:48 pm

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.
most of my music
Song Fight-related stuff I host: ZIP archives // Circle of Titles
Lunkhead
Gorilla
Posts: 6241
Joined: Sat Sep 25, 2004 12:14 pm
Instruments: many
Recording Method: cubase/reason/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 » Mon Aug 12, 2019 3:03 pm

The real problem is anybody thinking that content scrolling under a frosted glass effect is required for "the best experience". :P
User avatar
grumpymike
Marmoset
Posts: 226
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 » Mon Aug 12, 2019 3:53 pm

I need to print this thread and frame it to remind myself why it’s all worth it.
Lunkhead
Gorilla
Posts: 6241
Joined: Sat Sep 25, 2004 12:14 pm
Instruments: many
Recording Method: cubase/reason/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 » Tue Aug 13, 2019 8:13 am

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
Loris
Posts: 1217
Joined: Tue Jul 29, 2008 7:03 pm
Instruments: Vocals, guitar
Recording Method: REAPER, Steinberg UR44
Submitting as: Jan Krueger
Location: near Aachen, Germany
Contact:

Re: Nur Ein Site Redesign

Post by jast » Tue Aug 13, 2019 3:08 pm

Competitors, eh? :)
most of my music
Song Fight-related stuff I host: ZIP archives // Circle of Titles
User avatar
BoffoYux
Tamarin
Posts: 451
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 » Fri Aug 16, 2019 6:36 am

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
Marmoset
Posts: 226
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 » Fri Aug 16, 2019 10:09 am

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