Responsive design voor MediaWiki: verschil tussen versies
(Eerste opzet) |
k |
||
| Regel 34: | Regel 34: | ||
De browser "weet" hoe groot het scherm is d.m.v. het gebruik van "media-queries". | 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: | ||
| + | |||
| + | {| style="border-spacing:3px;border-collapse:separate; width:100%" | ||
| + | | colspan="3" style="background-color:#eee;text-align:center;height:40px" | '''navbar''' | ||
| + | |- | ||
| + | | rowspan="2" style="background-color:#eee;text-align:center" | '''sidebar-<br>left''' | ||
| + | | style="background-color:#eee;text-align:center;height:30px" | '''subnav''' | ||
| + | | rowspan="2" style="background-color:#eee;text-align:center" | '''sidebar-<br>right''' | ||
| + | |- | ||
| + | | style="background-color:#f5f5f5;text-align:center;height:100px" | '''main content''' <br>(including firstHeading) | ||
| + | |- | ||
| + | | colspan="3" style="background-color:#eee;text-align:center;height:40px" | '''footer''' | ||
| + | |} | ||
| + | === Grid instellingen === | ||
| + | |||
| + | Deze inhoud is overgenomen van [http://tweeki.thai-land.at/wiki/Configuration_Options#Grids Tweeki handleiding]. | ||
Versie van 4 okt 2017 om 16:10
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.
Inhoud
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:
| navbar | ||
| sidebar- left |
subnav | sidebar- right |
| main content (including firstHeading) | ||
| footer | ||
Grid instellingen
Deze inhoud is overgenomen van Tweeki handleiding.