Responsive design?

[Kurt Hansen]

Jeg har aldrig forsøgt mig med responsive webdesign og forventer heller
ikke at få det hele forklaret her, men et par spørgsmål trænger sig på:

Jeg var af den opfattelse at sidens elementer wrappes neden under
hinanden, f.eks. div'er og tabelller.

Hvis jeg tester http://danacord.com/CSS-mesteren/ på
http://responsivetesttool.com/, så kan jeg se at det ikke er tilfældet.
Er det min kode der er forkert, eller har jeg vare misforstået noget?

Og hvad med "max-width"? Hvis jeg f.eks. skriver 50% for at få det til
at se ordentligt ud på en stor skærm, så ser det ikke særligt
brugervenligt ud på en mobil.
--
Venlig hilsen
Kurt Hansen

[Kim Ludvigsen]

Den 02/06/2019 kl. 12.28 skrev Kurt Hansen:
> Jeg har aldrig forsøgt mig med responsive webdesign og forventer heller
> ikke at få det hele forklaret her, men et par spørgsmål trænger sig på:
>
> Jeg var af den opfattelse at sidens elementer wrappes neden under
> hinanden, f.eks. div'er og tabelller.

Som du har fundet ud af, så er det ikke nødvendigvis tilfældet, det
afhænger af koden. Responsive betyder sådan set bare, at indholdet
tilpasses skærmens størrelse, og det kan man gøre på mange måder.

Nogle laver bare alle bokse med procent-angivelse, hvilket fx betyder,
at på en stor skærm, kan man få nogle forfærdelig lange tekstlinjer.

Man kan også lave designs rettet mod forskellige skærmstørrelser, hvor
bredden tilpasses, men hvor der samtidig tilføjes eller fjernes
elementer afhængig af skærmens bredde. Prøv at tage et kig på min
rejseside: https://rejse-til-thailand.dk/ og prøv så at trække
browservinduet fra fuld skærmstørrelse (på en PC) til smallere bredder.

På en stor skærm, vil der være en midterboks med tre spalter. og et
baggrundsbillede til at fylde resten ud. Når du gør vinduet smallere,
bliver der i første omgang mindre plads til baggrundsbilledet, mens
midterboksen er uændret.

Når du kommer ned på, hvad der svarer til størrelsen på de fleste
tablets, forsvinder den ene spalte. Den har indhold, som ikke er helt så
vigtigt.

Når du kommer ned på, hvad der svarer til de fleste mobiltelefoner,
ændres layoutet helt, så der kun er en spalte, der så til gengæld har
indholdet fra de to tablet-spalter. Og det vil virke, selvom du gør
vinduet meget smalt.

Prøv evt. også at gå ind på en af artiklerne, der er det lavet en lille
smule anderledes. Og læg her mærke til, at når vinduet bliver smallere
end bredden på artikelspalten, skaleres billeder i artiklen, så de
stadig vises korrekt.

--
Mvh. Kim Ludvigsen

[Dennis Munding]

Som Kim Ludvigsen allerede har forklaret, så betyder det, at man gør
siden i stand til at respondere (tilpasse sig) skærmstørrelsen.

Personligt starter jeg med at designe siden til almindelige skærme (pc)
og derefter laver jeg en særskilt css-fil til mobile enheder (for
overskuelighedens skyld).

Hvis du vil "lege" med det, så kan jeg varmt anbefale Firefox til
formålet, da du nemt kan komme til at se, hvordan din side ser ud på
forskellige mobile enheder ved at bruge taste-kombinationen
CTRL+Shift+M (samme kombination bruges til at vende tilbage til
normalvisning).


--
Med venlig hilsen

Dennis Munding

[Morten Bonderup]

Den 02/06/2019 kl. 12.28 skrev Kurt Hansen:

max-width vs width på et billede: max-width udfolder billedet til dets
maksimale dimensioner eller derunder; width udfolder billedet efter den
ledige plads i billedets forælder-container også selvom det betyder at
billedet skal strækkes ud.

Der er en html tag - picture - som giver dig mulighed for at skifte
billedet ud i takt med at skærmbredden ændrer sig:
https://www.w3schools.com/tags/tag_picture.asp

Klassisk responsiv webdesign involverer bl.a.

* <meta name="viewport" ... tagget fortæller mobilbrowseren, at den ikke
skal zoome ud, fordi udvikleren har designet det til mobile enheder 1:1
* @media queries ... hvor du fortæller browseren, hvornår der skal ske
ændringer i indhold/layout. Det kaldes breakpoints.
* relative størrelsesangivelser (% ol.)

