Better design for the 404 page

[mmmavis]

Please help make this 404 page better 😉

Some context:

MozFest wasn't serving real 404 page before (by "real" I mean http status 404). When users hit a random route all they got was a blank page with nothing on it (http status 200). This is because the site didn't have server side rendering working and routes were handled client-side. I got server side rendering working yesterday and got a slightly better 404 page up. Design is obvious not good but at least it is better than a blank white page. 😂 Let's give it some design love.

/cc @sabrinang

[edrushka]

I'll add this to the site update project brief.

[sabrinang]

Note: I'll be referencing the foundation site 404 page that we updated last year: MozillaFoundation/foundation.mozilla.org#143 (comment)

[sabrinang]

I have some mockup options for this 404 page.

We can either make the banner text more obvious with a heading and 404 graphic in the body:

or make it similar to the foundation site with a narrow nav with text on the left and image on the right (keeping the styling of the existing mozilla festival site):

@edrushka @mmmavis any feedback or preferences?

[mmmavis]

@sabrinang I prefer the one that shares the same style as Foundation site's 404 page.

[sabrinang]

The 404 graphic is exported as an .svg here: https://drive.google.com/open?id=1OpfN3isH6eV7oGAhip-QCiRpeKP10d8v

@mmmavis Good to hear you prefer the version that aligns with the foundation site as well. The image and content would be higher up on the page as well 👍

[sabrinang]

@edrushka Does this design look good to you as well? If so we can close this and file a separate implementation ticket (I don't know if there is one already)

[edrushka]

Go ahead and close - I'll link to the dev ticket. Thanks!