Om een webpagina op elk schermformaat prettig leesbaar te houden dient een website-ontwikkelaar daar rekening mee te houden. Maar wat is responsive design nou precies? Ga ik uitgebreid op in in mijn boek Handboek HTML 5 en CSS, hieronder lees je alvast het antwoord op de vraag!
Een webpagina moet op elk schermformaat bruikbaar zijn. Hij hoeft er niet altijd hetzelfde uit te zien (dat kan ook niet), maar de informatie moet in het scherm passen en leesbaar zijn, knoppen en links moeten groot genoeg zijn om erop te kunnen tikken en formulieren moeten bruikbaar zijn, om maar een paar dingen te noemen. Omdat een webontwikkelaar niet weet of de bezoeker een telefoon, een tablet, een laptop of een bureaucomputer gebruikt, moeten er verschillende versies van het ontwerp worden gemaakt. Niet precies op maat voor een bepaalde schermgrootte, maar met overgangen naar een andere lay-out op punten waar het ontwerp niet meer klopt (‘breekt’).
Van klein naar groot
Om praktische redenen wordt de CSS vaak opgebouwd vanaf het kleinste scherm. Daarna kan met de responsive-design-modus van de DevTools in de browser het schermformaat geleidelijk groter worden gemaakt. Zodra het ontwerp breekt, of de ontwerper er een andere indeling voor heeft bedacht, wordt de lay-out aangepast. Deze aanpak heet mobile first. Een andere aanpak is gebaseerd op een doorsnee van apparaatafmetingen. Voorjaar 2022 zijn wereldwijd de meestgebruikte schermbreedten 360, 375, 414, 1366 en 1920px.
Maar hoe weet de browser wanneer de lay-out moet veranderen? U kunt een heel eind komen door containers te maken met variabele afmetingen – gridlayout en flexbox zijn daarvoor gemaakt. Is dat niet genoeg, dan gebruikt u media queries. Hiermee geeft u aan dat bij een bepaald schermformaat andere CSSeigenschappen van toepassing worden.
Container queries
Daarnaast is het sinds voorjaar 2022 mogelijk om container queries te definiëren. Dan bepaalt niet het schermformaat of de opmaak verandert, maar het formaat van een vooraf gedefinieerde container. Deze nieuwe mogelijkheid vindt u elders in het boek.
Handboek HTML 5 en CSS, 6e editie
HTML en CSS zijn twee onmisbare technieken voor het maken van webpagina’s en webapps. Zonder HTML zijn er geen webpagina’s en zonder CSS zien ze er wel erg kaal uit. In deze zesde, bijgewerkte editie van het Handboek HTML 5 en CSS leert u met beide webtalen werken. U leert eerst hoe u de content markeert met HTML. Daarna maakt u de onderdelen van de pagina op met CSS. Het uitgangspunt daarbij is dat u niet alleen leert dát dingen werken, maar vooral waaróm ze werken.
U krijgt uitleg over het structureren van HTML-documenten en het markeren van alle onderdelen: paginakop, artikelkoppen, tekst, lijsten, hyperlinks, afbeeldingen, video en audio, formulieren en tabellen. Een goede paginastructuur in HTML is de beste garantie voor een geslaagde lay-out en opmaak met CSS.
De tweede helft van het boek behandelt het maken van lay-outs en het opmaken van de onderdelen met CSS. Er wordt uitgebreid ingegaan op responsive design met alle technieken die CSS daarvoor biedt: gridlay-out, flexbox, multi-column en positionering.
U leert hoe u lettertypen downloadt, tekst opmaakt, navigatiemenu’s vormgeeft, kleur gebruikt en achtergronden maakt. Ook het werken met CSS-functies en het maken van overgangen, animaties en transformaties in 2D en 3D komen aan bod.
Het boek is uitgebreid met uitleg over toegankelijkheid, container queries, een nieuw hulpmiddel voor responsive design, en cascade layers, voor meer controle over de cascade.
Op handboek-html-css.nl vindt u code en (interactieve) voorbeelden.
Dit leerboek en naslagwerk geeft een stevige ondergrond voor het werken met de technieken die de basis vormen van modern webdesign.
Website: handboek-html-css.nl
40 jaar Windows: van MS-DOS tot het einde van een tijdperk
Het is dit jaar precies 40 jaar geleden dat de eerste versie van Windows op de wereld werd losgelaten. Om precies te zijn hebben we het dan over 20 november 1985. 40 jaar Windows: Van MS-DOS tot het einde van een tijdperk. Het veroorzaakte geen enkele reuring, de release van Microsoft Windows 1.0. Nu was…
Passkeys in de praktijk: 5 manieren om veiliger in te loggen zonder wachtwoorden
Als vervolg op mijn blogpost over het gebruik van passkeys – Inloggen zonder wachtwoorden! Waarom Passkeys nu echt de moeite waard zijn – kwam ik nog twee artikelen tegen op het web. Bij ZDNET las ik een verhaal over de hobbelige weg die het overstappen naar passkeys nog is en bij PCWorld las ik een…
Ontwijk de prijsverhoging op je Creative Cloud Fotografielidmaatschap!
Paniek in de tent! De abonnementsprijzen voor de Creative Cloud Fotografielidmaatschappen gaan omhoog! De prijs voor het fotografielidmaatschap gaat van $ 9,99 naar $ 14,99 per maand. Een fikse prijsverhoging van $ 5,-! (Ik heb nog geen Nederlandse prijzen, dat is blijkbaar een flinke rekensom voor Adobe.) 60 dollar per jaar duurder, dat is geen…
Werken met de Tool Verwijderen in Photoshop Elements 2025
Wat is er nieuw in Photoshop Elements 2025? Best wel veel nieuw leuks. Net als in grote broer Photoshop zitten er in Photoshop Elements 2025 nieuwe AI-gereedschappen om je met het bewerken van je foto’s te helpen. Je kunt bijvoorbeeld makkelijk de kleur van een object veranderen. Er is een filter waarmee de scherptediepte van…
Het verbeterde gereedschap Verwijderen in Lightroom Classic
Het is weer oktober, en ja, daar is Adobe weer met allemaal vernieuwingen in de software. Altijd tijdens Adobe MAX laat Adobe zien waaraan ze dit jaar hebben gewerkt om hun software nog slimmer, handiger en productiever te maken. De spectaculairste vernieuwing zit in Adobe Premiere, waarin je nu stukjes video generatief kunt toevoegen. Natuurlijk…
Waarom ik trouw blijf aan Lightroom Classic en Photoshop
Vriend en collega Pieter Dhaeze schreef op zijn site EOSzine over de redenen waarom hij al jaren bijna uitsluitend Photoshop en Lightroom Classic gebruikt er daar tutorials voor maakt, terwijl er toch zoveel alternatieven zijn. Nu we samen net weer een nieuw boek hebben – Ontdek Lightroom Classic, 4de editie – is het misschien voor…
Peter Doolaard is auteur van het Handboek HTML5 en CSS3. Dat geeft een behoorlijk compleet overzicht van wat HTML en CSS te bieden hebben. Hij werkt nu aan een nieuw boek: Websites bouwen met HTML, CSS en JavaScript. Een praktisch doe-boek, met vragen, opdrachten en projecten. En natuurlijk uitleg over HTML-elementen, CSS-eigenschappen en JavaScript-opdrachten. De komende tijd publiceert Computer Creatief artikelen die je een idee geven van wat je van het nieuwe boek kunt verwachten. Bekijk alle boeken van Peter.