Page MenuHome

Blender Manual 404 page redesign
Closed, ResolvedPublic

Description

The current design of the Blender Manual 404 page could be drastically improved.

No need for ASCII art for example. Please consider designing something along the lines of the existing rtd theme, or base it on the blender.org 404 page (and consider improving that in the process).

Heads up: this topic is linked to a broader design task, which touches on the overall design of the manual.

Details

Type
Design

Related Objects

Event Timeline

The 404 page needs to be self contained, and to avoid broken links, absolute paths aren't an option.

We are talking about design here. Links are not relevant at this point of the discussion. I would like to see a design with good layout and typography first. Are you available to do it @Tobias Heinke (TobiasH) ?

Done some edits (random 404).
The links are important, since with a complex design and no external css, svg, js the page quickly turns into a maze.

I see your updates.
Just a heads up that as soon as I get a moment I'll update that page myself, so you can get a better idea of what I mean.

This is an improved design. Thanks @Yevgeny Makarov (jenkm)!
Do you need any help getting it committed?

@Francesco Siddi (fsiddi) What? commit it directly >:(
Please don't commit commit it - thx.

The blue vertical bar is a new design element only used on this side,
same as the horizontal line used for the header, and almost any other element.
That's important for the design to be coherent and recognizable.
It doesn't works well on widescreens when it stays static on the left.
There is no need to apologize in the text and it's too long.
"Blender Manual" is missing, so it can be confused with the blender.org's 404 page.
As stated in a comment above we should avoid loading external resources - no google font.
You removed the buttons and there functionality?

Do you need any help getting it committed?

Need someone to check JS script before.

The blue vertical bar is a new design element only used on this side,
same as the horizontal line used for the header, and almost any other element.
That's important for the design to be coherent and recognizable.

That is why they exist, they refer to the current docs design.
It's not an exact copy but a connection by color and location.

It doesn't works well on widescreens when it stays static on the left.

Like the current docs design is left-aligned.

"Blender Manual" is missing, so it can be confused with the blender.org's 404 page.

You are right, but it's not a big problem, the manual is part of blender.org website.

As stated in a comment above we should avoid loading external resources - no google font.

Don't see any problem with that, it's a tiny file and probably already cached.
Look at blender.org's 404 page.

You removed the buttons and there functionality?

If you want a link on parent index page, this should be a link not a button,
and should be user friendly text instead of just "Index". It can be added to the links.
And "Insert the page name into the search field" - this is done by default when the page loads.

It should match the theme as close as possible. The combination of e.g. color, shape, placement matters too.

Like the current docs design is left-aligned.

Yeah, but it has the sidebar as a margin.

[...] it's not a big problem, the manual is part of blender.org website.

No, it matters because it only links to the manual (except the icon).

Don't see any problem with that, it's a tiny file and probably already cached.

Performance is not the issue, it's that externals can be changed and it breaks.
Maintenance demands should be as low as possible.
Yes, there could be a better font but these should be "web safe" like Verdana.

Proof that externals are bad, compare:
openstack1 , openstack2

If you want a link on parent index page, this should be a link not a button,

The theme uses buttons for navigation on pages.

and should be user friendly text instead of just "Index". It can be added to the links.

I was aware of that and I'm glad that you will come up with better names.

And "Insert the page name into the search field" - this is done by default when the page loads.

The user has to have these options:
When searching for both the page name and hash at the same time will yield bad or no results.

The insert buttons and navigation ones should be separated
but to be honest that had/has low priority on my todo-list.

And 404 is a place for fun:
bloomberg
openstack (cat smiley with heart eyes)

I have a solution to this that I can implement soon. Just having enough time right now is hard.

@venomgfx and me have addressed some of the issue with the proposed solution. The original reason why this task was created is because of concerns about the overall design (both the layout and ASCII art).

The current proposal improves both aspects, so I strongly advise to adopt it.


The current design with the ASCII art is just out of place when compared to any other blender website, including the docs site itself.

The current proposal improves both aspects, so I strongly advise to adopt it.

We can definitely do a better and more fun page than the one in this proposal, but this tackles the design issue and follows the style of the docs.

+1 to replace this as soon as possible to then continue working on a more crafted design.

@Aaron Carlisle (Blendify) now I'm curious something with template :)

This is a reference to ASCII art widely used on 404 pages in the late 90'th of nineteenth century and
following early noughties. It should be viewed as an homage to this early days of the Internet
expressing the belonging of me, the artist, and the whole CG community to a certain subculture.

The current design with the ASCII art is just out of place when compared to any other blender website, including the docs site itself.

*sign ◔_◔ and not true BAM
¯\_(ツ)_/¯ the manual has its own theme. "Artistic freedom starts with Blender"!

[...] this tackles the design issue and follows the style of the docs.

No, it doesn't.

[...] soon as possible to then continue working on a more crafted design.

This has been online for half a year. Guess what's not gonna happen... ಠ_ಠ

I'm happy you two care about the manual (◕‿◕), even so it's just that minor issue.
And hey, the 2.78 manual could be online for half a year now, just sayin'.

Tobias: For all blender websites I've always appreciated to have a modern look and sophisticated design. The manual should comply to these standards as well.
There's a lot of creative freedom within that constraint, but not making it look like a personal hobby project. I find this ascii art page very uninviting. Please let's try to keep everyone on board here.

Aaron Carlisle (Blendify) claimed this task.

Expect a solution for this from me soonish. Waiting for a couple upstream PRs to be merged. If we feel this to be more urgent I can use a branch of the theme.

Expect a solution for this from me soonish. Waiting for a couple upstream PRs to be merged. If we feel this to be more urgent I can use a branch of the theme.

What kind of solution? Can we see the proposed design? The fixes that Francesco did to the previously proposed design are sufficient IMO.

It is simply just keeping the main RTD layout but overriding the content part to display 404 and provide some information to get to search, home, ect.

@Francesco Siddi (fsiddi) what are your thoughts on the custom JavaScript/buttons

I started on this in rBM4085 but there is still work to be done.
Do we want to add back all the javascript enable functionality? I find the following two tools useful:

  1. A button to search for the page hash
  2. A button to return to the parent index.

Here is the current 404 page: https://docs.blender.org/manual/en/dev/404.html (Might need some time to go live / something done on the server)

Looks better! At the moment I do not have time to review the JS, sorry.
From rBM4085 I see you moved a lot of it outside of the block, how does it work currently?

I just copied the JS and commented it out for us to decide later on how much we want to keep while we moved to the new design.

@Francesco Siddi (fsiddi) It's not working but it looks good. lmao

I'm not sure but the solution might be as hinted here:
Eric Holscher - "The Power of Sphinx: Integrating Jinja with RST"
An extension that loops over all links to make them absolute.
It has to listen to probably the last 'core' event and detect the 404 page.
But maintaining an extension for a single page...

Look like there is no build in option for that and it's unlikely that there is a 'magic' template config option (Jinja) for that.

An alternative might be to configure the server to redirect to the 404 page (don't know if that's possible).
But then the info about original location gets lost.

So, I wrote the extension: a fragile patchwork of ways making the links absolute. Split between the template, the extension, the inline script.
The version is set to 'dev': that's bad for the old versions (solution: server redirect number to 'dev' , has to be updated every release, so no)
home links (/index) are not fixed, solutions: inline script loop over all 'A's; slow, thus bad for mobile
or maybe it can be done in the extension I'll try it *later.

I stumbled upon the magic solution: the <base> tag it defines the base url for relative links,
which makes the extension obsolete,
all links work now,
version is still dev, the baseURL is read-only so it can't be changed by the inline script.

versions should work now the json is read-in by the py ext. (same as the js, the tag is then passed to the template via context)

Aaron Carlisle (Blendify) closed this task as Resolved.Sat, Jun 1, 6:12 PM