mozilla / openbadges-badgekit

No Longer Maintained
https://badgekit.org
Mozilla Public License 2.0
124 stars 84 forks source link

Design a 500 page for badgekit.org #40

Open iamjessklein opened 10 years ago

ghost commented 10 years ago

@iamjessklein do we have copy or a link to mozilla's or firefox's 500 page that i can grab some text from?

threeqube commented 10 years ago

I think we can ask @SueSmith to draft something up.

SueSmith commented 10 years ago

Struggling to find an existing Mozilla one too.. How about keeping it simple (since it can be such a vague error):

"Whoops! Something went wrong on our server. Try refreshing the page. If that doesn't work, try again in a few minutes."

I'm not clear enough on the details of 500 errors, but this is similar to the GitHub one https://github.com/500

Also had a look here http://ux.stackexchange.com/questions/15955/how-to-create-a-useful-500-internal-server-error-page

Maybe it also needs an "if you've encountered this problem before.." bit and a contact link, but as with the 404 page I'm wondering about making it work equally well on self-hosted versions.. In the 500 case I'm guessing you would need to contact whoever is hosting BadgeKit (might be BadgeKit.org, might not be) so linking to GitHub wouldn't work..

threeqube commented 10 years ago

I would advocate for simple and general. Thanks @SueSmith!

ghost commented 10 years ago

Here's a thought for the 500 provide feedback/ bk 500-02 updated copy

ghost commented 10 years ago

Ha. I love that. :)

SueSmith commented 10 years ago

@adiladiladil For what it's worth I think that's magic! Haven't seen one anything like it (and it gets the point across).

xmatthewx commented 10 years ago

This is fantastic. Would be amazing to animate that and add sound.

andrewhayward commented 10 years ago

@xmatthewx animation is one thing, but sound?! :non-potable_water:

ghost commented 10 years ago

+1 animation

xmatthewx commented 10 years ago

@andrewhayward - sound effects and a soundtrack :water_buffalo: :watermelon:

threeqube commented 10 years ago

:+1: love this!

ghost commented 10 years ago

mobile and tablet versions bk 500 tablet-01-01-01 bk 500 mobile-01

iamjessklein commented 10 years ago

so i know I am going to sound like a debbie downer here, but I am reading this as "500 OPS" - can we try adding a second red "O" so it reads as "oops!"?

Also, feel like the "Try refreshing" copy should be left aligned.

ghost commented 10 years ago

Here's an update with that in mind let me know which one works and i'll update the mobile/tablet versions with text alignment as well bk 500-04 bk 500-03

ghost commented 10 years ago

bk 500-03

iamjessklein commented 10 years ago

I like the gradient version (the one below). bk 500-03

threeqube commented 10 years ago

I kinda like the color blending...

iamjessklein commented 10 years ago

like minds, @threeqube

threeqube commented 10 years ago

jinx!

ghost commented 10 years ago

Here are all 3 formats for that particular design bk 500 web-01-01-03 bk 500 tablet-01-01 bk 500 mobile-01

threeqube commented 10 years ago

@ZeeJab can we implement this?

ZeeJab commented 10 years ago

:+1:

threeqube commented 10 years ago

Thanks!