Responsive design voor MediaWiki: verschil tussen versies

Uit MediaWikiGids
Ga naar: navigatie, zoeken
k
k (→‎Grid instellingen)
 
(5 tussenliggende versies door dezelfde gebruiker niet weergegeven)
Regel 37: Regel 37:
 
== Voorbeeld toepassing responsive design met Tweeki-skin ==
 
== Voorbeeld toepassing responsive design met Tweeki-skin ==
  
−
De basis layout van de Tweeki-skin:
+
De basis layout van de Tweeki-skin (voor het grote desktop-scherm - niet responsive weergegeven!):
  
 
{| style="border-spacing:3px;border-collapse:separate; width:100%"
 
{| style="border-spacing:3px;border-collapse:separate; width:100%"
Regel 53: Regel 53:
  
 
Deze inhoud is overgenomen van [http://tweeki.thai-land.at/wiki/Configuration_Options#Grids Tweeki handleiding].
 
Deze inhoud is overgenomen van [http://tweeki.thai-land.at/wiki/Configuration_Options#Grids Tweeki handleiding].
 +
 +
Tweeki gebruikt een grid bestaande uit 12 kolommen, zoals bekend van Bootstrap. Als 'default' is een indeling van 10 kolommen voor de hoofdinhoud (main-content) en 2 kolommen voor een rechter zijpaneel (right sidebar) ingesteld.
 +
 +
Dit bij een vaste of "fluid" breedte, zoals ingesteld in [[MediaWiki:Tweeki-container-class]] (<code>container</code> of <code>container-fluid</code>).
 +
 +
De basisinstelling kan worden aangepast in de <code>LocalSettings.php</code>.
 +
 +
Hieronder voorbeelden van instellingen.
 +
 +
==== Geen zijpanelen - no sidebars ====
 +
<div class="container-fluid gridexample"><div class="row">
 +
<div class="col-sm-offset-1 col-sm-10 content">main content</div>
 +
</div></div>
 +
 +
$wgTweekiSkinGridNone = array(
 +
  "mainoffset" => 1,
 +
  "mainwidth" => 10
 +
);
 +
 +
:Inspringen (offset) en breedte (width) voor de hoofdinhoud, wanneer er geen zijpanelen (sidebars) worden weergegeven.
 +
 +
==== Zijpaneel links - left sidebar ====
 +
 +
<div class="container-fluid gridexample"><div class="row">
 +
<div class="col-sm-3 content">left sidebar</div>
 +
<div class="col-sm-9 content">main content</div>
 +
</div></div>
 +
 +
$wgTweekiSkinGridLeft = array(
 +
  "leftoffset" => 0,
 +
  "leftwidth" => 3,
 +
  "mainoffset" => 0,
 +
  "mainwidth" => 9
 +
);
 +
 +
:Inspringen en breedte voor het linker zijpaneel en de hoofdinhoud.
 +
 +
==== Zijpaneel rechts - right sidebar ====
 +
 +
<div class="container-fluid gridexample"><div class="row">
 +
<div class="col-sm-9 content">main content</div>
 +
<div class="col-sm-3 content">right sidebar</div>
 +
</div></div>
 +
 +
$wgTweekiSkinGridRight = array(
 +
  "mainoffset" => 0,
 +
  "mainwidth" => 9,
 +
  "rightoffset" => 0,
 +
  "rightwidth" => 3
 +
);
 +
 +
:Inspringen (offsets) en breedte voor de hoofdinhoud en het rechter zijpaneel.
 +
 +
==== Zijpanelen aan beide zijden - sidebars on both sides ====
 +
 +
<div class="container-fluid gridexample"><div class="row">
 +
<div class="col-sm-2 content">left sidebar</div>
 +
<div class="col-sm-8 content">main content</div>
 +
<div class="col-sm-2 content">right sidebar</div>
 +
</div></div>
 +
 +
$wgTweekiSkinGridBoth = array(
 +
  "leftoffset" => 0,
 +
  "leftwidth" => 2,
 +
  "mainoffset" => 0,
 +
  "mainwidth" => 8,
 +
  "rightoffset" => 0,
 +
  "rightwidth" => 2
 +
);
 +
 +
:Inspringen en breedte voor beide panelen en hoofdinhoud

Huidige versie van 4 okt 2017 om 17:39

Door het maken van een Responsive Design wordt de layout van de website flexibel aangepast aan de grootte en resolutie van het scherm van de bezoeker van de website.

Technieken voor het maken van een responsive design

Toepassing van Grids

Een website bestaat in veel gevallen uit een aantal verschillende elementen:

  • Navigatie of menu's
  • Kop of header
  • Main body
  • Zijpanelen of sidebars (links of rechts)
  • Footer

Waar het "vroeger" de gewoonte was deze onderdelen een vaste plaats t.o.v. van elkaar te geven (meestal in tabel-vorm), komen deze onderdelen nu in een "grid" (rooster) te staan.


De plaats van de onderdelen ten opzichte van elkaar wordt afhankelijk gemaakt van de grootte van het scherm.

Een grid is meestal onderdeel van de MediaWiki-skin. Zo gebruikt Foreground het grid van Foundation en Tweeki de bootstrap-grid.

De grootte van de onderdelen en de onderlinge positie wordt (bijv. met CSS) gedefinieerd, afhankelijke van de grootte van het scherm.

Breakpoints

Browsers hebben op verschillende apparaten een in grootte uiteenlopende viewport (het zichtbare deel van de website). Wanneer de viewport kleiner wordt, zoals op smartphones, dan kan de layout niet meer hetzelfde zijn als bij een grote viewport van een browser op een desktop.

Veel ontwerpers gebruiken specifieke layouts voor tenminste:

  • Smartphones - small
  • Tablets - medium
  • Desktops - large

Het punt waarop de layout overschakelt tussen small, medium en large heet een breakpoint.

De browser "weet" hoe groot het scherm is d.m.v. het gebruik van "media-queries".

Voorbeeld toepassing responsive design met Tweeki-skin

De basis layout van de Tweeki-skin (voor het grote desktop-scherm - niet responsive weergegeven!):

navbar
sidebar-
left 		subnav sidebar-
right
main content
(including firstHeading)
footer

Grid instellingen

Deze inhoud is overgenomen van Tweeki handleiding.

Tweeki gebruikt een grid bestaande uit 12 kolommen, zoals bekend van Bootstrap. Als 'default' is een indeling van 10 kolommen voor de hoofdinhoud (main-content) en 2 kolommen voor een rechter zijpaneel (right sidebar) ingesteld.

Dit bij een vaste of "fluid" breedte, zoals ingesteld in MediaWiki:Tweeki-container-class (container of container-fluid).

De basisinstelling kan worden aangepast in de LocalSettings.php.

Hieronder voorbeelden van instellingen.

Geen zijpanelen - no sidebars

main content
$wgTweekiSkinGridNone = array( 
 "mainoffset" => 1, 
 "mainwidth" => 10 
);
Inspringen (offset) en breedte (width) voor de hoofdinhoud, wanneer er geen zijpanelen (sidebars) worden weergegeven.

Zijpaneel links - left sidebar

left sidebar
main content
$wgTweekiSkinGridLeft = array( 
 "leftoffset" => 0, 
 "leftwidth" => 3, 
 "mainoffset" => 0, 
 "mainwidth" => 9 
);
Inspringen en breedte voor het linker zijpaneel en de hoofdinhoud.

Zijpaneel rechts - right sidebar

main content
right sidebar
$wgTweekiSkinGridRight = array( 
 "mainoffset" => 0, 
 "mainwidth" => 9, 
 "rightoffset" => 0, 
 "rightwidth" => 3 
);
Inspringen (offsets) en breedte voor de hoofdinhoud en het rechter zijpaneel.

Zijpanelen aan beide zijden - sidebars on both sides

left sidebar
main content
right sidebar
$wgTweekiSkinGridBoth = array( 
 "leftoffset" => 0, 
 "leftwidth" => 2, 
 "mainoffset" => 0, 
 "mainwidth" => 8, 
 "rightoffset" => 0, 
 "rightwidth" => 2 
);
Inspringen en breedte voor beide panelen en hoofdinhoud
Overgenomen van "http://gids.wikiwerkers.nl/w/index.php?title=Responsive_design_voor_MediaWiki&oldid=258"