Improve 404 page design, fix #11370 #11566
Conversation
jancborchardt
added
enhancement
design
jancborchardt
requested review from
MorrisJobke,
kevgathuku,
pixelipo and
skjnldsv
weeman1337
left a comment
weeman1337
left a comment
There was a problem hiding this comment.
Even it looks very good at first glance, I'm unhappy with this guy:
It's an emoji - that means we don't really know how will be presented to the user.
For example Chrome on my machine shows this beautiful one:
We could include an image for that or choose another design..
|
This is how it looks in the Edge browser: Invisible guy on Chrome on the Galaxy S9: and so on... |
core/templates/404.php
Outdated
| <p class="hint"><a href="<?php p(\OC::$server->getURLGenerator()->linkTo('', 'index.php')) ?>"><?php p($l->t('You can click here to return to %s.', array($theme->getName()))); ?></a></p> | ||
| <li class="update"> | ||
| <h2><?php p($l->t('File not found')); ?></h2> | ||
| <div class="notfound-icon">🤔</div> |
There was a problem hiding this comment.
Unfortunately you cannot assume the system have a Unicode emoji font installed :/
We need svg for that.
On a side note I feel like we're losing our pro looking vibe and are migrating towards a funky product. I'm not really sure about this. 😕
There was a problem hiding this comment.
Maybe we should use a smiley with a suit instead? ;)
There was a problem hiding this comment.
Ah, @enoch85 good that you're here! :)
Since you're in between, you saw nextcloud as a community project but also use it fot a professional use (you still do online provider, right?) How do you see the line between pro/funky?
I'm curious!
There was a problem hiding this comment.
I guess we need something more predictable in there instead of a random or no emoji.
There was a problem hiding this comment.
Using the emoji was also mostly a joke. 😉 I will see if one of the nice illustrations @Espina2 did which fits. 🙂
There was a problem hiding this comment.
@skjnldsv I'm always around, you just don't see me engaging that often :)
you still do online provider, right?
I do the VMs, and have a few clients on my servers, but I mostly do support for different enterprises and have seen Nextcloud being used in maaany different systems/enviroments.
How do you see the line between pro/funky?
I'm not 100% sure what you mean, do you mean design wise or something else?
I think you guys do a great job with the design either way. Using smileys isn't that "pro-ish" though. But as @jancborchardt said:
Using the emoji was also mostly a joke.
:)
Maybe a regular 404 with some nice design is more pro-ish?
There was a problem hiding this comment.
Yes, I was talking about the design part :)
MorrisJobke
added
2. developing
core/css/guest.css
Outdated
|
|
||
| /* 404 page */ | ||
|
|
||
| .notfound-icon { |
There was a problem hiding this comment.
shouldn't it be .icon-notfound? That's the standard approach to naming icon classes in NC
jancborchardt
force-pushed
the
404-design
branch
from
bcbc600 to
d3a8799
Compare
|
Updated, now we’re serious 🤨 😂 (amended, so |
jancborchardt
dismissed stale reviews from skjnldsv and weeman1337
Fixed for the "professionals" ;)
jancborchardt
added
3. to review
Signed-off-by: Jan-Christoph Borchardt <hey@jancborchardt.net>
MorrisJobke
force-pushed
the
404-design
branch
from
d3a8799 to
f393cc0
Compare
MorrisJobke
added
4. to release
|
Thanks @jancborchardt! |
Fix #11370, please review @nextcloud/designers @addaitrs
When #11557 is merged this will look even better (proper spacing and button padding).
Before:
After: