Hot Potatoes on different displays

[stefpen gmail]

Dear all,

I have 3 computers with different sizes and resolutions.
1. 17", FHD 1920/1080, Windows 10
2. 15", FHD 1920/1080, Windows 7
3. 13.3" FHD 1920/1080 with enlarged  125% or 150% size of text, apps and other items as Recommended by Windows 10.

I prepare my Hot Potatoes exercises on the 17" laptop, with Output font size always "large" and sometimes I put in font-size: 1.3em.

The Problem:
The pages look very different on the 13" and 15" displays:

• The font size and input fields, matching cards are bigger, so there is always a vertical scroll on all pages.
• The pictures and videos (defined with fixed width and height) are bigger and are displaced on the smaller screens.

The problem can be solved on the 13" display by changing the display to 100% (although it's difficult to read the text in Windows Explorer and other programs)
However the problem persists on the 15" display, which has Window 7 and there are no text scaling display settings. I can correct this on the 15" display by scaling the browser to 80%.

Questions:

1. Why do the pages look differently on 13" and 15" displays with equal resolution (FHD)?
2. How can I correct the look of all pages on the different laptops with CSS selectors? (I don't think I solve the problem by media queries in the common style.css (like @media screen and (max-width: 800px)) because the displays have the same resolution of FHD. )

Best regards

Steve

[Martin Holmes]

Hi there,

You'll need to give us the URLs of your exercises before we can see the
problem. But bear in mind that in any browser on any system, pressing
Control/+ or Control/- (or its equivalent on your system) will instantly
enlarge or shrink the font size on the page. If your users don't know
how to do this, then teaching that simple trick will improve their lives
significantly.

Also it's worth noting that the display characteristics of all browsers
can be (and often are) configured by a range of different factors
including the system theme, plugin browser themes, operating system
settings, and many other things. You may be the only person in the world
who is seeing the specific display characteristics on one of your
devices. Making changes to the exercises based on what you see on some
of your devices may not help anyone else, and may in fact make things
worse in general.

Cheers,
Martin

On 2021-04-14 7:04 a.m., stefpen gmail wrote:
> Dear all,
>
> I have 3 computers with different sizes and resolutions.
> 1. 17", FHD 1920/1080, Windows 10
> 2. 15", FHD 1920/1080, Windows 7
> 3. 13.3" FHD 1920/1080 with enlarged  125% or 150% size of text, apps
> and other items as Recommended by Windows 10.
> I prepare my Hot Potatoes exercises on the 17" laptop, with Output font
> size always "large" and sometimes I put in font-size: 1.3em.
>

> *The Problem:*

> The pages look very different on the 13" and 15" displays:
>

> * The font size and input fields, matching cards are bigger, so there

> is always a vertical scroll on all pages.

> * The pictures and videos (defined with fixed width and height) are

> bigger and are displaced on the smaller screens.
>
> The problem can be solved on the 13" display by changing the display to
> 100% (although it's difficult to read the text in Windows Explorer and
> other programs)
> However the problem persists on the 15" display, which has Window 7 and
> there are no text scaling display settings. I can correct this on the
> 15" display by scaling the browser to 80%.
>

> *Questions*:
>
> 1. Why do the pages look differently on 13" and 15" displays with equal
> resolution (FHD)?
> 2. How can I correct the look of all pages on the different laptops

> with CSS selectors? (I don't think I solve the problem by media
> queries in the common style.css (like @media screen and (max-width:
> 800px)) because the displays have the same resolution of FHD. )
>
>
> Best regards
> Steve
>

> --
> You received this message because you are subscribed to the Google
> Groups "hotpotatoesusers" group.
> To unsubscribe from this group and stop receiving emails from it, send
> an email to hotpotatoesuse...@googlegroups.com
> <mailto:hotpotatoesuse...@googlegroups.com>.
> To view this discussion on the web, visit
> https://groups.google.com/d/msgid/hotpotatoesusers/beee6702-f04f-4364-9ebd-dde4cdbc48dbn%40googlegroups.com
> <https://groups.google.com/d/msgid/hotpotatoesusers/beee6702-f04f-4364-9ebd-dde4cdbc48dbn%40googlegroups.com?utm_medium=email&utm_source=footer>.

[stefpen gmail]

Thank you, Martin to be the first to reply to my question.

I do not upload my hotpot pages online. I use them in class with a 13.3" DELL laptop and a FHD projector, so I can control the view of the pages, but the font size gets too small when the scaling shows the media as seen on the 17" FHD display.

The core of my question is how I can see the same view of hotpot pages on different displays without Control/+ or Control/- corrections.

I have made some tests with three displays and I have uploaded on GDrive screenshots of my hotpot pages compared against the BBC.com site.

The shared link is https://drive.google.com/drive/folders/1yeqnI5NPrD6rq8yCVu9T6cgnSnXBkgkC?usp=sharing

Please feel free to download the pictures and view them with your picture viewer or tell me if you cannot download the pictures from the link.

Here is some information and considerations beforehand:

• The shared folder is called 'display tests'. There are four folders inside named with the computer name, OS, display size and resolution.
• All webpages have been viewed with the latest version 87 of Firefox. In folder 'HP_17-inch' there is a screenshot from Edge browser, showing that the view completely coincides with the view on Firefox.
• The filenames also contain information: FF means Firefox.
• Interesting is the case with DELL 13.3" 2-in-1 laptop. When I open the BBC site, the browser performs a media query and adjusts the size of the pictures and adverts. The filenames contain the words 'before' (before the media query) and 'after' (after the adjustment). In this folder the filenames contain the OS scaling, as well: 100%, 125% and 150% (recommended). Please note that the BBC site does not do any adjustment on 125% scaling.
• It can also be seen that the window, showing the version of Firefox has different sizes on different displays, too.
• All my hotpot pages contain the original and standard declarations:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta charset ="utf-8">
    <title>
    </title>

My Question is:

How can I make adjustments of the size of font, pictures and videos like they do it on the BBC site?

Thank you for your consideration to answer my question.

Best regards,

Steve

[Martin Holmes]

Hi Stepfen,

I think there are two issues here.

First of all, whenever I'm presenting any material at all from the web
on a screen in front of an audience, I continually adjust the scale size
as I move from page to page, to optimize readability. I believe this is
a normal part of presenting material from the web. I would never expect
any web page to work well for a presentation environment without my
using Control/+ and Control/-.

However there are lots of ways you can intervene to change the font size
based on the screen resolution. This is a good place to start:

<https://www.w3schools.com/css/css_rwd_mediaqueries.asp>

You have a specific set of requirements for three particular screen
sizes, so you can add CSS to your Hot Potatoes pages to account for
those specific screens and optimize the display accordingly. It's not
something we would ever do in Hot Potatoes, because everybody needs
different options, and we could never make one group of people happy
without annoying a different group.

Cheers,
Martin

On 2021-04-14 11:32 p.m., stefpen gmail wrote:
> Thank you, Martin to be the first to reply to my question.
>
> I do not upload my hotpot pages online. I use them in class with a 13.3"
> DELL laptop and a FHD projector, so I can control the view of the pages,
> but the font size gets too small when the scaling shows the media as
> seen on the 17" FHD display.
>

> The core of my question is *how I can see the same view of hotpot pages
> on different displays without Control/+ or Control/- corrections. *

>
> I have made some tests with three displays and I have uploaded on GDrive

> screenshots of my hotpot pages *compared against the BBC.com site.**
> *

> The shared link is
> https://drive.google.com/drive/folders/1yeqnI5NPrD6rq8yCVu9T6cgnSnXBkgkC?usp=sharing
> <https://drive.google.com/drive/folders/1yeqnI5NPrD6rq8yCVu9T6cgnSnXBkgkC?usp=sharing>
> Please feel free to download the pictures and view them with your
> picture viewer or tell me if you cannot download the pictures from the
> link.
>
> Here is some information and considerations beforehand:
>

> * The shared folder is called 'display tests'. There are four folders

> inside named with the computer name, OS, display size and resolution.

> * All webpages have been viewed with the latest version 87 of Firefox.
> In folder '/HP_17-inch/' there is a screenshot from Edge browser,

> showing that the view completely coincides with the view on Firefox.

> * The filenames also contain information: FF means Firefox.
> * Interesting is the case with DELL 13.3" 2-in-1 laptop. When I open

> the BBC site, the browser performs a media query and adjusts the
> size of the pictures and adverts. The filenames contain the words
> 'before' (before the media query) and 'after' (after the
> adjustment). In this folder the filenames contain the OS scaling, as
> well: 100%, 125% and 150% (recommended). Please note that the BBC
> site does not do any adjustment on 125% scaling.

> * It can also be seen that the window, showing the version of Firefox

> has different sizes on different displays, too.

> * All my hotpot pages contain the original and standard declarations:

>
> <!DOCTYPE html>
> <html lang="en">
> <head>
>     <meta name="viewport" content="width=device-width, initial-scale=1.0">
>     <meta charset ="utf-8">
>     <title>
>     </title>
>

> _*My Question is:*_
>
> *How can I make adjustments of the size of font, pictures and videos
> like they do it on the BBC site?*
> **

> <https://groups.google.com/d/msgid/hotpotatoesusers/beee6702-f04f-4364-9ebd-dde4cdbc48dbn%40googlegroups.com?utm_medium=email&utm_source=footer
> <https://groups.google.com/d/msgid/hotpotatoesusers/beee6702-f04f-4364-9ebd-dde4cdbc48dbn%40googlegroups.com?utm_medium=email&utm_source=footer>>.

>
>
> --
> You received this message because you are subscribed to the Google
> Groups "hotpotatoesusers" group.
> To unsubscribe from this group and stop receiving emails from it, send
> an email to hotpotatoesuse...@googlegroups.com
> <mailto:hotpotatoesuse...@googlegroups.com>.
> To view this discussion on the web, visit

> https://groups.google.com/d/msgid/hotpotatoesusers/86d0f59d-b90e-4dd4-a6ef-903351f4840cn%40googlegroups.com
> <https://groups.google.com/d/msgid/hotpotatoesusers/86d0f59d-b90e-4dd4-a6ef-903351f4840cn%40googlegroups.com?utm_medium=email&utm_source=footer>.

[Martin Holmes]

Another idea occurred to me, and it might be the simplest solution overall:

You can set the font size (in the config screen) based on the viewport
width.

Here's an explanation of how that works:

<https://css-tricks.com/viewport-sized-typography/>

So if you set the font size to e.g. 5vw, it will be equivalent to 5% of
the width of the screen, whatever that is. So the bigger the screen, the
bigger the font size.

I don't remember ever doing this myself, but it does work; I tested
setting the body font size in a HotPot exercise to 1vw, and as you scale
the browser window, the font size changes. A setting of:

calc(5vw / 2)

seemed to give the most potentially useful results for presentation
display versus small-device display, but of course you'll have to
experiment a bit.

Cheers,
Martin

[stefpen gmail]

Thank you, Martin for your reply. I guess the second idea will work, but it takes time for me to experiment. I will publish the result and hopefully your idea will be a solution.

Best regards,

Steve