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
Leren programmeren met Scratch
e Raspberry Pi is een uitstekende basis om mee (te leren) programmeren, via Scratch bijvoorbeeld. Maar wat is Scratch? Gaan we uitleggen!
WordPress: het essentiële CMS voor website-ontwikkeling
Je hebt vast de naam WordPress wel eens op een website voorbij zien komen, maar: wat is WordPress nou eigenlijk precies?
Laat ChatGPT voor je programmeren
Programmeren is een edele kunst die… bla bla bla. Laat ChatGPT voor je programmeren en iedereen kan z’n ideeën in code om laten zetten!
Tabellen maken in HTML5
Als u ‘t wilt, dan behoort tabellen maken in HTML5 vanzelfsprekend tot de mogelijkheden, beter dan ooit zelfs.
Wat is responsive design?
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?
Wat is CSS?
HTML is tegenwoordig nagenoeg onlosmakelijk verbonden met CSS, maar wat is CSS nou precies en wat kun je ermee?
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.
