Refactor layout

[SebastianZ]

The layout of the page could be improved in several ways.

• The list of tests is very long.
• It's a bit hard to distinguish headlines from subheadlines.
• Smiley's while a nice idicator for the implementation status, don't look professional.

Because I like the layout used at html5test.com, I've created a new layout (including changes in the data structure), which aligns with the layout of that website.

The related files generating that layout are attached. Note: The layout is not complete. It is missing a few things like e.g. the hint about feature recognition and the specs list.

Sebastian

layout.zip

[LeaVerou]

Hi Sebastian,

Thanks for your efforts! However, it would have been nice to consult me first instead of just dumping a redesign here with no brief. Is the new page online somewhere? This is a huge change to just merge in just from a screenshot. Also, please send a pull request for the changes, not a zip file. Judging from a screenshot, one of the main issues is that the status of each feature is not really noticeable at once, just relegated to a small bar and icon on the right. This is the most important bit of information for each feature, and should be immediately noticeable effortlessly. Sure, it's easy to see now, but I have to think about it for a second.

[SebastianZ]

Thanks for your efforts! However, it would have been nice to consult me first instead of just dumping a redesign here with no brief.

I already sent you and Niels an email two years ago covering this topic. Unfortunately I didn't hear back from you both. So, I thought I'll make this first try to get the discussion rolling.

Is the new page online somewhere? This is a huge change to just merge in just from a screenshot. Also, please send a pull request for the changes, not a zip file.

I intentionally didn't create a PR yet. It's a mockup showing how I imagine the layout to look like, not a ready page yet (even when it's already working mostly). The page is not online, though just needs to be extracted locally and index.html be opened to see the page (only the web fonts don't work, of course). I'll create a branch for it, if you agree it's worth continuing the work.

Judging from a screenshot, one of the main issues is that the status of each feature is not really noticeable at once, just relegated to a small bar and icon on the right. This is the most important bit of information for each feature, and should be immediately noticeable effortlessly. Sure, it's easy to see now, but I have to think about it for a second.

That can surely be improved. I was also thinking of making the background of the whole result cell colored.

So, again, if you believe, I should continue my work on the redesign, I'll create a branch for it, we can continue the discussion and I'll fix the remaining issues.

Sebastian

[LeaVerou]

I just realized that this is a rip off of HTML5Test’s layout. I hadn't visited HTML5Test for a while, so I hadn't seen their new design before. No, we are absolutely not doing that, sorry.

[SebastianZ]

I stated in the first comment that the layout aligns with the one used on html5test.com. And just for the record, while I tried to make the layout look like the one from HTML5Test, I created the code, i.e. HTML, CSS and JavaScript, completely myself. (Even when HTML5Tests' license would allow to reuse its code.) So, I wonder what your reasons to be so reluctant about that layout.

Anyway, if you don't like it, I can change it.

Sebastian

PS: The "new" HTML5Test layout is already several years old, so I am astonished you didn't see it before.

[LeaVerou]

Because they're different websites and shouldn't look identical? That's like asking me to style Bliss' homepage like jQuery's because you like jQuery's page better. Yes, you did state that it “aligns” with the layout of HTML5Test. I interpreted that as being inspired by it, not blatantly copying it, pixel by pixel, font by font.

The "new" HTML5Test layout is already several years old, so I am astonished you didn't see it before.

I probably have seen it before, but had no reason to retain it before this.

[LeaVerou]

Also, I like the smileys and I don't really care if they don't look professional enough to you. Lighten up.

[dstorey]

I guess there isn't much point in keeping this one open. Closing the issue.

[SebastianZ]

I guess there isn't much point in keeping this one open.

Please give me a chance to come up with another layout mockup!

Because they're different websites and shouldn't look identical?

They are different websites serving the same purpose, testing browsers for web standards compliance.

Also, I like the smileys and I don't really care if they don't look professional enough to you. Lighten up.

Ok, I'll add them back then in the new mockup, no reason to be condescending.

Sebastian

[LeaVerou]

Please give me a chance to come up with another layout mockup!

We can always reopen this if you have a different mockup to suggest, or you can open a new one. Up to you. :)