Proposed 404 page

[konklone]

I've put together a fun 404 page -- maybe it is too fun, tell me what you think. The way Jekyll handles 404 pages is just straight HTML, no layouts or includes, so it's an extremely bare template with an inline <style> block for everything. The background is #18F.

Desktop:

Mobile:

What do people think? Will this fly?

[philipashlock]

👍 for anything more interesting than a standard 404.

In terms of basic usability and certainly in terms of accessibility, the blue on blue link text doesn't pass muster.

Also, for some precedent see https://my.usa.gov/404

[konklone]

Good call - how about red links, for some USA colors?

[quepol]

Definitely up for a fun 404 page. A few thoughts:

• not sure about "The U.S. was unable to satisfy your request."
• definitely appreciate the links back (will contact 18F link to /#contact?)
• let's nix the red links and stay within the color palette already set for the site
• we do need to make sure that text contrast is 508 compatible: http://webaim.org/resources/contrastchecker/

@jehlers - feel like giving this some love based on the brand extension work you've been doing?

[gboone]

I think if we can get the colors taken care of, and the copy, we can merge this. Maybe it should be a white background with black text and blue links but with a giant 404 image in the style of our logo at the top of the page.

What about: "We searched across the US to find that webpage and still came up empty. Sorry about that. You might try looking for it on our homepage, our blog, or contact us if you think there's been a mistake."

Too much?

Also, @philipashlock that's a wonderful 404 page.

[quepol]

I don't want to go down the path of turning our logo into other things. But I like the simplicity of everything else you just said, greg.

[jehlers]

This is looking good. I am also worried about color contrast as @quepol mentioned above.

If we want to keep the all blue page (it is a little reminiscent of the PC blue screen of death, which kinda works for a 404 page), I think the darker blue stripe you have should be white with black text. That way, we can keep our normal blue links, no contrast worries :)

Also, "We looked so hard for this page but couldn't find it" feels more like a header to me. Maybe it should go either at the top of the page, or just under the 404 since that message is what it is referring to, and the rest of the text is supporting that content.

[konklone]

Here's what it looks like with a white stripe for the text, with black text and blue links:

Here's a second pass at the text based on @gboone's ideas (I also ditched the footer):

Thoughts?

[jehlers]

@konklone I think that looks good. Only thing I would add is some generous spacing above and below the text (within the white box) and above/below the 404 to match the whitespace on the site. Something like this: (or without the "we looked so hard for..." header)

[quepol]

👍 and thx @jehlers

On Mon, Sep 29, 2014 at 3:01 PM, Jen E notifications@github.com wrote:

@konklone https://github.com/konklone I think that looks good. Only
thing I would add is some generous spacing above and below the text (within
the white box) and above/below the 404 to match the whitespace on the site.
Something like this: (or without the "we looked so hard for..." header)

[image: screen shot 2014-09-29 at 5 55 11 pm]
https://cloud.githubusercontent.com/assets/4267825/4450319/0f160ede-4824-11e4-97d5-7304ca433482.png

—
Reply to this email directly or view it on GitHub
#158 (comment).

[konklone]

@jehlers that looks good. Do you want me to try to replicate that in CSS, or did you already do that and want to commit it to this branch?

[jehlers]

@konklone It's in Illustrator... but I can send you the specifics tomorrow. I know the "We looked so hard for you" text is the H2 on the website, and "Try checking out..." is the accent text at the bottom of the page on the site (in the contact section).

[meiqimichelle]

@konklone @jehlers I got this :)

[meiqimichelle]

Heya! This is what it looks like full-screen at the moment. It also has some very basic responsive stuff, but I have not checked it on a Real Phone yet.

I left the site footer in for now. Is this what you want, @jehlers, or better to remove?

Oh, also, a note on font weight -- we are not loading all the weights on the site. The 404 here uses the lighter option. The heavier option seemed super hefty, and the one in your mockup, @jehlers , looks somewhere between them. I can switch to the hefty one if you like.

[gboone]

👍 👍 👍

[konklone]

@meiqimichelle You'll need to test this out at actual 404s, e.g. http://localhost:4000/sdjfhasljdhfa. With the change to use a Jekyll layout, this no longer works -- 404.html is handled specially and can't be rendered with Jekyll.

[konklone]

Oh but also, I'm being silly - this has to be handled at the nginx level on deployment anyway, the 404 handling is a property of the built-in Jekyll server. So, we can generate the 404 page however we want. This should work fine.

[konklone]

I updated nginx, works like a charm:

https://staging.18f.us/asdfajsdfhalksjhd

Going up onto production momentarily, along with some other updates.

[meiqimichelle]

@konklone thx for the background on 404, I did not actually know all that re: Jekyll and what works and doesn't. Glad that in the way we're deploying it works anyway though! Obviously will be much easier to maintain as part of the 'normal' Jekyll template flow.

I've been avoiding learning about nginx, looks like I may need to get there ;) Thx all!

[jehlers]

@meiqimichelle B-E-A-U-tiful!! Thanks for your help!