Hét vraag- en antwoordplatform van Nederland

Hoe kan ik een webpagina anders laten tonen op mobiel dan op groot scherm?

Als je zelf een website beheert, hoe kun je die dan zo maken dat de weergave van de pagina anders wordt op een klein scherm (bijvoorbeeld van een mobieltje) dan op een groot scherm (bijvoorbeeld van een desktop of een tablet)?

Als voorbeeld: stel dat ik een webpagina wil maken die op een groot scherm uit drie kolommen bestaat, maar op een klein scherm uit één schermbrede kolom? De ene kolom op het kleine scherm moet dan dezelfde informatie bevatten als de drie kolommen op het grote scherm, maar dan onder elkaar in plaats van in kolommen.

Hoe doe ik dit? Gaat dat met HTML, HTML5, CSS, meta-tags, scripts, iets anders?
 

Cryofiel
8 jaar geleden
1.9K
SimonV
8 jaar geleden
Zie hier wat info:
http://www.mijn-eigen-website.nl/website-mobiel.html
Thecis
8 jaar geleden
Er zijn verschillende platforms van hoe je een website kan maken.
Als je een CMS systeem gebuikt (wat tegenwoordig vrij gebruikelijk is) zoals Drupal, Joomla of Wordpress zijn er vele Thema's te vinden. Die thema's zijn er in allerlei varianten, zo ook thema's die al ingebouwd hebben dat het geschikt is voor display op mobiele apparaten (telefoons, tablets, etc). Binnen Drupal en Wordpress kan je bij het zoeken in de thema's daar ook op filteren. Joomla weet ik niet zeker, maar verwacht van wel. Gebruik je al een systeem?
Cryofiel
8 jaar geleden
Ja, ik gebruik Wordpress. Daar ben ik echter nog niet bepaald bedreven in. Thema's heb ik bijvoorbeeld nog nooit gebruikt, ik ben gewoon uitgegaan van wat mijn voorganger heeft opgezet.
Thecis
8 jaar geleden
@cryofiel
Ikzelf ben bezig met Drupal en ben nu met iemand begonnen om Wordpress te leren. Het grootste gedeelte is het kiezen van een goed thema. Voor het leren van Drupal heb ik voor zo'n 15 euro (of 20) een boek gekocht om het te leren. Is wel een aanrader om ook te doen voor Wordpress. Het kan je een hoop gedoe en irritatie besparen.

Heb je meer informatie nodig om de vraag te beantwoorden? Reageer dan hier.

Antwoorden (2)

De term waarop je wilt zoeken is responsive webdesign. Als ik je vraag direct zou moeten beantwoorden zou dit de grootte van een artikel aannemen, maar hier is een goed begin https://www.youtube.com/watch?v=BIz02qY5BRA.

In het kort, maakt men gebruik van zogenaamde CSS media tags. Hierbij kan je o.a. condities stellen als "gebruik deze CSS styling wanneer de breedte van het scherm < 500px is". Dit wordt behandeld in de video. Volgens mij zijn er ook sites die letterlijk twee versies maken: een voor mobile devices, en een ander voor grotere monitoren.

Toegevoegd na 3 uur:
Lees ook eens de Wikipedia versie. Is best duidelijk geformuleerd.
(Lees meer...)
Verwijderde gebruiker
8 jaar geleden
Gebruik @media en dan min-width
(Lees meer...)
Verwijderde gebruiker
8 jaar geleden
Amadea
8 jaar geleden
Wat bedoel je daarmee, geef eens wat meer uitleg?

Weet jij het beter..?

Het is niet mogelijk om je eigen vraag te beantwoorden Je mag slechts 1 keer antwoord geven op een vraag Je hebt vandaag al antwoorden gegeven. Morgen mag je opnieuw maximaal antwoorden geven.

0 / 5000
Gekozen afbeelding