fixed design vs. scrollable

[mithrendal]

I need help in deciding a major app design point ... should the web version have a fixed design like an typical app or be scrollable like a web site?

Currently it has a scrollable design. That is you can scroll vertically to make stuff at the bottom visible on small screens.

but we could make it fixed and give it the full window. Then for exampe we don't need the fullscreen button anymore because it is always fullscreen...

here some impressions...

the controls are also fixed to the bottom and they will not scroll either.. of course they must be made invisible when you don't want to use them.... and visible when you want to use them. Because there is no scolling anymore this could be done with a small icon in the left bottom corner for example. And we should put them in a non opaque panel like the keyboard ...

popups would still work as before with the scrollable viewport.

🙋🏿I need advice and your brilliant minds ... to think the pros and cons ...

[mithrendal]

iOS impressions ...

[mithrendal]

From my feeling the scroll variant is ok for big screens. Because it is so big that ... you don’t have to scroll. On small screens there is a lot scrolling going on but is it any good? I feel it is not ... because you have to constantly care about the scroll positions.

When we make it fixed then the app has to take care of perfect positioning. This I feel is especially an advantage on tiny screens although it seems to be paradox or a contradiction. Because with scrolling you normally get more free space on tiny screens.

[dirkwhoffmann]

Did I mention that I am very poor in web stuff 🙄? Anyway. I think a fixed layout is superior. You've already mentioned a lot of reasons for it. I also like the idea of overlays. Is it possible to render overlay with semi-transparency? macOS uses semi-transparent overlays so nicely that it would be cool to have something similar inside the browser. E.g., the app selector (CTRL-TAB) is a very good example how neat looking overlays could be designed (the small notification are good examples, too) . Another question: Is it possible to have smaller GUI elements? I really like the look & feel of SAE (the top menu is very discreet and doesn't distract the user). Nevertheless, I don't like SAE's settings dialogs very much, because it looks somewhat old fashioned.

I'm not sure if it is possible, but in my heart I would like VC64web to look like this 😍:

[mithrendal]

Did I mention that I am very poor in web stuff 🙄?

I have everything under control commander 😎...

I think a fixed layout is superior.

same as me ... 😬 I hoped for some pros for the existing scrollable design .. well if nobody including me🙊 want the scroll layout anymore then I think we should go for the fixed layout ... (@sy2002 no pros for the existing layout ? this is your last chance to stop us ...)

Is it possible to render overlay with semi-transparency?

sure there are divs and you can set transparency from 0 to 100

Is it possible to have smaller GUI elements? I really like the look & feel of SAE (the top menu is very discreet and doesn't distract the user).

In fact I extra made them a little bit bigger as I feared they are too tiny to look at on the big screen and to tiny to touch on the small iPhone screen ... I don't like it tooo small .. we are all getting older ... maybe we should make them normal sized 🤔

[sy2002]

I like the fixed design a lot! Very clean and user friendly. :-)

[mithrendal]

published the first try of the fixed design to gh-pages

click to the menu button in the upper left corner

click to the keyboard

[sy2002]

Great job. Works like a charm!

But...

Now, that I started working with it, there are two things that came to mind:

1. Make sure that the aspect ration stays correct. Otherwise... Well... Look here:

