Help:Responsive web design: verschil tussen versies
(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]] | ||
Versie van 30 apr 2023 13:01
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 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).
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.
Zaken die aangepakt moeten worden (aanvullingen zijn welkom):
- De welkomst tekst op de homepage is wat aan de grote kant op de mobiele versie.
- Sommige afbeeldingen schalen en passen keurig op de mobiele versie maar andere niet.
- Tekst in kolommen; aanpassen aan aanbevelingen in artikel.
- De sjablonen voor flexkolommen werken niet helemaal naar behoren op de mobiele versie (blijven te breed).
- 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:
<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>
Welkom op Wouda's Wiki
De encyclopedie van het Woudagemaal
Welkom op Wouda's Wiki
De encyclopedie van het Woudagemaal