Help:Responsive web design: verschil tussen versies

Huidige versie van 7 jan 2024 om 11:47

Responsive web design is een benadering van webdesign waarbij de webdeveloper streeft naar een optimale webervaring voor een breed scala aan apparaten (van desktop computerschermen tot mobiele telefoons). Het ontwerp van een responsive website schaalt mee met de afmetingen van een scherm, zonder in te leveren op leesbaarheid van tekst of bruikbaarheid van de gebruikersinterface. Met de update van Wouda's wiki naar versie 1.39 (eind april 2023) is er een flinke stap gemaakt in het beter responsive maken van de wiki.

Techniek

Met de extensie mw:MobileFrontend is er een aparte interface gekomen voor mobiel en desktop gebruik. Onderaan elke pagina is er nu een link gekomen om te switchen tussen de mobiele en de desktop versie. Op mobiele telefoons wordt automatisch de mobiele versie gekozen.
De nieuwe desktop interface (Vector 2022) heeft ook nieuwe responsive eigenschappen gekregen. Zo is het menu aan de zijkant nu in of uit te klappen en als de website in een kleiner scherm wordt bekeken verandert er nu meer aan de interface dan in het verleden (denk aan automatisch inklappen van de linker balk met menu en inhoudsopgave (de sidebar). Meer over de ideeën achter het ontwerp van deze interface is hier te vinden: mw:Desktop Improvements.
Als mobile skin is er gekozen voor mw:Minerva Neue. Deze interface is ontworpen specifiek voor de mobiele gebruiker, dit is de interface die nu door veel wiki's gebruikt wordt als de mobiele skin (zoals Wikipedia).

Voor de redacteuren

De verbeterde responisiveness van de Wiki wordt voor een heel groot deel door bovengenoemde techniek onder de motorkap geregeld. Echter voor de redacteuren van Wouda's Wiki heeft dit ook gevolgen. De techniek kan niet alles oplossen waardoor er zaken soms toch anders uit kunnen zien dan beoogd. Bij het maken van een wiki pagina is het verstandig om ook te kijken hoe deze op een mobiele telefoon eruit komt te zien. Afbeeldingen kunnen ineens niet meer goed passen en gaan uitsteken of bijvoorbeeld niet meer naast elkaar staan maar boven elkaar.

Deze wiki pagina is bedoeld om de achtergrond te schetsen en om tips te geven. In eerste instantie is het ook een aanteken blad met zaken die aangepakt moeten worden.

Aanbevelingen voor redacteuren voor betere mobiel vriendelijke wiki pagina's zijn oa hier te vinden: mw:Recommendations for mobile friendly articles on Wikimedia wikis. Dit is echter wel een vrij technisch artikel. Of mw:Making MediaWiki Mobile Friendly.

Afbreken aan einde van de regel

Het gebruik om aan het einde van de regel een (lang) woord af te breken met een streepje - kan onverwachte resultaten opleveren. Afhankelijk van de breedte van het scherm kan het zomaar zijn dat het afgebroken woord niet meer aan het einde van de regel staat maar ergens middenin. En dan ziet dat afbreekstreepje er wel erg vreemd uit. De gemakkelijkste oplossing is in het geheel (lange) woorden niet meer afbreken.

Mocht je toch graag afbreken toestaan gebruik dan een zogenaamde "soft hypen" . Hiermee geef je aan waar een woord afgebroken mag worden, de browser kan hier dan gebruik van maken. Vooral bij gebruik van meerdere (smallere) kolommen kan dit nuttig zijn.

het hoogheemraadschap: het hoogheemraadschap
Woudagemaal te Lemmer: Woudagemaal te Lemmer

Issues

Zaken die aangepakt moeten worden (aanvullingen zijn welkom):

✅ De welkomst tekst op de homepage is wat aan de grote kant op de mobiele versie --> opgelost.
✅ Tekst "Hoofdpagina" (pagina titel) op de hoofdpagina proberen weg te halen --> kleiner weten te maken met een stukje code van MediaWiki hoofdpagina.
Sommige afbeeldingen schalen en passen keurig op de mobiele versie maar andere niet. Afbeeldingen met "link=" schalen niet dit weghalen lijkt de oplossing.
✅ Tekst in kolommen; aanpassen aan aanbevelingen in artikel. --> opgelost, wel op een iets andere manier dan in het artikel aangegeven.
✅ De sjablonen voor flexkolommen werken niet helemaal naar behoren op de mobiele versie (blijven te breed). --> opgelost, minimale breedte van 400px verlaagd naar 300px.
✅ Breuken werken niet altijd goed op de mobiele versie (oorzaak sjablonen fraq en sfaq?) --> opgelost (.css hiervoor ook in mobile.css gezet).
Verwijderen "overleg" tab in mobiele versie.

Titel en ondertitel

De titel en de ondertitel op de hoofdpagina staan beide in een lettertype met schreef (serif), gelijk aan het lettertype dat voor heading 1 gebruikt wordt. Voor de titel wordt een font grootte (font-size) van 3em gebruikt en voor de ondertitel 2,1em. Ter vergelijk; heading 1 gebruikt een font grootte van 1,8em. Daarnaast staat de titel in vet (bold) en de ondertitel normaal.

Oorspronkelijk:

Welkom op Wouda's Wiki

De encyclopedie van het Woudagemaal

Oplossing

Gebruik van classes voor de opmaak van de titel en de ondertitel. In common.ccs opmaak van de classen voor de desktop versie en in mobile.css voor de mobiele versie.

Welkom op Wouda's Wiki

De encyclopedie van het Woudagemaal

<div class=titel>Welkom op Wouda's Wiki</div>
<div class=ondertitel>De encyclopedie van het Woudagemaal</div>

Verkleinen paginatitel op hoofdpagina

De pagina titel "Hoofdpagina" op de hoofdpagina nam erg veel ruimte in en voegde niets toe. Was vooral op de mobile versie storend. Opgelost door te kijken hoe dit op de hoofdpagina van MediaWiki opgelost was. Volgende stukje code overgenomen en ook op de hoofdpagina van Wouda's Wiki geplaatst:

{{DISPLAYTITLE:<span style="opacity:0;position:absolute;">{{FULLPAGENAME}}</span>}}

Gereedschap: weglaten op mobile

<div class="nomobile"> ... </div>

Breede plaatjes of tabellen

@@ Regel 2: / Regel 2: @@
 Responsive web design is een benadering van webdesign waarbij de webdeveloper streeft naar een optimale webervaring voor een breed scala aan apparaten (van desktop computerschermen tot mobiele telefoons). Het ontwerp van een responsive website schaalt mee met de afmetingen van een scherm, zonder in te leveren op leesbaarheid van tekst of bruikbaarheid van de gebruikersinterface.
 Met de update van Wouda's wiki naar versie 1.39 (eind april 2023) is er een flinke stap gemaakt in het beter responsive maken van de wiki.
+==Techniek==
 * Met de extensie [https://www.mediawiki.org/wiki/Extension:MobileFrontend mw:MobileFrontend] is er een aparte interface gekomen voor mobiel en desktop gebruik. Onderaan elke pagina is er nu een link gekomen om te switchen tussen de mobiele en de desktop versie. Op mobiele telefoons wordt automatisch de mobiele versie gekozen.
 * De nieuwe desktop interface (Vector 2022) heeft ook nieuwe responsive eigenschappen gekregen. Zo is het menu aan de zijkant nu in of uit te klappen en als de website in een kleiner scherm wordt bekeken verandert er nu meer aan de interface dan in het verleden (denk aan automatisch inklappen van de linker balk met menu en inhoudsopgave (de sidebar). Meer over de ideeën achter het ontwerp van deze interface is hier te vinden: [https://www.mediawiki.org/wiki/Reading/Web/Desktop_Improvements mw:Desktop Improvements].
 * Als mobile skin is er gekozen voor [https://www.mediawiki.org/wiki/Skin:Minerva_Neue mw:Minerva Neue]. Deze interface is ontworpen specifiek voor de mobiele gebruiker, dit is de interface die nu door veel wiki's gebruikt wordt als de mobiele skin (zoals Wikipedia).
+==Voor de redacteuren==
 De verbeterde responisiveness van de Wiki wordt voor een heel groot deel door bovengenoemde techniek onder de motorkap geregeld. Echter voor de redacteuren van Wouda's Wiki heeft dit ook gevolgen. De techniek kan niet alles oplossen waardoor er zaken soms toch anders uit kunnen zien dan beoogd. Bij het maken van een wiki pagina is het verstandig om ook te kijken hoe deze op een mobiele telefoon eruit komt te zien. Afbeeldingen kunnen ineens niet meer goed passen en gaan uitsteken of bijvoorbeeld niet meer naast elkaar staan maar boven elkaar.
@@ Regel 12: / Regel 13: @@
 Aanbevelingen voor redacteuren voor betere mobiel vriendelijke wiki pagina's zijn oa hier te vinden: [https://www.mediawiki.org/wiki/Recommendations_for_mobile_friendly_articles_on_Wikimedia_wikis mw:Recommendations for mobile friendly articles on Wikimedia wikis]. Dit is echter wel een vrij technisch artikel. Of [https://www.mediawiki.org/wiki/Making_MediaWiki_Mobile_Friendly mw:Making MediaWiki Mobile Friendly].
+===Afbreken aan einde van de regel===
+Het gebruik om aan het einde van de regel een (lang) woord af te breken met een streepje <code>-</code> kan onverwachte resultaten opleveren. Afhankelijk van de breedte van het scherm kan het zomaar zijn dat het afgebroken woord niet meer aan het einde van de regel staat maar ergens middenin. En dan ziet dat afbreekstreepje er wel erg vreemd uit. De gemakkelijkste oplossing is in het geheel (lange) woorden niet meer afbreken.
+Mocht je toch graag afbreken toestaan gebruik dan een zogenaamde "soft hypen" <code>&amp;shy;</code>. Hiermee geef je aan waar een woord afgebroken mag worden, de browser kan hier dan gebruik van maken. Vooral bij gebruik van meerdere (smallere) kolommen kan dit nuttig zijn.
+<div class="kolommen-2">
+* <code>het hoog&amp;shy;heem&amp;shy;raad&amp;shy;schap</code>: het hoog&shy;heem&shy;raad&shy;schap
+* <code>Wouda&amp;shy;gemaal te Lem&amp;shy;mer</code>: Wouda&shy;gemaal te Lem&shy;mer
+</div>
+==Issues==
 Zaken die aangepakt moeten worden (aanvullingen zijn welkom):
-* De welkomst tekst op de homepage is wat aan de grote kant op de mobiele versie.
+* &#9989; De welkomst tekst op de homepage is wat aan de grote kant op de mobiele versie --> opgelost.
-* Sommige afbeeldingen schalen en passen keurig op de mobiele versie maar andere niet.
+* &#9989; Tekst "Hoofdpagina" (pagina titel) op de hoofdpagina proberen weg te halen --> kleiner weten te maken met een stukje code van MediaWiki hoofdpagina.
-* Tekst in kolommen; aanpassen aan aanbevelingen in artikel.
+* Sommige afbeeldingen schalen en passen keurig op de mobiele versie maar andere niet. Afbeeldingen met "link=" schalen niet dit weghalen lijkt de oplossing.
-* De sjablonen voor flexkolommen werken niet helemaal naar behoren op de mobiele versie (blijven te breed).
+* &#9989; Tekst in kolommen; aanpassen aan aanbevelingen in artikel. --> opgelost, wel op een iets andere manier dan in het artikel aangegeven.
-* Breuken werken niet altijd goed op de mobile versie (oorzaak sjablonen fraq en sfaq?), uitzoeken.
+* &#9989; De sjablonen voor flexkolommen werken niet helemaal naar behoren op de mobiele versie (blijven te breed). --> opgelost, minimale breedte van 400px verlaagd naar 300px.
+* &#9989; Breuken werken niet altijd goed op de mobiele versie (oorzaak sjablonen fraq en sfaq?) --> opgelost (.css hiervoor ook in mobile.css gezet).
+* Verwijderen "overleg" tab in mobiele versie.
 ==Titel en ondertitel==
@@ Regel 35: / Regel 48: @@
 Gebruik van classes voor de opmaak van de titel en de ondertitel. In common.ccs opmaak van de classen voor de desktop versie en in mobile.css voor de mobiele versie.
 ----
-<p class=titel style="margin: 10px 0px 5px 0px; line-height: 1.2;">Welkom op Wouda's Wiki</p>
+<div class=titel>Welkom op Wouda's Wiki</div>
-<p class=ondertitel style="margin: 5px 0px 10px 0px; line-height: 1.2;">De encyclopedie van het Woudagemaal</p>
+<div class=ondertitel>De encyclopedie van het Woudagemaal</div>
-----
-<p class=titel>Welkom op Wouda's Wiki</p>
-<p class=ondertitel>De encyclopedie van het Woudagemaal</p>
 ----
+<pre>
+<div class=titel>Welkom op Wouda's Wiki</div>
+<div class=ondertitel>De encyclopedie van het Woudagemaal</div>
+</pre>
+==Verkleinen paginatitel op hoofdpagina==
+De pagina titel "Hoofdpagina" op de hoofdpagina nam erg veel ruimte in en voegde niets toe. Was vooral op de mobile versie storend. Opgelost door te kijken hoe dit op de hoofdpagina van [https://www.Mediawiki.org MediaWiki] opgelost was. Volgende stukje code overgenomen en ook op de hoofdpagina van Wouda's Wiki geplaatst:
+<pre>
+{{DISPLAYTITLE:<span style="opacity:0;position:absolute;">{{FULLPAGENAME}}</span>}}
+</pre>
+==Gereedschap: weglaten op mobile==
+<pre>
+<div class="nomobile"> ... </div>
+</pre>
+==Breede plaatjes of tabellen==
+<div style="margin:0 auto;overflow:scroll;width:auto;max-width:100%">
+  [[Bestand:Woudagemaal met ondergaande zon, met wave.jpg |  960px | gecentreerd | alt=Foto van het Woudagemaal met ondergaande zon op de achtergrond ]]
+</div>
 <br>
 [[Category:Help]]