2. After a while, the "burger menu" at the top left should fade out / fade away (and maybe fade in, when you move the mouse cursor near it". Maybe this is just my personal taste, but I do not like to see a menu "in the middle of a game":

When you consider demos, which use the border, it quickly becomes evident, that you cannot "always" show the menu:

[mithrendal]

1.Make sure that the aspect ration stays correct.

done 😅

see commit log

adapt better to different screen sizes 
try to always keep aspect ratio 320x200, do horizontal and vertical centering
when virtual keyboard comes in no vertical centering to give it more space
adapt on orientchange when rotating landscape/portrait on a phone/tablet

pushed ....

[mithrendal]

2.After a while, the "burger menu" at the top left should fade out / fade away (and maybe fade in, when you move the mouse cursor near it".

done 😎 . I altered the thing with the request "fade in when mouse cursor near " because on touch based devices you have no mouse cursor. Therefore I trigger on mouse click or touch start. Intervall for vanishing is 5 seconds...

[sy2002]

@mithrendal Just tested it: WOW - this was fast :-) And super high quality implementation. Awesome job!

[mithrendal]

dirk likes to have smaller buttons / controls ... so true

here a comparison with the native GUI

still I don't know how good small controls are for touch devices ... because you have to aim at them with your fingers ...

lets do some work on it !😅

[mithrendal]

SAE

the virtual C64 brothers

Is it possible to have smaller GUI elements? I really like the look & feel of SAE (the top menu is very discreet and doesn't distract the user).

smaller buttons in place ... also some modifications in order to make it a bit more discreet ... transparency 0.05% ... much better than before, no ?

pushed to gh-pages

[dirkwhoffmann]

Just tried the latest version. It's a huge step forward! 👍

I really like the menu in the top row and got an idea. Right now, there is a visual gap between the browser elements (menus, tabs etc.) and the emulator controls. If the look and feel of the emulator elements matched the native elements, they would visually melt together (which might be cool looking). However, browser elements look different on different operation systems, so I don't know if this approach is the right one.

I've notices some minor bugs on Safari. After resizing the window, the options button (the one that needs to be pressed to show the controls) disappeared (even when there was enough space left to the emulator canvas). Furthermore, I got some minor graphics errors when hitting "Pause" and "Run" in a row.

[mithrendal]

After resizing the window, the options button (the one that needs to be pressed to show the controls) disappeared (even when there was enough space left to the emulator canvas).

I implemented the following UI logic ... there is a 5 second timer which lets this "burger" button disapppear ... on click or touch somewhere it will be visible again ... and the timer starts again. When the top bar is visible and the timer reaches th 5s it will not hide the burger button. (because this would look awkward)

sy2002 wanted the button to disappear 💁

I really like the menu in the top row and got an idea.

me too ... but there is a disadvantage with the top position on iOS ... first I had the top bar buttons stick at the very top ... position 0 ... but then the following problem arised in iOS ... when
you touch at the very top of the display ... although it is button area ... the adress bar comes up... Therefore I had to place the buttons somewhat away from the dangerous zone ....

See here a small gap to ypos=0

Still you can accidentally trigger the iOS safari specific default behavior when touching the very top ... see here 🙄

when this happens you have to scroll up the annoying address bar.

[mithrendal]

"iOS address bar popping up on touch into the top navigation" problem

... lets see what the others do here to prevent it ...

they have it all ... they handle it just by placing the buttons far enough away from the top edge ...

in fact by comparing the pictures our buttons are still the nearest to the 0 position ... should we go a bit deeper ? Also they are all borderless and without background color ... icon only buttons ... should we too ?

[mithrendal]

found and fixed the bug 👻

next I will try icon only buttons in the nav bar lets see ...

[mithrendal]

icons only in the navbar 😎

I think it looks nicer ... no ? 🤔

pushed it to gh-pages

[dirkwhoffmann]

I think it looks nicer ... no ? 🤔

I like it! 👍

The Netflix, Amazon, and Apple pages all look the same in the top row. All show their branding in the top row next to the 🍔 button. What about integrating the VC64web logo there? 😎

[mithrendal]

found and fixed the bug 👻

well that was not true ... but now I found something .. it seems bootstrap can not use tooltips on disabled controls ... this is exactly the problem here ... when pressing run I disable it (to prevent to be called twice) and when pressing halt vice versa... so I think this conflicts with the tooltip mechanism in bootstrap ... look here in he docs ...

Tooltips for .disabled or disabled elements must be triggered on a wrapper element.

I only do what they want me to do now ... no experiments anymore 🙄... a wrapper element ok ... a span element perhaps 🤔

[mithrendal]

And super high quality implementation.

@sy2002 just fixed another bug in the activation of the live debug output enabling/disabling ...😫 it just did not work correctly ... @sy2002 what did you say about super high quality ?... you better look at vAmigas code base 😍 to see real high quality ....

[mithrendal]

All show their branding in the top row next to the 🍔 button. What about integrating the VC64web logo there? 😎

do you think this way with just a small label ? the real logo image which you have drawn ... is far to big for the navbar don't you think ? ...

there was a guy which asked me this question ...

Another question: Is it possible to have smaller GUI elements? I really like the look & feel of SAE (the top menu is very discreet and doesn't distract the user)

Or should I take that label out again?

Alternatively we could add a about section in the settings dialog which is scrollable... with a big fat logo and lots of text

[dirkwhoffmann]

I meant a logo at the place where all sites present their branding. Something like this (just nicer):

[mithrendal]

what should happen when there is no free space ? smaller devices ... should the image be a background graphic with the controls on top then ?

the others having nearly no other controls in the navbar ... only hamburger and an applogo and a search field or so ... so we can not spy how they do this.... in vc64 mac we can also not spy ... no app logo there ...

[dirkwhoffmann]

what should happen when there is no free space ?

I'm unsure at the moment. Another idea would be to replicate the VC64mac toolbar. Apple tries to do something similar with iCloud. They try to mimic the look and feel of the MacOS apps as much as possible (at least they did, I don't know if they still do).

[mithrendal]

Ok I edited the app logo to make its background transparent....

and I placed it in the center .... hmm I think it looks distracting ... or is it only me ?

maybe we could make it transparent a bit ...

I set opacity to 0.7

very small screen ...

it is complicated to place it centered but not to conflict with the controls ...😳😫😭

I don't like it too much ...Maybe we should not overload the navbar with it and better make an about layover ... where we show it together with some explaining text about vc64, no ?

[dirkwhoffmann]

hmm I think it looks distracting ...

Yes, you are right. That doesn't look good. We better go without it.

[mithrendal]

I have put the logo here to the settings dialog ...

Should we still keep the app label on the top center of the navbar ?

I think it is not too shabby there and I still like it 😍, but on the other hand it has also no special value there ... and it would maybe be cleaner to remove it, no ?

In the end when we continue like this we are getting here the most tidy and clean web emulator app anyone has seen on this planet ... At least from the UI ... don't look at the code ... I have to tidy up there too ...😬

pushed to gh-pages

[dirkwhoffmann]

but on the other hand it has also no special value there ... and it would maybe be cleaner to remove it, no ?

Yes, I think so, too. It's better to delete it. BTW, the logo looks pretty good inside the settings dialog.