zui > edb.internet.* > edb.internet.webdesign.html

Kurt Hansen (14.05.2018, 08:17)
Jeg har nogle gamle .css filer, som jeg - stærkt mod min vilje - er nødt
til at rydde op i. Mod min vilje fordi jeg forlængst har mistet al
føling med HTML og CSS.

Det gode, gamle spørgsmål om at bruge CSS til design, har jeg i mange
tidligere indlæg stået fadder for. Konklusionen var (i sin tid), at det
er OK at bruge tabeller, når man som jeg skal sætte en
indholdsfortegnelse op for en musik-CD. Her har jeg brug for 4 kolonner:

- Track-nummer
- Titel
- Varighed
- Afspilningsknap

Eksempel:

Smukt er det jo ikke og det vil jeg ikke længere tumle med. Jeg vil
overføre vore udgivelser til en SmartWeb shop ().
Her skal varebeskrivelsen placeres i feltet "Beskrivelse" på varekortet.
Fint nok, men jeg vil gerne sikre mig at det vises brugervenligt på en
telefon.

Jeg aner ikke hvordan en telefons browser håndterer tabeller og vil
derfor gerne gøre det så fleksibelt som muligt.

Hvis jeg kører Googles test af mobilvenlighed
()
får jeg at vide at siden er mobilvenlig. Siden er oprettet i en demo af
SmartWeb og kildekoden er pasted ind fra den gamle hjemmeside uden
ændringer.

Skal jeg overhovedet bekymre mig om min tabelopsætning?

Jeg har luret lidt på denne:


Det ser lidt langhåret ud, men hvis det er dét der skal til, så må jeg
jo bruge et par timer på det.

P.S. Det drejer sig om ca. 400 varer, så jeg vil jo gerne lave en
"standard" opsætning, som kommer til at gælde for alle varesider.
Bertel Lund Hansen (14.05.2018, 08:34)
Kurt Hansen skrev:

> - Track-nummer
> - Titel
> - Varighed
> - Afspilningsknap


> Eksempel:


> Smukt er det jo ikke og det vil jeg ikke længere tumle med. Jeg vil
> overføre vore udgivelser til en SmartWeb shop ().
> Her skal varebeskrivelsen placeres i feltet "Beskrivelse" på varekortet.
> Fint nok, men jeg vil gerne sikre mig at det vises brugervenligt på en
> telefon.


Jeg har lige åbnet siden i min mobil med Firefox. Mobilen kører
Android 7, og Firefox er opdateret.

Den røde menusøjle fylder ca. 1/5 ude til venstre, og tabellen
fylder ca. 2/5 ved siden af. Skriften er for lille til at læses.
Men jeg kan zoome så tabellen fylder hele fladen, og så er det
let at læse og starte afspilningen.

Jeg vil kalde det en velfungerende side.

PS. Hvis jeg vender mobilen på siden, er det nogenlunde læseligt,
men stadig lidt småt til mig.
Kurt Hansen (16.05.2018, 11:09)
Den 14/05/2018 kl. 08.34 skrev Bertel Lund Hansen:
> Kurt Hansen skrev:
> Jeg har lige åbnet siden i min mobil med Firefox. Mobilen kører
> Android 7, og Firefox er opdateret.
> Den røde menusøjle fylder ca. 1/5 ude til venstre, og tabellen
> fylder ca. 2/5 ved siden af. Skriften er for lille til at læses.
> Men jeg kan zoome så tabellen fylder hele fladen, og så er det
> let at læse og starte afspilningen.
> Jeg vil kalde det en velfungerende side.
> PS. Hvis jeg vender mobilen på siden, er det nogenlunde læseligt,
> men stadig lidt småt til mig.


Tak for indsatsen, Bertel. Jeg har ikke selv en smartphone, så det er
godt at få en tilbagemelding.

M.h.t. skriftstørrelsen har jeg nok desværre videført den font-size der
er angivet i min eksterne CSS: 10 px. Det må jeg ændre til noget
EM-jams, så skriften skaleres i browseren.
Dennis Munding (16.05.2018, 12:44)
Kurt Hansen wrote:

> Tak for indsatsen, Bertel. Jeg har ikke selv en smartphone, så det er
> godt at få en tilbagemelding.


Det er der råd for.
Du kan hente udviklerversionen af Firefox - den har lettet mig for en
del på det område:


Med genvejstasterne CTRL + SHIFT + M får du præsenteret siden, som den
ser ud på mobil.
Du kan selv vælge hvilken enhed, du gerne vil se siden i - eller
tilføje nye enheder, hvis der mangler en.
Man kan også indstille skærmstørrelsen manuelt. :-)

> M.h.t. skriftstørrelsen har jeg nok desværre videført den font-size
> der er angivet i min eksterne CSS: 10 px. Det må jeg ændre til noget
> EM-jams, så skriften skaleres i browseren.


1 em svarer i runde tal til 16px, så det er nu ikke så bøvlet endda. :-)

Og hold dig væk fra enhederne vw (viewport width) og vh (viewport
height) (m.fl.), medmindre du vil omskrive alle enhedsangivelser i dit
stylesheet - det lærte jeg på den hårde måde... :-/
Kim Ludvigsen (16.05.2018, 20:34)
Den 16-05-2018 kl. 12:44 skrev Dennis Munding:

> Du kan hente udviklerversionen af Firefox - den har lettet mig for en
> del på det område:
>
> Med genvejstasterne CTRL + SHIFT + M får du præsenteret siden, som den
> ser ud på mobil.


Det virker også i den almindelige Firefox. Bemærk, man man ændre
viewpoint dynamisk med musen.

I ældre versioner af Firefox, der ikke har ovenstående, kan man i stedet
få adgang til mobilvisningen via F12, der åbner udviklerværktøjerne,
hvor man blandt meget andet kan vælge mobilvisning.
Dennis Munding (17.05.2018, 07:47)
Kim Ludvigsen wrote:

> Den 16-05-2018 kl. 12:44 skrev Dennis Munding:
> Det virker også i den almindelige Firefox. Bemærk, man man ændre
> viewpoint dynamisk med musen.
> I ældre versioner af Firefox, der ikke har ovenstående, kan man i
> stedet få adgang til mobilvisningen via F12, der åbner
> udviklerværktøjerne, hvor man blandt meget andet kan vælge
> mobilvisning.


Det var/er jeg klar over, men da min erfaring siger mig, at
"mobil-versionen" i alm. FF ikke er helt korrekt i forhold til
virkeligheden, så anbefalede jeg FF Developer, hvor det ser ud til, at
de har fået rettet lidt op på de misvisende resultater.

Jeg har prøvet at se en side på flere forskellige mobiler og
sammenlignet dem med FF's mobilversion - de var vidt forskellige.
Og desværre er FF for venlig, når det kommer til visning, for man får
det indtryk, at det man sidder og laver er perfekt - hvilket det
desværre ikke er, når man så ser det på en rigtig enhed.
Lignende emner