SC Retro

[Einar Saukas]

This is looking great, Einar! What you'll have to keep in mind are the different screen resolutions, which can make the information almost unreadable.
Reducing the screen width to 991px, for example, or displaying the page on a mobile device shows that the table cell alignment may require some attention. If you press F12 or Right click on the page and select "Inspect" to get into the Developer console you can change then change the screen resolution and select the device you're viewing the page on, you'll see what I mean.

Thanks! But can you point out what exactly must be changed, kinda like [mention]druellan[/mention] did?

I have zero experience in web design so it would take me ages to figure out by trial-and-error the proper way to fix these things...

[Einar Saukas]

If I remember right this sentence was useful to make a page responsive.

Code: Select all

<meta name="viewport" content="width=device-width, initial-scale=1">

Add a maximum-scale to disable zooming:

Code: Select all

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

You can customize each page element based on different screen sizes in your CSS file. An example would be:

Code: Select all

html{font-size:100%;}
@media(min-width:60em){html{font-size:100%}}

See the default style and the media based one.

Another example for a SELECT control:

Code: Select all

<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {background-color: navy;font-size:16px;}
select {width:100%;font-size:200%;}
@media(min-width:60em){select{width: 100%;font-size:150%;}}	 
</style>

Take a look at this site to read on media queries:
https://learn-the-web.algonquindesign.c ... a-queries/


A dirty tip to see how media queries are applied is to resize the browser window from large to small, simulating different screen resolutions.
You'd better ask a professional though

I'm sorry but you will have to be more specific about what exactly needs to be changed

[Einar Saukas]

I think we will have to move "creators" to a separate table, because there's too much information. This is a good example:

https://spectrumcomputing.co.uk/compact/1608

In this layout, moving it to a separate table takes almost the same space as keeping it inside the general info. So there's nothing to lose.

Agreed?

I also added "series". For instance "Renegade" series:

https://spectrumcomputing.co.uk/compact/4087

There are a few games that belong to multiple series:

https://spectrumcomputing.co.uk/compact/6280

I don't like the idea of listing the entire series inside the general section like in Martijn's WoS. I think it's better to choose either list the series in a separate section below, or just mention the series name so the user can click to see further details. For now, I'm keeping both options to make it easier to compare. What do you think?

[Juan F. Ramirez]

I think we will have to move "creators" to a separate table, because there's too much information. This is a good example:

https://spectrumcomputing.co.uk/compact/1608

In this layout, moving it to a separate table takes almost the same space as keeping it inside the general info. So there's nothing to lose.

Agreed?

As we talked in the other thread, it seems redundant or 'repetitive' the same info in two places, so it's ok for me (even though my intention was the opposite, remove the author table! )

[hikoki]

I'm sorry but you will have to be more specific about what exactly needs to be changed

The current layout seems to be meant for large screens to display a compact view with high information.
One can always zoom it on small screens but I meant the layout and font size to react to different screen sizes.

Some common em sizes:
25em — small screens, about 400px
38em — medium screens, about 650px
60em — large screens, about 980px
90em — extra large screens, about 1500px

So you could add different styles (font sizes, layouts, floating between elements..) to make the layout more readable.

@media only screen and (min-width: 25em) { … }
@media only screen and (min-width: 38em) { … }
@media only screen and (min-width: 60em) { … }
@media only screen and (min-width: 90em) { … }

[hikoki]

A few tips to make responsive tables:


https://smepals.com/html-table-responsive-design

https://css-tricks.com/responsive-data-tables/

https://stackoverflow.com/questions/309 ... nsive-layo

[uglifruit]

Whatever it ends up being called I really like this new look old look design.

[utz]

Media queries are so 2019 flex-grow/flex-shrink is all the hype now.

Another vote for the v3 banner, btw. In fact I'd like it to be even smaller.

[Einar Saukas]

That's really great and I'm voting for this view to become default (so no "retro", "lite" etc), and current view can be something like "modern".

I still think it's important to keep the current modern, more user-friendly interface as default layout, for casual visitors on different devices.

However I try to make it work such that, if you start navigating in compact mode, you stay in compact mode... Is this OK?

[Einar Saukas]

I will go back to screen resolution adjusts later. First I want to finish implementing all site content.

Since there were no objects, I'm keeping "Authors/Contributors" and "Series" in separate sections. I think they work better this way since both can contain a lot of information.

Next step is the list of compilations that included a certain title. Should it be inside the general section or in a separate section? I implemented both so everyone can see how it looks...

[Magnus]

Next step is the list of compilations that included a certain title. Should it be inside the general section or in a separate section? I implemented both so everyone can see how it looks...

I think a separate section looks cleaner. Great work!

[Juan F. Ramirez]

Authors, series and compilatios look ok in separate sections.

Look great!

[Ast A. Moore]

Nice, but the layout could be improved. I get a lot of empty space around the loading/in-game screen caps. Kind of defeats the purpose of the compact layout:

[8BitAG]

Nice, but the layout could be improved. I get a lot of empty space around the loading/in-game screen caps. Kind of defeats the purpose of the compact layout:

Probably worth stating what browser etc. you're using as that seems to be an atypical result.

Edit: Ah... that blank space appears when the available screen width is reduced... which is not at all ideal.

[Ast A. Moore]

Viewed in Safari, but it’s mostly the layout vs. window size issue. If I stretch the window horizontally almost to the edges of the screen, the problem disappears. I keep my browser window’s width at (effectively) 1,000 pixels.

[Einar Saukas]

Nice, but the layout could be improved. I get a lot of empty space around the loading/in-game screen caps. Kind of defeats the purpose of the compact layout:

That's because the new "compilations" field was too large. It's now a separate section, this should solve the problem.

[Ast A. Moore]

Nice, but the layout could be improved. I get a lot of empty space around the loading/in-game screen caps. Kind of defeats the purpose of the compact layout:

That's because the new "compilations" field was too large. It's now a separate section, this should solve the problem.

It does. Excellent!

[Einar Saukas]

Implemented sections "Authored with" and "Links". These pages are getting big now!

https://spectrumcomputing.co.uk/compact/6825

I'm starting to think we need a better name for this. Calling it "compact layout" sounds too generic, also SC was already using "compact layout" to mean something else. At SC homepage there's an option called "Results layout: compact".

Any other suggestions? Since many people don't like "retro", and all direct synonyms for "compact" sound too generic, perhaps we can choose a different word that vaguely suggests the idea of something compact? For instance "solid view".

Or perhaps just pick up a name that doesn't mean anything, like "zap view".

Any ideas?

[Juan F. Ramirez]

Brainstorming time!

Lite
Mini
16K
Zip
White

[utz]

16K

We have a winner.

[Pegaz]

Well, since the "compact" has already been used, I think "lite" is obviously the second best choice.
At the moment, nothing better comes to my mind...

[1024MAK]

• ‘rubberkey’
• ’chuntey’
• ’lower RAM’
• ’microdrive’

Actually I like ‘micro’ or ‘microdrive’

Mark

[Nienn Heskil]

Just be unoriginal and name them literally like 'SC modern scheme' and 'SC light scheme'. Not everything has to sound like a brand name.

[Morpheus]

“Microdrive” gets my vote as a Sinclair themed name but as the previous post said sometimes straightforward works just as well.

[utz]

Hmm, "micro", that's something I could get behind, too.
Other than that, "lite" is still my one of my favourites (though it basically was rejected already), and of course [mention]Juan F. Ramirez[/mention]' glorious "16K".