Jeg har lavet eksemplet herunder til dig - måske du kan bruge det. Jeg
har indsat et enkelt breakpoint (skærmbredde >= 800px), hvor boks1 og 2
får besked på at ligge sig side om side.

Det regnes for at være god praksis at designe og implementere efter
"mobile first" princippet - dvs. at der designes og bestemmes indhold
efter mobile enheder først og "op efter", og at der også kodes efter
dette princip. Derfor har jeg også lavet et breakpoint der bruger
"min-width". Det har den konsekvens, at CSS som står uden for
breakpointet er forbeholdt den mindste skærm.

---------------------------------------------------------------------



<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<title>Mortens min-width eksempel</title>


<style>
/* Centrerer indholdet */
.wrapper {
width: 700px;
margin: 0 auto;
border: 1px solid blue;
}

.boks1,
.boks2 {
margin-top: 15px;
width: 340px;
border: 1px solid red;
margin-bottom: 15px;
}

.boks2 {
float: none;
margin-left: 0;
}

.boks3 {
width: 100%;
clear: both;
border: 1px solid cyan;
}



@media only screen and (min-width: 800px) {

.boks1,
.boks2 {
float: left;
}

.boks2 {
margin-left: 15px;
}

}
</style>

</head>

<body>
<div class="wrapper">
<div class="boks1">
<h3>Boks 1</h3>
<ul>
<li>Jens</li>
<li>Lise</li>
<li>Hans</li>
<li>Bente</li>
</ul>
</div>

<div class="boks2">
<h3>Boks 2</h3>
<ul>
<li>Jens</li>
<li>Lise</li>
<li>Hans</li>
<li>Bente</li>
</ul>
</div>

<div class="boks3">
<h3>Boks 3</h3>
<ul>
<li>Jens han sad på en knold og sang</li>
<li>Lise hun sad på en knold og sang</li>
<li>Hans han sad på en knold og sang</li>
<li>Bente hun sad på en knold og sang</li>
</ul>
</div>
</div>
</body>
</html>


--
Med venlig hilsen
Morten Bonderup
http://www.mortenbonderup.eu

[Kurt Hansen]

Den 02/06/2019 kl. 21.35 skrev Morten Bonderup:
> Den 02/06/2019 kl. 12.28 skrev Kurt Hansen:
>> Jeg har aldrig forsøgt mig med responsive webdesign og forventer
>> heller ikke at få det hele forklaret her, men et par spørgsmål trænger
>> sig på:
>>
>> Jeg var af den opfattelse at sidens elementer wrappes neden under
>> hinanden, f.eks. div'er og tabelller.
>>
>> Hvis jeg tester http://danacord.com/CSS-mesteren/ på
>> http://responsivetesttool.com/, så kan jeg se at det ikke er
>> tilfældet. Er det min kode der er forkert, eller har jeg vare
>> misforstået noget?
>>
>> Og hvad med "max-width"? Hvis jeg f.eks. skriver 50% for at få det til
>> at se ordentligt ud på en stor skærm, så ser det ikke særligt
>> brugervenligt ud på en mobil.

> Jeg har lavet eksemplet herunder til dig - måske du kan bruge det.

Jeg vil gerne kvittere og sige tak, men er gået i spekulationsbox: Skal
eller skal jeg ikke kaste mig ud i at skræddersy noget i hånden, eller
skal jeg finde en skabelon der passer (nogenlunde) til mit formål?

[Morten Bonderup]

> Jeg vil gerne kvittere og sige tak, men er gået i spekulationsbox: Skal
> eller skal jeg ikke kaste mig ud i at skræddersy noget i hånden, eller
> skal jeg finde en skabelon der passer (nogenlunde) til mit formål?

Har du tiden og lysten, så vil jeg mene, at du ved at påtage dig opgaven
med at skræddersy en løsning, vil få en relevant og værdsat kompetence
inden for moderne web-design.

Du kan sikkert godt google dig til en skabelon som, med en let
modificering, vil kunne opfylde dit mål om en responsiv produktside.

Jeg har ændret mit tidligere eksempel til at bruge grid. Jeg kan se at
det er det som bruges på danacord. Håber det kan tjene til inspiration ;-)

-----------------------------------------------------------------

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<title>Mortens min-width eksempel</title>


<style>
/* Centrerer indholdet */

/* Mobilt CSS */

.wrapper {
display: grid;
grid-template-columns: auto;
grid-template-rows: auto;
grid-template-areas:
"boks1"
"boks2"
"boks3";

width: 700px;
margin: 0 auto;
border: 1px solid blue;
}

.boks1,
.boks2 {
margin-top: 15px;
width: 340px;
border: 1px solid red;
margin-bottom: 15px;
}

.boks1 {
grid-area: boks1;
}

