Help:Responsive web design: verschil tussen versies
k
Aanpassingen voor verbeterde weergave op mobiele apparaten
(Aanpassingen voor verbeterde weergave op mobiele apparaten) |
k (Aanpassingen voor verbeterde weergave op mobiele apparaten) |
||
| Regel 1: | Regel 1: | ||
{{Help/Navigatie}} | {{Help/Navigatie}} | ||
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 | 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 extensie [https://www.mediawiki.org/wiki/Extension:MobileFrontend mw:MobileFrontend] | * 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). | ||
| Regel 10: | Regel 10: | ||
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. | 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: [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. | 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]. | ||
Zaken die aangepakt moeten worden (aanvullingen zijn welkom): | Zaken die aangepakt moeten worden (aanvullingen zijn welkom): | ||
| Regel 19: | Regel 19: | ||
* Breuken werken niet altijd goed op de mobile versie (oorzaak sjablonen fraq en sfaq?), uitzoeken. | * Breuken werken niet altijd goed op de mobile versie (oorzaak sjablonen fraq en sfaq?), uitzoeken. | ||
==Titel en ondertitel== | |||
De titel en de ondertitel 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. | |||
Nu: | |||
<pre> | |||
<div style="font-size: 3em; font-family: 'Linux Libertine','Georgia','Times',serif; line-height: 1; font-weight: bold; text-align:center; border-style:none;"> | |||
Welkom op Wouda's Wiki | |||
</div> | |||
<p style="font-size: 2.1em; font-family: 'Linux Libertine','Georgia','Times',serif; line-height: 1; font-weight: normal; text-align:center"> | |||
De encyclopedie van het Woudagemaal | |||
</p> | |||
</pre> | |||
<div style="font-size: 3em; font-family: 'Linux Libertine','Georgia','Times',serif; line-height: 1; font-weight: bold; text-align:center; "> | |||
Welkom op Wouda's Wiki | |||
</div> | |||
<p style="font-size: 2.1em; font-family: 'Linux Libertine','Georgia','Times',serif; line-height: 1; font-weight: normal; text-align:center"> | |||
De encyclopedie van het Woudagemaal | |||
</p> | |||
<div class=titel> | |||
Welkom op Wouda's Wiki | |||
</div> | |||
<div class=ondertitel> | |||
De encyclopedie van het Woudagemaal | |||
</div> | |||
<br> | <br> | ||
[[Category:Help]] | [[Category:Help]] | ||