Hoe maak je een website die zichzelf aanpast aan de resolutie van de bezoeker?

Dat is een hoop werk en nadenken. Zoveel zelfs dat de gemiddelde amateur programmeur dat niet kan bedenken. Je moet namelijk relatief programmeren, dat is in HTML nog veel eenvoudiger dan in andere programmeertalen. Relatief heeft betrekking op de resolutie van de gebruiker. Maar dan ook wel alles. Het beste is niets doen, dan is HTML redelijk goed aangepast, maar niet in alles perfect.

Door je hele website in te delen in tabellen en kolommen, en die allemaal een relatieve afmeting te geven.
Dus niet zoveel bij zoveel pixels, maar zoveel % van de breedte en zoveel% van de hoogte van het scherm.
Dan nog timmer je niet alles perfect dicht, en met plaatjes (die wel een vaste afmeting hebben) wordt het altijd een beetje uit zijn verband gerukt, maar je kunt in elk geval een heel eind komen voor de weergave op bijvoorbeeld normale of breedbeeld-schermen. Wel is er altijd één opmaak 'de mooiste'. Zorgen dat je in eén stuk HTML voor ELK scherm en ELKE resolutie optimaal mooie layout hebt, is zo goed als onmogelijk.

Met PHP kan je gegevens van de bezoeker opvragen zo ook de resolutie. Eigenlijk moet je dan meerdere style sheets maken van met PHP maak je een soort switch die voor iedere resolutie een eigen style sheet heeft en natuurlijk ook een default style sheet voor de exotische schermresoluties.

In style sheets definieer je de opmaak van je site (dat is de beste manier om de opmaak van je site te regelen: in CSS/style sheets).

Zie de bronnen voor informatie over de PHP switch en CSS. Ik geef toe: het is lastig en omslachtig maar het werkt wel. Eventueel kan je me mailen via mijn site voor hulp.

Er kan een heel boek gevuld worden met het antwoord op je vraag (en die zijn er dan ook) dus hierbij een kort antwoord met zoektermen waarmee je verder moet kunnen komen.

In tegenstelling tot een hierboven gegeven antwoord moet je juist GEEN tabellen gebruiken. Tabellen zetten namelijk een deel van je vormgeving vast.

Gebruik div's met een floating position. In dit geval verplaatsen ze bijvoorbeeld naar beneden als je het scherm te smal maakt. Daarnaast kun je (gedeeltelijk met javascript) besluiten een minimale EN maximale breedte te geven aan stukken content. Bijvoorbeeld op deze site zou ervoor gekozen kunnen worden om de rechterkolom helemaal weg te laten vallen als de pagina te smal is.

Vaste resolutie gebruiken met stylesheets is slechts een gedeeltelijke oplossing omdat mensen met grote schermen vaak hun browser venster niet helemaal openen. Hierdoor onstaan veel meer tussen maten waar je vooraf geen rekening meer mee kunt houden.

Daarnaast als je website zichzelf moet aanpassen zul je moeten zorgen dat ALLES in je site variabel is van grote. Dit kan zelfs met images zonder al te veel problemen.
De truc hiervoor is om geen pixels(px) te gebruiken maar em's. Een em is de grote die een hoofdletter M inneemt.

Met een hoge resolutie zetten de meeste mensen hun lettertype ook iets groter om het beter te kunnen lezen. Maar op een smartphone is het juist weer kleiner omdat je het beeld dichter bij je ogen hebt. Een em maakt de grote van de website dus afhankelijk van de grote van het lettertype dat mensen ZELF gebruiken. Jij kunt dan aangeven dat een tekst veld bijvoorbeeld 20em breed is. De breedte van 20 keer M. Diezelfde formaten kun je ook gebruiken voor images.

Zoektermen voor meer informatie:
Elastic layout / flexible layout /
div
floating content
em

Maar bij voorbaat, om iets helemaal zichzelf aan te laten passen kost erg veel moeite!

* in de tweede bron zie je een voorbeeld van em's aan het werk. Verander de lettergrote en het formaat van alles in de site, inclusief images, veranderd mee.