Help:Responsive web design: verschil tussen versies
k
Aanpassingen voor verbeterde weergave op mobiele apparaten
k (Aanpassingen voor verbeterde weergave op mobiele apparaten) |
k (Aanpassingen voor verbeterde weergave op mobiele apparaten) |
||
| 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. | 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. | 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. | * 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]. | * 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). | * 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. | 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]. | 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]. | ||
==Issues== | |||
Zaken die aangepakt moeten worden (aanvullingen zijn welkom): | 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. | * ✅ De welkomst tekst op de homepage is wat aan de grote kant op de mobiele versie --> opgelost. | ||
| Regel 36: | Regel 38: | ||
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. | 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. | ||
---- | ---- | ||
< | <div class=titel>Welkom op Wouda's Wiki</div> | ||
< | <div class=ondertitel>De encyclopedie van het Woudagemaal</div> | ||
---- | ---- | ||
<pre> | |||
<div class=titel>Welkom op Wouda's Wiki</div> | <div class=titel>Welkom op Wouda's Wiki</div> | ||
< | <div class=ondertitel>De encyclopedie van het Woudagemaal</div> | ||
</pre> | |||
==Verkleinen paginatitel op hoofdpagina== | ==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: | 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: | ||
| Regel 47: | Regel 51: | ||
{{DISPLAYTITLE:<span style="opacity:0;position:absolute;">{{FULLPAGENAME}}</span>}} | {{DISPLAYTITLE:<span style="opacity:0;position:absolute;">{{FULLPAGENAME}}</span>}} | ||
</pre> | </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> | <br> | ||
[[Category:Help]] | [[Category:Help]] | ||