.boks2 {
grid-area: boks2;
margin-left: 0;
}

.boks3 {
grid-area: boks3;
width: 100%;
border: 1px solid cyan;
margin-bottom: 15px;
}

/* iPad og større skærme */

@media only screen and (min-width: 800px) {

.wrapper {
grid-template-columns: auto auto;
grid-template-rows: auto;
grid-template-areas:
"boks1 boks2"
"boks3 boks3";

[Dennis Munding]

Morten Bonderup wrote:

>
> Jeg har ændret mit tidligere eksempel til at bruge grid. Jeg kan se
> at det er det som bruges på danacord. Håber det kan tjene til
> inspiration ;-)
>

[SNIP: al irellevant (for mit svar) kode er fjernet


Der er ikke meget responsiv design, når du fastlåser bredden ved at
angive den i px.

Nedenstående vil give vandret rullebjælke ved skærmbredder under 700px
og vise en meget small indholdsdel på høje opløsninger.

> /* Mobilt CSS */
>
> .wrapper {

> ..
> width: 700px;
> ..
> }
>
> .boks1,
> .boks2 {
> ..
> width: 340px;
> ..
> }

Jeg vil anbefale enten at bruge % eller em/rem (sidstnævnte har jeg
ikke så meget erfaring med endnu).
Alternativt kan man også angive en max-width i px, hvis man mener, at
indholdet vil virke "tyndt" på store skærme, hvis det bliver for
fleksibelt.

Eks.:

width: 80%; <-- responsiv bredde
max-width: 1280px; <-- begrænsning af bredden ved meget høj opløsning.

[Morten Bonderup]

Den 05/06/2019 kl. 05.49 skrev Dennis Munding:

> [SNIP: al irellevant (for mit svar) kode er fjernet
>
>
> Der er ikke meget responsiv design, når du fastlåser bredden ved at
> angive den i px.
>
> Nedenstående vil give vandret rullebjælke ved skærmbredder under 700px
> og vise en meget small indholdsdel på høje opløsninger.
>
>> /* Mobilt CSS */
>>
>> .wrapper {
>> ..
>> width: 700px;
>> ..
>> }
>>
>> .boks1,
>> .boks2 {
>> ..
>> width: 340px;
>> ..
>> }
>
> Jeg vil anbefale enten at bruge % eller em/rem (sidstnævnte har jeg
> ikke så meget erfaring med endnu).
> Alternativt kan man også angive en max-width i px, hvis man mener, at
> indholdet vil virke "tyndt" på store skærme, hvis det bliver for
> fleksibelt.
>
> Eks.:
>
> width: 80%; <-- responsiv bredde
> max-width: 1280px; <-- begrænsning af bredden ved meget høj opløsning.
>
>

Du har ret - mit eksempel kan helt sikkert optimeres med brug af
relative størrelsesangivelser. Eksemplet udsprang af Kurts undren over,
at elementer som div og tabeller ikke wrappes under hinanden, og med
kodeeksemplet ville jeg vise det princip, som Luke Wroblewski (faderen
til mobile-first princippet) kalder for "mostly fluid"
(https://www.lukew.com/ff/entry.asp?1514), altså at man med @media
queries lader kolonner falde ned under hinanden.

[Kurt Hansen]

Den 04/06/2019 kl. 20.33 skrev Morten Bonderup:>
>
> Har du tiden og lysten, så vil jeg mene, at du ved at påtage dig
> opgaven med at skræddersy en løsning, vil få en relevant og
> værdsat kompetence inden for moderne web-design.

Desværre har jeg ingen af delene. Det er et afsluttet kapitel i mit liv.

> Den 05/06/2019 kl. 05.49 skrev Dennis Munding > >> Jeg vil anbefale enten at bruge % eller em/rem (sidstnævnte har

jeg>> ikke så meget erfaring med endnu).>> Alternativt kan man også
angive en max-width i px, hvis man mener, at>> indholdet vil virke
"tyndt" på store skærme, hvis det bliver for>> fleksibelt.

Den 05/06/2019 kl. 11.47 skrev Morten Bonderup:
>
> Du har ret - mit eksempel kan helt sikkert optimeres med brug af
> relative størrelsesangivelser. Eksemplet udsprang af Kurts undren over,
> at elementer som div og tabeller ikke wrappes under hinanden, og med
> kodeeksemplet ville jeg vise det princip, som Luke Wroblewski (faderen
> til mobile-first princippet) kalder for "mostly fluid"
> (https://www.lukew.com/ff/entry.asp?1514), altså at man med @media
> queries lader kolonner falde ned under hinanden.--

Venlig hilsen
Kurt Hansen